Next.JS의 Tailwind 클래스 기반 다크 모드

15067 단어 tailwindcssnextjsreactwebdev

TailwindCss



내가 사용해 본 최고의 유틸리티 기반 CSS 프레임워크 중 하나입니다. 필요한 모든 CSS 속성에 값을 제공하며 우리 스스로 디자인해야 합니다. 구성 요소 구조를 사용하도록 강요하지 않기 때문에 Bootstrap 또는 ChakraUI보다 훨씬 더 훌륭합니다.

Because Tailwind is so low-level, it never encourages you to design the same site twice. Even with the same color palette and sizing scale, it's easy to build the same component with a completely different look in the next project.



Next.Js에 대해 클래스 기반 다크 모드를 활성화하는 방법은 무엇입니까?



다크 모드용 tailwindcss 문서에서는 특정 페이지에 대한 페이지 로드 시 작성할 내용에 대한 기본 스니펫만 제공하지만 프레임워크에 대한 예제나 문서는 제공하지 않습니다.
  • 클래스 기반 다크 모드를 활성화하려면 먼저 darkMode 파일에서 false에서 'class'까지 tailwind.config.js 키 값을 재정의해야 합니다.

    • module.exports = {
darkMode: 'class',
// ...
}


  • 실제 컴포넌트를 DOM에 마운트하기 전에 다크 모드가 적용되었는지 확인하기 위해 _app.js 파일을 편집해야 합니다. 이를 위해 구성 요소를 반환하기 직전에 반응에서 useEffect를 사용합니다.
    • _app.js에서:

    import '../styles/globals.css';
import { useEffect } from 'react';
function MyApp({ Component, pageProps }) {
    useEffect(() => {
        if (
            localStorage.theme === 'dark' ||
            (!('theme' in localStorage) &&
                window.matchMedia('(prefers-color-scheme: dark)').matches)
        ) {
            //check if there is any key for theme in local storage and if the system color theme is dark
            document.documentElement.classList.remove('light'); //OPTIONAL - remove light from the html document if any
            document.documentElement.classList.add('dark'); // add dark to the <html></html> itself as <html class='dark'></html>
        } else {
            document.documentElement.classList.remove('dark'); // remove dark from the html document if any
            document.documentElement.classList.add('light'); //OPTIONAL - add light to the <html></html> itself as <html class='light'></html>
        }
    },[]);
    return <Component {...pageProps} />;
}

export default MyApp;


    이렇게 하면 구성 요소를 마운트하기 전에 html에 클래스가 추가됩니다.




  • 테마 토글 버튼도 필요합니다. 원하는 토글 버튼을 추가하고 어두운 모드와 밝은 모드에 하나씩 두 개의 버튼이 필요하다는 점을 명심해야 합니다
    • .
    ThemeSwitch.jsx에서:

    import { useEffect, useState } from 'react';

const isDark = () => //Function that will return boolean if any of the condition is satisfied
    (localStorage && localStorage.theme === 'dark') || //Condition 1 - has local storage and theme = dark in local storage is found
    (!('theme' in localStorage) &&
        window.matchMedia('(prefers-color-scheme: dark)').matches); //Condition 2 - No theme key in local storage but media color scheme is dark

const getTheme = (isDark) => (isDark ? 'dark' : 'light'); //Function to return 'dark' or 'light' string

const ThemeSwitch = () => { 
    const [darkMode, setDarkMode] = useState(false); //State for holding theme status

    const toggleMode = () => { //onClick handler for changing theme on button press
        localStorage.theme = getTheme(!darkMode); //setting up local storage theme value
        if (localStorage.theme === 'dark') { // If theme is 'dark'
            document.documentElement.classList.remove('light'); // remove 'light' from html class
            document.documentElement.classList.add('dark'); // add 'dark' to html class
        } else { // if not 'dark'
            document.documentElement.classList.remove('dark'); // remove 'dark' from html class
            document.documentElement.classList.add('light'); //add 'light' to html class
        }
        setDarkMode(!darkMode); //set dark mode state to opposite of initial value
    };

    useEffect(() => {
        setDarkMode(isDark()); //before page mount set the value of dark mode by observing theme in local storage
    }, []);

    const darkModeActive =
        process.browser && document.documentElement.classList.contains('dark'); // returns true if its a client and 'dark' is present in html
        // process.browser is deprecated can be written as typeof window === 'undefined'
    return (
        <>
            <button className='w-10 h-10 focus:outline-none' onClick={toggleMode}>
                <span className='sr-only'>Color mode switch button</span>
                {darkModeActive ? ( //switch mode icon according to html class 'dark' or 'light'
                    // Light Icon Svg
                ) : (
                    // Dark Icon Svg
                )}
            </button>
        </>
    );
};
export default ThemeSwitch;


    이제 레이아웃의 탐색 모음에 테마 스위치를 추가하고 모든 페이지에서 테마를 변경할 수 있습니다.

    참고: CSS를 수동으로 제어하려면 클래스 이름에 dark:some-value를 추가하는 것을 잊지 마십시오.
    [phpcms-v9] 사용자 로그인 후 맨 위에 표시: [안녕하세요, xxx 로그인 환영][회원센터][퇴출]
    [Python 백준] 1463 | 1로 만들기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage