react styled-components로 다크모드 구현하기

다크모드/라이트모드 구현
리액트의 라이브러리 styled-components를 사용해서 다크모드/라이트모드를 
구현할 수 있습니다

요약

1. index에 themeprovider로 우산씌우기

import { ThemeProvider } from "styled-components";
const darkTheme = {
textColor: "whitesmoke",
backgroundColor: "#111",
};
const lightTheme = {
textColor: "#111",
backgroundColor: "whitesmoke",
};
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<ThemeProvider theme={lightTheme}>
<App />
</ThemeProvider>
);

 

다크모드 적용할 컴포넌트에 styled-components로 적용해주기

const Wrapper = styled.div`
display: flex;
background-color: ${(props) => props.theme.backgroundColor};
height: 100vh;
width: 100vw;
`;
const Title = styled.h1`
color: ${(props) => props.theme.textColor};
`;
function App() {
return (
<Wrapper>
<Title>hi</Title>
</Wrapper>
);
}

---

설명

1. 테마 설정: Light Mode 및 Dark Mode와 같은 두 가지 테마를 정의합니다.
2. 테마 상태 관리: React 상태나 컨텍스트를 사용하여 현재 테마를 추적하고 토글할 수 있는 방법을 만듭니다.
3. 스타일드 컴포넌트에 테마 프로퍼티 적용: styled-components를 사용하여 컴포넌트의 스타일을 정의하고, 테마의 속성에 따라 스타일을 변경합니다.

다음은 간단한 예제와 함께 React에서 Dark Mode를 구현하는 방법입니다:

1. 테마 설정:

먼저, Light Mode 및 Dark Mode 테마를 설정합니다.

export const lightTheme = {
backgroundColor: '#fff',
textColor: '#333',
};
export const darkTheme = {
backgroundColor: '#333',
textColor: '#fff',
};

 

2. 테마 상태 관리:

React의 useState를 사용하여 현재 테마를 추적하고 토글하는 기능을 추가합니다.

import React, { useState } from 'react';
function App() {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
setTheme(theme === 'light' ? 'dark' : 'light');
};
return (
<div>
<button onClick={toggleTheme}>Toggle Theme</button>
{/* Your themed components go here */}
</div>
);
}

 

3. 스타일드 컴포넌트에 테마 프로퍼티 적용:

이제 styled-components를 사용하여 컴포넌트의 스타일을 정의하고, 현재 테마에 따라 스타일을 변경합니다.

import styled, { ThemeProvider } from 'styled-components';
import { lightTheme, darkTheme } from './themes';
const Wrapper = styled.div`
background-color: ${(props) => props.theme.backgroundColor};
color: ${(props) => props.theme.textColor};
padding: 20px;
`;
function App() {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
setTheme(theme === 'light' ? 'dark' : 'light');
};
return (
<ThemeProvider theme={theme === 'light' ? lightTheme :darkTheme}>
<Wrapper>
<button onClick={toggleTheme}>Toggle Theme</button>
<p>This is a themed component.</p>
</Wrapper>
</ThemeProvider>
);
}