리액트 : Redux-toolkit 다크모드 (with. Tailwindcss)

728x90

✅구현

(1) 리덕스 툴킷 상태관리

(2) 다크모드 구현시, HTML최상위 요소에 'dark'클래스 추가 (<html>요소에 추가)

document.documentElement.classList.add('dark');

(3) Tailwindcss로 다크모드 적용

(1) 리덕스 툴킷

//redux > module > darkModeSlice.tsx
import { createSlice } from '@reduxjs/toolkit';

const darkModeSlice = createSlice({
    name: 'darkMode',
    initialState: false,
    reducers: {
        toggleDarkMode(state) {
            return (state = !state);
        },
    },
});

export const { toggleDarkMode } = darkModeSlice.actions;
export default darkModeSlice.reducer;

(2) 다크모드 구현시, HTML최상위 요소에 'dark'클래스 추가 (요소에 추가)

//components > DarkMode.tsx
import { useAppDispatch, useAppSelector } from '../redux/hook/useTodos';
import { toggleDarkMode } from '../redux/module/darkMode';
import { MdSunny } from 'react-icons/md';
import { FaMoon } from 'react-icons/fa';
import { useEffect } from 'react';

export default function DarkMode() {
    const isDarkMode = useAppSelector((state) => state.darkMode);
    const dispatch = useAppDispatch();

    useEffect(() => {
        clickToggleDarkMode();
    }, []);

    const clickToggleDarkMode = () => {
        dispatch(toggleDarkMode());
        if (isDarkMode) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
    };

    return (
        <div
            className="inline-flex items-center
             border-2 py-1 px-3 focus:outline-none
            rounded mt-4 
           bg-gray-200
           text-slate-400 
           hover:text-yellow-300
           hover:bg-slate-700
            
           dark:hover:text-orange-400
            "
            onClick={clickToggleDarkMode}
        >
            <button>{isDarkMode ? <FaMoon size={20} /> : <MdSunny size={25} />}</button>
        </div>
    );
}

(3) Tailwindcss로 다크모드 적용

import { Provider } from 'react-redux';
import './App.css';
import InputForm from './components/InputForm';
import TodoContent from './components/TodoContent';
import store from './redux/config/configStore';
import Header from './components/Header';
import DarkMode from './components/DarkMode';

function App() {
    return (
        <Provider store={store}>
            <div className="flex flex-col items-center dark:bg-slate-950 dark:text-white">
                <header className="flex items-center justify-center">
                    <Header />
                </header>
                <main className=" w-[1000px]">
                    <div className="flex flex-row-reverse">
                        <DarkMode />
                    </div>
                    <InputForm />
                    <TodoContent isDoneTodo={false} />
                    <TodoContent isDoneTodo={true} />
                </main>
            </div>
        </Provider>
    );
}

export default App;

> tailwindcss는 class 명에 dark가 있는 경우 "dark:~~"가 지원이 되어서 쉽게 적용할 수 있음

'React' 카테고리의 다른 글

페이지네이션 (0)	2024.08.12
리액트 폴더구조 : 재귀적으로 컴포넌트 구조 (0)	2024.07.28
리액트 : 반응형 사이드 바 (햄버거 메뉴 🍔 ) (0)	2024.01.02
React : 리액트 쿼리 LifeCycle (+ isLoading, isFetching) (0)	2023.12.21
React : React Query + Axios ( 데이터 조회 + 추가 ) (0)	2023.12.17

'React' 카테고리의 다른 글

티스토리툴바