カラーモード（Color Mode）
light、dark、systemのうち、現在有効な配色です。テーマのcolorModeオプションと<html>のdata-theme属性で制御し、JavaScriptによる実行時の切り替えもできます。
モード
light— ライトパレットdark— ダークパレットsystem— OSの設定に従う（prefers-color-schemeメディアクエリ）
サーバーはlightまたはdarkのとき<html>にdata-themeを出力し、systemのときは属性を出力しません。
<html data-theme-name="example" data-theme="dark">
---
<html data-theme-name="example">実行時にdocument.documentElement.dataset.theme = "dark"を設定するとダークを強制でき、属性を削除するとsystemに戻ります。
実行時の切り替え
document.documentElement.dataset.themeに"light"または"dark"を設定してモードを切り替えます。
systemにするときはdata-theme属性を削除し、OSのメディアクエリに任せます。
document.documentElement.dataset.theme = "dark";
delete document.documentElement.dataset.theme;data-theme=""は設定しないでください。空の属性は[data-theme]に一致し、systemのメディアクエリを壊します。
テーマ設定
テーマ設定のcolorModeオプション（packages/core/src/types/theme_config.ts）は、light、dark、systemのいずれかに解決されます。このオプションは通常、Viteの設定またはテーマファイルで設定します。
// vite.config.ts
import { defineConfig } from 'vite'
import { reiebeckite } from '@riebeckite/honox'
export default defineConfig({
plugins: [
reiebeckite({
colorMode: 'dark', // or 'light' or 'system'
}),
],
})解決された値が<html>のdata-theme属性と、対応する--rb-*のCSS変数の上書きを決めます。
data-themeとdata-theme-nameによるCSSの適用
<html>要素は、解決されたモードに基づいてdata-themeとdata-theme-name属性を受け取ります。
<!-- light mode -->
<html data-theme-name="riebeckite" data-theme="light">
<!-- dark mode -->
<html data-theme-name="riebeckite" data-theme="dark">
<!-- system mode (no data-theme attribute) -->
<html data-theme-name="riebeckite">data-theme（"light"または"dark"）は、[data-theme="light"]と[data-theme="dark"]のルールでカラーパレットを切り替えるためにCSSが使います。data-theme-nameは、有効なテーマを表す自由形式の識別子（例："riebeckite"）で、テーマ固有のスタイルを対象にするために使います。