Только HTML и CSS -кнопка Toggle.

Быстрое руководство по строительству атмосфера HTML и CSS Только темный режим переключать.

Используя Just CSS и HTML Мы создадим кнопку, которая:

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

Почему нет JavaScript?

Я строил Веб -сайт с инструментами для игроков настольных игр Анкет Простые вещи, такие как кости и случайные игровые карты.

Одна из моих целей – для каждого инструмента работать без JavaScript Анкет Сайт также имеет темный режим и Светлый режим Анкет (и некоторые другие цветовые схемы тоже).

Мне нужен был способ переключаться темный режим без JavaScript – Пока еще не дефолт посетителю Предпочтительный цветный схема Анкет

Вот мое решение, упрощено для этого урока:

Как это устроено:

Большинство темный режим Кнопки переключения работают, изменив атрибут на тег, а затем нацеливаться на этот атрибут в CSS. Вот так:

Это очень просто, но требует JavaScript добавить и удалить темный режим класс .

К счастью, мы все еще можем внести изменения в наши стили без JavaScript Анкет Мы можем использовать CSS нацеливаться Не-Javascript Пользовательские взаимодействия.

Здесь мы собираемся использовать Флакторы и : проверено псевдо-селектор:

    
    Dark Mode

    

Нам нужно убедиться, что ввод – это первое в нашем Таким образом, мы можем нацелиться на все после этого в нашем CSS Анкет

body {
    background:white
}

#dark-mode:checked ~ * {
    background:black
}

Но есть проблема с этим!

В нет способа CSS к Нацеливаться на родителя элемента Анкет Так что мы не можем изменить цвет

Итак, мы будем использовать работу. Мы поместим

Теперь мы можем использовать флажок вход для стиля нашего

    
    Dark Mode

    

        
    

Это работает! Но есть еще несколько вещей, которые нам нужно исправить:

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

Сначала давайте добавим переменные CSS.

Переменные CSS Позвольте нам определять цвета, которые изменяются на основе флажок . Мы будем использовать только два цвета один для фона и один для текста:

:root {
 --bg:#F4F0EB;
 --text:#141414;
}

#dark-mode:checked ~ .color-scheme-wrapper {
    --bg:#333;
    --text:#fff;
}


.color-scheme-wrapper {
    background:var(--bg);
    color:var(--text);
}

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

Дефолт на предпочтительную цветовую схему наших посетителей.

Теперь давайте сделаем это так, чтобы по умолчанию пользователь предпочтения. Чтобы нацелиться на предпочтения пользователя, мы можем использовать @Media запрос.

На основании результата Предпочитает цветочный схм СМИ запрос мы обмен Наш Светлый режим и темный режим темы.

Так что, если у устройства пользователя есть темный режим включено, это начинается с темноты:

:root {
    --bg:white;
    --text:black;  
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:black;
    --text:white;
    }
}

#color-mode:checked ~ .color-scheme-wrapper {
    --bg:black;
    --text:white;
}

@media (prefers-color-scheme: dark) {
    #color-mode:checked ~ .color-scheme-wrapper {
        --bg:white;
        --text:black;
    }
}


.color-scheme-wrapper {
    min-height:100vh;
    background:var(--bg);
    color:var(--text);
}

Изменение метки на основе предпочтений пользователей.

Теперь, когда мы поменялись темный режим и легкий режим Мы должны убедиться, что этикетка для нашего флажести отражает это.

Было бы сбивает с толку, если бы этикетка сказал темный режим был на Когда экран был Ярко -белый Анкет

Есть быстрое решение для этого. Сначала добавляем два набора текста в нашем один для каждого пользователя предпочтения:

    Dark Mode
    Light Mode

Затем мы скрываем одну из ярлыков в зависимости от режима.

Этот набор медиа -запросов позволяет нам нацелиться на обоих легкий режим , темный режим , и Браузеры, которые не поддерживают Предпочитает цветочный схема :

.light-mode-hide {
    display:none;
}

@media (prefers-color-scheme: dark) {
    .dark-mode-hide {
        display:none;
    }
}

@media (prefers-color-scheme: dark) {
    .light-mode-hide {
        display:initial;
    }
}

Вот и все. Дайте мне знать, что вы думаете!

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

Также – Есть хороший аргумент для использования Вход [type = radio] вместо input [type = fackbox] Анкет Но концепция легче иллюстрирована флажкой.

Ссылки:

Вот ссылка на пример с некоторым дополнительным стилем: Codepen.io

Вот ссылка на пять Цветная версия на: missingdice.com

Оригинал: “https://dev.to/shadowfaxrodeo/an-html-and-css-only-dark-mode-toggle-button-1p3c”