Clever Geek Handbook

Tema warna di situs

Apa yang kita lakukan

Sistem yang memungkinkan Anda membuat tema warna berbeda di situs.

Untuk apa

Banyak situs sekarang memiliki tema warna berbeda untuk kemudahan penggunaan dalam kondisi pencahayaan berbeda (biasanya).

Apa yang kita butuhkan

  • Pengetahuan tentang HTML

  • Pengetahuan tentang CSS

  • Pengetahuan tentang JS

Ayo mulai

Mari buat markup untuk situs kita. Semuanya terlalu lembab untuk saat ini, tapi untuk saat ini.

<!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>

Mari buat dan sertakan file CSS dengan kode berikut.

html, body {
    margin: 0;
    padding: 0;
}

.text {
    position: fixed;
    font-size: 100px;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

Selanjutnya, mari buat black.css.

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

Dan mari buat white.css.

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

Dan sekarang lebih detail

Apa itu ": root"? Dan apa sajakah parameter ini?

":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>

Ini adalah seberapa cepat dan mudah Anda dapat membuat situs web dengan dua tema, tetapi Anda dapat melanjutkan dan melakukan lebih banyak pada dua tema. Terima kasih atas perhatiannya.



Proyek di gitHub .



More articles:


All Articles