배경

prefers-color-scheme 라는 Media Query 를 주요 브라우저가 서포트했기 때문에 , Web에서도 다크 모드에 대응이 쉬워졌습니다. CSS 파일에 「유저가 다크 모드로 하고 있으면 이 CSS, 라이트 모드로 하고 있으면 이 CSS를 적응」이라고 하는 것처럼 간단하게 지정할 수 있게 됩니다.

@media (prefers-color-scheme: light) {
  // ライトモードのときのCSS
}
@media (prefers-color-scheme: dark) {
  // ダークモードのときのCSS
}

자세한 내용은 CSS만으로 웹 페이지를 다크 모드 대응. 마침내 Chrome에도 대응한 prefers-color-scheme이 매우 편리 | 히라타 / U-NEXT | note 당 기사에서도 읽어주세요. 그래서, 이 다크 모드입니다만, 이상을 말하면 제대로 변수 사용해 관리하고 싶네요.

예를 들어

$COLOR_THEME; // ブランドカラー、テーマカラー、アクセントカラーとして使う色
$COLOR_BASE; // 主に背景色として使う色
$COLOR_THEME; // 主に文字色や罫線に使う色

같은 변수를 준비하고,

@media (prefers-color-scheme: light) {
  $COLOR_THEME: red;
  $COLOR_BASE: white;
  $COLOR_MAIN: black;
}
@media (prefers-color-scheme: dark) {
  $COLOR_THEME: #cc0000;
  $COLOR_BASE: black;
  $COLOR_MAIN: white;
}

body{
  background: $COLOR_BASE;
  color: $COLOR_MAIN;
}
h1{
  color: $COLOR_THEME;
}

같게 써 두고, 다크 모드인지 라이트 모드인지로 변수의 내용이 바뀌면 멋지지 않습니까? 하지만 이 사양은 작동하지 않습니다. 아시다시피 SCSS는 사전에 CSS로 변환하여 사용하는 언어이므로 이것을 CSS로 변환하면 SCSS의 변수 기능은 없었기 때문에 오류가 발생합니다.

CSS 변수 사용하면 좋지 않아?

CSS 공식에서도 CSS 변수라는 것을 사용할 수 있습니다. IE 이외의 경우, 원시 CSS 그대로 변수를 정의하고 사용할 수 있으므로 이것을 사용하면 다크 모드 라이트 모드에 따라 변수를 덮어 쓸 수 있습니다.

CSS 사용자 지정 속성(변수) 사용 - CSS: 캐스케이딩 스타일시트 | MDN

하지만 이것은 다음과 같은 이유로 가능한 한 그대로 사용하고 싶지 않습니다.

이유 1: 긴

$COLOR_THEME: red; // SCSS変数定義
p{ color: $COLOR_THEME } // SCSS変数使用

:root{ --color-theme: red } // CSS変数定義
p{ color: var(--color-theme) } // CSS変数使用

이유 2: rgba() 지정할 수 없음

p{ color: rgba($COLOR_THEME,.5) } // OK
p{ color: rgba(var(--color-theme),.5) } // エラー

SCSS 변수로 관리하는 방법

상기를 해결하는, 가장 낫다고 생각되는 설계를 생각해 본 것이 이하입니다. IE에는 대응하고 있지 않으므로 미안해.

STEP1 CSS 변수를 준비해, 라이트 모드시·다크 모드시의 색을 각각 지정한다

:root{
  @media (prefers-color-scheme: light) {
    --color-theme: red;
    --color-base: white;
    --color-main: black;
  }
  @media (prefers-color-scheme: dark) {
    --color-theme: #cc0000;
    --color-base: black;
    --color-main: white;
  }
}

STEP1 같은 이름의 SCSS 변수를 준비하여 이전 CSS 변수를 지정합니다.

$COLOR_THEME: var(--color-theme);
$COLOR_BASE: var(--color-base);
$COLOR_MAIN: var(--color-main);

STEP3 SCSS 변수를 원하는 곳에서 사용할 수 있습니다.

body{
  background: $COLOR_BASE;
  color: $COLOR_MAIN;
}
h1{
  color: $COLOR_THEME;
}

축하합니다. 이제 무사히 사용자의 컬러 모드에 따라 웹 페이지의 디자인이 변경됩니다. 그러나, 이대로라면 rgba($COLOR_THEME,.5) 는 rgba(var(--color-theme),.5) 로 변환되므로, 에러가 되어 버립니다.

rgba()에도 대응한다면

번거롭지만, 지정하고 싶은 색의 RGB 각각을 한 번 변수화하지 않으면 안 된다고 합니다. 다음과 같이 지정하는 것이 좋다고 생각합니다.

STEP1 준비한 색의 RGB치를 각각 따로 지정한다

:root{
  @media (prefers-color-scheme: light) {
    --color-theme: red;
    --color-theme-r: 255;
    --color-theme-g: 0;
    --color-theme-b: 0;

    --color-base: white;
    --color-base-r: 255;
    --color-base-g: 255;
    --color-base-b: 255;

    --color-main: black;
    --color-main-r: 0;
    --color-main-g: 0;
    --color-main-b: 0;

  }
  @media (prefers-color-scheme: dark) {
    --color-theme: #cc0000;
    --color-theme-r: 204;
    --color-theme-g: 0;
    --color-theme-b: 0;

    --color-base: black;
    --color-base-r: 0;
    --color-base-g: 0;
    --color-base-b: 0;

    --color-main: white;
    --color-main-r: 255;
    --color-main-g: 255;
    --color-main-b: 255;
  }
}

STEP2 RGB 전개용의 SCSS 변수를 별도로 준비한다.

$COLOR_THEME: var(--color-theme);
$COLOR_BASE: var(--color-base);
$COLOR_MAIN: var(--color-main);

$COLOR_RGB_THEME: var(--color-theme-r),var(--color-theme-g),var(--color-theme-b);
$COLOR_RGB_BASE: var(--color-base-r),var(--color-base-g),var(--color-base-b);
$COLOR_RGB_MAIN: var(--color-main-r),var(--color-main-g),var(--color-main-b);

STEP3 rgba() 를 사용할 때는 RGB 전개용의 SCSS 변수를 보관 태그 첨부로 사용한다.

p{
  color: rgba(#{$COLOR_RGB_THEME},.5);
}

이상입니다. 다크 모드 대응한다면, 현상 이것이 가장 좋은 색의 관리 방법이 아닐까요. mixin이라든지 사용하는 것도 있을지도 모릅니다. 더 멋진 방법이 있으면 꼭 말해주세요.