nextjs color mode

Mode warna Next.js

Penolong untuk membuat aplikasi bertema yang tidak berkedip dan dapat diakses

Fitur

• ? Tidak berkedip
• ♿ Dapat diakses (mendukung prefers-color-scheme )
• ? Nilai tema dinamis
• ? Tidak ada ketergantungan tambahan
• ? Agnostik terhadap cara Anda menata aplikasi Anda

Instalasi

 $ npm i --save nextjs-color-mode

# or

$ yarn add nextjs-color-mode

Pengaturan

Pertama, Anda perlu mengimpor ColorModeScript dari nextjs-color-mode dan meletakkannya di suatu tempat di file _app.js .

Jika Anda menggunakan komponen gaya atau emosi, Anda dapat memasukkan konten criticalThemeCss ke GlobalStyles. Pastikan itu adalah css yang penting, dan berada di puncak gaya global Anda.

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

Pengalih tema ( useColorSwitcher )

Untuk mengimplementasikan pengalih tema, Anda harus menggunakan kait useColorSwitcher

Perhatikan bahwa setiap komponen yang secara eksplisit menggunakan kait ini harus dirender hanya di sisi klien. Lihat bagaimana kami melakukan ini dalam contoh

 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 ;
} ; 

Menggunakan variabel dinamis ( useColorModeValue )

Terkadang Anda mungkin ingin menghilangkan sistem desain atau perlu memperbaiki sesuatu dengan cepat. Inilah solusi untuk itu.

 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 ) ;

Jangan gunakan nama yang sama dua kali, ini dapat menyebabkan penggantian variabel dan sulit untuk di-debug. Juga menggunakan hal-hal seperti id unik, UUID, atau kumpulan karakter apa pun yang dibuat secara acak adalah ide yang buruk - ini akan menampilkan peringatan konten yang tidak cocok dan membuatnya semakin sulit untuk di-debug!

Mendukung

Jika Anda mencari bantuan atau sekadar ingin berbagi pemikiran tentang proyek ini, kami mendorong Anda untuk bergabung dengan komunitas Discord kami. Berikut tautannya: https://blazity.com/discord. Ini adalah ruang di mana kita bertukar ide dan membantu satu sama lain. Masukan semua orang dihargai, dan kami menantikan kedatangan Anda.