운영체제 색상 모드에 따른 CSS 색상 제어 방법

운영체제의 Light 모드 또는 Dark 모드에 따라 자동으로 색상이 결정되도록 CSS에서 색상값을 정하는 방법입니다. 

색상별로 관리가 가능하도록 Light 모드와 Dark 모드를 그룹(모음)으로 관리할 수 있도록 합니다. 

  /* 모드별  그룹 */

@mixin 밝은모음이름 {
  --변수명: 색상값;
}

@mixin 어두운모음이름 {
  --변수명: 색상값;
}

:root {
  @include 밝은모음이름();
}

.color_scheme_dark {
  @include 어두운모음이름();
}

@media (prefers-color-scheme: dark) {
    :root {
       @include 어두운모음이름();
    }

    .color_scheme_light {
       @include 밝은모음이름();
    }
}

body {
  background-color: var(--변수명);
}