nextjs color mode

Next.js Farbmodus

Ein Helfer zum Erstellen nicht flackernder und zugänglicher Themenanwendungen

Merkmale

• ? Kein Flackern
• ♿ Zugänglich (unterstützt prefers-color-scheme )
• ? Dynamische Themenwerte
• ? Keine zusätzlichen Abhängigkeiten
• ? Unabhängig von der Art und Weise, wie Sie Ihre App gestalten

Installation

 $ npm i --save nextjs-color-mode

# or

$ yarn add nextjs-color-mode

Aufstellen

Zuerst müssen Sie ColorModeScript aus nextjs-color-mode importieren und irgendwo in der Datei _app.js platzieren.

Wenn Sie styled-components oder emotions verwenden, können Sie den Inhalt von criticalThemeCss in GlobalStyles einfügen. Stellen Sie einfach sicher, dass es sich um kritisches CSS handelt und an der Spitze Ihrer globalen Stile steht.

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

Theme-Umschalter ( useColorSwitcher )

Um den Theme-Switcher zu implementieren, sollten Sie den useColorSwitcher -Hook verwenden

Beachten Sie, dass jede Komponente, die diesen Hook explizit verwendet, nur auf der Clientseite gerendert werden sollte. Sehen Sie sich im Beispiel an, wie wir das machen

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

Verwendung dynamischer Variablen ( useColorModeValue )

Manchmal möchten Sie möglicherweise das Designsystem weglassen oder müssen schnell ein Hotfix durchführen. Hier ist die Lösung dafür.

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

Verwenden Sie nicht zweimal denselben Namen, da dies zum Überschreiben von Variablen führen kann und das Debuggen schwierig ist. Auch die Verwendung von Dingen wie einer eindeutigen ID, UUID oder einem zufällig generierten Zeichensatz ist eine schlechte Idee – es wird eine Warnung zu nicht übereinstimmenden Inhalten angezeigt und das Debuggen wird noch schwieriger!

Unterstützung

Wenn Sie Hilfe suchen oder einfach nur Ihre Gedanken zum Projekt mitteilen möchten, empfehlen wir Ihnen, unserer Discord-Community beizutreten. Hier ist der Link: https://blazity.com/discord. Es ist ein Raum, in dem wir Ideen austauschen und uns gegenseitig helfen. Wir freuen uns über jeden Beitrag und freuen uns darauf, Sie begrüßen zu dürfen.