كيفية التبديل بين الوضع غامق و الفاتح dark and light mode في css

هل تأكدت من أن وضع المتصفح هو تلقائي (حسب النظام) وليس ثابت Dark دائماً، أي لم تقم أيضاً بتثبيت ثيم داكن مخصص. وتأكد من تحديث الصفحة.

• ويجب اغلاق المتصفح وإعادة فتحه ليأخذ بالتعديلات عند تغييرها في نظام التشغيل.

تأكد دائماً أن المتصفح الخاص بك على وضع الإكتشاف التلقائي مثل الصوره المرفقه مع الإجابة حيثُ يوضح تحويل المتصفح لوضع اكتشاف الإضاءه بشكل تلقائي بجانب تحويل اعدادات الجهاز الخاص بك للوضع الليلي بذات الوقت

كما يمكنك تطبيق نفس فكرة الكود و لكن بشكل يدوي عن طريق إضافة كود Java Script و زر للتحكم ليكون الكود كالتالي

كود HTML

<nav>
  <div class="theme-switch-wrapper">
       <label class="theme-switch" for="checkbox">
    <input type="checkbox" id="checkbox" />
    <div class="slider round"></div>
  </label>
    <em>Enable Dark Mode!</em>
  </div>

</nav>  
<section>
    <article class="post">
      <h1>The Principles of Good Design</h1>
      <p class="post-meta">Circa 2014 <span>by</span> Ian Daniel Stewart</p>

      <p>Is <strong>beauty</strong> objectively true? Are there principles you can use to guide you to it in your work? Can designers from both the sciences and the arts look at each others work and find <strong class="sevenhundred">beauty</strong>? These are important questions for all designers.</p>

      <p>For those of us who design things … we need to be able to recognize it. We need good taste to make good things. Instead of treating <strong class="eighthundred">beauty</strong> as an airy abstraction, to be either blathered about or avoided depending on how one feels about airy abstractions, let’s try considering it as a practical question: how do you make good stuff?</p>
 <a href="#">Read More</a>
  </article>
</section>

كود SCSS

@import url(https://fonts.googleapis.com/css?family=Lato:400,400italic,700|Sansita+One);
  
 :root {
    --primary-color: #302AE6;
    --secondary-color: #536390;
    --font-color: #424242;
    --bg-color: #fff;
    --heading-color: #292922;
}

[data-theme="dark"] {
    --primary-color: #9A97F3;
    --secondary-color: #818cab;
    --font-color: #e1e1ff;
    --bg-color: #161625;
    --heading-color: #818cab;
}

body {
  font-family: "Lato", sans-serif;
  background-color: var(--bg-color);
  color: var(--font-color);
  max-width: 90%;
  margin: 0 auto;
  font-size: calc(1rem + 0.25vh);
}

h1 {
    color: var(--heading-color);
    font-family: "Sansita One", serif;
    font-size: 2rem;
    margin-bottom: 1vh;
}

p {
  font-size: 1.1rem;
  line-height: 1.6rem;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  font-weight: bold;
  &:hover, &:focus {
      border-bottom: 3px solid currentColor;
  }
}

section {
  max-width: 68%;
  margin: 0 auto;
}

.post-meta {
  font-size: 1rem;
  font-style: italic;
  display: block;
  margin-bottom: 4vh;
  color: var(--secondary-color);
}

nav {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
}

/*slider switch css */
.theme-switch-wrapper {
  display: flex;
  align-items: center;
  
  em {
    margin-left: 10px;
    font-size: 1rem;
  }
}
.theme-switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
}

.theme-switch input {
  display:none;
}

.slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
}

.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 26px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 26px;
}

input:checked + .slider {
  background-color: #66bb6a;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

كود Java Script

const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');

if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);
  
    if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
    }
}

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark');
    }
    else {        document.documentElement.setAttribute('data-theme', 'light');
          localStorage.setItem('theme', 'light');
    }    
}

toggleSwitch.addEventListener('change', switchTheme, false);