React에서 dark모드 적용
dark모드를 적용해보면서 알게된 방법들인데 styled-components를 사용하는법도 있는데 근본적인 scss, css로 처리가 가능한 방법이 있어 이 방법을 사용할까한다.
단순히 테마색만 변경할경우
-
App.js를 최상위위치에서 APP/App.js로 이동시킨다(useState를 사용하기위함)
-
App.js에서 isDark state를 사용하여 최상위 div의 클래스에 "dark"를 추가한다
// App.js
import React, { useState } from "react";
import styled from "styled-components";
import "./app.scss";
function App() {
const [isDark, setIsDark] = useState(false);
return (
<div className={`App ${isDark ? "dark" : ""}`}>
<div>hi</div>
<button
onClick={() => {
setIsDark(!isDark);
}}
>
dark!
</button>
</div>
);
}
export default App;
- app.scss를 만들어 darkColors변수에 다크모드 색상값들을 넣어준뒤
.App.dark일때 map-get을 사용하여 darkColors변수의 value값들을 가져다가 사용한다.
$darkColors: (
main: black,
sub: gray,
font: yellow,
);
.App {
background-color: white;
color: red;
}
.App.dark {
background-color: map-get($darkColors, main);
color: map-get($darkColors, font);
}
css변수를 사용해 전역에서 테마색 사용
아래처럼 선언하면 .dark의 유무에따라 각기 다른 값이 적용되므로
dark모드처럼 같은곳에 class에따라 여러개의 스타일이 적용되어야 한다면 이렇게 사용하는게 좋겠다
// 공통색상선언
$color-light: (
"main": #186eef,
"sub": #71d174,
);
$color-dark: (
"main": #302d47,
"sub": #d5d810,
);
// 모드별 색상
.App {
@each $name, $color in $color-light {
--#{$name}: #{$color};
}
}
.App.dark {
@each $name, $color in $color-dark {
--#{$name}: #{$color};
}
}
// 실제 class에 적용
.App {
background-color: var(--main);
color: var(--sub);
}
.App.dark {
background-color: var(--main);
color: var(--sub);
}
또한 css변수이므로 styled-components사용시에도 문제없이 사용된다. 그래서 컴포넌트마다 디테일하게 색상지정이 가능하다.
Author And Source
이 문제에 관하여(React에서 dark모드 적용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@aptakqmf12/react에서-dark모드-사용저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)