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」とは何ですか？そして、これらのパラメータは何ですか？

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

これは、2つのテーマでWebサイトをすばやく簡単に作成できる方法ですが、2つのテーマでさらに多くのことを行うことができます。ご清聴ありがとうございました。



gitHubのプロジェクト。



More articles:


All Articles