Theme

下地となる色変数。上書きすることで全体の色をカスタマイズできます。

Table of Contents

Light

ライトテーマ。Tailwind CSS のカラーパレットを採用しています。

:root {
  --theme-tx-1: #030712; /* tailwind grey-950 */
  --theme-tx-2: #374151; /* tailwind grey-700 */
  --theme-tx-3: #9ca3af; /* tailwind grey-400 */
  --theme-bg-1: #ffffff; /* white */
  --theme-bg-2: #f6f7f9; /* tailwind grey-50-x-grey-100 */
  --theme-bg-3: #e5e7eb; /* tailwind grey-200 */
  --theme-bd-1: #eceef1; /* tailwind grey-100-x-grey-200 */
  --theme-bd-2: #dbdee3; /* tailwind grey-200-x-grey-300 */
  --theme-lk: #06b6d4; /* tailwind cyan-500 */
  --theme-lk-tx: #ffffff; /* white */
  --theme-dark: #030712; /* tailwind grey-950 */
  --theme-light: #ffffff; /* white */
  --theme-primary: #06b6d4; /* tailwind cyan-500 */
  --theme-primary-light: #ecfeff; /* tailwind cyan-50 */
  --theme-secondary: #6366f1; /* tailwind indigo-500 */
  --theme-secondary-light: #eef2ff; /* tailwind indigo-50 */
  --theme-info: #0ea5e9; /* tailwind sky-500 */
  --theme-info-light: #f0f9ff; /* tailwind sky-50 */
  --theme-success: #16a34a; /* tailwind green-600 */
  --theme-success-light: #f0fdf4; /* tailwind green-50 */
  --theme-warning: #f59e0b; /* tailwind amber-500 */
  --theme-warning-light: #fffbeb; /* tailwind amber-50 */
  --theme-danger: #dc2626; /* tailwind red-600 */
  --theme-danger-light: #fef2f2; /* tailwind red-50 */
  --theme-shadow: #111827; /* tailwind grey-900 */
  --theme-code: #6366f1; /* tailwind indigo-500 */
  --theme-paint: #0e7490; /* tailwind cyan-700 */
  --theme-paint-tx: #ffffff; /* white */
  --theme-spot: #fde047; /* tailwind yellow-300 */
  --theme-disabled: #e5e7eb; /* tailwind grey-200 */
}

Dark

ダークテーマ。data-theme="dark" を付与することで反映されます。ライトテーマと同様に Tailwind CSS のカラーパレットを採用しています。

デフォルトでダークテーマを適応させる場合は、ライトテーマを読み込まずにスタイルシートの import に musubii/src/bases/theme/dark-default.css を追加します。

メディアクエリ prefers-color-scheme: dark で適応させる場合はスタイルシートの import を musubii/src/bases/theme/dark-media.css に変更します。

[data-theme="dark"] {
  --theme-tx-1: #e5e7eb; /* tailwind grey-200 */
  --theme-tx-2: #d1d5db; /* tailwind grey-300 */
  --theme-tx-3: #6b7280; /* tailwind grey-500 */
  --theme-bg-1: #030712; /* tailwind grey-950 */
  --theme-bg-2: #18212f; /* tailwind grey-800-x-gray-900 */
  --theme-bg-3: #2b3544; /* tailwind grey-700-x-gray-800 */
  --theme-bd-1: #1f2937; /* tailwind gray-800 */
  --theme-bd-2: #374151; /* tailwind grey-700 */
  --theme-lk: #22d3ee; /* tailwind cyan-400 */
  --theme-lk-tx: #030712; /* tailwind grey-950 */
  --theme-dark: #e5e7eb; /* tailwind grey-200 */
  --theme-light: #e5e7eb; /* tailwind grey-200 */
  --theme-primary: #22d3ee; /* tailwind cyan-400 */
  --theme-primary-light: #164e63; /* tailwind cyan-900 */
  --theme-secondary: #818cf8; /* tailwind indigo-400 */
  --theme-secondary-light: #312e81; /* tailwind indigo-900 */
  --theme-info: #38bdf8; /* tailwind sky-400 */
  --theme-info-light: #0c4a6e; /* tailwind sky-900 */
  --theme-success: #4ade80; /* tailwind green-400 */
  --theme-success-light: #14532d; /* tailwind green-900 */
  --theme-warning: #fbbf24; /* tailwind amber-400 */
  --theme-warning-light: #78350f; /* tailwind amber-900 */
  --theme-danger: #f87171; /* tailwind red-400 */
  --theme-danger-light: #7f1d1d; /* tailwind red-900 */
  --theme-shadow: #111827; /* tailwind grey-900 */
  --theme-code: #818cf8; /* tailwind indigo-400 */
  --theme-paint: #083344; /* tailwind cyan-950 */
  --theme-paint-tx: #d1d5db; /* tailwind grey-300 */
  --theme-spot: #ca8a04; /* tailwind yellow-600 */
  --theme-disabled: #1f2937; /* tailwind grey-800 */
}

with JavaScript

data-theme="dark" はローカルストレージの値を確認して付与する方法が一般的です。

ただし、ページのレンダリングよりも先に付与しないと FOUC と呼ばれる CSS の適応遅れによるフラッシュ現象がおきます。そこで以下のようなスクリプトを HTML の body 内に設置してレンダリング前に実行します。

<script>
  function setupTheme() {
    const savedTheme = localStorage.getItem("theme") || "system"
 
    switch (savedTheme) {
      case "light":
        document.documentElement.setAttribute("data-theme", "light")
        break
      case "dark":
        document.documentElement.setAttribute("data-theme", "dark")
        break
      default:
        if (window.matchMedia("(prefers-color-scheme: light)").matches) {
          document.documentElement.setAttribute("data-theme", "light")
        } else {
          document.documentElement.setAttribute("data-theme", "dark")
        }
        break
    }
  }
  setupTheme()
</script>

テーマを切り替えるイベントリスナーの設定はページのレンダリング後で構いません。このドキュメントでは TypeScript で以下のように書き、ビルド後のスクリプトを非同期に読み込んでいます。ボタンによる切り替えと、OS のモードが切り替わった場合の切り替えに対応しています。

function switchAttr(theme: string, lightModeQuery: MediaQueryList) {
  switch (theme) {
    case "light":
      document.documentElement.setAttribute("data-theme", "light")
      break
    case "dark":
      document.documentElement.setAttribute("data-theme", "dark")
      break
    default:
      if (lightModeQuery.matches) {
        document.documentElement.setAttribute("data-theme", "light")
      } else {
        document.documentElement.setAttribute("data-theme", "dark")
      }
      break
  }
}
 
function switchMode(
  lightModeQuery: MediaQueryList,
  darkModeQuery: MediaQueryList
) {
  if (localStorage.getItem("theme") === "system") {
    if (lightModeQuery.matches) {
      document.documentElement.setAttribute("data-theme", "light")
    }
    if (darkModeQuery.matches) {
      document.documentElement.setAttribute("data-theme", "dark")
    }
  }
}
 
function switchActive(els: HTMLButtonElement[], theme: string) {
  els.forEach((el) => {
    if (el.dataset.themeButton === theme) {
      el.classList.add("is-active")
    } else {
      el.classList.remove("is-active")
    }
  })
}
 
export function actionThemeSwitch() {
  const savedTheme = localStorage.getItem("theme") || "system"
 
  const lightModeQuery = window.matchMedia("(prefers-color-scheme: light)")
  const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)")
 
  const buttonEls = [
    ...document.querySelectorAll("[data-theme-button]"),
  ] as HTMLButtonElement[]
 
  switchActive(buttonEls, savedTheme)
 
  buttonEls.forEach((el) => {
    el.addEventListener("click", () => {
      const theme = el.dataset.themeButton
 
      if (theme) {
        switchAttr(theme, lightModeQuery)
        switchActive(buttonEls, theme)
        localStorage.setItem("theme", theme)
      }
      el.blur()
    })
  })
 
  lightModeQuery.addEventListener("change", () =>
    switchMode(lightModeQuery, darkModeQuery)
  )
  darkModeQuery.addEventListener("change", () =>
    switchMode(lightModeQuery, darkModeQuery)
  )
}
 
actionThemeSwitch()

Legacy

レガシーテーマ。読み込むことで v7 以前のカラーリングを再現できます。レガシーテーマはライトテーマの差し替えを目的としておりダークテーマ版はありません。

カラーリングは Demo でチェックボックス migrate をオンにすることで確認できます。

:root {
  --theme-tx-1: #212121;
  --theme-tx-2: #4c4c4c;
  --theme-tx-3: #9ca3af;
  --theme-bg-1: #ffffff;
  --theme-bg-2: #f5f5f5;
  --theme-bg-3: #e5e7eb;
  --theme-bd-1: #e7e1e0;
  --theme-bd-2: #d1d8dc;
  --theme-lk: #37b0be;
  --theme-lk-tx: #ffffff;
  --theme-dark: #000000;
  --theme-light: #ffffff;
  --theme-primary: #37b0be;
  --theme-primary-light: #ebf8f9;
  --theme-secondary: #737eb4;
  --theme-secondary-light: #e9eefe;
  --theme-info: #4b9bd8;
  --theme-info-light: #eaf3fa;
  --theme-success: #2ca52c;
  --theme-success-light: #e7f9e7;
  --theme-warning: #ec9213;
  --theme-warning-light: #fdf0e3;
  --theme-danger: #ec4032;
  --theme-danger-light: #fbeeee;
  --theme-shadow: #000000;
  --theme-code: #5d69a8;
  --theme-paint: #227e89;
  --theme-paint-tx: #ffffff;
  --theme-spot: #f4dd1c;
  --theme-disabled: #bdbdbd;
}

Import

PostCSS で読み込む場合のパスは以下となります。

/* ライトテーマ */
@import "musubii/src/bases/theme/light.css";
 
/* ダークテーマ */
@import "musubii/src/bases/theme/dark-default.css";
 
/* ダークテーマ [data-theme="dark"] */
@import "musubii/src/bases/theme/dark-attr.css";
 
/* ダークテーマ @media (prefers-color-scheme: dark) */
@import "musubii/src/bases/theme/dark-media.css";
 
/* レガシーテーマ */
@import "musubii/src/bases/theme/legacy.css";