cssでダークモードに対応する

個人開発のサービスをダークモードに対応させた。

@media (prefers-color-scheme: dark) { }

を使うとダークモード時のスタイルを指定できる。

// src/assets/scss/_variables.scss
$dark-background-color: #000000;
$dark-texte-color: #ffffff;


// src/assets/scss/dark.scss
@import "@/assets/scss/_variables.scss";

@media (prefers-color-scheme: dark) {
  body {
    background-color: $dark-background-color;
    color: $dark-text-color;
  }
}