🌿 다크모드와 글로벌 설정, 변수 선언

:root 선택자

:root 선택자는 문서 트리의 최상위 요소를 선택합니다. 일반적으로 HTML 문서에서 최상위 요소는 <html>이지만, :root를 사용하면 더 직관적이고 특정한 의미를 부여할 수 있습니다.

조건에 따라 변수 값 변경

앞서서 CSS 변수를 선언하고 사용하는 법을 배워봤는데요! 😃

다크 모드를 구현하기 위해 data 속성이나 클래스를 사용하여 특정 조건에서 변수 값을 변경할 수 있습니다. 아래 예제에서는 HTML 요소에 집에불켜놨는지라는 속성을 추가하여 조건에 따라 색상 변수를 변경합니다.

[집에불켜놨는지="꺼놨음"] {
  --기본글자색: white;
  --기본배경색: black;
  --기본체크색: white;
  --인풋배경색: gray;
  --인풋플레이스홀더색: orange;
  --버튼글자색: blue;
  --버튼배경색: aqua;
}

📝 실습 코드