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。这是一个我们交流想法、互相帮助的空间。感谢大家的意见，我们期待您的光临。