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