nextjs color mode

Next.js 색상 모드

깜박이지 않고 접근 가능한 테마 애플리케이션을 만들기 위한 도우미

특징

• ? 깜박임 없음
• ♿ 접근 가능( prefers-color-scheme 지원)
• ? 동적 테마 값
• ? 추가 종속성 없음
• ? 앱 스타일 지정 방식에 무관함

설치

 $ npm i --save nextjs-color-mode

# or

$ yarn add nextjs-color-mode

설정

먼저, nextjs-color-mode 에서 ColorModeScript 가져와서 _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 ) ;

동일한 이름을 두 번 사용하지 마십시오. 변수 재정의가 발생할 수 있으며 디버그하기 어렵습니다. 또한 고유 ID, UUID 또는 무작위로 생성된 문자 집합과 같은 것을 사용하는 것은 좋지 않습니다. 콘텐츠 불일치 경고가 표시되고 디버깅이 더욱 어려워집니다!

지원하다

도움이 필요하거나 프로젝트에 대한 생각을 공유하고 싶다면 Discord 커뮤니티에 가입하는 것이 좋습니다. 링크는 다음과 같습니다: https://blazity.com/discord. 서로 아이디어를 교환하고 도움을 주는 공간입니다. 모든 분들의 의견에 감사드리며, 여러분을 환영할 수 있기를 기대합니다.