nextjs color mode

Mode couleur Next.js

Une aide pour créer des applications thématiques non scintillantes et accessibles

Caractéristiques

• ? Sans scintillement
• ♿ Accessible (prend en charge prefers-color-scheme )
• ? Valeurs du thème dynamique
• ? Aucune dépendance supplémentaire
• ? Indifférent à la façon dont vous stylisez votre application

Installation

 $ npm i --save nextjs-color-mode

# or

$ yarn add nextjs-color-mode

Installation

Tout d'abord, vous devez importer ColorModeScript depuis nextjs-color-mode et le placer quelque part dans le fichier _app.js .

Si vous utilisez des composants stylisés ou des émotions, vous pouvez placer le contenu de criticalThemeCss dans GlobalStyles. Assurez-vous simplement qu'il s'agit d'un CSS critique et au sommet de vos styles globaux.

 // _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 } />
    </ >
  )
} 

Sélecteur de thème ( useColorSwitcher )

Pour implémenter le sélecteur de thème, vous devez utiliser le hook useColorSwitcher

Notez que chaque composant qui utilise explicitement ce hook doit être rendu uniquement côté client. Découvrez comment nous procédons dans l'exemple

 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 ;
} ; 

Utilisation de variables dynamiques ( useColorModeValue )

Parfois, vous souhaiterez peut-être omettre le système de conception ou devoir corriger quelque chose rapidement. Voici la solution pour cela.

 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 ) ;

N'utilisez pas deux fois le même nom, cela pourrait entraîner le remplacement de variables et serait difficile à déboguer. Utiliser également des éléments tels qu'un identifiant unique, un UUID ou tout autre jeu de caractères généré aléatoirement est une mauvaise idée : cela affichera un avertissement de contenu incompatible et rendra le débogage encore plus difficile !

Soutien

Si vous cherchez de l'aide ou souhaitez simplement partager vos réflexions sur le projet, nous vous encourageons à rejoindre notre communauté Discord. Voici le lien : https://blazity.com/discord. C'est un espace où nous échangeons des idées et nous entraidons. La contribution de chacun est appréciée et nous sommes impatients de vous accueillir.