テーマ改善（UI テーマの刷新）への備え

第1版作成 2026/10/02 22:00最終更新 2026/10/02 22:00（日本時間）

確認バージョン1.5.8.11.5.8.9

テーマまわりを刷新する「テーマ改善」が 2027 年 1 月に正式リリースされる予定です。標準の画面は自動で切り替わりますが、サイトのスタイル・スクリプト・HTML、テナントのスクリプト・スタイル、拡張スタイル・拡張スクリプトは追従しません。正式リリースの前に、Implem/Implem.Pleasanter.UiThemesPreflight で配布されている動作確認モジュール（1.5.8.9、1.5.8.1 ベース）と事前確認ツール PleasanterUiLint で影響を確かめ、直したコードをドラフトで用意しておきます。

このページは、動作確認モジュールの配布物（JSON・CSS・JavaScript・README）と PleasanterUiLint の出力を 1.5.8.1 のソースと突き合わせた結果です。動作確認モジュールのソースは公開されていないため、配布物から決められなかったことはその旨を書いています。正式リリース版では変わる可能性があります。

運用中のプリザンターを動作確認モジュールに上げない

動作確認モジュールは確認用の特別版で、通常版へのアップデートの挙動は保証されていません。運用環境とは別に、別の URL で新しく立ち上げます。

スケジュール

時期	内容
2026 年 9 月末	動作確認モジュールの配布（Releases のタグ `1.5.8.9`）
2026 年 10 月〜12 月	確認・修正の期間（ドラフトで準備）
2026 年 12 月中旬	表示崩れなどを正式版に反映してほしい場合の連絡の目安
2027 年 1 月	正式リリース（予定）

動作確認モジュールは致命的な不具合（起動できない・データが壊れる等）以外は修正されません。不具合は GitHub Issue か Pleasanter 専用フォームで報告します（Issue は公開されるので、業務データや認証情報を含めない）。

変わること

観点	1.5.8.1	テーマ改善（1.5.8.9）
レイアウトの世代	テーマ名から決まる	UI タイプ（第一世代 / 第二世代）として独立した設定
テーマ	jQuery UI テーマを含む 29 個	プリセット 8・ハイコントラスト 3 の 11 個 + カスタム
カラーモード	ダーク用のテーマを選ぶ	ライト / ダーク / 自動（端末の設定に追従）
本体の CSS	`legacy.min.css` / `style.min.css`	`style-type1.min.css` / `style-type2.min.css`
テーマの CSS	`themes/{テーマ}/custom.css`（v2 は約 210 個の CSS 変数）	`themes/{テーマ}.css`（カラーモードと 3 色）
CSS 変数	213 個（cerulean）	うち 96 個の定義が無くなる
クラス名・ID・`$p` API	—	PleasanterUiLint のカタログで breaking 56 件・risky 17 件

UI タイプとテーマの分離

1.5.8.1 では、cerulean・green-tea・mandarin・midnight を選ぶと v2 のレイアウト、それ以外のテーマは v1 のレイアウトになります（Context.cs#L1544-L1570）。テーマ改善では、個人設定・テナント設定に「外観」が加わり、ユーザーとテナントのそれぞれに次の項目を設定します。

項目	列名	内容
UI タイプ	`UiType`	第一世代 / 第二世代
テーマ	`Theme`	選択肢が固定の 29 個から `[[Themes]]` に変わる
カラーモード	`UiColorScheme`	ライト / ダーク / 自動
メインカラー・サブカラー・背景色	`UiMainColor`・`UiSubColor`・`UiBackgroundColor`	カスタムテーマの色。7 文字（`#RRGGBB`）

UiType などの列は 1.5.8.0 で DB に先に追加されていて（10d4730c）、1.5.8.1 では画面に出ません。動作確認モジュールでは列定義に編集用の設定（EditorColumn・ControlType・ChoicesText）が足されています。

User.json には既定値が加わります（ParametersPatch.zip の 01.05.08.09/User.json も同じ内容）。

json

{
    "Theme": "cerulean",
    "UiType": 2,
    "UiColorScheme": "light",
    "UiMainColor": null,
    "UiSubColor": null,
    "UiBackgroundColor": null
}

テーマ

テーマは wwwroot/assets/themes/{名前}.css の 1 ファイルで、先頭のコメント（@pleasanter-theme）に並び順・グループ・名前を持ちます。プリセットはカラーモードと --primaryColor・--secondaryColor・--backgroundFixed の 3 つだけを定義し、ほかの色は本体の CSS が相対色構文（oklch(from …)）・color-mix()・light-dark() で作ります。

グループ	テーマ（ファイル名）	カラーモード
プリセット	セルリアン（`cerulean`）・サニー（`sunny`）・グリーンティ（`green-tea`）・マンダリン（`mandarin`）・さくら餡（`sakura-an`）	ライト
プリセット	ミッドナイト（`midnight`）・トワイライト（`twilight`）・茄子紺（`eggplant`）	ダーク
ハイコントラスト	紺 / 白（`navy-white`）	ライト
ハイコントラスト	黄 / 黒（`yellow-black`）・シアン / 黒（`cyan-black`）	ダーク

ハイコントラストのテーマは境界線・メッセージの色・日本語フォント（BIZ UDPゴシックなど）まで上書きします。

次の 23 テーマは無くなります。設定しているユーザー・テナントがどのテーマで表示されるかは、配布物からは確認できませんでした（1.5.8.1 では、選択肢に無い値は「ユーザー → テナント → User.json → cerulean」の次の候補に落ちます。Context.cs#L1529-L1542）。

text

base black-tie blitzer cupertino dark-hive dot-luv excite-bike flick hot-sneaks humanity
le-frog mint-choc overcast pepper-grinder redmond smoothness south-street start
swanky-purse trontastic ui-darkness ui-lightness vader

sunny・eggplant は名前が残りますが、jQuery UI テーマから新しい方式に変わり、eggplant はダークの配色になります。

CSS 変数

1.5.8.1 の cerulean/custom.css が定義する 213 個のうち、96 個は動作確認モジュールのどの CSS（style-type2.min.css と全テーマ）にも定義がありません。var() で参照していてもエラーにはならず、代替値（var(--x, 代替) の第 2 引数）かプロパティの初期値になって、色や枠だけが当たらなくなります。

区分	主な変数
残る（117 個）	`--primaryColor`・`--primarySub01`〜`04`・`--page-bg`・`--breadcrumb-bg`・`--btn-`（ボタン 4 種）・`--grid-cell-bg`・`--guide-bg`・`--tooltip-`・`--sd-*`
無くなる（96 個）	`--base-`・`--commonColor01`〜`07`・`--nonColor01`〜`16`・`--control-`・`--link-text`・`--success-color`・`--warning-color`・`--primaryDark`・`--grid-cell-border`・`--grid-cell-hover`・`--scrollbar-thumb`・`--u-modal-`・`--ui-tabs-` など

無くなる 96 個の一覧

text

--base-bg --base-bg-light --base-border --base-dark-layer --base-shadow --base-text
--commonColor01 --commonColor02 --commonColor03 --commonColor04 --commonColor05
--commonColor06 --commonColor07
--nonColor01 --nonColor02 --nonColor03 --nonColor04 --nonColor05 --nonColor06 --nonColor07
--nonColor08 --nonColor09 --nonColor10 --nonColor11 --nonColor12 --nonColor13 --nonColor14
--nonColor15 --nonColor16
--control-bg --control-bg-focus --control-bg-read --control-border --control-border-focus
--control-error --control-text --control-text-read
--defaultIconUrl --editer-comment-bg --editor-bg
--fieldset-group-border --fieldset-group-header--text --fieldset-group-header-bg
--fieldset-group-header-border --fieldset-group-header-featured-bg
--fieldset-group-header-featured-border --fieldset-group-header-featured-text
--footer-command-bg
--grid-cell-border --grid-cell-heading --grid-cell-hover --grid-cell-vborder
--grid-comment-bg --grid-comment-border --grid-focus-inform-bg --grid-focus-inform-border
--guide-text
--hamburger-opener-icon --hamburger-outer-bg --hamburger-subnavi-bg
--hamburger-subnavi-hover --hamburger-trigger-icon
--invert-border --invert-text --link-text --password-tool-icon --primaryDark
--recommend-guide-link-text --scrollbar-thumb --scrollbar-thumb-hover --sd-base-bg
--sd-body-border --sd-unit-grid-shadow-color
--selectable-bg --selectable-border --selectable-btn-bg --selectable-btn-border
--site-panal-bg --start-guide-hover --success-color
--template-viewer-bg --template-viewer-detail --template-warning-bg --template-warning-text
--u-modal-bg --u-modal-body-bg --u-modal-close --u-modal-footer-bg --u-modal-scroll
--u-modal-scroll-hover --ui-multiselect-header-bg --ui-multiselect-header-border
--ui-tabs-bg --ui-tabs-btn --ui-tabs-btn-border --warning-color

PleasanterUiLint は CSS 変数を調べない

PleasanterUiLint のカタログの対象は、クラス名・ID・標準スタイルのセレクタ・$p API の 4 種類です。上の変数を使ったカスタム CSS は検出 0 件になるので、カスタム CSS を var(-- で検索して自分で確かめます。名前だけの比較なので、残る変数の役割が同じかどうかも画面で確認してください。

クラス名・ID・`$p` API

PleasanterUiLint で 1.5.8.1 → 1.5.8.9 のカタログを作ると 201 件になります。

カタログの判定	種別	件数	意味
breaking	DOM のクラス	42	サーバーが出力するクラスから消えた
breaking	DOM の ID	12	サーバーが出力する ID から消えた
breaking	`$p` API	2	`$p.generatePassword`・`$p.generatePasswordButton`
risky	標準スタイル	17	標準 CSS の定義だけが消えた（`.control-checkbox`・`.CalendarBody`・`.main-form`・`.menu` など）
info	標準スタイル	128	`.w50`〜`.w600`・`.h100`〜`.h600`・`.xdsoft_`・`.fc-`・`.status-*` など

breaking の名前を動作確認モジュールの DLL の文字列・CSS・JavaScript で検索すると、半分ほどは残っていました（both・field-auto-thin・separator・date-field・current-user・calendar-container・h250 など）。文字列が残っていても同じ画面の同じ要素に付くとは限らず、逆に breaking が全部消えるとも限りません。breaking は「消える候補」と考え、画面で確かめます。

どこにも見つからなかった（消えた可能性が高い）ものは次のとおりです。

種別	名前（`→` はツールが名前の近さから出す改名候補）
クラス	`button-edit-markdown`・`calendar-row`（→ `calendar-body`）・`control-basket`・`control-text`・`crosstab-row`（→ `crosstab-body`）・`dashboard-custom-body`（→ `dashboard-part-body`）・`dashboard-custom-html-body`（→ `dashboard-custom-html-container`）・`dashboard-part-nav`・`fieldset-inner-bottom`・`hamburger-menuwrap-left`・`input-hidden`・`kamban-row`・`kambanbody`（→ `kamban-body`）・`license-expired-alert`（→ `c-license-expired`）・`lower-search-ui`・`radio-option`・`select-field`・`site-image-thumbnail`・`spinner-field`
ID	`BottomMargin`・`BulkUpdateColumnDetailMessage`・`DoNotHaveEnoughColumnsField`・`LoginLogo`・`SimpleModeToggleContainer`・`Tenants_BGServerScript_ScheduleInputPanel`
`$p` API	`$p.generatePassword`・`$p.generatePasswordButton`（パスワード生成のアイコンは残るが、`$p` の関数ではなくなる）

改名候補は名前の似ている度合いからの推定で、実際の改名とは限りません。実際の画面での変わり方は次の節で確かめています。

セレクタの変更例（実際の画面で比較）

1.5.8.1（Docker Hub の implem/pleasanter:1.5.8.1、既定テーマ cerulean）と動作確認モジュールを起動し、同じ設定の記録テーブル（ラジオボタン・読取専用・日付・チェック・状況・添付ファイルの項目、カンバン・カレンダー・クロス集計のビュー）を作って、描画後の HTML を比べました。

場所	1.5.8.1	テーマ改善
ラジオボタン	`div.container-normal.container-radio > label.radio-option`	`div.container-normal > div.c-radio-group > label.c-radio`
チェックボックス	`label.check-option`	`label.c-checkbox`
読取専用の項目	`span.control-text`	`span.control-readonly`
日付	`date-field.date-field`	`date-field.c-date-field`（要素名は同じ）
ドロップダウン（状況など）	`div.select-field > select`	`div.c-select > select`
添付ファイル	`div.container-normal` の直下に `input.control-attachments`・`div.upload` など	`div.container-normal > div.c-attachments` の中に入る
カンバン	`div#KambanBody.kambanbody > grid-container#GridWrap > table.grid.fixed > tbody > tr.kamban-row > td.kamban-container`	`div#KambanBody.kamban-body > table.grid > tbody > tr > td.kamban-cell > div.kamban-items`
カンバン・クロス集計の見出し行	`thead > tr.ui-widget-header`（カンバンは `.dashboard-kamban-header` も）	`thead > tr`（クラスなし）
クロス集計	`div#CrosstabBody > grid-container#GridWrap > table.grid.fixed > tbody > tr.crosstab-row`	`div#CrosstabBody.crosstab-body > table.grid > tbody > tr`
カレンダー（FullCalendar）	`div#FullCalendar.calendar-container.fc`	`div#Calendar.fullcalendar-container > div#FullCalendar.fullcalendar-body.fc`
ヘッダーのユーザー名	`#AccountUserName > span.ui-icon.ui-icon-person + span.account-name`	`#AccountUserName > span.c-icon > span.icon-symbol + span.icon-label`
ヘッダーの検索欄	`#SearchField > div.input-field`	`#SearchField > div.c-text-field`
ハンバーガーメニュー	`div.hamburger-menuwrap.hamburger-menuwrap-left > section.accordion > nav#Navigations`、`div.hamburger-closelabel > label.hamburger-cover`	`div.hamburger-menuwrap > nav#Navigations.hamburger-menubox > section.accordion`、`div.hamburger-cover`。`#NavigationsUpperRight` もメニューの中に入る
一覧の集計	`div#ReduceAggregations.display-control` の後ろに `span.label`・`span.data`	`div#ReduceAggregations.view-display-control` と `div.aggregation-items > div.aggregation-unit > span.label`
`body`	クラスなし	`theme-version-2_0 ui-type-2`（UI タイプ 1 では `theme-version-1_0 ui-type-1`）

一方、次のものは変わっていません。セレクタはこれらを起点にすると、両方の版で効きます。

項目の ID（#Results_ClassA・#Results_ClassAField など）と、外側の .field-normal / .field-wide・.field-label・.field-control・.container-normal
入力要素のクラス（.control-radio・.control-checkbox・.control-textbox・.control-dropdown・.control-attachments）と、.radio-icon / .radio-text・.check-icon / .check-text
読取専用の data-value・data-readonly="1"、日付の要素名 date-field
#KambanBody・#CrosstabBody・#FullCalendar（.fc も付く）

UI タイプを第一世代にしても HTML は戻らない

動作確認モジュールでユーザーの UI タイプを 1（第一世代）にしても、body のクラス以外は第二世代と同じ HTML でした。読み込む CSS が変わるだけで、1.5.8.1 の HTML の構造には戻りません。

書き換えの例です。移行期間に両方の版で効かせたいときは、:is() で並べます。

css

/* ラジオボタンの選択中の選択肢 */
/* 1.5.8.1 */
.container-radio .radio-option:has(input:checked) { background: var(--primaryColor); }
/* テーマ改善 */
.c-radio-group .c-radio:has(input:checked) { background: var(--primaryColor); }
/* どちらでも */
:is(.container-radio .radio-option, .c-radio-group .c-radio):has(input:checked) {
  background: var(--primaryColor);
}

/* カンバンのセル */
/* 1.5.8.1 */
#KambanBody.kambanbody .kamban-row td.kamban-container { min-width: 200px; }
/* テーマ改善 */
#KambanBody.kamban-body tbody td.kamban-cell { min-width: 200px; }
/* どちらでも */
#KambanBody tbody td:is(.kamban-container, .kamban-cell) { min-width: 200px; }

/* カレンダー（FullCalendar）の土曜日 */
/* 1.5.8.1 */
[id^="FullCalendar"].calendar-container .fc-day-sat { background: #eef6ff; }
/* どちらでも（#FullCalendar にはどちらの版でも .fc が付く） */
#FullCalendar.fc .fc-day-sat { background: #eef6ff; }

// 読取専用の項目の値
// 1.5.8.1 だけで動く
$('#Results_ClassB.control-text').data('value');
// どちらでも動く（ID と data-readonly は変わらない）
$('#Results_ClassB[data-readonly="1"]').data('value');

:is() の中のセレクタのうち一番高い詳細度が、全体の詳細度になります。標準の CSS との優先順位が変わるときは、画面で確かめてください。

確認の手順

図を読み込み中…

直したコードは、運用中のサイトにドラフトで登録しておけば、表示に影響を与えずに準備できます。

PleasanterUiLint を実行する

Releases の PleasanterUiLint.zip を展開したフォルダで実行します。Python 3.12 以上（pip 不要）と git、Implem/Implem.Pleasanter の clone が要ります。DB から直接読むときは sqlcmd・psql・mysql のいずれかも使います。DB へは読み取りだけで、書き込みはしません。

git clone https://github.com/Implem/Implem.Pleasanter.git
python tools/check.py --repo C:/GitHub/Implem.Pleasanter --pleasanter C:/web/pleasanter/Implem.Pleasanter

現在のバージョンは --pleasanter のフォルダの Implem.Pleasanter.dll（無ければ Implem.Pleasanter.csproj）から検出します。違うときは --version Pleasanter_1.5.3.0 のようにタグ名で指定します（数字だけでは見つからない）。clone が古いと新しいタグが無いので、git -C <clone> fetch --tags しておきます
接続先は App_Data/Parameters/Service.json の Name で決まります。python tools/dbconfig.py <本体フォルダ> で事前に確認できます（パスワードは伏せて表示）
DB に直接つなげないときは、tools/sql/collect_{sqlserver,postgres,mysql}.sql の 3 つのクエリの結果を JSON で保存し、--sites・--tenants・--extensions・--extended-dir で渡します
--fix-dir を付けると、改名候補を当てた修正案と差分を出します（DB には書き戻さない）
1.4.18.1 以前からの比較では、標準スタイルの変更は検出できません（クラス・ID・$p API は検出できる）

調べる場所と出力は次のとおりです。

調べる場所	中身
`Sites.SiteSettings`	サイトの Scripts / Styles / Htmls（HTML はクラス名・ID と `<script>`・`<style>` の中身）
`Tenants.TopScript` / `TopStyle`	テナント共通のスクリプト・スタイル
`Extensions` テーブル	拡張機能として登録したもの
`App_Data/Parameters/Extended*`	サーバーに置いた拡張ファイル

出力	内容
`output/findings/report.html`	重要度つきのレポート。理由ごとの表示は既定 300 行まで（`--max-rows`）
`output/findings/findings.csv`	全件。プリザンターに取り込んで移行タスクの管理テーブルにできる
`output/catalog/*.md`	消えたクラス・ID・API の一覧（カタログ）

Linter の判定は、BREAKING（消えた名前を参照）・RISKY（標準スタイルが消えた、または .a > .b・:nth-child などの構造に依存するセレクタ）・UNKNOWN（$('.' + name) のように組み立てたセレクタ）の 3 段階です。DOM の階層の変化、見た目の崩れ、CSS 変数は検出しません。検出 0 件でも画面での確認は省けません。

確認環境を用意する

方法	やり方	向いているケース
A（推奨）	別の URL・別の DB で動作確認モジュールを立て、確認したいサイトをサイトパッケージでインポート	確認したいサイトが少ない
B（推奨）	運用 DB のバックアップを、動作確認モジュール用の DB に復元	テナント共通のスタイル・スクリプトや拡張機能も含めて全体を確認したい
C	動作確認モジュールの `Rds.json` を運用 DB に向ける	特別な事情があるときだけ

セットアップは公式マニュアルの手動インストール（Windows）やインストール手順の一覧に沿います。動作環境は .NET 10、SQL Server・PostgreSQL・MySQL です。

確認する画面

普段よく使う画面と、カスタマイズを入れている画面から見ます。

記録テーブル・期限付きテーブルの一覧画面と編集画面
ダッシュボード
「ボタンの位置がずれる」「色や枠が当たらない」「独自のボタンが動かない」が出たら、そのカスタマイズが影響を受けています
各 UI タイプ・カラーモード（ライト / ダーク）・ハイコントラストで表示し、var() の色や固定色が読めるかも確かめます

注意点

同梱のテスト用拡張スクリプトを外す

Pleasanter_1.5.8.9.zip の App_Data/Parameters/ExtendedScripts/ には test1.js・test2.js が入っていて、拡張スクリプトとして読み込まれます。コンソールにログを出すほか、test2.js は $p.events.on_crosstab_load を書き換えて、クロス集計を開くと「クロス集計を読み込みました。」と表示します。自分のカスタマイズの確認と混ざるので、確認の前に削除するか拡張子を変えます（拡張スクリプトの仕組み）。

方法 C では運用 DB のスキーマに注意する

UiType などの列は 1.5.8.0 で追加されたので、それより前の DB にはありません。新しい版の CodeDefiner を運用 DB に向けて実行すると運用 DB のスキーマが変わります。運用中の版が古いときは方法 A・B を使います。

パスキーの Origins

動作確認モジュールの Authentication.json では、パスキーの Origins の既定値が https://localhost:44331 から https://localhost に変わっています。パスキーまで確認するなら、確認環境の URL に合わせます。

このサイトのレシピへの影響

このサイトのレシピのコードを、上のカタログと CSS 変数の一覧で機械的に検索した結果です（文字列の一致なので、すべてが実際に壊れるとは限りません）。使っている場合は動作確認モジュールで確かめてください。

ページ	当たったもの
編集画面のカスタマイズ	`.container-radio .radio-option`（選択肢のボタン化。実画面で `.c-radio-group .c-radio` に変わることを確認）、`--base-text`・`--control-*`、risky の `.control-checkbox`・`.ui-widget-header`
入力支援	`--base-*`
管理画面の使い勝手改善	`.h250`（項目設定欄の高さ）、`--nonColor04`・`--nonColor07`
添付ファイル・CAD・Excel ファイルのプレビュー	`--base-*`・`--u-modal-bg`・`--scrollbar-thumb`・`--warning-color`、risky の `.control-attachments`
ナビゲーションとテーマ	v2 テーマの切替 FAB などで多数の CSS 変数（`--commonColor`・`--nonColor`・`--base-*` ほか）。テーマ名と v2 判定を前提にした部分
カレンダー	`[id^="FullCalendar"].calendar-container`（実画面で `.calendar-container` が無くなることを確認。`#FullCalendar.fc` などに書き換える）、risky の `.CalendarBody`
アナウンス機能の改善	`--base-border`
ダッシュボード	`.dashboard-custom-html-body`
モーダルダイアログのラッパー	`--base-*`
Box 連携フィールド	`--base-bg`・`--base-border`・`--control-border`

テーマ改善の標準のハイコントラストテーマは、アクセシビリティテーマの追加の設計メモとは別のものです。

テーマ改善（UI テーマの刷新）への備え

スケジュール

変わること

UI タイプとテーマの分離

テーマ

CSS 変数

クラス名・ID・`$p` API

セレクタの変更例（実際の画面で比較）

確認の手順

PleasanterUiLint を実行する

確認環境を用意する

確認する画面

注意点

同梱のテスト用拡張スクリプトを外す

方法 C では運用 DB のスキーマに注意する

パスキーの Origins

このサイトのレシピへの影響

関連ページ

変更履歴

テーマ改善（UI テーマの刷新）への備え ​

スケジュール ​

変わること ​

UI タイプとテーマの分離 ​

テーマ ​

CSS 変数 ​

クラス名・ID・$p API ​

セレクタの変更例（実際の画面で比較） ​

確認の手順 ​

PleasanterUiLint を実行する ​

確認環境を用意する ​

確認する画面 ​

注意点 ​

同梱のテスト用拡張スクリプトを外す ​

方法 C では運用 DB のスキーマに注意する ​

パスキーの Origins ​

このサイトのレシピへの影響 ​

関連ページ ​

変更履歴

テーマ改善（UI テーマの刷新）への備え

スケジュール

変わること

UI タイプとテーマの分離

テーマ

CSS 変数

クラス名・ID・`$p` API

セレクタの変更例（実際の画面で比較）

確認の手順

PleasanterUiLint を実行する

確認環境を用意する

確認する画面

注意点

同梱のテスト用拡張スクリプトを外す

方法 C では運用 DB のスキーマに注意する

パスキーの Origins

このサイトのレシピへの影響

関連ページ