Рубрики
Без рубрики

Добавление темного режима на ваш сайт с помощью SCSS

Большинство разработчиков используют и любят это годами. После выпуска iOS 13 он был представлен … Tagged с WebDev, CSS, SCSS, JavaScript.

Большинство разработчиков используют и любят это годами. После выпуска iOS 13 он был представлен людям за пределами пузыря развития. ✨dark Mode✨ Анкет

Долгое время я хотел, чтобы мой собственный веб -сайт имел темный режим. Поэтому я начал собирать свои собственные требования для этой функции.

Он должен работать с моей текущей настройкой использования SCSS и цветами, определенными в нем. Кроме того, сайт должен обнаружить предпочтительный цветовой счем и инициализироваться таким образом. Наконец, вы всегда должны иметь возможность переключить цветовой схему независимо от вашей предпочтительной схемы.

Итак, начнем:

Шаг 1: Создание цветовых схем

В моей настройке цвета уже определены в одном SCSS Файл такой. Все остальные файлы ссылаются на эти цвета по имени.

$onyx: #404040;
$cultured: #f5f5f5;
...

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

// creating a light and a dark theme on html level
html[data-theme="light"] {
  --color-text: #{$onyx};
  --color-background: #{$cultured};
}

html[data-theme="dark"] {
  --color-text: #{$cultured};
  --color-background: #{$onyx};
}

Вы можете увидеть в световой теме, мы используем темный текстовый цвет с легким фоном. И это изменено в темной теме.

Последний шаг для настройки цветовой схемы-ссылаться на переменные CSS, где они необходимы.

color: var(--color-text);
background: var(--color-background);

Теперь нам нужно добавить это Data-Theme Атрибут, используемый в определении схемы для HTML ярлык.

Шаг 2: Добавьте атрибут

Чтобы добавить атрибут, мы можем использовать эту короткую линию JS.

document.documentElement.setAttribute('data-theme', 'dark');

Только с этой строкой мы всегда будем видеть темную тему.

Но мы можем динамически установить атрибут на основе этого флажона.



// switch theme if checkbox is engaged
document.querySelector('input[name=theme_switch]')
    .addEventListener('change', (cb) => {
      document.documentElement.setAttribute(
        'data-theme',
        cb.target.checked ? 'dark' : 'light'
      );

Теперь флажок фактически переключает Data-Theme атрибут. И атрибут переключает переменные CSS.

Шаг 3: Инициализируйте с предпочтительной темой

Последний шаг – инициализировать Data-Theme Во время первой нагрузки с предпочтительной темой. Чтобы узнать, какая тема предпочтительна пользователем, мы можем использовать следующее условие:

window.matchMedia('(prefers-color-scheme: dark)').matches

Это возвращает истинный Если предпочтительная тема темная. Теперь мы добавляем все вместе:

let checkbox = document.querySelector('input[name=theme_switch]');

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.setAttribute('data-theme', 'dark');
  checkbox.checked = true;
} else {
  document.documentElement.setAttribute('data-theme', 'light');
  checkbox.checked = false;
}

// switch theme if checkbox is engaged
checkbox.addEventListener('change', (cb) => {
  document.documentElement.setAttribute(
    'data-theme',
    cb.target.checked ? 'dark' : 'light'
  );
});

Окончательная функция

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

Оригинал: “https://dev.to/wgnrd/adding-a-dark-mode-to-your-website-using-scss-4pdc”

Читайте ещё по теме: