Создать тему на темную / легкую тему с CSS / JS

Эй, ребята, так что вы, должно быть, вы должны увидеть варианты Dark Mode Mode в большинстве веб-сайтов, и если вы не видели ни одного из этого, вы можете взглянуть на веб-сайт своего портфолио https://iamharsh.design/ . Теперь, если вы уже сделали это, то вы имеете право подумать о внедрении его на своих сайтах без многое, давайте грязной рукой с некоторым кодом. Подождите, у меня есть способ сделать то, что вы должны сделать, это просто откройте свой код в любом из ваших любимых текстовых редакторов и следуйте своим шагам.

Во-первых, сначала мы напишем HTML-дерьмо, чтобы добавить кнопку коммутатора темы, чтобы пользователи могли видеть, где щелкнуть, чтобы изменить тему веб-сайта, давайте откроем его HTML-файл и добавить в него следующий код.

Здесь мы добавили значок луны, используя библиотеку Fontawesome, ее бесплатную, вы можете использовать ее, которая действует как тематический коммутатор на ваш выбор, что вы хотите использовать в Iflace of Moon.

Теперь это может выглядеть некрасиво, потому что это только скелет, чтобы сделать его красивым, просто откройте файл CSS и добавить следующий код, это необязательно🖖 (нет, это не так)

:root {
    --font-color: #424242;
    --bg-color: #fff;
}

[data-theme="dark"] {
    --font-color: #fff;
    --bg-color: #161625;
}

/*slider switch css */

  .theme-switch {
    display: inline-block;
    height: 34px;
    top:2rem;
    position: relative;
    width: 60px;
  }

  .theme-switch input {
    display:none;
  }

  .moonboi{font-size: 1rem;transition: .4s;}
  .moonboi::before{transition: .4s;}

Здесь, в приведенном выше дерьме CSS, мы создали два класса переменных цветных переменных предназначены для режима света, и один из них предназначен для темного режима, теперь после добавления этого то, что вам нужно сделать, это добавить имя переменной вместо цветового кода, где это необходимо. Как сказать, если вам нужно добавить цвет в текст, вы можете использовать это, как цвета: var (- font-цвет);

Итак, здесь приходит основная часть реализации тематического коммутатора на основе выбора пользователя, поэтому для достижения его просто добавьте следующие строки в ваш код JavaScript.

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);

После объединения Shitty Code, написанного выше в ваш код, вы можете проверить свой веб-сайт, и вы увидите значок луны, чтобы проверить, просто нажмите на него, и вы увидите, что тема всего сайта будет изменяться с прекрасным переходом.

И если вы ленивый, как я, как я, то вы можете просто добавить две строки дерьма в CSS, чтобы получить Dark Mode

@media (prefers-color-scheme: light) {
    body {
              background:#fff;
          color: #424242;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background: #161625;
                color:#fff;
    }
}

Теперь, если вы используете метод темного режима бедного человека, то добавьте это в CSS и не давайте ни какого-либо цветного или фона имущества цвета любому элементу, в противном случае этот метод не будет работать в противном случае, – это ваш 🤣.

Вернуться к точке

Это в значительной степени это Поэтому я должен уйти сейчас, если у вас есть какие-либо проблемы, добавляя его на свой веб-сайт, вы можете оставить комментарий или если вы хотите поговорить со мной, вы можете в любом случае, вы можете DM Me in Instagram в любое время, когда мне нечего делать:).

Оригинал: “https://dev.to/electronlab/integrate-theme-switcher-into-your-website-3o9d”