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. إنها مساحة نتبادل فيها الأفكار ونساعد بعضنا البعض. نحن نقدر مساهمة الجميع، ونحن نتطلع إلى الترحيب بكم.