開発・検収用
テーマプレビュー
5つのブランドテーマを切り替えて確認できます。本番では Directus site_settings.active_theme で制御されます。
確認ポイント
- Header のブランドバー + ナビゲーション + CTAボタンの色調
- Hero セクションの背景グラデーションとテキスト色
- カードの枠線・背景・影の変化
- Primary / Secondary ボタンの色味とコントラスト
- Footer の背景色とリンク色
- dark-pro テーマでは全体がダークモードに切り替わること
- 各テーマで文字のコントラストが十分であること
使い方
- URL に
?theme=テーマIDを付けると全ページで一時的にテーマが切り替わります - 例:
/?theme=dark-pro,/products?theme=high-tech-blue - リロードすると Directus 設定のデフォルトテーマに戻ります
- Directus での恒久的なテーマ変更は
site_settings.active_themeで行います
現在のテーマ: —
このページを ?theme=xxx 付きで開くと、現在のテーマ名がここに表示されます。