ダークモード

CSS JavaScript Sass

2026/04/19

2026/04/13

CSS

@media (prefers-color-scheme: dark) {
  /* ダークモード時に適用するCSS */
}

@media (prefers-color-scheme: dark) {
  /* ダークモード時に適用するCSS */
}

SCSS

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

.example {
  color: #000;

  @include dark {
    color: #fff;
  }
}

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

.example {
  color: #000;

  @include dark {
    color: #fff;
  }
}

JavaScript

const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");

function applyTheme() {
  if (darkQuery.matches) {
    document.body.classList.add("dark");
  } else {
    document.body.classList.remove("dark");
  }
}

applyTheme();
darkQuery.addEventListener("change", applyTheme);

const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");

function applyTheme() {
  if (darkQuery.matches) {
    document.body.classList.add("dark");
  } else {
    document.body.classList.remove("dark");
  }
}

applyTheme();
darkQuery.addEventListener("change", applyTheme);

#ダークモード