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 .
