Clever Geek Handbook

Temas de color en el sitio

Qué hacemos

Un sistema que le permite crear diferentes temas de color en el sitio.

Para qué

Muchos sitios ahora tienen diferentes temas de color para facilitar su uso en diferentes condiciones de iluminación (generalmente).

Qué necesitamos

  • Conocimiento de HTML

  • Conocimiento de CSS

  • Conocimiento de JS

Empecemos

Creemos el marcado para nuestro sitio. Todo está demasiado húmedo por ahora, pero por ahora.

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

Creemos e incluyamos un archivo CSS con el siguiente código.

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

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

A continuación, creemos black.css.

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

Y creemos white.css.

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

Y ahora con más detalle

¿Qué es ": root"? ¿Y cuáles son estos parámetros?

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

Así de rápido y fácil puede crear un sitio web con dos temas, pero puede continuar y hacer más en dos temas. Gracias a todos por su atención.



Proyecto en gitHub .



More articles:


All Articles