다크모드 SASS 로 구현해보기
SASS 로 다크모드 만들기? html의 data-theme 속성 사용
Document.documentElement API 설명 (MDN) :root 엘리먼트에 대한 설명(MDN) 1. 초기 document data-theme 속성 세팅Next.js 의 경우에는 루트 파일인 _app.tsx 파일에서 초기 data-theme 을 지정할 수 있습니다.
html의 data-theme 의 속성을 사용할 경우, 별도의 세팅 필요없이 sass 변수를 사용해 구현할 수 있습니다. 2. 컬러값 지정두번째로, 컬러값을 아래와 같이 세팅해주고, themes.scss 파일을 만들어 html data-theme각 테마에 맞는 컬러 이름을 지정해줍니다. css 코드를 정의할 때 selector 안에 설정해서 유효범위를 만들듯이 변수도 그런 위치에 정의합니다. html[data-theme=”light”] 은 문서 트리에 루트 요소의 data-theme 속성이 “light” 일 때를 의미합니다. 따라서, 이 유효범위 내에 정의된 변수는 어디에서도 사용할 수 있는 전역 변수가 됩니다.
3. 컬러값 변수 사용이제 아래와 같이 —color-background 색상 변수를 아무데서나 가져다 사용할 수 있게 되었습니다.
4. 다크모드 전환을 위한 토글 버튼다크모드 전환을 위해서는 토글버튼이 필요합니다. input 에 onChange 이벤트를 걸어, checked 가 true 일 때는 다크모드, false 일 때는 라이트모드를 지정해주려면 아래와 같이 콜백함수를 작성하면 됩니다. 이번에도 마찬가지로 document root 엘리먼트의 data-theme 속성으로 테마를 구분합니다. DarkModeToggle.tsx
다크모드 토글 버튼의 스타일은 아래와 같이 지정해줍니다. 이번에도 마찬가지로 themes.scss 에서 지정해놓은 컬러값 변수를 가져다가 사용하기만 하면 됩니다. 이 때, 컬러값 변수들은 html 즉 문서 트리 루트 요소에 정의 되었으므로 @ use 해서 불러오지 않아도 전역적으로 사용할 수 있게 됩니다. DarkModeToggle.module.scss
이제 메인페이지에서
🚨 사용자가 브라우저를 껐다 켰을 때도 기존의 테마 모드 사용할 수 있게 하는 방법하지만 위의 방식으로 구현할 경우, 사용자가 브라우저를 껐다 켰을 때, 이전에 세팅해놓은 테마 모드가 초기화되는 문제점이 있습니다. 이를
해결하기 위한 방법으로 테마 모드를 localStorage에 저장해놓고, 브라우저에 재접속한경우 해당 모드를 초기값으로 세팅되게끔 하는 방법이 있습니다. localStorage 로 다크모드 유지하는 방법 마무리현재 젠틀에너지 ICT 팀에서는 스타일 라이브러리로 SCSS 를 사용하고 있습니다. 처음에는 다크모드를 구현하기 위해 테마에 관련된 전역 상태를 들고, 이를 변수로 넘겨줘야? 하는 생각에 CSS in JS 라이브러리인 Styled Component 를
사용할까도 고민했었습니다. 참고
|