どのように私はTarwindCSSの暗いモードを構築しました.Nighttwind＆次を使用して10分で(ウェブサイト+ドキュメント)のCOM.js

11106 ワード
tailwindcss css programming javascript テキストリンク
Nighttwindは自動的に任意の風車のウェブサイトの暗いモードを生成するTarwindCSSのプラグインですが、また、完全なカスタマイズオプションを与えている.

Jjranalli / 寝台車


自動、カスタマイズ可能な、オーバーライド可能なテールウインドダークモードプラグイン


今から、私はNighttwindが異なるケースでふるまう方法を調査するために有名なTailwindウェブサイトの暗いモードを作成しています.特に自動ダークモードの有効性

What Nightwind does is essentially invert the color classes used throughout a website (for example, a bg-red-300 turns into bg-red-600). Thanks to the curated Tailwind color palette, this usually results in a good-looking, coherent dark mode.



ジャコポ
ジャジーララニ

今日、私はNighttwindシリーズを始めています!🌘私はNighttwindプラグインを自動的に有名なTailwindのウェブサイトの暗いモードを生成するために使用します.どのような最良の方法を開始するには、ウェブサイト+ドキュメント!感謝します!night-tailwindcss.vercel.app
午後14時07分
私はTarwindCSSを選んだ.私は最初の1つとして、私はそれが最も複雑な与えられていると感じたように、ウェブサイト全体のカラークラスの広範な使用を与えられた.


ホームページのダークバージョンと全体のドキュメントを確認できますhttps://night-tailwindcss.vercel.app (NightWindowトグルをNavbarで押す)

どうやって


次はnighttwindを設定します。次のテーマを使用して


私は、光と暗いモードを管理するためにthemeProviderを使用します.そして、選択されたモードが持続することを確認するためにStorageKeyパラメタを「Nightwind Mode」に設定します.
// _app.js
import { ThemeProvider } from "next-themes"

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider
      attribute="class"
      storageKey="nightwind-mode"
      defaultTheme="system" // default "light"
    >
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default MyApp
で.JS私は単に“Nighttwind”クラスをHTML要素に加えます.そして、それはモードの間でトランジションを管理するためにNighttwindによって使われます.
// _document.js
import Document, { Html, Head, Main, NextScript } from "next/document"

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html className="nightwind">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

2 .トグルを設定する


import { useTheme } from "next-themes"

export default function Toggle() {
  const { theme, setTheme } = useTheme()

  const toggle = () => {
    if (!document.documentElement.classList.contains("dark")) {
      setTheme("dark")
    } else {
      setTheme("light")
    }
  }

  return <button onClick={toggle}>Toggle</button>
}

3 .風を合わせる。設定。js


最後に、私はNighttwindを反転させたいカラークラスと変種を指定します.また、タイポグラフィプラグインで使用されるすべての色を反転させるための“タイポグラフィー:true”オプションを追加します(Tailwindドキュメントで使用されます).
module.exports = {
  darkMode: "class",
  theme: {
     nightwind: {
       typography: true,
       colorClasses: ['gradient', 'ring', 'ring-offset', 'divide', 'placeholder'],
     },
  variants: {
    nightwind: ['group-hover', 'active', 'focus'],
  },
  plugins: [require("nightwind")],
}

Note: There are also some minor modifications that were made to make everything work seamlessly. You can explore the full commit here


Nighttwindについてもっと知りたい場合は、以下をお勧めします.
  • nightwindcss.com demo website
  • My recent post on Nightwind
    • 読書ありがとう!そして、もしあなたが他のTruwindウェブサイトについて何か提案をするならば、私に暗黒モードを作成しなければなりません.
    C言語:関数のポインタ/コールバック関数
    jquery簡単なtab(タブ)実装