styled-components를 사용하면서, createGlobalStyle를 사용하게 되었는데, 문득 이를 사용하면 손쉽게 다크 모드를 설정할 수 있지 않을까 하는 생각이 들어서 직접 다크 모드를 구현해 보았다.
🍉 전역으로 상태를 관리하기 위해서 Redux를 사용하였다.
createGlobalStyle로 글로벌 스타일 설정하기
import { createGlobalStyle } from "styled-components";
import "./font.css";
const GlobalStyle = createGlobalStyle`
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
color: black;
background-color: white;
}
`;
export default GlobalStyle;
- createGlobalStyle를 사용하여 글로벌 스타일 컴포넌트를 만들 수 있다.
import './App.css';
import GlobalStyle from "./GlobalStyle";
const queryClient = new QueryClient();
function App() {
return (
<div className="App">
<p>안녕하세요!</p>
<GlobalStyle/>
</div>
);
}
export default App;
- 위와 같이 만든 글로벌 스타일을 사용할 수 있다.
전역 상태를 props로 글로벌 스타일에 조건부 스타일링하기
- GlobalStyle에 props를 주어서 조건부로 글자와 배경의 색상을 결정한다.
- 이를 위해서 redux를 사용하였다 (여기서 redux의 사용법은 생략한다)
import './App.css';
import GlobalStyle from "./GlobalStyle";
import { useSelector } from "react-redux";
const queryClient = new QueryClient();
function App() {
const isDark = useSelector(state => state.darkmode).isDark;
return (
<div className="App">
<p>안녕하세요!</p>
<GlobalStyle isDark={isDark}/>
</div>
);
}
export default App;
- props에 따라서 배경과 글자의 색상이 결정되도록 한다.
import { createGlobalStyle } from "styled-components";
const GlobalStyle = createGlobalStyle`
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
color: ${({isDark}) => isDark ? "white" : "black"};
background-color: ${({isDark}) => isDark ? "black" : "white"};
}
input, textarea {
color: ${({isDark}) => isDark ? "white" : "black"};
background-color: ${({isDark}) => isDark ? "black" : "white"};
}
`;
export default GlobalStyle;
- input이나 textarea 등은 배경과 글자의 색상이 적용되지 않기에 따로 적용한다.
🍍 이제 dispatch를 통해서 isDark의 값을 true/false로 변경할 때 마다, 모든 글자와 배경의 색상이 변경된다.
전역 색상을 만들고, 모드에 따라 색상 변경하기
- 배경이나 글자의 색상 외에도 여러가지 색상이 쓰일 수 있고, 이 색상들이 현재 다크 모드인지 아닌지에 따라서 어울리지 않을 수도 있다.
- 이런 경우에 사용하기 위해서, CSS의 전역 색상을 만들고 현재 테마에 따라서 다른 색상이 될 수 있도록 한다.
import { createGlobalStyle } from "styled-components";
const GlobalStyle = createGlobalStyle`
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
color: ${({isDark}) => isDark ? "white" : "black"};
background-color: ${({isDark}) => isDark ? "black" : "white"};
}
:root {
--my-yellow: ${({isDark}) => isDark ? "yellowgreen" : "yellow"};
}
`;
export default GlobalStyle;
- 위와 같이 GlobalStyle의 :root에 색상을 지정해 놓고, var(변수이름) 으로 해당 색상을 사용할 수 있다.
🍉 ex) color: var(--my-yellow); - 전역 스타일에 다른 값을 덮어씌우고 싶다면, !important를 사용한다.
🍉 ex) color: purple!important;
'React' 카테고리의 다른 글
SuperAgent로 API 호출하기 (0) | 2022.11.10 |
---|---|
React Query를 통한 실시간 서버 통신 (useQuery hook) (0) | 2022.11.08 |
간단한 Recoil 사용법 (0) | 2022.11.06 |
Redux Toolkit (rtk) 사용하기 (0) | 2022.11.04 |
React 18의 createRoot (ReactDOM.render Warning) (0) | 2022.10.27 |