Clever Geek Handbook

网站上的色彩主题

我们做什么

一个允许您在站点上创建不同颜色主题的系统。

做什么的

现在，许多站点都有不同的颜色主题，以便于在不同的光照条件下（通常）使用。

我们需要什么

  • HTML知识

  • CSS知识

  • JS知识

开始吧

让我们为我们的网站创建标记。现在一切都太潮湿了，但是现在。

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

让我们使用以下代码创建并包含一个CSS文件。

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

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

接下来，让我们创建black.css。

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

然后创建white.css。

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

现在更详细

什么是“：根”？这些参数是什么？

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

这样可以轻松快捷地创建一个具有两个主题的网站，但是您可以继续在两个主题上做更多的事情。谢谢大家的关注。



在gitHub上项目。



More articles:


All Articles