Что будем делать
Систему позволяющую создавать разные цветовые темы на сайте.
Зачем
Многие сайты сейчас имеют разные цветовые темы для удобства использования при разном освещение(обычно).
Что нам понадобится
-
Знание 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>Заключение
Вот так легко и быстро можно создать сайт с двумя темами, но ведь на двух темах можно не останавливать и сделать больше. Все спасибо за внимание.
ссылка на оригинал статьи https://habr.com/ru/post/526164/
Добавить комментарий