nextjs color mode

Modo de cor Next.js

Um auxiliar para criar aplicativos temáticos acessíveis e sem cintilação

Características

• ? Não cintilante
• ♿ Acessível (suporta prefers-color-scheme )
• ? Valores de tema dinâmico
• ? Sem dependências adicionais
• ? Agnóstico quanto à maneira como você estiliza seu aplicativo

Instalação

 $ npm i --save nextjs-color-mode

# or

$ yarn add nextjs-color-mode

Configurar

Primeiro, você precisa importar ColorModeScript do nextjs-color-mode e colocá-lo em algum lugar do arquivo _app.js .

Se estiver usando componentes estilizados ou emoção, você pode colocar o conteúdo de criticalThemeCss em GlobalStyles. Apenas certifique-se de que seja um CSS crítico e esteja no topo de seus estilos globais.

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

Alternador de tema ( useColorSwitcher )

Para implementar o alternador de tema, você deve usar o gancho useColorSwitcher

Observe que todo componente que usa explicitamente esse gancho deve ser renderizado apenas no lado do cliente. Veja como fazemos isso no exemplo

 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 variáveis ​​dinâmicas ( useColorModeValue )

Às vezes você pode querer omitir o sistema de design ou precisar corrigir algo rapidamente. Aqui está a solução para isso.

 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ão use o mesmo nome duas vezes, pois isso pode causar a substituição de variáveis ​​e é difícil de depurar. Também usar coisas como id exclusivo, UUID ou qualquer conjunto de caracteres gerado aleatoriamente é uma má ideia - exibirá um aviso de conteúdo incompatível e tornará ainda mais difícil a depuração!

Apoiar

Se você está procurando ajuda ou simplesmente deseja compartilhar suas idéias sobre o projeto, encorajamos você a se juntar à nossa comunidade Discord. Aqui está o link: https://blazity.com/discord. É um espaço onde trocamos ideias e ajudamos uns aos outros. A contribuição de todos é apreciada e estamos ansiosos para recebê-lo.