초기 표시에서는, OS측으로부터의 다크 모드의 설정을 실시해, 사이트내에서도 다크 모드의 설정을 할 수 있도록 해 본다.

동작

htps: //vcs. 네 tぃfy. 이 m
이 오른쪽 상단의 토글 버튼

OS에서 어두운 모드 설정

OS로부터의 다크 모드의 설정은 CSS로 미디어 쿼리를 사용한다.

:root {
  --base3: #{$base3};
  --base2: #{$base2};
  --base1: #{$base1};
  --base0: #{$base0};
}
@media (prefers-color-scheme: dark) {
  :root {
    --base3: #{$base03};
    --base2: #{$base02};
    --base1: #{$base01};
    --base0: #{$base00};
  }
}

이제 어두운 모드라면 @media의 설정을 읽습니다.

사이트 내에서 어두운 모드 설정

사이트내에서의 설정에서는, 토글 버튼등으로부터 변경을 받았을 때에, HTML 태그에 클래스등을 부여해 전환한다.

:root {
  --base3: #{$base3};
  --base2: #{$base2};
  --base1: #{$base1};
  --base0: #{$base0};
  &[data-theme="dark"] {
    --base3: #{$base03};
    --base2: #{$base02};
    --base1: #{$base01};
    --base0: #{$base00};
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --base3: #{$base03};
    --base2: #{$base02};
    --base1: #{$base01};
    --base0: #{$base00};
    &[data-theme="light"] {
      --base3: #{$base3};
      --base2: #{$base2};
      --base1: #{$base1};
      --base0: #{$base0};
    }
  }
}

데이터 속성이 부여되면 기존 변수를 덮어 씁니다.

<template>
  <div>
    <input type="checkbox" v-model="checked" @change="setScheme"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    };
  },
  created() {
    // ローカルストレージチェック
    if (localStorage.colorThema === "light") {
      this.checked = true;
    } else if (localStorage.colorThema === "dark") {
      document.documentElement.setAttribute("data-theme", "dark");            
    } else if (!window.matchMedia("(prefers-color-scheme: dark)").matches) {
      // darkモードではない時トグルボタンを動かす
      this.checked = true;
    }
  },
  methods: {
    setScheme: function () {
      // ローカルストレージに保存
      localStorage.colorThema = this.checked ? "light" : "dark";
    }
  },
  watch: {
    checked: function(check) {
      // HTMLタグのdata属性に設定
      if (check) {
        document.documentElement.setAttribute("data-theme", "light");
      } else {
        document.documentElement.setAttribute("data-theme", "dark");
      }
    }
  }
};
</script>

checkbox에 맞게 HTML 태그에 data 속성을 추가하거나 로컬 스토리지에 넣습니다.

도전

데이터 속성에 색상 스키마가 설정되어 있으면 OS 설정에서 색상 구성표를 변경해도 표시가 변경되지 않습니다.