nextjs color mode

Next.js カラーモード

ちらつきのない、アクセスしやすいテーマ アプリケーションを作成するためのヘルパー

特徴

• ?ちらつきがない
• ♿ アクセシブル ( prefers-color-schemeをサポート)
• ?動的なテーマの値
• ?追加の依存関係はありません
• ?アプリのスタイルに依存しない

インストール

 $ npm i --save nextjs-color-mode

# or

$ yarn add nextjs-color-mode

設定

まず、 nextjs-color-modeからColorModeScriptインポートし、 _app.jsファイルのどこかに配置する必要があります。

スタイル付きコンポーネントまたは感情を使用している場合は、 criticalThemeCssのコンテンツを GlobalStyles に配置できます。それが重要な CSS であり、グローバル スタイルの先頭にあることを確認してください。

 // _app.js

import Head from 'next/head'
import { ColorModeScript } from 'nextjs-color-mode'

const criticalThemeCss = `
.next-light-theme {
--background: #fff;
--text: #000;
}

.next-dark-theme {
--background: #000;
--text: #fff;
}

body {
  background: var(--background);
  color: var(--text);
}
`

function MyApp ( { Component , pageProps } ) {
  return (
    < >
      < Head >
        < style dangerouslySetInnerHTML = { { __html : criticalThemeCss } } />
      </ Head >
      < ColorModeScript />
      < Component { ... pageProps } />
    </ >
  )
} 

テーマスイッチャー ( useColorSwitcher )

テーマスイッチャーを実装するには、 useColorSwitcherフックを使用する必要があります。

このフックを明示的に使用するすべてのコンポーネントはクライアント側でのみレンダリングされる必要があることに注意してください。例でこれを行う方法を確認してください

 import { ColorModeStyles , useColorModeValue , useColorSwitcher } from 'nextjs-color-mode'

export default function ColorSwitcher ( props ) {
  const { toggleTheme , colorMode } = useColorSwitcher ( )

  return (
    < button onClick = { toggleTheme } >
      Change theme to { colorMode === 'light' ? 'dark' : 'light' }
    </ button >
  )
} 

 function useColorSwitcher ( ) : {
    colorMode : string ;
    changeTheme : ( colorMode : 'light' | 'dark' ) => void ;
    toggleTheme : ( ) => void ;
} ; 

動的変数の使用 ( useColorModeValue )

場合によっては、デザイン システムを省略したり、何かを迅速にホットフィックスする必要がある場合があります。その解決策は次のとおりです。

 export default function SomeComponent ( ) {
  const [ boxBgColor , boxBgCss ] = useColorModeValue ( 'box-color' , 'blue' , 'red' )
  const [ boxBorderColor , boxBorderCss ] = useColorModeValue ( 'box-border-color' , 'red' , 'blue' )
  // the first item of the array returns CSS variable name
  // and the second one returns a special object that then gets parsed into a themable CSS variable

  return (
    < >
      < ColorModeStyles styles = { [ boxBgCss , boxBorderCss ] } />
      < div style = { { width : '24rem' , height : '12rem' , backgroundColor : boxBgColor , border : "10px solid" , borderColor : boxBorderColor } } />
    </ >
  )
} 

 function useColorModeValue ( name : string , lightThemeValue : string , darkThemeValue : string ) ;

同じ名前を 2 回使用しないでください。変数のオーバーライドが発生する可能性があり、デバッグが困難になります。また、一意の ID、UUID、またはランダムに生成された文字セットなどを使用することは悪い考えです。コンテンツの不一致の警告が表示され、デバッグがさらに困難になります。

サポート

助けが必要な場合、または単にプロジェクトについての意見を共有したい場合は、Discord コミュニティに参加することをお勧めします。リンクはこちらです: https://blazity.com/discord。お互いにアイデアを出し合い、助け合う場です。皆様のご意見をお待ちしております。皆様のご意見をお待ちしております。