画面の色はどこで決まるか：テーマ（sys_ui_theme）

2026年6月27日 08:59

ServiceNow の管理画面（クラシックUI）を触っていると、ナビゲーションやヘッダ、リストの行の色が、人によって違って見えることがあります。これは テーマ（Theme） という仕組みで、配色をまとめて切り替えているからです。クラシックUIの配色テーマは、テーブル名で言うと sys_ui_theme に1件ずつ保存されています。

この記事は、ServiceNow の Incident などは触ったことがある管理者・開発者を想定しています。「画面の色（テーマ）はどこで決まっているのか」「Kiwi や Tangerine といった名前のテーマは何者か」を知りたい人です。PDI（Zurich / OOTB）で sys_ui_theme を実際に開きます。テーマが「色設定の束」であること、OOTB のテーマ一覧、そしてどうやってユーザーの画面に当たるのかを順に確認します。

この記事で分かること

クラシックUIのテーマは sys_ui_theme の1件＝1テーマで、実体は css フィールドに書かれた色設定の束であること
固有フィールドは name / css / base_theme / device / active の5つだけ、というシンプルな構造であること
PDI 実機に22件のテーマ（Kiwi, Tangerine, Contrast UI, Terminal など）があること
土台になる base_theme（sys_ui_base_theme）は3件であること
テーマがユーザー設定 glide.css.theme を通じて各ユーザーの画面に当たること
名前の似た Service Portal の sp_theme とは別テーブル・別画面・別の当て方であること

この記事の内容は ServiceNow の PDI（Personal Developer Instance）Zurich（ズーリッヒ）リリースの OOTB（初期設定）で確認した個人メモです。本番環境やカスタマイズ済み環境では、テーマ数・フィールド・色設定の内容が異なる場合があります。SCSS のコンパイルや描画の実行時挙動は本記事の範囲外です。

クラシックUIテーマ（sys_ui_theme）とは

テーマとは「画面の配色をまとめて1レコードにした設定」です。下の実画面は、OOTB の Kiwi テーマを1件開いたものです。

注目してほしいのは css 欄です。$text-color: #2f3e14 （フォームやリストのテキスト色）、$highlight-color: #afd76b （入力欄やボタンの色）が並びます。ほかに $accent-color: #8bd016 （ホバー色）もあります。画面の各パーツの色を変数として並べた「色設定の束」になっています。Kiwi なら緑系、Tangerine ならオレンジ系、というように、この色の値が違うだけでテーマの個性が決まります。

PDI（Zurich / OOTB）の sys_ui_theme には、22件のテーマが入っていました。

テーマのフィールドはたった5つ

名前から複雑なテーブルを想像しがちですが、sys_ui_theme の固有フィールドは少なく、構造はとてもシンプルでした。

今回確認した PDI（Zurich / OOTB）では、固有フィールドは次の5つだけでした。

name … テーマ名（Kiwi など）。
css … 色設定の束（最大65000字）。SCSS 変数（$text-color 等）と、base.color: のような色指定が混在します。
base_theme … 土台になる 基盤テーマ（sys_ui_base_theme） への参照。
device … 適用先のUI種別（browser / doctype / concourse）。
active … 有効フラグ。

フィールド定義は次のURLで確認できます（先頭の <YourInstance> は自分のインスタンスに置き換えてください）。

https://<YourInstance>/sys_dictionary_list.do?sysparm_query=name=sys_ui_theme^elementISNOTEMPTY

OOTB のテーマ一覧と base_theme

クラシックUIテーマの一覧を開くと、用意済みのテーマがどれだけあるか分かります。

今回の PDI では22件で、Kiwi・Tangerine・Flamingo・Contrast UI・Cobalt Contrast UI・Terminal・DarkNOW などが並びます。device で見ると Concourse が13件、Doctype が9件でした。concourse は現行のクラシックUI（UI16）向け、doctype はより古いレガシーUI向けの区別だと読み取れます。

各テーマが指す base_theme（基盤テーマ）は sys_ui_base_theme という別テーブルにあります。こちらは Cobalt / La Jolla / Polaris Base の3件だけでした。ほとんどのテーマが Cobalt を土台にし、Contrast UI だけ La Jolla、Polaris だけ Polaris Base を土台にしています。基盤で全体の枠を決め、各テーマの css で色を上書きする、という重ね方です。

テーマはどうやってユーザーの画面に当たるのか

テーマは「作っただけ」では画面に出ません。どのテーマを使うかは、ユーザーごとの設定で決まります。

クラシックUIでは、ユーザーが設定（歯車）からテーマを選ぶと、その選択が sys_user_preference の glide.css.theme という設定値に保存されます。以後、そのユーザーの画面は選んだテーマの色で描かれます。

今回の PDI では、glide.css.theme は system=true・値が空 のシステム既定レコードが確認できました。値が空＝個別の上書きがなく、OOTB の標準配色で表示される状態です。ユーザーがテーマを選ぶと、ここに選択が積まれていきます。なお、画面の選択肢に出る「System default（システム既定）」はテーマレコードの名前ではありません。「ユーザー個別の上書きがない状態」を指す表現で、22件の中にその名前のレコードはありません。

なお、glide.css.theme を選んだあとの実レコード生成・適用の内部処理や、SCSS のコンパイル・配信の仕組みは今回の検証範囲外です。本記事は「テーブルにどう保存され、どう紐づくか」の構造に絞っています。

Service Portal のテーマ（sp_theme）との違い

ここで混同しやすいのが、Service Portal の構造記事で触れた sp_theme（Service Portal のテーマ） です。名前は似ていますが、まったく別のテーブル・別の画面です。

sys_ui_theme（本記事） … クラシックUI（管理・エージェント側）の配色。ユーザーが自分で選びます（glide.css.theme）。今回の PDI で22件。
sp_theme … 利用者向けの Service Portal（/sp 系）の配色・ヘッダ/フッタ。ポータル側（sp_portal.theme）で固定して当てます。前掲の記事の PDI では17件でした。

別の例で確認したいテーマもあります。下は Contrast UI（base_theme=La Jolla / device=concourse）のフォームで、Kiwi とは別系統の色設定が入っています。

まとめ

クラシックUIのテーマは sys_ui_theme の1件＝1テーマです。実体は css フィールドに書かれた色設定の束（SCSS 変数＋色指定）です。
固有フィールドは name / css / base_theme / device / active の5つだけで、構造はシンプルです。
PDI 実機では22件（Kiwi / Tangerine / Contrast UI / Terminal など）でした。土台の base_theme（sys_ui_base_theme）は Cobalt / La Jolla / Polaris Base の3件です。
テーマはユーザー設定 glide.css.theme を通じて各ユーザーの画面に当たります。「System default」は状態を指す表現で、テーマレコード名ではありません。
名前の似た sp_theme（Service Portal）とは別テーブル・別画面・別の当て方です。本記事はクラシックUI側です。

クラシックUIの「画面の見え方」は、テーマ（配色）だけでなく、フォームやリストの構成でも決まります。あわせて次を読むと、ServiceNow の「画面まわり」が配色・構成・部品という形でつながって見えてきます。フォーム構成（sys_ui_form）・関連リストは一覧の列とは別テーブル（sys_ui_related_list）・UI Page（sys_ui_page）・Service Portal の構造（sp_portal〜sp_widget）。

ServiceNow 画面・フォーム完全ガイド：どこを直せば見た目が変わるのか — 画面の配色を決めるテーマの記事です。色以外にフォームやリストの構成まで含めた全体像はこちらのガイドで確認できます。