БлогNot. Темы в CSS3

Темы в 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 работать не будет, а в остальных актуальных браузерах - да, должна.


теги: javascript цвет css

21.06.2019, 23:23; рейтинг: 157