[React] 간지나는 다크모드 실전편

다크모드란?

요즘 장시간 휴대폰 및 인터넷 사용이 많아지면서 사용자들의 눈에 피로도가 상당히 높다.
그래서 어두운 계열의 색을 배경색으로 사용해 장시간 사용해도 눈의 피로도가 현저히 낮은 효과를 가져올 수 있게된다. 그래서 요즘엔 다크모드가 상당히 많이 지원되고 있고, 나는 무조건 다크모드를 사용하기 때문에 이번 프로젝트에서도 적용해보고 싶었다.

깃허브의 다크모드

stlyed-componets 설치

yarn add styled-components

useDarkMode 커스텀 훅 만들기

import { useState, useEffect } from 'react';

export const useDarkMode = () => {
    const [theme, setTheme] = useState('dark');

    const setMode = (mode) => {
        window.localStorage.setItem('theme', mode);
        setTheme(mode);
    };

    const toggleTheme = () => {
        theme === 'dark' ? setMode('light') : setMode('dark');
    };

    useEffect(() => {
        const localTheme = window.localStorage.getItem('theme');
        localTheme ? setTheme(localTheme) : setMode('dark');
    }, []);

    return [theme, toggleTheme];
};

localStorage에 기본 theme을 light로 지정한다.
이후에 toggle이 클릭될 때마다 localStorage의 theme이 바뀌게 된다.

Toggle.jsx 만들기

import React from 'react';
import styled from 'styled-components';

let Sun, Moon;

Sun = Moon = styled.svg`
    margin-top: auto;
    cursor: pointer;
    transition: all 0.5s linear;
`;
const Toggle = ({ theme, toggleTheme }) => {
    console.log(toggleTheme);
    return (
        <div onClick={toggleTheme}>
            {theme === 'light' ? (
                <Moon>
                </Moon>
            ) : (
                <Sun>
                </Sun>
            )}
        </div>
    );
};

export default Toggle;

svg를 활용해서 moon과 sun을 만들었다. onCLick이벤트가 발생할 때마다 lgiht면 햇님이 나오고, dark라면 달님이 나오게 된다.

globalStyles.js 만들기

import { createGlobalStyle } from 'styled-components';

export const lightTheme = {
    body: '#F4F1DE', //배경색
    text: '#484848',
    primary: '#fff',
    input: '#f2f1ee',
    button: '#3D405B',
    graph: '#3D405B',
    resultText: '#ffffff',
    resultHeader: '#3D405B',
    resultBackground: '#3D405B',
    resultExit: '#d8d8d8',
};

export const darkTheme = {
    body: '#121212',
    text: '#d8d8d8',
    primary: '#121212',
    input: '#1f1f1f',
    button: '#E07A5F',
    graph: '#1e1e1e',
    resultText: '#d8d8d8',
    resultHeader: '#1e1e1e',
    resultBackground: '#121212',
    resultExit: '#484848',
    test: 'dark',
};

자신이 활용할 색마다 dark와 light에 맞게 색을 지정해주면 된다.

app.js에 추가하기

function App() {
    const [theme, toggleTheme] = useDarkMode();
    const themeMode = theme === 'light' ? lightTheme : darkTheme;

    return (
        <>
            <ThemeProvider theme={themeMode}>
                    <GlobalStyles />
                    <Toggle theme={theme} toggleTheme={toggleTheme} />
            </ThemeProvider>
        </>
    );
}

loginForm에 적용하기.

이런 식으로 them.<설정한 색>을 넣어주면 된다. theme의 정의에 맞게 컬러가 바뀌게 된다.

적용 후!