Temas de cores no site

O que nós fazemos

Um sistema que permite criar diferentes temas de cores no site.

Pelo que

Muitos sites agora têm temas de cores diferentes para facilitar o uso em diferentes condições de iluminação (geralmente).

O que nós precisamos

  • Conhecimento de HTML

  • Conhecimento de CSS

  • Conhecimento de JS

Vamos começar

Vamos criar a marcação para nosso site. Tudo está muito úmido por enquanto, mas por enquanto.

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

Vamos criar e incluir um arquivo CSS com o código a seguir.

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 seguir, vamos criar black.css.

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

E vamos criar white.css.

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

E agora com mais detalhes

O que é ": root"? E quais são esses 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>

É assim que você pode criar um site com dois temas de forma rápida e fácil, mas pode prosseguir e fazer mais em dois temas. Obrigado a todos pela atenção.



Projeto no gitHub .




All Articles