/* ===================================================================== テーマ定義（2026-08-10） app.css の :root で定義したデザイントークンを [data-theme] ごとに上書きする。 - ライト（既定）: 上書きなし（app.css の :root がそのまま効く） - dark : 全体を暗色に。DevExpress は App.razor 側で Fluent の Dark モードを登録 - kinpekishu : 本文はライトのまま、サイドバーだけ金碧珠（543life 海のいろセット #6472af）。2026-09-10 までは「navy」（濃紺） - sakura / wakaba / fuji / katsuiro / mugiwara / haiao / sangoshu / turquoise / sorairo : 全体をごく薄い色に。アクセントも同じ系統で、 DevExpress は App.razor 側でアクセント色だけ差し替えた Fluent を登録（値はここの --alt-accent と同じにすること） テーマの選択は 個人設定 > テーマ（DB: UserGridLayouts キー "Ui.Theme"）。 は App.razor が SSR で付与する（ちらつき防止）。 ===================================================================== */ /* ---------- ダークテーマ ---------- */ html[data-theme="dark"], .theme-thumb-dark { color-scheme: dark; /* スクロールバー・フォーム部品もブラウザ標準の暗色に */ /* 面（背景） */ --alt-bg-body: #181c23; --alt-bg-page: #1e232c; --alt-bg-subtle: #20262f; --alt-bg-muted: #2a3140; --alt-surface: #232935; --alt-bg-primary: #1b202a; /* サイドバー */ --alt-bg-secondary: #2a3140; /* ホバー・アクティブ */ /* 枠線 */ --alt-border: #343d4d; --alt-border-strong: #46536a; --alt-border-secondary: #333b49; /* 文字 */ --alt-text-primary: #e8ecf3; --alt-text-body: #d6dde8; --alt-heading: #e2e8f2; --alt-text-strong: #c3cddc; --alt-text-sub: #aab8ca; --alt-text-muted: #8494a9; --alt-text-secondary: #cdd5e0; --alt-text-secondary-hover: #eef2f8; --alt-text-tertiary: #a3adbd; --alt-text-placeholder: #7e8a9c; /* アクセント */ --alt-accent: #5a8fe8; --alt-accent-hover: #7fa9ee; --alt-accent-weak: #4d7cc7; --alt-accent-soft: #253550; --alt-accent-soft-strong: #2e4265; --alt-parent-issue-bg: #2d2a1e; /* 親課題のうす黄背景の暗色版 */ /* 状態色 */ --alt-danger: #e05c5c; --alt-danger-strong: #ef6b6b; --alt-danger-text: #f0a5a5; --alt-danger-bg: #3a2528; --alt-danger-border: #5c3236; --alt-success: #4caf7d; --alt-success-text: #7fd0a3; --alt-success-bg: #22322a; --alt-success-border: #35543f; --alt-warning-bg: #3a3322; --alt-warning-border: #5c5230; --alt-warning-text: #d8b64a; /* ボタン（濃色スレートは暗背景に沈むので少し明るく） */ --alt-btn-primary-bg: #3d5270; --alt-btn-primary-hover: #4a6285; --alt-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); } /* 黒ストロークのアイコンSVGは白抜きに反転する。 （.btn-primary 等の invert(1) と重なっても結果は同じ白なので問題ない） */ html[data-theme="dark"] .alt-ico { filter: invert(1); } /* 影は暗色だと沈むので少し強める */ html[data-theme="dark"] .app-account-pop { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55); } /* ---------- 金碧珠サイドバーテーマ（本文はライトのまま） ---------- */ /* 2026-09-10 に「ネイビー」（#12294d）から改めた。色は 543life「にっぽんのいろインク 海のいろセット」の 金碧珠（きんぺきしゅ）#6472af。派生色（ホバー・現在位置・枠線・文字）は白を混ぜて作る（カスタム色の tone dark と同じ比率）。 本文側のアクセントも同じ系統（#5b69a8）にし、DevExpress は App.razor 側で同じ値を登録している。 保存済みの「navy」は kinpekishu として読む（UserUiSettings.NormalizeTheme）。 サイドバー内だけトークンを差し替える（CSS変数は要素スコープで継承される）。 .app-sidebar 内の既存ルールが参照する変数を上書きすれば、 個々のセレクタを書き直さずに配色が切り替わる。 */ html[data-theme="kinpekishu"], .theme-thumb-kinpekishu { --alt-accent: #5b69a8; --alt-accent-hover: #4c588d; --alt-accent-weak: #8f99c4; --alt-accent-soft: #eff0f6; --alt-accent-soft-strong: #dbdeec; } html[data-theme="kinpekishu"] .app-sidebar, .theme-thumb-kinpekishu .theme-thumb-side { --alt-bg-primary: #6472af; /* サイドバー本体 */ --alt-bg-secondary: #7a86ba; /* ホバー・アクティブ（サイドバー本体に白 14%） */ --alt-nav-active-bg: #929cc7; /* 現在位置。ホバーより明るくして順位を付ける */ --alt-nav-hover-bg: var(--alt-bg-secondary); /* ツリーのホバー。共通はアクセントの薄色＝濃紺の上で浮く */ --alt-nav-archived-bg: rgba(255, 255, 255, 0.06); /* 終わったもの。共通の薄グレーは濃紺の上で浮く */ --alt-surface: #7a86ba; /* ポップアップ等の面 */ --alt-border-secondary: #8691c1; --alt-border: #8691c1; --alt-text-primary: #f5f7fb; --alt-text-secondary: #e6e8f2; --alt-text-secondary-hover: #ffffff; --alt-text-tertiary: #cacfe4; --alt-text-muted: #b9c0db; } /* DxTreeView のメニュー文字は DevExpress テーマ（ライト）の濃色のままなので明示的に上書きする。 内部クラス名に依存しないよう、ツリー配下の全要素に強制する（white-space の前例と同じ方針）。 */ html[data-theme="kinpekishu"] .app-tree, html[data-theme="kinpekishu"] .app-tree * { color: var(--alt-text-secondary) !important; } /* 現在位置の文字色。li ではなく「li 直下の行要素」から下に限る＝グループが現在位置のときに 配下の項目まで白くならない（app.css の同じ方針を !important 側でも守る）。 */ html[data-theme="kinpekishu"] .app-tree li.alt-nav-active > div, html[data-theme="kinpekishu"] .app-tree li.alt-nav-active > div * { color: var(--alt-text-secondary-hover) !important; } /* 黒ストロークのアイコン・ロゴ文字はサイドバー内だけ白抜きに */ html[data-theme="kinpekishu"] .app-sidebar .alt-ico { filter: invert(1); } html[data-theme="kinpekishu"] .app-sidebar .app-brand-logo { filter: brightness(0) invert(1); } html[data-theme="kinpekishu"] .app-brand a { color: #ffffff; } /* サイドバー幅つまみのホバー色（濃紺上でも見えるように） */ html[data-theme="kinpekishu"] .app-sidebar-resizer:hover, html[data-theme="kinpekishu"] .app-sidebar-resizer:focus-visible, html[data-theme="kinpekishu"] body.app-resizing .app-sidebar-resizer { background: rgba(255, 255, 255, 0.35); } /* ---------- 色つきのテーマ 9 つ: 桜・若葉・藤・活色・麦藁・灰青・珊瑚朱・ターコイズ・空色 ---------- もとは「ピンク」1 つ（2026-08-10）。2026-09-10 に「もっと薄く」の要望で桜に改め、若葉と藤を足し、同日に 543life「にっぽんのいろインク 海のいろセット」の 4 色（活色・麦藁色・灰青・珊瑚朱色）を足した。 2026-09-11 に色見本から選んだ 2 色（ターコイズ・空色）を足した。 **9 つとも同じ式から出している**（各ブロックのコメントが式＝白／黒への混ぜる割合。値はその展開）。 **入力は 2 色だけ**（面の元の色・アクセント）で、割合は次のとおり。値を足すときも直すときもこの表から出すこと ＝範囲（2.5〜16% のような書き方）だけを持っていた版では 22 個の値を再現できず、目分量で置かれても 誰も検算できなかった（2026-09-11 に逆算して明記）。崩れたときの症状は「1 テーマだけ質感が違う」だけ。 面＝白に「面の元の色」を混ぜる body 0% / subtle 2.5% / page 4.5% / primary 6.5% / muted 11% / secondary 16% / surface 0% 枠線＝白に「面の元の色」を混ぜる border-secondary 15% / border 20% / border-strong 36% 文字＝「アクセント」を黒へ寄せる muted 22% / sub 40% / tertiary 48% / strong 56% / heading 62% / secondary 70% / body 76% / primary 80% / secondary-hover 82% アクセント hover は黒へ 16%／weak・soft・soft-strong は白に 68・10・22% 混ぜる ボタン＝「アクセント」を黒へ寄せる bg 14% / hover 26% **丸めは偶数丸め**＝0.5 ちょうどになる箇所が既存 7 テーマに 3 つあり、四捨五入で出すとそこだけ 1 ずれる。 DevExpress のアクセントは UserUiSettings.Themes の Accent（App.razor が登録）＝ここの --alt-accent と同じ値にすること。 保存済みの「pink」は sakura として読む（UserUiSettings.NormalizeTheme）。 **選択子に .theme-thumb-{名前} を併記してある**＝個人設定の見本は同じトークンで描く（app.css の .theme-thumb）ので、 色の直値をもう 1 組持たない。 */ /* 桜: ごく薄い桜色（和色大辞典の桜色 #fef4f4 の系統。面の元の色 #e07a9c／アクセント #e07a9c） */ html[data-theme="sakura"], .theme-thumb-sakura { /* 面（背景）: 白に元の色を 2.5〜16% 混ぜる */ --alt-bg-body: #ffffff; --alt-bg-page: #fef9fb; --alt-bg-subtle: #fefcfd; --alt-bg-muted: #fcf0f4; --alt-surface: #ffffff; --alt-bg-primary: #fdf6f9; --alt-bg-secondary: #faeaef; /* 枠線: 白に元の色を 15〜36% 混ぜる（border-primary は border-strong と同じ＝末尾の共通ブロック） */ --alt-border: #f9e4eb; --alt-border-strong: #f4cfdb; --alt-border-secondary: #faebf0; /* 文字: アクセントを黒へ 22〜82% 寄せる */ --alt-text-primary: #2d181f; --alt-text-body: #361d25; --alt-heading: #552e3b; --alt-text-strong: #633645; --alt-text-sub: #86495e; --alt-text-muted: #af5f7a; --alt-text-secondary: #43252f; --alt-text-secondary-hover: #28161c; --alt-text-tertiary: #743f51; /* アクセント: hover は黒へ 16%、weak/soft/soft-strong は白に 68/10/22% 混ぜる（brand は accent と同じ＝末尾の共通ブロック） */ --alt-accent: #e07a9c; --alt-accent-hover: #bc6683; --alt-accent-weak: #eaa5bc; --alt-accent-soft: #fcf2f5; --alt-accent-soft-strong: #f8e2e9; /* ボタン: アクセントを黒へ 14／26% 寄せる */ --alt-btn-primary-bg: #c16986; --alt-btn-primary-hover: #a65a73; } /* 若葉: ごく薄い若葉色（和色大辞典の若葉色。面の元の色 #b9d08b／アクセント #6aa64d） */ html[data-theme="wakaba"], .theme-thumb-wakaba { /* 面（背景）: 白に元の色を 2.5〜16% 混ぜる */ --alt-bg-body: #ffffff; --alt-bg-page: #fcfdfa; --alt-bg-subtle: #fdfefc; --alt-bg-muted: #f7faf2; --alt-surface: #ffffff; --alt-bg-primary: #fafcf7; --alt-bg-secondary: #f4f7ec; /* 枠線: 白に元の色を 15〜36% 混ぜる（border-primary は border-strong と同じ＝末尾の共通ブロック） */ --alt-border: #f1f6e8; --alt-border-strong: #e6eed5; --alt-border-secondary: #f4f8ee; /* 文字: アクセントを黒へ 22〜82% 寄せる */ --alt-text-primary: #15210f; --alt-text-body: #192812; --alt-heading: #283f1d; --alt-text-strong: #2f4922; --alt-text-sub: #40642e; --alt-text-muted: #53813c; --alt-text-secondary: #203217; --alt-text-secondary-hover: #131e0e; --alt-text-tertiary: #375628; /* アクセント: hover は黒へ 16%、weak/soft/soft-strong は白に 68/10/22% 混ぜる（brand は accent と同じ＝末尾の共通ブロック） */ --alt-accent: #6aa64d; --alt-accent-hover: #598b41; --alt-accent-weak: #9ac286; --alt-accent-soft: #f0f6ed; --alt-accent-soft-strong: #deebd8; /* ボタン: アクセントを黒へ 14／26% 寄せる */ --alt-btn-primary-bg: #5b8f42; --alt-btn-primary-hover: #4e7b39; } /* 藤: ごく薄い藤色（和色大辞典の藤色。面の元の色 #bbbcde／アクセント #8e78c6） */ html[data-theme="fuji"], .theme-thumb-fuji { /* 面（背景）: 白に元の色を 2.5〜16% 混ぜる */ --alt-bg-body: #ffffff; --alt-bg-page: #fcfcfe; --alt-bg-subtle: #fdfdfe; --alt-bg-muted: #f8f8fb; --alt-surface: #ffffff; --alt-bg-primary: #fbfbfd; --alt-bg-secondary: #f4f4fa; /* 枠線: 白に元の色を 15〜36% 混ぜる（border-primary は border-strong と同じ＝末尾の共通ブロック） */ --alt-border: #f1f2f8; --alt-border-strong: #e7e7f3; --alt-border-secondary: #f5f5fa; /* 文字: アクセントを黒へ 22〜82% 寄せる */ --alt-text-primary: #1c1828; --alt-text-body: #221d30; --alt-heading: #362e4b; --alt-text-strong: #3e3557; --alt-text-sub: #554877; --alt-text-muted: #6f5e9a; --alt-text-secondary: #2b243b; --alt-text-secondary-hover: #1a1624; --alt-text-tertiary: #4a3e67; /* アクセント: hover は黒へ 16%、weak/soft/soft-strong は白に 68/10/22% 混ぜる（brand は accent と同じ＝末尾の共通ブロック） */ --alt-accent: #8e78c6; --alt-accent-hover: #7765a6; --alt-accent-weak: #b2a3d8; --alt-accent-soft: #f4f2f9; --alt-accent-soft-strong: #e6e1f2; /* ボタン: アクセントを黒へ 14／26% 寄せる */ --alt-btn-primary-bg: #7a67aa; --alt-btn-primary-hover: #695993; } /* 活色: 緑を含む活気のある青。面はごく薄い青緑（543life 海のいろセット。面の元の色 #39b9b5／アクセント #2a9a96） */ html[data-theme="katsuiro"], .theme-thumb-katsuiro { /* 面（背景）: 白に元の色を 2.5〜16% 混ぜる */ --alt-bg-body: #ffffff; --alt-bg-page: #f6fcfc; --alt-bg-subtle: #fafdfd; --alt-bg-muted: #e9f7f7; --alt-surface: #ffffff; --alt-bg-primary: #f2fafa; --alt-bg-secondary: #dff4f3; /* 枠線: 白に元の色を 15〜36% 混ぜる（border-primary は border-strong と同じ＝末尾の共通ブロック） */ --alt-border: #d7f1f0; --alt-border-strong: #b8e6e4; --alt-border-secondary: #e1f4f4; /* 文字: アクセントを黒へ 22〜82% 寄せる */ --alt-text-primary: #081f1e; --alt-text-body: #0a2524; --alt-heading: #103b39; --alt-text-strong: #124442; --alt-text-sub: #195c5a; --alt-text-muted: #217875; --alt-text-secondary: #0d2e2d; --alt-text-secondary-hover: #081c1b; --alt-text-tertiary: #16504e; /* アクセント: hover は黒へ 16%、weak/soft/soft-strong は白に 68/10/22% 混ぜる（brand は accent と同じ＝末尾の共通ブロック） */ --alt-accent: #2a9a96; --alt-accent-hover: #23817e; --alt-accent-weak: #6ebab8; --alt-accent-soft: #eaf5f4; --alt-accent-soft-strong: #d0e9e8; /* ボタン: アクセントを黒へ 14／26% 寄せる */ --alt-btn-primary-bg: #248481; --alt-btn-primary-hover: #1f726f; } /* 麦藁: 麦藁の黄。面はごく薄い麦藁色（543life 海のいろセット。面の元の色 #e3c576／アクセント #b8932b） */ html[data-theme="mugiwara"], .theme-thumb-mugiwara { /* 面（背景）: 白に元の色を 2.5〜16% 混ぜる */ --alt-bg-body: #ffffff; --alt-bg-page: #fefcf9; --alt-bg-subtle: #fefefc; --alt-bg-muted: #fcf9f0; --alt-surface: #ffffff; --alt-bg-primary: #fdfbf6; --alt-bg-secondary: #fbf6e9; /* 枠線: 白に元の色を 15〜36% 混ぜる（border-primary は border-strong と同じ＝末尾の共通ブロック） */ --alt-border: #f9f3e4; --alt-border-strong: #f5eace; --alt-border-secondary: #fbf6ea; /* 文字: アクセントを黒へ 22〜82% 寄せる */ --alt-text-primary: #251d09; --alt-text-body: #2c230a; --alt-heading: #463810; --alt-text-strong: #514113; --alt-text-sub: #6e581a; --alt-text-muted: #907322; --alt-text-secondary: #372c0d; --alt-text-secondary-hover: #211a08; --alt-text-tertiary: #604c16; /* アクセント: hover は黒へ 16%、weak/soft/soft-strong は白に 68/10/22% 混ぜる（brand は accent と同じ＝末尾の共通ブロック） */ --alt-accent: #b8932b; --alt-accent-hover: #9b7b24; --alt-accent-weak: #cfb66f; --alt-accent-soft: #f8f4ea; --alt-accent-soft-strong: #efe7d0; /* ボタン: アクセントを黒へ 14／26% 寄せる */ --alt-btn-primary-bg: #9e7e25; --alt-btn-primary-hover: #886d20; } /* 灰青: 灰を含む青。面はごく薄い灰青（543life 海のいろセット。面の元の色 #c0c6c9／アクセント #6f7f8a） */ html[data-theme="haiao"], .theme-thumb-haiao { /* 面（背景）: 白に元の色を 2.5〜16% 混ぜる */ --alt-bg-body: #ffffff; --alt-bg-page: #fcfcfd; --alt-bg-subtle: #fdfefe; --alt-bg-muted: #f8f9f9; --alt-surface: #ffffff; --alt-bg-primary: #fbfbfb; --alt-bg-secondary: #f5f6f6; /* 枠線: 白に元の色を 15〜36% 混ぜる（border-primary は border-strong と同じ＝末尾の共通ブロック） */ --alt-border: #f2f4f4; --alt-border-strong: #e8eaec; --alt-border-secondary: #f6f6f7; /* 文字: アクセントを黒へ 22〜82% 寄せる */ --alt-text-primary: #16191c; --alt-text-body: #1b1e21; --alt-heading: #2a3034; --alt-text-strong: #31383d; --alt-text-sub: #434c53; --alt-text-muted: #57636c; --alt-text-secondary: #212629; --alt-text-secondary-hover: #141719; --alt-text-tertiary: #3a4248; /* アクセント: hover は黒へ 16%、weak/soft/soft-strong は白に 68/10/22% 混ぜる（brand は accent と同じ＝末尾の共通ブロック） */ --alt-accent: #6f7f8a; --alt-accent-hover: #5d6b74; --alt-accent-weak: #9da8af; --alt-accent-soft: #f1f2f3; --alt-accent-soft-strong: #dfe3e5; /* ボタン: アクセントを黒へ 14／26% 寄せる */ --alt-btn-primary-bg: #5f6d77; --alt-btn-primary-hover: #525e66; } /* 珊瑚朱: 珊瑚の赤橙。面はごく薄い珊瑚色（543life 海のいろセット。面の元の色 #ee836f／アクセント #e26f59） */ html[data-theme="sangoshu"], .theme-thumb-sangoshu { /* 面（背景）: 白に元の色を 2.5〜16% 混ぜる */ --alt-bg-body: #ffffff; --alt-bg-page: #fef9f9; --alt-bg-subtle: #fffcfb; --alt-bg-muted: #fdf1ef; --alt-surface: #ffffff; --alt-bg-primary: #fef7f6; --alt-bg-secondary: #fcebe8; /* 枠線: 白に元の色を 15〜36% 混ぜる（border-primary は border-strong と同じ＝末尾の共通ブロック） */ --alt-border: #fce6e2; --alt-border-strong: #f9d2cb; --alt-border-secondary: #fcece9; /* 文字: アクセントを黒へ 22〜82% 寄せる */ --alt-text-primary: #2d1612; --alt-text-body: #361b15; --alt-heading: #562a22; --alt-text-strong: #633127; --alt-text-sub: #884335; --alt-text-muted: #b05745; --alt-text-secondary: #44211b; --alt-text-secondary-hover: #291410; --alt-text-tertiary: #763a2e; /* アクセント: hover は黒へ 16%、weak/soft/soft-strong は白に 68/10/22% 混ぜる（brand は accent と同じ＝末尾の共通ブロック） */ --alt-accent: #e26f59; --alt-accent-hover: #be5d4b; --alt-accent-weak: #eb9d8e; --alt-accent-soft: #fcf1ee; --alt-accent-soft-strong: #f9dfda; /* ボタン: アクセントを黒へ 14／26% 寄せる */ --alt-btn-primary-bg: #c25f4d; --alt-btn-primary-hover: #a75242; } /* ターコイズ: 明るい青緑。面はごく薄い青緑（色見本から選択。面の色をそのままアクセントにすると主ボタンの白文字が 2.28:1 で読めないので濃くした。面の元の色 #90d2dc／アクセント #2e9fb0） */ html[data-theme="turquoise"], .theme-thumb-turquoise { /* 面（背景）: 白に元の色を 2.5〜16% 混ぜる */ --alt-bg-body: #ffffff; --alt-bg-page: #fafdfd; --alt-bg-subtle: #fcfefe; --alt-bg-muted: #f3fafb; --alt-surface: #ffffff; --alt-bg-primary: #f8fcfd; --alt-bg-secondary: #edf8f9; /* 枠線: 白に元の色を 15〜36% 混ぜる（border-primary は border-strong と同じ＝末尾の共通ブロック） */ --alt-border: #e9f6f8; --alt-border-strong: #d7eff2; --alt-border-secondary: #eef8fa; /* 文字: アクセントを黒へ 22〜82% 寄せる */ --alt-text-primary: #092023; --alt-text-body: #0b262a; --alt-heading: #113c43; --alt-text-strong: #14464d; --alt-text-sub: #1c5f6a; --alt-text-muted: #247c89; --alt-text-secondary: #0e3035; --alt-text-secondary-hover: #081d20; --alt-text-tertiary: #18535c; /* アクセント: hover は黒へ 16%、weak/soft/soft-strong は白に 68/10/22% 混ぜる（brand は accent と同じ＝末尾の共通ブロック） */ --alt-accent: #2e9fb0; --alt-accent-hover: #278694; --alt-accent-weak: #71bec9; --alt-accent-soft: #eaf5f7; --alt-accent-soft-strong: #d1eaee; /* ボタン: アクセントを黒へ 14／26% 寄せる */ --alt-btn-primary-bg: #288997; --alt-btn-primary-hover: #227682; } /* 空色: 晴れた空の青。面はごく薄い空色（色見本から選択。面の元の色 #54a8e8／アクセント #54a8e8） */ html[data-theme="sorairo"], .theme-thumb-sorairo { /* 面（背景）: 白に元の色を 2.5〜16% 混ぜる */ --alt-bg-body: #ffffff; --alt-bg-page: #f7fbfe; --alt-bg-subtle: #fbfdfe; --alt-bg-muted: #ecf5fc; --alt-surface: #ffffff; --alt-bg-primary: #f4f9fe; --alt-bg-secondary: #e4f1fb; /* 枠線: 白に元の色を 15〜36% 混ぜる（border-primary は border-strong と同じ＝末尾の共通ブロック） */ --alt-border: #ddeefa; --alt-border-strong: #c1e0f7; --alt-border-secondary: #e5f2fc; /* 文字: アクセントを黒へ 22〜82% 寄せる */ --alt-text-primary: #11222e; --alt-text-body: #142838; --alt-heading: #204058; --alt-text-strong: #254a66; --alt-text-sub: #32658b; --alt-text-muted: #4283b5; --alt-text-secondary: #193246; --alt-text-secondary-hover: #0f1e2a; --alt-text-tertiary: #2c5779; /* アクセント: hover は黒へ 16%、weak/soft/soft-strong は白に 68/10/22% 混ぜる（brand は accent と同じ＝末尾の共通ブロック） */ --alt-accent: #54a8e8; --alt-accent-hover: #478dc3; --alt-accent-weak: #8bc4ef; --alt-accent-soft: #eef6fd; --alt-accent-soft-strong: #d9ecfa; /* ボタン: アクセントを黒へ 14／26% 寄せる */ --alt-btn-primary-bg: #4890c8; --alt-btn-primary-hover: #3e7cac; } /* ---------- 色つきのテーマに共通の派生トークン（2026-09-10） ---------- brand は accent と、border-primary は border-strong と常に同じ値なので、各ブロックには書かず 1 か所で導く （ライトだけは app.css の :root が別の値を持つので、ここには入れない）。 **テーマ名を並べない**（2026-09-11）＝以前はここにテーマ名の列挙を 2 本持っており、テーマを足すたびに ブロックとは別の場所へ同じ名前を書き足す契約になっていた。書き忘れても例外もログも出ず、**そのテーマだけ** brand と border-primary が app.css の :root の既定（青 #1d4ed8・灰 #d4d4d4）のまま残る＝フォーカス枠・ 入力欄のフォーカス色・アカウントタブの現在位置・お知らせバナーの枠が既定の色に戻る、という見た目でしか表に出ない。 data-theme は App.razor が必ず出し、値は NormalizeTheme が表にある名前へ正規化するので、 **「ライト以外」がそのまま「色つきのテーマ」**になる（上のコメントにしか無かった意図をコードに写した形）。 **個人設定の見本（.theme-thumb-*）は並べなくてよい**＝見本が読むのは bg-page / bg-primary / surface / border / accent の 5 つで、この 2 つには消費者がいない。見本で brand を塗る日が来たら見本の側に書けばよく、 そのときは色が即ずれるので黙って壊れない。 */ html[data-theme]:not([data-theme="light"]) { --alt-brand: var(--alt-accent); --alt-border-primary: var(--alt-border-strong); } /* ---------- サイドバーのカスタム配色（2026-08-10 ユーザー要望） ---------- 個人設定「テーマ」タブで任意の色を選ぶと、App.razor が を付与する。 どのテーマとも組み合わせ可能（テーマ標準のサイドバー配色より優先）。 明暗（tone）はサーバー側で計算済み。ホバー・枠線などの派生色は color-mix で作る。 */ html[data-sidebar-tone] .app-sidebar { --alt-bg-primary: var(--alt-sidebar-custom); } /* 明るい色: 文字は濃色のまま。ホバー・枠線は少し暗い同系色 */ html[data-sidebar-tone="light"] .app-sidebar { --alt-bg-secondary: color-mix(in srgb, var(--alt-sidebar-custom), #000000 8%); /* 現在位置はホバー（8%）より濃くして順位を付ける。既定の薄青のままだとカスタム色と喧嘩する */ --alt-nav-active-bg: color-mix(in srgb, var(--alt-sidebar-custom), #000000 18%); /* ツリーのホバーも同じ理由＝共通はテーマのアクセントの薄色で、利用者が選んだ色と無関係 */ --alt-nav-hover-bg: var(--alt-bg-secondary); --alt-surface: color-mix(in srgb, var(--alt-sidebar-custom), #ffffff 45%); --alt-border-secondary: color-mix(in srgb, var(--alt-sidebar-custom), #000000 14%); --alt-border: color-mix(in srgb, var(--alt-sidebar-custom), #000000 14%); --alt-text-primary: #2a2f3a; --alt-text-secondary: #3a4150; --alt-text-secondary-hover: #171c26; --alt-text-tertiary: #5a6272; } /* ダークテーマ×明るいカスタム色: ツリー文字は DevExpress ダークテーマの白のままだと 読めないので濃色を強制。アイコンの白抜き（ダークテーマの全体invert）も打ち消す */ html[data-sidebar-tone="light"] .app-tree, html[data-sidebar-tone="light"] .app-tree * { color: var(--alt-text-secondary) !important; } /* 上の !important は全項目に当たるので、現在位置の文字色も !important で言い直す（行の中だけ）。 */ html[data-sidebar-tone="light"] .app-tree li.alt-nav-active > div, html[data-sidebar-tone="light"] .app-tree li.alt-nav-active > div * { color: var(--alt-text-secondary-hover) !important; } html[data-theme="dark"][data-sidebar-tone="light"] .app-sidebar .alt-ico { filter: none; } html[data-theme="dark"][data-sidebar-tone="light"] .app-sidebar .app-brand-logo { filter: none; } /* 暗い色: navy テーマと同じ方針で文字・アイコンを白系にする */ html[data-sidebar-tone="dark"] .app-sidebar { --alt-bg-secondary: color-mix(in srgb, var(--alt-sidebar-custom), #ffffff 14%); /* 現在位置はホバーより明るくして順位を付ける */ --alt-nav-active-bg: color-mix(in srgb, var(--alt-sidebar-custom), #ffffff 30%); --alt-nav-hover-bg: var(--alt-bg-secondary); /* ツリーのホバー。共通はアクセントの薄色＝濃い地の上で浮く */ --alt-nav-archived-bg: rgba(255, 255, 255, 0.06); /* 終わったもの。共通の薄グレーは濃い地の上で浮く */ --alt-surface: color-mix(in srgb, var(--alt-sidebar-custom), #ffffff 14%); --alt-border-secondary: color-mix(in srgb, var(--alt-sidebar-custom), #ffffff 20%); --alt-border: color-mix(in srgb, var(--alt-sidebar-custom), #ffffff 20%); --alt-text-primary: #f5f7fb; --alt-text-secondary: color-mix(in srgb, #ffffff 84%, var(--alt-sidebar-custom)); --alt-text-secondary-hover: #ffffff; --alt-text-tertiary: color-mix(in srgb, #ffffff 66%, var(--alt-sidebar-custom)); --alt-text-muted: color-mix(in srgb, #ffffff 55%, var(--alt-sidebar-custom)); } html[data-sidebar-tone="dark"] .app-tree, html[data-sidebar-tone="dark"] .app-tree * { color: var(--alt-text-secondary) !important; } html[data-sidebar-tone="dark"] .app-tree li.alt-nav-active > div, html[data-sidebar-tone="dark"] .app-tree li.alt-nav-active > div * { color: var(--alt-text-secondary-hover) !important; } html[data-sidebar-tone="dark"] .app-sidebar .alt-ico { filter: invert(1); } html[data-sidebar-tone="dark"] .app-sidebar .app-brand-logo { filter: brightness(0) invert(1); } html[data-sidebar-tone="dark"] .app-brand a { color: #ffffff; } html[data-sidebar-tone="dark"] .app-sidebar-resizer:hover, html[data-sidebar-tone="dark"] .app-sidebar-resizer:focus-visible, html[data-sidebar-tone="dark"] body.app-resizing .app-sidebar-resizer { background: rgba(255, 255, 255, 0.35); } /* ==== ワークフロー図（dxDiagram。Phase10） ==== ダークテーマではキャンバス（紙）背景のみ暗色にする。進捗の意味色 （緑=通過済み/青=現在地/グレー=未到達/赤=却下/オレンジ=差戻し）は テーマトークンに寄せず固定（バッジ・ガントバーと同方針）。 SVG では CSS 指定が fill 属性より優先されるため、この上書きだけで効く。 */ html[data-theme="dark"] .dxdi-canvas rect.page, html[data-theme="dark"] .dxdi-canvas rect.grid-page { fill: #252b33; } html[data-theme="dark"] .dxdi-canvas rect.grid { opacity: 0.15; }