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

หากคุณใช้ styled-components หรือ Emotional คุณสามารถใส่เนื้อหาของ 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

โปรดทราบว่าทุกองค์ประกอบที่ใช้ hook นี้อย่างชัดเจนควรแสดงผลบนฝั่งไคลเอ็นต์เท่านั้น ตรวจสอบวิธีที่เราทำสิ่งนี้ในตัวอย่าง

 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 เป็นพื้นที่ที่เราแลกเปลี่ยนความคิดเห็นและช่วยเหลือซึ่งกันและกัน ความคิดเห็นของทุกคนได้รับการชื่นชม และเราหวังว่าจะได้ต้อนรับคุณ