nextjs color mode

Цветовой режим Next.js

Помощник для создания немерцающих и доступных тематических приложений.

Функции

• ? Немерцающий
• ♿ Доступен (поддерживает prefers-color-scheme )
• ? Значения динамической темы
• ? Никаких дополнительных зависимостей
• ? Независимость от того, как вы стилизуете свое приложение.

Установка

 $ npm i --save nextjs-color-mode

# or

$ yarn add nextjs-color-mode

Настраивать

Во-первых, вам нужно импортировать ColorModeScript из nextjs-color-mode и поместить его где-нибудь в файле _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 ) ;

Не используйте одно и то же имя дважды, это может привести к переопределению переменной и затруднит отладку. Кроме того, использование таких вещей, как уникальный идентификатор, UUID или любой случайно сгенерированный набор символов, является плохой идеей — это будет отображать предупреждение о несоответствии содержимого и еще больше усложнит отладку!

Поддерживать

Если вам нужна помощь или вы просто хотите поделиться своими мыслями о проекте, мы рекомендуем вам присоединиться к нашему сообществу Discord. Вот ссылка: https://blazity.com/discord. Это пространство, где мы обмениваемся идеями и помогаем друг другу. Мы ценим вклад каждого и с нетерпением ждем возможности приветствовать вас.