Clever Geek Handbook

Thèmes de couleurs sur le site

Qu'est-ce qu'on fait

Un système qui vous permet de créer différents thèmes de couleurs sur le site.

Pourquoi

De nombreux sites ont désormais des thèmes de couleurs différents pour faciliter l'utilisation dans différentes conditions d'éclairage (généralement).

De quoi avons nous besoin

  • Connaissance du HTML

  • Connaissance du CSS

  • Connaissance de JS

Commençons

Créons le balisage pour notre site. Tout est trop humide pour l'instant, mais pour l'instant.

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

Créons et incluons un fichier CSS avec le code suivant.

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

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

Ensuite, créons black.css.

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

Et créons white.css.

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

Et maintenant plus en détail

Qu'est-ce que ": root"? Et quels sont ces paramètres?

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

C'est à quel point vous pouvez créer rapidement et facilement un site Web avec deux thèmes, mais vous pouvez continuer et en faire plus sur deux thèmes. Merci à tous pour votre attention.



Projet sur gitHub .



More articles:


All Articles