オートダーク/ライトテーマCSSを使用してのみ!

4354 ワード
tutorial html webdev css テキストリンク
あなたはもはやテーマのスイッチャボタン、またはいくつかの狂ったJavaScriptをユーザーが望んでいるテーマを決定する必要があります、ユーザーのコンピュータ、またはブラウザではなく、彼らが欲しいテーマを知っている!
FirefoxとChromeのような現代のブラウザーは、暗いモードを支持します.サポートダークモードと一緒に、彼らはまた、テーマが現在使用されているウェブサイトを教えてください.サイトduckduckgo お使いのブラウザのテーマに基づいてこのテーマを自動的に切り替えるには、この情報を使用して、あなたはCSSを使用して、この情報を得ることができます!見ましょう

シンプルなウェブサイト。


私は、2色、背景のための1とテキストのためのもう一方を使う単純なウェブサイトを作るつもりです.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Automatic css theme switcher</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My amazing website!</h1>
    <p>It looks so good right?</p>
  </body>
</html>

CSS


私たちはCSS変数を使用するつもりです.に:root セレクタは、我々の変数を定義し、我々は他の場所でそれを使用することができます.したがって、これらの変数を変更すると、ウェブサイトの色が変わります.私たちは、これらの変数を@media セレクタprefers-color-theme . コードを見せましょう
/* style.css */

@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap");

:root {
  --text: #000;
  --bg: #fff;
}

body {
  font-family: "Source Sans Pro", sans-serif;
  background-color: var(--bg);
  color: var(--text);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #fff;
    --bg: #000;
  }
}
したがって、@media セレクタ、我々はテーマの設定に基づいてテーマを変更している.デモを見せましょう

コードと遊び場


このコードを書きましたCodeSandbox , それで、あなたは簡単にプロジェクトでコードを使うことができます.実際には、ここで使用することができます!
[iOS 9] SFSafariViewControllerお試し
[Node.js教科書]ES 2015+