Dark Mode – это новая жаркость веб-дизайна. Там есть много примеров выключателей, но большинство из них являются просто двумя выключателями – свет/темно. Я хотел реализовать трехсторонний выключатель на сайте, который я проектирую: свет/авто/темно, чтобы люди могли заблокировать его в одном режиме или другой или оставить его автоматически, чтобы он настроен на Предпочитает-цветную схему Отказ
Чтобы реализовать это, я одолжил некоторые идеи от CSS тумблер Использование радиопередач и CSS для создания переключения. Я реализовал его в хвостовой веде со световым/темным режимом, предоставляемыми через переменные CSS. Затем я написал несколько простых ванильных J, чтобы сохранить класс Добавить «Dark»/«Light» в тег тела и хранить состояние в LocalStorage.
Я доволен результатом. Это просто и чисто и в идеале должно быть доступно, поскольку он основан в том же методике, который использует Toggle CSS (я не проверил его для доступности, хотя Так что нет обещаний).
Вот мой кодепен этого!
Обложка Фото Эллиотт Энгельманн
Оригинал: “https://dev.to/colinaut/dark-mode-three-way-switch-40e”