CSS:暗いモードと変数を利用する

15495 ワード
ダークモード テーマ へんすう テキストリンク
ダークモードを利用できる方法を書きます

1.cssの変数を使用


CSS属性はJSの変数として使用できます.

css変数の使用方法

--이름: black;として定義され、var()関数を使用してcolor: var(--이름);のようにアクセスできます.

例)

//index.html

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="./style.css" />
</head>

<body>
  <div id="container">
    테마 변경
    <input  type="checkbox"class="input">모드 변경</input>
  </div>


  <script>
    const input=document.querySelector('.input');

    const container=document.querySelector('#container');
    input.addEventListener('click',(e)=>{
      if(e.target.checked){
        container.setAttribute('theme','dark');
      }else{
        container.setAttribute('theme','light');
      }
    })

  </script>

</body>


</html>

1）JavaScript

 <script>
    const input=document.querySelector('.input');

    const container=document.querySelector('#container');
    input.addEventListener('click',(e)=>{
      if(e.target.checked){
        container.setAttribute('theme','dark');
      }else{
        container.setAttribute('theme','light');
      }
    })

  </script>
これは全米containerのattribute値を変更する方法です.
選択した場合は暗いモードで行い、そうでない場合は明るいモードで行います.

2) css


//style.css

#container[theme="light"] {
  --background: #fff;
  --color: #000;
}

#container[theme="dark"] {
  --background: #000;
  --color: #fff;
}

#container {
  width: 100%;
  height: 600px;
  background-color: var(--background);
  color: var(--color);
}
cssでは、とくせいセレクタを使用して、属性定義(themeと呼ばれる要素)、변수を使用することができる.
次いで、#containerにおいて、色の代わりに対応する変数が使用される.

2. prefers-color-scheme


この方法は,ユーザが自分の好きなトピックを選択する際に,プローブに用いる技術である.
つまり、アプリケーションではなくブラウザの設定を変更する必要があります.
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="./style.css" />
</head>

<body>
  <div id="container">
    사용자의 설정에 따라 모드가 보여집니다.

  </div>
</body>

</html>
#container {
  width: 100%;
  height: 600px;
  background-color: #fff;
  color: #000;
}

@media (prefers-color-scheme: dark) {
  #container {
    width: 100%;
    height: 600px;
    background-color: #000;
    color: #fff;
  }
}
ユーザーがブラウザを暗いモードに設定すると、暗いモードが適用されます.

本人の開発者ツールを見ればわかりますが、ダークモードです.(私の目は貴重…)
したがって、自動的に認識され、暗いモードに選択されます.
ソース:
https://velog.io/@yijaee/%EB%8B%A4%ED%81%AC%EB%AA%A8%EB%93%9C-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0
Activityにメニューを追加
白駿2206破壁機