nextjs color mode

Modo de color Next.js

Una ayuda para crear aplicaciones temáticas accesibles y que no parpadeen

Características

• ? Sin parpadeo
• ♿ Accesible (admite prefers-color-scheme )
• ? Valores del tema dinámico
• ? Sin dependencias adicionales
• ? Agnóstico a la forma en que diseñas tu aplicación

Instalación

 $ npm i --save nextjs-color-mode

# or

$ yarn add nextjs-color-mode

Configuración

Primero, debe importar ColorModeScript desde nextjs-color-mode y colocarlo en algún lugar del archivo _app.js .

Si está utilizando componentes con estilo o emoción, puede colocar el contenido de criticalThemeCss en GlobalStyles. Solo asegúrese de que sea CSS crítico y que esté en la parte superior de sus estilos globales.

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

Cambiador de temas ( useColorSwitcher )

Para implementar el conmutador de temas, debe utilizar el gancho useColorSwitcher

Tenga en cuenta que cada componente que utilice explícitamente este enlace debe representarse solo en el lado del cliente. Mira cómo hacemos esto en el ejemplo.

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

Usando variables dinámicas ( useColorModeValue )

A veces es posible que desee omitir el sistema de diseño o necesite corregir algo rápidamente. Aquí está la solución para eso.

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

No utilice el mismo nombre dos veces, ya que puede provocar la anulación de variables y es difícil de depurar. También es una mala idea usar elementos como una identificación única, UUID o cualquier conjunto de caracteres generado aleatoriamente: mostrará una advertencia de contenido que no coincide y hará que sea aún más difícil depurar.

Apoyo

Si buscas ayuda o simplemente quieres compartir tu opinión sobre el proyecto, te animamos a unirte a nuestra comunidad de Discord. Aquí está el enlace: https://blazity.com/discord. Es un espacio donde intercambiamos ideas y nos ayudamos unos a otros. Se agradecen los aportes de todos y esperamos darle la bienvenida.