あなたのTukwind CSSウェブサイトにダークモードを追加する

23754 ワード
tailwindcss javascript テキストリンク
CSS V 2を巻きます.0導入Dark mode support と最小のJSとインラインSVGを使用すると、手動でダークモードを切り替えることができます.我々は、同じものを構築するために必要なものを通り抜けるつもりですpmekh.com .
セットdarkMode to class 設定で
// tailwind.config.js
module.exports = {
  darkMode: 'class'
};
我々は何をしたいのトグルdark クラス・オン<html> 要素.このクラスがツリー上に表示されると、dark: が適用されます.
ベースのHTMLページから始めましょう.
<html>
  <body class="bg-white dark:bg-black text-black dark:text-white">
    <h1>My Website</h1>
  </body>
</html>
SVGを使ってUIスイッチを追加しましょうHeroicons . 月と太陽のSVGSを使用します.また、IDを添付#toggle-dark and #toggle-light . また、それらを使用して隠していることに気づくでしょうhidden クラス.これは、アプリがどのSVGを表示するかを決定する間、我々は、任意のちらつきを避けるためにしたいと思いますので、(後で、後で).
<html>
  <body class="bg-white dark:bg-black text-black dark:text-white">
    <h1>My Website</h1>
    <!-- Moon SVG from Heroicons -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      class="h-6 w-6 cursor-pointer hidden"
      id="toggle-dark"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
      />
    </svg>
    <!-- Sun SVG from Heroicons -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      class="h-6 w-6 cursor-pointer hidden"
      id="toggle-light"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
      />
    </svg>
  </body>
</html>
ユーザーがブラウザでダークモードを有効にしているかどうかを確認します.有効になってから、正しいSVGをトグルしてdark クラストゥ<html> :
var userPrefersDark = window.matchMedia('(prefers-color-scheme: dark)');
var toggleDark = document.getElementById('toggle-dark');
var toggleLight = document.getElementById('toggle-light');
var htmlElem = document.querySelector('html');

if (userPrefersDark.matches)) {
  htmlElem.classList.add('dark');
  toggleDark.classList.add('visible');
  toggleLight.classList.remove('hidden');
} else {
  toggleLight.classList.add('visible');
  toggleDark.classList.remove('hidden');
}
次のイベントハンドラをSVGに追加してダークモードのオン/オフを切り替えましょう.
toggleLight.addEventListener('click', function () {
  localStorage.setItem('theme', 'light');
  htmlElem.classList.remove('dark');
  toggleDark.classList.add('visible');
  toggleDark.classList.remove('hidden');
  toggleLight.classList.add('hidden');
  toggleLight.classList.remove('visible');
});

toggleDark.addEventListener('click', function () {
  localStorage.setItem('theme', 'dark');
  htmlElem.classList.add('dark');
  toggleLight.classList.add('visible');
  toggleLight.classList.remove('hidden');
  toggleDark.classList.add('hidden');
  toggleDark.classList.remove('visible');
});
我々がしなければならない1つの最後のことは、ユーザーの好みを格納することです-それ以外の場合は、1つのページから別のに移動するときに、これを行うには、設定がリセットされます.私たちはlocalStorage 保管するtheme . 上記のJSブロックをこの最後のJSに置き換えます.
var theme = localStorage.getItem('theme');
var userPrefersDark = window.matchMedia('(prefers-color-scheme: dark)');
var toggleDark = document.getElementById('toggle-dark');
var toggleLight = document.getElementById('toggle-light');
var htmlElem = document.querySelector('html');

if (theme === 'dark' || (!theme && userPrefersDark.matches)) {
  htmlElem.classList.add('dark');
  toggleDark.classList.add('visible');
  toggleLight.classList.remove('hidden');
} else {
  toggleLight.classList.add('visible');
  toggleDark.classList.remove('hidden');
}

toggleLight.addEventListener('click', function () {
  localStorage.setItem('theme', 'light');
  htmlElem.classList.remove('dark');
  toggleDark.classList.add('visible');
  toggleDark.classList.remove('hidden');
  toggleLight.classList.add('hidden');
  toggleLight.classList.remove('visible');
});

toggleDark.addEventListener('click', function () {
  localStorage.setItem('theme', 'dark');
  htmlElem.classList.add('dark');
  toggleLight.classList.add('visible');
  toggleLight.classList.remove('hidden');
  toggleDark.classList.add('hidden');
  toggleDark.classList.remove('visible');
});
あなたはsource code すべてを一緒に置くを参照してください.

タイポグラフィー・タイポグラフィ
あなたが使うならば@tailwindcss/typography , ダークモードの作業を得るためにいくつかの設定を追加する必要があります.
加えるdark:prose-dark クラス.これは次のときにのみ動作しますprose .
<article class="prose dark:prose-dark"></article>
  <h1>Cannot believe adding Dark Mode is this simple!</h1>
</article>
設定を拡張して暗闇を追加するtheme :
// tailwind.config.js
module.exports = {
  darkMode: 'class'
  theme: {
    extend: {
      typography: (theme) => ({
        DEFAULT: {
          css: {
            // ...
          }
        },
        dark: {
          css: {
            color: theme('colors.gray.200')
          }
        }
      })
    }
  },
  variants: {
    typography: ['responsive', 'dark']
  },
  plugins: [require('@tailwindcss/typography')]
};
あなたが以前にTrewind CSS 1のためにテーマを広げたならば.xは、風のCSS 2.0用に必要ですupdate default theme key to DEFAULT .
その後、あなたのスタイルの残りの部分を拡張する必要があります.Use this blog's config as an example .
androidランタイム権限onRequestPermissionsResultが実行しない問題
[プログラマ/PYTHON]小数点を検索