:root { /* 「日間-」 / 「日間+」の背景色 */ --lightuifilter-05: rgba(33, 33, 33, 0.5); /* データ行の枠線(下線) */ --lightuifilter-02: rgba(33, 33, 33, 0.2); /* 黒文字(固定) */ --lighttextmain: rgba(33, 33, 33, 1); /* 灰色文字(固定) */ --lighttextsub: rgba(117, 117, 117, 1); /* --lighttextinactive: rgba(33, 33, 33, 0.2); */ /* 「日間-」 / 「日間+」の文字色 */ --lighttextreversal: rgba(255, 255, 255, 1); /* テーブルカラムの背景色 */ --lightaccent-greenfilter: rgba(26, 188, 156, 0.1); /* テーブルのヘッダ行とデータ行の境目の枠線(下線) */ --lightaccent-greenbase: rgba(26, 188, 156, 1); /* モード切替対応 */ --color-scheme-UI-main: rgba(33, 33, 33, 1); /* 灰色背景 */ --color-scheme-UI-sub: rgba(117, 117, 117, 1); /* 灰色背景 */ --color-scheme-UI-filter-50: rgba(33, 33, 33, 0.5); /* 灰色背景 */ --color-scheme-UI-filter-20: rgba(33, 33, 33, 0.2); /* 灰色背景 */ --color-scheme-UI-filter-10: rgba(33, 33, 33, 0.1); /* 灰色背景 */ --color-scheme-UI-filter-05: rgba(33, 33, 33, 0.05); /* 白背景 */ --color-scheme-UI-reversal: rgba(255, 255, 255, 1); /* 灰色背景 */ --color-scheme-UI-reversal-sub: rgba(245, 245, 245, 1); /* 画面右領域(絞り込み検索) 背景色設定 */ --color-scheme-UI-panel-bg: rgba(250, 250, 250, 1); /* 画面左領域背景色設定 */ --color-scheme-UI-bg: rgba(255, 255, 255, 1); /* 黒文字 */ --color-scheme-text-main: rgba(33, 33, 33, 1); /* 灰色文字 */ --color-scheme-text-sub: rgba(117, 117, 117, 1); /* 文字色設定(未選択) */ --color-scheme-text-inactive: rgba(33, 33, 33, 0.2); /* 文字色設定(反転色) */ --color-scheme-text-reversal: rgba(255, 255, 255, 1); /* プレースホルダー */ --color-scheme-text-placeholder: rgba(33, 33, 33, 0.2); /* 貢献中ラベル(枠線) */ --color-scheme-status-ok-base: rgba(63, 191, 63, 1); /* 貢献中ラベル(背景色) */ --color-scheme-status-ok-filter: rgba(63, 191, 63, 0.1); /* NEWラベル */ --color-scheme-status-notice-base: rgba(242, 158, 12, 1); /* 増減(マイナス値) */ --color-scheme-status-caution-base: rgba(244, 61, 61, 1); /* 増減ハイライト(マイナス値) */ --color-scheme-status-caution-filter: rgba(244, 61, 61, 0.1); /* 「日間-」 / 「日間+」の文字色 */ --color-scheme-accent-green-base: rgba(26, 188, 156, 1); /* テーブル: ヘッダ行とデータ行の境目の枠線 */ --color-scheme-accent-green-darker: rgba(22, 160, 133, 1); /* テーブルカラムの背景色 */ --color-scheme-accent-green-filter: rgba(26, 188, 156, 0.1); /* 白文字 */ --color-scheme-common-white: rgba(255, 255, 255, 1); /* 黒文字 */ --color-scheme-common-black: rgba(0, 0, 0, 1); /* スイッチボタンなどの非活性背景 */ --color-scheme-UI-invisible: rgba(255, 255, 255, 0); } /* To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so: You can apply the theme on any DOM node, not just the `body` */ [data-color-scheme-mode="light"] { --color-scheme-UI-main: rgba(33, 33, 33, 1); --color-scheme-UI-sub: rgba(117, 117, 117, 1); --color-scheme-UI-filter-80: rgba(33, 33, 33, 0.8); --color-scheme-UI-filter-50: rgba(33, 33, 33, 0.5); --color-scheme-UI-filter-20: rgba(33, 33, 33, 0.2); --color-scheme-UI-filter-10: rgba(33, 33, 33, 0.1); --color-scheme-UI-filter-05: rgba(33, 33, 33, 0.05); --color-scheme-UI-reversal: rgba(255, 255, 255, 1); --color-scheme-UI-reversal-sub: rgba(245, 245, 245, 1); --color-scheme-UI-panel-bg: rgba(250, 250, 250, 1); --color-scheme-UI-bg: rgba(255, 255, 255, 1); --color-scheme-text-main: rgba(33, 33, 33, 1); --color-scheme-text-sub: rgba(117, 117, 117, 1); --color-scheme-text-inactive: rgba(33, 33, 33, 0.2); --color-scheme-text-reversal: rgba(255, 255, 255, 1); --color-scheme-accent-green-filter: rgba(26, 188, 156, 0.1); --color-scheme-UI-invisible: rgba(255, 255, 255, 0); --color-scheme-text-color-default: rgba(0, 0, 0, 1); --color-scheme-bg-color-default: rgba(255, 255, 255, 1); --color-scheme-toggle-switch-off: rgba(211, 211, 211, 1); --color-scheme-toggle-switch-off-text: rgba(173, 173, 173, 1); --color-scheme-toggle-switch-on: rgba(34, 34, 34, 1); --color-scheme-toggle-switch-on-text: rgba(143, 143, 143, 1); --color-scheme-bg-select-default: rgba(33, 33, 33, 0.1); --color-scheme-col-color-default: rgba(51, 51, 51, 1); --color-scheme-used-machine-price: rgba(0, 10, 255, 1); --color-scheme-col-minus: rgba(255, 0, 0, 1); --color-scheme-graph-line-data1: rgba(0, 180, 160, 1); --color-scheme-graph-bar-data1: rgba(0, 180, 160, 0.5); --color-scheme-graph-line-data2: rgba(128, 128, 128, 1); --color-scheme-graph-bar-data2: rgba(128, 128, 128, 0.5); } [data-color-scheme-mode="dark"] { --color-scheme-UI-main: rgba(255, 255, 255, 1); --color-scheme-UI-sub: rgba(224, 224, 224, 1); --color-scheme-UI-filter-80: rgba(255, 255, 255, 0.8); --color-scheme-UI-filter-50: rgba(255, 255, 255, 0.5); --color-scheme-UI-filter-20: rgba(255, 255, 255, 0.2); --color-scheme-UI-filter-10: rgba(255, 255, 255, 0.1); --color-scheme-UI-filter-05: rgba(255, 255, 255, 0.05); --color-scheme-UI-reversal: rgba(33, 33, 33, 1); --color-scheme-UI-reversal-sub: rgba(66, 66, 66, 1); --color-scheme-UI-panel-bg: rgba(16, 16, 16, 1); --color-scheme-UI-bg: rgba(33, 33, 33, 1); --color-scheme-text-main: rgba(255, 255, 255, 1); --color-scheme-text-sub: rgba(224, 224, 224, 1); --color-scheme-text-inactive: rgba(255, 255, 255, 0.2); --color-scheme-text-reversal: rgba(33, 33, 33, 1); --color-scheme-accent-green-filter: rgba(26, 188, 156, 0.2); --color-scheme-UI-invisible: rgba(33, 33, 33, 0); --color-scheme-text-color-default: rgba(255, 255, 255, 1); --color-scheme-bg-color-default: rgba(0, 0, 0, 1); --color-scheme-toggle-switch-off: rgba(34, 34, 34, 1); --color-scheme-toggle-switch-off-text: rgba(62, 62, 62, 1); --color-scheme-toggle-switch-on: rgba(211, 211, 211, 1); --color-scheme-toggle-switch-on-text: rgba(0, 0, 0, 1); --color-scheme-bg-select-default: rgba(33, 33, 33, 1); --color-scheme-col-color-default: rgba(204, 204, 204, 1); --color-scheme-used-machine-price: rgba(66, 180, 255, 1); --color-scheme-col-minus: rgba(249, 105, 105, 1); --color-scheme-graph-line-data1: rgba(0, 180, 160, 1); --color-scheme-graph-bar-data1: rgba(0, 180, 160, 0.5); --color-scheme-graph-line-data2: rgba(184, 184, 184, 1); --color-scheme-graph-bar-data2: rgba(184, 184, 184, 0.5); }