Цветовые темы на сайте

Что будем делать

Систему позволяющую создавать разные цветовые темы на сайте.

Зачем

Многие сайты сейчас имеют разные цветовые темы для удобства использования при разном освещение(обычно).

Что нам понадобится

• Знание HTML

• Знание CSS

• Знание JS

Начнем

Создадим разметку нашего сайта. Пока все слишком сыро, но это пока.

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Темы на сайте</title> </head> <body>     <div class="text">         Themes sait     </div> </body> </html>

Создадим и подключим CSS файл со следующим кодом.

html, body {     margin: 0;     padding: 0; }  .text {     position: fixed;     font-size: 100px;     width: 100%;     height: 100%;     justify-content: center;     align-items: center;     display: flex; }

Далее создадим black.css.

:root {     --textColor: white;     --background: black; }

И создадим white.css.

:root {     --textColor: black;     --background: white; }

А теперь подробнее

Что же такое «:root»? И что это за параметры?

«:root» — Это псевдокласс применяемый к корневому элементу на сайте, обычно это <html></html>.

Параметры — Это переменные работающие только в указанном элементе, в нашем случаи это «root». Чтобы назначить переменную перед ее названием надо поставить два тире(«—«). Чтобы считать переменную используйте var(—Название_переменной).

Продолжим

Давайте добавим значения из переменных в наш основной код.

html, body {     margin: 0;     padding: 0;     background: var(--background); }  .text {     color: var(--textColor);     position: fixed;     font-size: 100px;     width: 100%;     height: 100%;     justify-content: center;     align-items: center;     display: flex; }

Если сейчас мы запустим сайт, то ничего не поменяется. Что бы все работало нам надо подключить CSS файлы. Но подключать надо не случайный файл, а один, какой-то определенный, и как же понять, что надо пользователю? Для этого я предлагаю использовать GET параметры(Все параметры переданные в URL после знака вопроса(«https://domain.com?var=1»)). По умолчанию будет «темная тема», а по нужде пользователя — «белая». Что бы использовать «белую тему» понадобится передать параметр «white» с любым значением(«https://domain.com?white=true»).

Создадим JS скрипт и подключим его.

function $_GET(key) {     let p = window.location.search;     p = p.match(new RegExp(key + "=([^&=]+)"));     return p ? Boolean(p[1]) : false; }  function color() {     let head  = document.getElementsByTagName("head")[0];     let link  = document.createElement("link");     link.id   = "css";     link.rel  = "stylesheet";     link.type = "text/css";     link.media = "all";     if($_GET("white")) {         link.href = "./white.css";     } else {         link.href = "./black.css";             }     head.appendChild(link); }

Осталось в конце кода страницы вызвать метод «color».

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Темы на сайте</title>     <link rel="stylesheet" href="style.css">     <script src="index.js"></script> </head> <body>     <div class="text">         Themes sait     </div> </body> <script>color()</script> </html>

Заключение

Вот так легко и быстро можно создать сайт с двумя темами, но ведь на двух темах можно не останавливать и сделать больше. Все спасибо за внимание.

Проект на gitHub.