<link rel="stylesheet" href="styles.css">

<button id="theme-toggle">تبديل الوضع الداكن</button>

<div class="content">
 <p>
  هذا مثال بسيط للوضع الداكن.
 </p>
</div>

<script src="index.js"></script>
            

body {
 background: #f5f5f5;
 color: #222;
 font-family: Arial, sans-serif;
 transition: background 0.3s, color 0.3s;
}

button {
 margin: 1rem;
 padding: 0.5rem 1rem;
 cursor: pointer;
}

body.dark {
 background: #121212;
 color: #e0e0e0;
}
            

document.getElementById('theme-toggle').addEventListener('click', () => {
 document.body.classList.toggle(('dark'));
});
            

<link rel="stylesheet" href="styles.css">

<button id="theme-toggle">تبديل الوضع الداكن</button>

<div class="content">
 <h1>تشبع الألوان في الوضع الداكن</h1>
 <p>
  قارن بين الزرين أدناه؛ يستخدم الأول لوناً مشبعاً، 
بينما يتميز الثاني بلون أقل تشبعاً لضمان سهولة أكبر في الاستخدام عند تفعيل الوضع الداكن.
 </p>

 <div class="buttons">
  <button class="saturated">زر مشبع</button>
  <button class="desaturated">زر باهت اللون</button>
 </div>
</div>

<script src="index.js"></script>
            

body {
 background: #f0f0f0;
 color: #111;
 font-family: Arial, sans-serif;
 transition: background 0.3s, color 0.3s;
 padding: 1rem;
}

button {
 padding: 0.6rem 1.2rem;
 font-size: 1rem;
 border-radius: 5px;
 cursor: pointer;
 margin-left: 1rem;
 transition: background 0.3s, color 0.3s;
}

.buttons button {
 border: none;
}

.saturated {
 background-color: #ff00ff;
 color: white;
}

.desaturated {
 background-color: #c472b5;
 color: white;
}

body.dark {
 background-color: #121212;
 color: #e0e0e0;
}

body.dark .saturated {
 background-color: #ff00ff;
 color: black;
}

body.dark .desaturated {
 background-color: #925f88;
 color: white;
}
            

document.getElementById('theme-toggle').addEventListener('click', () => {
 document.body.classList.toggle(('dark'));
});
            

<link rel="stylesheet" href="styles.css">

<button id="theme-toggle">تبديل الوضع الداكن</button>

<div class="content">
 <h1>مقارنة التباين في الوضع الداكن</h1>
 <p>
    قارن بين القسمين أدناه؛ يستخدم أحدهما اللونين الأسود والأبيض الخالصين، 
    بينما يستخدم الآخر اللونين الرمادي الداكن والفاتح لتحسين القراءة.
 </p>

 <div class="dark-mode-examples">
  <div class="box harsh-dark">
   <h2>تباين عالٍ</h2>
   <p>
    خلفية سوداء تماماً مع نص أبيض. ورغم أن النص مقروء، إلا أن هذا التباين قد يكون مزعجاً للعينين.
   </p>
  </div>

  <div class="box soft-dark">
   <h2>تباين ناعم</h2>
   <p>
    خلفية رمادية داكنة مع نص رمادي فاتح؛ فهي أسهل في القراءة وأكثر راحة عند الاستخدام لفترات طويلة.
   </p>
  </div>
 </div>
</div>

<script src="index.js"></script>
            

body {
 background: #f0f0f0;
 color: #111;
 font-family: Arial, sans-serif;
 padding: 1rem;
 transition: background 0.3s, color 0.3s;
}

button {
 padding: 0.5rem 1rem;
 margin-bottom: 1rem;
 cursor: pointer; 
}

.dark-mode-examples {
 display: flex;
 gap: 2rem;
 flex-wrap: wrap;
}

.box {
 padding: 1rem;
 border-radius: 8px;
 width: 300px;
 transition: background 0.3s, color 0.3s;
}

.box {
 background-color: #ffffff;
 color: #111;
 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

body.dark .box.harsh-dark {
 background-color: #000000;
 color: #ffffff;
}

body.dark .box.soft-dark {
 background-color: #1e1e1e;
 color: #cccccc;
}

body.dark {
 background-color: #121212;
 color: #e0e0e0;
}

            

document.getElementById('theme-toggle').addEventListener('click', () => {
 document.body.classList.toggle(('dark'));
});