그외/유용한 정보 2022.04.16. 01:27 [JAVASCRIPT] 웹사이트에 토글로 다크모드를 적용하는 방법과 예제 여러 메이저 웹사이트에서 다크모드를 도입하고 있습니다. 이제 다크모드는 웹 사이트에서 하나의 기본 소양처럼 되버린 느낌입니다. 아래는 유튜브에서 제공하는 다크모드의 모습인데, 유튜브 뿐 아니라 웬만한 메이저 사이트들은 자체적으로 다크모드를 제공하고 있습니다. 다크모드에는 다음과 같은 장점이 있습니다. 쨍한 느낌에 지친 눈의 피로감을 줄여줄 수 있습니다. 사용자가 스마트폰을 사용시, 배터리 사용량을 줄여줍니다. 구현할 다크모드의 원리와 예제 먼저 완성한 모습부터 보여드리겠습니다. 아래에 있는 버튼을 누르면 글씨들의 색깔과 배경이 변하는 것을 볼 수 있습니다. 원리를 요약하면 다음과 같습니다. 다크 모드를 구현하는 데 핵심적인 것은 CSS 변수입니다. 이 CSS 변수를 설명하자면 아래와 같습니다. :root..