Темы в CSS3
Сделать переключение тем оформления сайта по-современному не просто, а очень просто. Вот какие шаги понадобятся.
1. Там, где нужно, ставим свойства CSS через переменную, например:
body {
color: var(--text-color);
}
Здесь основной цвет шрифта документа не задаётся непосредственно кодом RGB, а берётся из значения переменной с именем --text-color
Переменные объявляются с двумя дефисами перед основным именем: --variable-name
2. Далее объявляем в селекторах значения переменных, обычно для этого применяют псевдокласс :root, скажем, вот так:
:root {
--text-color: #223344;
}
:root[theme='dark'] {
--text-color: #eeeeee;
}
Здесь мы предусматриваем "цвет по умолчанию" и альтернативный цвет, которому ставится атрибут theme='dark'
3. Придумываем способ переключения тем, например, обычную кнопку с идентификатором.
<input type="button" value="Сменить тему" id="switch-theme" />
4. В теге яваскрипта программируем действие этой кнопки, в нашем случае, установку значения атрибута документа:
<script>
const switchThemeButton = document.querySelector("#switch-theme");
switchThemeButton.addEventListener ("click", function() {
if (document.documentElement.hasAttribute("theme")) {
document.documentElement.removeAttribute("theme");
}
else {
document.documentElement.setAttribute("theme", "dark");
}
});
</script>
<noscript>Включите Javascript в браузере для работы сайта</noscript>
Как работает всё вместе показано в приложенном файле, где реализована простейшая тема на трёх цветах. Код можно увидеть, открыв исходник прилагаемой страницы, предполагается, что всё будет размещаться в кодировке Юникода UTF-8.
Открыть пример темы CSS3 в текущем окне (вкладке) (2 Кб)
Кстати, при сложных вложениях элементов размеры шрифтов удобнее определять
в rem - новой единице измерения, означающей задание размера относительно размера шрифта элемента корневого элемента <html>.
В этом случае мы не столкнёмся с "неожиданно маленькими" размерами вложенных элементов.
К сожалению, в Internet Explorer 11 (или младше) тема CSS3 работать не будет, а в любых актуальных браузерах - да, должна.
21.06.2019, 23:23 [1462 просмотра]