Clever Geek Handbook

Farbthemen auf der Website

Was machen wir

Ein System, mit dem Sie verschiedene Farbthemen auf der Site erstellen können.

Wozu

Viele Websites haben jetzt unterschiedliche Farbthemen, um die Verwendung unter verschiedenen Lichtbedingungen (normalerweise) zu vereinfachen.

Was brauchen wir

  • HTML-Kenntnisse

  • Kenntnisse in CSS

  • Kenntnisse von JS

Lasst uns beginnen

Lassen Sie uns das Markup für unsere Site erstellen. Im Moment ist alles zu feucht, aber jetzt.

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

Lassen Sie uns eine CSS-Datei mit dem folgenden Code erstellen und einfügen.

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

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

Als nächstes erstellen wir black.css.

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

Und lassen Sie uns white.css erstellen.

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

Und jetzt im Detail

Was ist ": root"? Und was sind diese Parameter?

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

So schnell und einfach können Sie eine Website mit zwei Themen erstellen, aber Sie können zwei Themen weiter bearbeiten. Vielen Dank für Ihre Aufmerksamkeit.



Projekt auf gitHub .



More articles:


All Articles