ダークモード- unmistified!🐱‍👤

免責事項!
これは長いポストになるだろう.私は試してみて、私はあなたのウェブサイト上で適切なダークモードの実装にあるすべてのリソースと情報を同化します.


CSSフィルターハック!

One line - Dark Mode using CSS

Akhil Arjun ・ Aug 3 ・ 2 min read

#beginners #css #webdev #tutorial

私は以前の投稿でこの設定を説明しました.そして、私は繰り返す必要があります、それはハックだけではなく、適切な完璧な暗いテーマの実装です.

JS実施
だから今、私たちはどのようにCSSを使用して素晴らしい暗いモードを作ることを知っている.上記の実装では、JavaScriptのアイデアは非常に簡単です.

const html = document.getElementsByTagName('html')[0];
const toggleTheme = (theme) => {
    html.dataset.theme = theme;
}

そして今あなたがしなければならないすべてはtoggleTheme() UIからのメソッドdark and light 値.

ネイティブダーク/ライトモード?
CSSまたはJSからの光/ダークモードのシステムの優先度を検出することができますか?
絶対我!


生意気な新しいメディアの質問にこんにちは!

<script>
  // If `prefers-color-scheme` is not supported, fall back to light mode.
  // In this case, light.css will be downloaded with `highest` priority.
  if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
    document.documentElement.style.display = 'none';
    document.head.insertAdjacentHTML(
        'beforeend',
        '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">'
    );
  }
</script>
<!--
  Conditionally either load the light or the dark stylesheet. The matching file
  will be downloaded with `highest`, the non-matching file with `lowest`
  priority. If the browser doesn't support `prefers-color-scheme`, the media
  query is unknown and the files are downloaded with `lowest` priority (but
  above I already force `highest` priority for my default light experience).
-->
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="/light.css" media="(prefers-color-scheme: light)">
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css">

上記のコードが何であるかは、それがライトモード/ダークモードに関してユーザーによって設定されたどんな好みのためにでもチェックする.そして、この好みに従って、ブラウザは適切なCSSファイルをダウンロードします.

One thing to note is even though the system preference would be for the dark mode, the browser does download the other CSS as well but with the lowest priority.

今、私たちがJavaScriptでそれをすべてしたいならば、どうですか?

好ましいカラースキームとは

ユーザーが望む場合、アプリケーションのオーバーライドテーマ

利用者によるその決定を覚えてくださいlocalStorage

私は完全にdoable言う!


JavaScriptマジックを入力してください!
自転警告警告😎😁
これは、私たちが議論していることを正確に行うバニラJSを使って構築したライブラリです.そして、あなたのワークロードを
ファイルを含める

<script src="https://cdn.jsdelivr.net/gh/akhilarjun/tinylibs@latest/themejs/theme.min.js" onload="setupThemeIcon()"></script>

とIDを持つイメージtheme-selector とonClick関数switchTheme(this)

<img src="./sun.svg" 
    data-light-src="./sun.svg" 
    data-dark-src="./moon.svg"
    alt="light theme" 
    id="theme-selector"
    onclick="switchTheme(this)">

data-light-src and data-dark-src 指定された場合、アイコンの間のスワップに使用されますHtml タグ.

マイク・ドロップ🎤
ライブラリは自動的にシステムの好みの変更を検出し、暗いと光の間のテーマを切り替えます.
そして、私たちはクロムdevツールを使ってこれをしようとします.

それは今日の人々のためです.乾杯!コーヒータイム.
私の時代は、コーヒーと棺だけで燃えています.だから私は知っている🤞



参考文献

web.dev - prefers-color-scheme

Why Browsers download stylesheets with non-matching media queries

All my gifs