Регистрация

[CSS, JavaScript, HTML] Цветовые темы на сайте

Ответить на тему
Автор Сообщение
news_bot ®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

Создавать темы news_bot ® написал(а)
02-Ноя-2020 22:31
Цитировать

Что будем делатьСистему позволяющую создавать разные цветовые темы на сайте.ЗачемМногие сайты сейчас имеют разные цветовые темы для удобства использования при разном освещение(обычно).Что нам понадобится
  • Знание 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.
===========
 Источник:
habr.com
===========
Похожие новости: Теги для поиска: #_css, #_javascript, #_html, #_temy (темы), #_temy_sajta (темы сайта), #_tsvetovye_temy_sajta (цветовые темы сайта), #_temnaja_i_svetlaja_tema (темная и светлая тема), #_temnaja_i_svetlaja_tema_sajta (темная и светлая тема сайта), #_css, #_javascript, #_html
Профиль  ЛС 
Показать сообщения:     
Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 22-Ноя 23:39
Часовой пояс: UTC + 5