Pleasanter Technical Manual

テーマ

アクセシビリティテーマの追加（ハイコントラスト・Okabe-Ito など） ​

第2版作成 最終更新 （日本時間）
確認バージョン1.5.1.01.5.8.1

色覚の多様性や見えにくさに配慮したテーマを、本体の v2 テーマとして追加する設計メモです。本体の標準機能ではありません。 本体を改修せずに、拡張スクリプトで配色だけを切り替える方法は ナビゲーションとテーマ の「v2 テーマの配色モードとテーマを切り替える（統合 FAB）」にあります。調査は 1.5.1.0 で行い、前提にした部分を 1.5.8.1 のソースで確かめています。

テーマ改善でハイコントラストが標準になる予定です

2027 年 1 月予定のテーマ改善では、ハイコントラストのテーマ 3 種（紺 / 白・黄 / 黒・シアン / 黒）が標準で入り、テーマの CSS の構成も変わります。このメモの前提（custom.css の CSS 変数、ThemeVersion() による判定）は 1.5.8.1 のものです。変更点は テーマ改善（UI テーマの刷新）への備え にまとめています。

前提にした現行実装 ​

テーマの世代 ​

世代ThemeVersion()テーマ仕組み
v11.0base・black-tie・sunny など 25 個jQuery UI のテーマ。CSS 変数を使わない
v22.0cerulean・green-tea・mandarin・midnight の 4 個custom.css の :root の CSS 変数で配色を決める

v2 かどうかは Context.ThemeVersion() と ThemeVersionForCss() の switch にテーマ名を直接書いて判定しています（Context.cs#L1544-L1570）。

使うテーマの決まり方 ​

図を読み込み中…

1.5.8.1 では、値が空でないだけでなくユーザーのテーマの選択肢（Users_Theme.json の ChoicesText）に含まれるかも確かめます（Context.cs#L1523-L1542）。テナントのテーマもこの選択肢で判定するので、新しいテーマは Users_Theme.json に必ず足します。1.5.1.0 では、空でなければそのまま使う CoalesceEmpty でした。

テーマのファイル ​

text
Implem.PleasanterFrontend/wwwroot/src/clone/assets/themes/{テーマ名}/
  ├─ custom.css          CSS 変数の定義（cerulean で約 210 個）
  ├─ jquery-ui.min.css   jQuery UI の CSS
  └─ images/             jQuery UI のアイコン画像

src/clone 以下はビルド時に Implem.Pleasanter/wwwroot へそのままコピーされ（vite.config.ts#L11-L17）、画面は assets/themes/{テーマ名}/jquery-ui.min.css と custom.css を読み込みます（HtmlStyles.cs#L119、#L152）。

custom.css の変数は、先頭の ColorScheme（--primaryColor・--commonColor01〜07・--nonColor01〜16 など）を、BaseSetting（--page-bg・--base-text・--link-text・--success-color・--warning-color など）やボタン・入力欄・グリッドの変数が var() で参照する形になっています。cerulean では --success-color が --commonColor07、--warning-color が --commonColor01（#e03e3e）です。そのため、ColorScheme を差し替えるだけで画面全体の配色を変えられます。

追加の手順 ​

#対象変更
1themes/{テーマ名}/custom.css新しく作る。既存の v2 テーマをコピーして ColorScheme を変える
2themes/{テーマ名}/jquery-ui.min.css既存の v2 テーマからコピー
3themes/{テーマ名}/images/同上（明るい背景なら cerulean、暗い背景なら midnight から）
4Context.cs の ThemeVersion()・ThemeVersionForCss()case にテーマ名を足す
5Definition_Column/Users_Theme.json・Tenants_Theme.jsonChoicesText にテーマ名を足す
6表示名（任意）多言語の表示名を足す
csharp
public decimal ThemeVersion()
{
    switch (Theme())
    {
        case "cerulean":
        case "green-tea":
        case "mandarin":
        case "midnight":
        case "high-contrast":       // 追加
        case "okabe-ito":           // 追加
        case "dark-high-contrast":  // 追加
        case "monochrome":          // 追加
            return 2.0M;
        default:
            return 1.0M;
    }
}

追加するテーマの案 ​

テーマ名（内部名）目的背景
ハイコントラスト（high-contrast）WCAG 2.1 AAA（コントラスト比 7:1 以上）を狙う白
Okabe-Ito（okabe-ito）色覚のタイプにかかわらず見分けやすい配色白
ダークハイコントラスト（dark-high-contrast）暗い背景で高コントラスト。まぶしさが苦手な人向け黒
モノクローム（monochrome）色を使わず明るさの差だけで区別する白

現行テーマで見分けにくくなりやすいのは、赤（--commonColor01）と緑（--commonColor07）で表す状態、成功色と警告色、リンクと本文の色です。どのテーマでも、色だけで情報を伝えず、文字や枠線の太さも併せて使うことが前提になります。

ハイコントラスト ​

項目方針
背景・文字#ffffff と #000000（21:1）
境界線黒の 2px 以上の実線
フォーカス3px 以上のアウトライン
ColorScheme の案
css
:root {
    --primaryColor: #0000cc;
    --primaryDark: #000099;
    --primarySub01: #6666ff;
    --primarySub02: #9999ff;
    --primarySub03: #ccccff;
    --primarySub04: #e6e6ff;
    --commonColor01: #cc0000;
    --commonColor02: #ff3333;
    --commonColor03: #ffcccc;
    --commonColor04: #ffe6e6;
    --commonColor05: #ffffcc;
    --commonColor06: #cc6600;
    --commonColor07: #006600;
    --nonColor01: #000000;
    --nonColor02: #1a1a1a;
    --nonColor03: #333333;
    --nonColor04: #4d4d4d;
    --nonColor05: #666666;
    --nonColor06: #808080;
    --nonColor07: #999999;
    --nonColor08: #b3b3b3;
    --nonColor09: #cccccc;
    --nonColor10: #d9d9d9;
    --nonColor11: #e6e6e6;
    --nonColor12: #f0f0f0;
    --nonColor13: #f5f5f5;
    --nonColor14: #fafafa;
    --nonColor15: #fcfcfc;
    --nonColor16: #ffffff;
    --page-bg: #ffffff;
    --base-text: #000000;
    --base-bg: #ffffff;
    --base-border: #000000;
    --link-text: #0000cc;
    --success-color: #006600;
    --warning-color: #cc0000;
}
要素前景背景コントラスト比WCAG
本文#000000#ffffff21:1AAA
リンク#0000cc#ffffff9.4:1AAA
エラー#cc0000#ffffff5.9:1AA
成功#006600#ffffff7.1:1AAA

Okabe-Ito ​

岡部・伊藤のカラーパレット（8 色）を使います。

色値使い道
Black#000000文字・境界線
Orange#E69F00注意・警告
Sky Blue#56B4E9情報・補助
Bluish Green#009E73成功・完了
Yellow#F0E442強調
Blue#0072B2プライマリ・リンク
Vermillion#D55E00エラー・削除
Reddish Purple#CC79A7アクセント
ColorScheme の案
css
:root {
    --primaryColor: #0072b2;
    --primaryDark: #005a8e;
    --primarySub01: #56b4e9;
    --primarySub02: #a3d5f0;
    --primarySub03: #d4eaf7;
    --primarySub04: #eaf5fb;
    --commonColor01: #d55e00;
    --commonColor02: #e07a33;
    --commonColor03: #f5cdb0;
    --commonColor04: #fae6d5;
    --commonColor05: #fdf8e0;
    --commonColor06: #e69f00;
    --commonColor07: #009e73;
}

ダークハイコントラスト ​

midnight を元に、背景 #000000・文字 #ffffff、リンク #66ccff、フォーカスは黄色（#ffff00）のアウトラインにします。

ColorScheme の案
css
:root {
    --primaryColor: #66ccff;
    --primaryDark: #3399cc;
    --primarySub01: #1a1a2e;
    --primarySub02: #0d0d1a;
    --primarySub03: #2a2a3e;
    --primarySub04: #e6f5ff;
    --commonColor01: #ff6666;
    --commonColor02: #ff9999;
    --commonColor03: #4d0000;
    --commonColor04: #330000;
    --commonColor05: #333300;
    --commonColor06: #ffcc00;
    --commonColor07: #66ff99;
    --nonColor01: #000000;
    --nonColor02: #0d0d0d;
    --nonColor03: #1a1a1a;
    --nonColor04: #262626;
    --nonColor05: #333333;
    --nonColor06: #4d4d4d;
    --nonColor07: #666666;
    --nonColor08: #999999;
    --nonColor09: #b3b3b3;
    --nonColor10: #cccccc;
    --nonColor11: #d9d9d9;
    --nonColor12: #e6e6e6;
    --nonColor13: #f0f0f0;
    --nonColor14: #f5f5f5;
    --nonColor15: #fafafa;
    --nonColor16: #ffffff;
    --page-bg: #000000;
    --base-text: #ffffff;
    --base-bg: #000000;
    --base-border: #cccccc;
    --link-text: #66ccff;
    --success-color: #66ff99;
    --warning-color: #ff6666;
}

モノクローム ​

グレーの濃淡だけを使い、状態は文字のラベルで区別します。

ColorScheme の案
css
:root {
    --primaryColor: #333333;
    --primaryDark: #1a1a1a;
    --primarySub01: #999999;
    --primarySub02: #b3b3b3;
    --primarySub03: #d9d9d9;
    --primarySub04: #f0f0f0;
    --commonColor01: #1a1a1a;
    --commonColor02: #333333;
    --commonColor03: #e6e6e6;
    --commonColor04: #f0f0f0;
    --commonColor05: #fafafa;
    --commonColor06: #4d4d4d;
    --commonColor07: #808080;
    --page-bg: #f5f5f5;
    --base-text: #000000;
    --base-bg: #ffffff;
    --base-border: #333333;
    --link-text: #000000;
    --success-color: #808080;
    --warning-color: #1a1a1a;
}

OS の設定との連携 ​

テーマとは別に、OS のハイコントラスト設定に合わせるメディアクエリを custom.css に足すこともできます。

css
@media (prefers-contrast: more) {
    :root {
        --base-border: #000000;
        --control-border: #000000;
    }
}

@media (forced-colors: active) {
    :root {
        --base-text: CanvasText;
        --base-bg: Canvas;
        --link-text: LinkText;
    }
}

優先順位 ​

対象の人が多い high-contrast と okabe-ito を先に、dark-high-contrast と monochrome を後にします。1 テーマあたりの作業は、custom.css の作成、Context.cs の case 2 か所、選択肢の JSON 2 つです。

関連ページ ​

変更履歴

第2版テーマ改善（UI テーマの刷新）で変わる点と事前確認の手順を追加する
第1版Markdown の描画の仕組み・ショートカットキー・アイコン・公式マニュアルに無い $p 関数の解説と、Markdown 拡張・画像形式・ファビコン・テーマ・和暦などの改修・設計メモを追加