cssがどのように“明るい-暗い”の色のモードを調節することについて論じます

35314 ワード
先端 css
スクリプトがあります.

方法1

.dark{}を作って、bodyの上に置いて(あるいは個別のラベルを加えてどうせページ全体の他のものを全部入れます)、すべてのスタイルは明るくて暗くて、暗い色は後代のセレクタに書きます.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        *{
      
            background-color: #f8f8f8;
            color: #181818;
        }
        html,body{
      
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        .title {
      
            font-size: 30pt;
            font-weight: 600;
            padding: 10pt 0;
            text-align: center;
        }

        .subtitle {
      
            text-align: center;
            font-size: 14pt;
        }

        p {
      
            font-size: 20pt;
            line-height: 24pt;
        }

        p::before {
      
            content: "";
            width: 2em;
            display: inline-block;
        }
        .dark {
      
            background-color: #222;
            color: #d0d0d0;
        }
        .dark .title{
      
            background-color: inherit;
            color: #fff;
        }
        .dark .subtitle{
      
            background-color: inherit;
            color: #c0c0c0;
        }
        .dark p{
      
            background-color: inherit;
            color: inherit;
        }
    style>
head>

<body>
    <div class="title">
           
    div>
    <div class="subtitle">  div>
    <p>
           ，    ！    ，     ！     ，     ！       ，       。       ，       。       ，         。         ，         。        ，       。     ，       。       ，       。
    p>
    <p> 
               ？       。       ，       。       ，   。    ，     ，       ！       ，       。       ，       。     ，           ！
    p>
    <p> 
               ，    ，    。     ，     。    ，    ；    ，    。     ，     。    ，     ，       ！
    p>
    <button onclick="change()">      button>
body>

html>
<script>
    function change() {
      
        var body = document.body;
        if (body.getAttribute('class'))
            body.setAttribute('class', '');
        else
            body.setAttribute('class', 'dark');
    }
script>

方法2


もちろん、2つの.light{}.dark{}だけを書いて、他の全継承を書くこともできます.しかし、あまり柔軟ではありません.要素のスタイルが花なら、この方法を使うべきではありません.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        * {
      
            color: inherit;
            background-color: inherit;
        }

        html,
        body {
      
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        .title {
      
            font-size: 30pt;
            font-weight: 600;
            padding: 10pt 0;
            text-align: center;
        }

        .subtitle {
      
            text-align: center;
            font-size: 14pt;
        }

        p {
      
            font-size: 20pt;
            line-height: 24pt;
        }

        p::before {
      
            content: "";
            width: 2em;
            display: inline-block;
        }

        .light {
      
            background-color: #f8f8f8;
            color: #181818;
        }

        .dark {
      
            background-color: #222;
            color: #d0d0d0;
        }
    style>
head>

<body class="light">
    <div class="title">
           
    div>
    <div class="subtitle">  div>
    <p>
           ，    ！    ，     ！     ，     ！       ，       。       ，       。       ，         。         ，         。        ，       。     ，       。       ，       。
    p>
    <p>
               ？       。       ，       。       ，   。    ，     ，       ！       ，       。       ，       。     ，           ！
    p>
    <p>
               ，    ，    。     ，     。    ，    ；    ，    。     ，     。    ，     ，       ！
    p>
    <button onclick="change()">      button>
body>

html>
<script>
    function change() {
      
        var body = document.getElementsByTagName('body')[0];
        if (body.getAttribute('class') == 'light')
            body.setAttribute('class', 'dark');
        else
            body.setAttribute('class', 'light');
    }
script>

方法3


スタイルシートのパスを直接変更します.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link id="color" href="css/light.css" rel="stylesheet" type="text/css">
    <link href="css/app.css" rel="stylesheet" type="text/css">
head>

<body class="light">
    <div class="title">
           
    div>
    <div class="subtitle">  div>
    <p>
           ，    ！    ，    ！！     ，     ！       ，       。       ，       。       ，         。         ，         。        ，       。     ，       。       ，       。
    p>
    <p>
               ？       。       ，       。       ，   。    ，     ，       ！       ，       。       ，       。     ，           ！
    p>
    <p>
               ，    ，    。     ，     。    ，    ；    ，    。     ，     。    ，     ，       ！
    p>
    <button onclick="change()">      button>
body>

html>
<script>
    function change() {
      
        var body = document.getElementById('color');
        if (body.getAttribute('href') == 'css/light.css')
            body.setAttribute('href', 'css/dark.css');
        else
            body.setAttribute('href', 'css/light.css');
    }
script>

また、デバイスの色モードを自動的に適合させる場合は、応答式@media(prefers-color-scheme:......)を使用します。

delphi呼び出しC#DLLプログラムセット
asp.Netでサムネイルを生成し、著作権インスタンスコードを追加