02.11.2020 16:14
Ilya-cmd 8 2100 Источник

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

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

Зачем

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

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

  • Знание 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.