メインコンテンツへ移動
学習に戻る
07比較読了目安 7 分初心者

ガイド 03 · 比較

light モードと dark モードを比較する

Theme は 1 枚のスクリーンショットではありません。DSH のインターフェース全体で可読性を保つよう調整された、セマンティックトークン状態のペアです。

最終検証日
2026年8月15日
実行時
0.1.0-rc.8
検証済みの範囲
  • 検証済みカタログの標本
  • light / dark のトークンペア
  • システムモード実行境界
このページについて
  1. 同じ条件で比較する
  2. 単独の色見本ではなく、画面上の役割を確認する

同じ条件で比較する

  1. 01

    少数の候補を選ぶ

    Gallery を Theme で絞り込み、検索、カタログ番号、カテゴリーを使って、レビューする候補を少数に絞ります。

  2. 02

    検証済みプレビューを切り替える

    評価基準を変えずに、Gallery の各カードを light と dark に切り替えます。

  3. 03

    トークンの違いを追う

    リリース詳細と Token Lab を開き、意図されたセマンティックな変更と、見栄えをよくするためのプレビューの切り抜きを区別します。

  4. 04

    インストール前に候補を絞る

    比較は選択の補助として使います。インストール前には、対象リリース固有の成果物を改めて確認する必要があります。

単独の色見本ではなく、画面上の役割を確認する

  • 基本背景、浮き上がった背景、オーバーレイ背景の上で、一次ラベルと二次ラベルが読めるか確認します。
  • 隣接するサーフェスを分ける境界線が、画面で最も目立つ要素になっていないか確認します。
  • ブランド、エラー、成功、警告の各役割を、両モードで区別できる状態にします。
  • サイドバーを、コンテンツキャンバスや浮き上がったカードと比較して確認します。
  • Full Skin では、ランタイムのスクリーンショットが、最終生成 CSS と同一オリジンのアセットを示しており、Studio のシミュレーションではないことを確認します。

証拠を確認するツール

よくある質問

変更を行う前に

フォーマット、互換性、証拠、ロールバックに関する回答

このガイドでは何を確認しますか?

このガイドの対象:検証済みカタログの標本、light / dark のトークンペア、システムモード実行境界

最初に何をすべきですか?

Theme は 1 枚のスクリーンショットではありません。DSH のインターフェース全体で可読性を保つよう調整された、セマンティックトークン状態のペアです。

最も重要な境界は何ですか?

DSH では、system は OS のカラーモード設定に従い、light または dark として解決されます。第 3 のトークンセットではありません。また、ページ属性を編集するだけの方法で検証したことにしてはいけません。

学習を続ける

検証済みの証拠から続ける

公開済みのアーティファクトを比較するか、インストール手順に戻ります。