[ React ] React Dark Mode

React 다크모드에 관한 내용입니다.

 

npm

typescript로 진행했기 때문에 @types까지 추가시켜줍니다.

$ npm install styled-components @types/styled-components

 

./item/theme.ts

테마 파일입니다. lightTheme와 darkTheme를 정의했습니다.

import styled from 'styled-components';

export const lightTheme = {
    background: '#FFFFFF',
    text: '#000000',
};
  
export const darkTheme = {
    background: '#333333',
    text: '#FFFFFF',
};

export const Container = styled.div`
  background: ${(props) => props.theme.background};
  color: ${(props) => props.theme.text};
`;

 

./ThemeProvider.tsx

타입스크립트 구성요소를 만들어 테마를 제공합니다.

import React, { ReactNode } from "react";
import { ThemeProvider as StyledThemeProvider } from "styled-components";
import { darkTheme, lightTheme } from "./item/theme";

interface ThemeProviderProps {
    children: ReactNode,
    isDarkMode: boolean
};

export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children, isDarkMode }) => {

    const theme = isDarkMode ? darkTheme : lightTheme;

    return (
        <StyledThemeProvider theme={theme}>
            {children}
        </StyledThemeProvider>
    );
};

 

./item/ModeToggle.tsx

다크 모드 버튼에 대한 구성요소 입니다.

import React from "react";

interface ModeToggleProps {
    isDarkMode: boolean,
    onToggle: () => void
}

const ModeToggle: React.FC<ModeToggleProps> = ({ isDarkMode, onToggle }) => {
    return (
        <button onClick={onToggle}>
            {isDarkMode ? 'Light' : 'Dark'}
        </button>
    );
}

export default ModeToggle;

 

./App.tsx

App.tsx에서 애플리케이션을 랩핑하고 다크 모드 상태를 관리합니다.

import React, { useState } from 'react';

import Main from './view/Main';
import { ThemeProvider } from './ThemeProvider';
import ModeToggle from './item/ModeToggle';
import { Container } from './item/theme';
import "./style/style.css";


function App() {

  const [isDarkMode, setIsDarkMode] = useState(false);

  const toggleDarkMode = () => {
    setIsDarkMode(!isDarkMode);
  };

  return (
    <ThemeProvider isDarkMode={isDarkMode}>
      <Container>
        <div>
          <h1>DARK MODE</h1>
          <ModeToggle isDarkMode={isDarkMode} onToggle={toggleDarkMode} />
          <p>asd</p>
        </div>
      </Container>
    </ThemeProvider>
  );
}

export default App;