تنفيذ الوضع الداكن للموقع

Home PDF Audio English 中文 日本語 Español हिंदी Français Deutsch العربية 繁體中文

---

تنفيذ الوضع الداكن في مدونتي Jekyll.

تبديل

<script>
  const rootElement = document.documentElement;
  const themeToggleBtn = document.getElementById('themeToggle');
  const sunIcon = document.getElementById('sunIcon');
  const moonIcon = document.getElementById('moonIcon');
  const avatarImg = document.getElementById('avatarImg'); // مرجع إلى العنصر <img>

const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
  rootElement.classList.add('dark-mode');
}

function updateIconsAndAvatar() {
    const isDark = rootElement.classList.contains('dark-mode');
    sunIcon.style.display = isDark ? 'inline-block' : 'none';
    moonIcon.style.display = isDark ? 'none' : 'inline-block';
    avatarImg.src = isDark
      ? '/assets/images/avatar_dark.png'
      : '/assets/images/avatar.jpg';
}

updateIconsAndAvatar();

  themeToggleBtn.addEventListener('click', function () {
    rootElement.classList.toggle('dark-mode');
    if (rootElement.classList.contains('dark-mode')) {
      localStorage.setItem('theme', 'dark');
    } else {
      localStorage.setItem('theme', 'light');
    }
    updateIconsAndAvatar();
  });
</script>

CSS

.dark-mode {
  // تجاوز لون الخلفية الرئيسي
  body {
    background-color: $dark-main-bg-color;
    color: white;
  }

.main-content {
    background-color: $dark-main-bg-color;
}

h6,
blockquote {
  color: $dark-section-headings-color;
}

    a {
      color: white !important;
    }
  }

.page-header {
    // إذا كنت بحاجة إلى خلفية أغمق
    background-image: linear-gradient(120deg, $dark-main-bg-color, #222);
    background-color: #2f2f2f !important;
    // أو اختر لونًا داكنًا مختلفًا، مثل #1f1f1f، #3a3a3a، إلخ.
}

  // لون خلفية كتلة الكود (كان #e0d9cf)
  pre {
    background-color: #3a3a3a !important;
    // أو #2f2f2f، إلخ.
  }

  // تجاوز لون التاريخ (كان رمادي داكن)
  .date {
    color: #aaa !important;
    // أو #ccc، #bbb، إلخ.
  }

.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5,
.main-content h6 {
  color: $dark-section-link-color;
}

  // إلخ. - قم بتجاوزها حسب الحاجة
}

بناء جملة Markdown

@import "syntax";
@import "syntax-dark";

.dark-mode {
  .highlight {
    table {
      td {
        padding: 5px;
      }

pre {
  margin: 0;
}

    color: $color_1;
    background-color: $background-color_1;

.w {
  color: $color_1;
  background-color: $background-color_1;
}
}
}

صورة Markdown

.magnet-image {
  width: 300px;
  /* العرض الكامل على الشاشات الصغيرة */
  min-height: 300px;
  /* تعديل حسب الحاجة */
  background-image: url('/assets/images/magnet/magnet.jpg');
  background-size: cover;
}

.dark-mode .magnet-image {
  background-image: url('/assets/images/magnet/magnet_dark.jpg');
}

<picture>
  <source srcset="/assets/images/magnet/magnet_dark.jpg" media="(prefers-color-scheme: dark)">
  <img src="/assets/images/magnet/magnet.jpg" alt="صورة المغناطيس">
</picture>

---

Back 2025.01.18 Donate