umbraco-theme

Umbraco テーマ

これは何ですか？

Umbraco のテーマを使用すると、バックオフィスの外観をカスタマイズできます。CSS カスタムプロパティを上書きして、色、タイポグラフィ、その他の視覚要素を変更できます。これにより、ダークモード、ハイコントラスト、カスタムブランディング、その他任意のビジュアルテーマが実現できます。ユーザーはプロファイル設定からテーマを選択できます。

ドキュメント

実装する前に、常に最新のドキュメントを取得してください：

• Foundation: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation
• Extension Registry: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-registry
• Themes: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types

関連する Foundation スキル

• Extension Registry: テーマを登録する場合
  • 参照スキル: umbraco-extension-registry

ワークフロー

1. ドキュメントを取得 - 上記の URL に対して WebFetch を使用します
2. 質問する - どのような色ですか？ダーク/ライト？ブランドカラーは？
3. ファイルを生成 - 最新のドキュメントに基づいてマニフェスト + CSS を作成します
4. 説明 - 作成した内容とテスト方法を示します

最小限の例

マニフェスト (manifests.ts)

import type { ManifestTheme } from '@umbraco-cms/backoffice/extension-registry';

export const manifests: Array<ManifestTheme> = [
  {
    type: 'theme',
    alias: 'My.Theme.Dark',
    name: 'My Dark Theme',
    css: () => import('./dark-theme.css?inline'),
  },
];

CSS テーマファイル (dark-theme.css)

:root {
  /* Background colors */
  --uui-color-surface: #1e1e1e;
  --uui-color-surface-alt: #252526;
  --uui-color-surface-emphasis: #2d2d30;

  /* Text colors */
  --uui-color-text: #d4d4d4;
  --uui-color-text-alt: #9d9d9d;

  /* Primary/accent colors */
  --uui-color-default: #3c3c3c;
  --uui-color-positive: #4ec9b0;
  --uui-color-warning: #dcdcaa;
  --uui-color-danger: #f14c4c;

  /* Interactive colors */
  --uui-color-interactive: #569cd6;
  --uui-color-interactive-emphasis: #9cdcfe;

  /* Border colors */
  --uui-color-border: #3c3c3c;
  --uui-color-border-standalone: #454545;

  /* Header */
  --uui-color-header-surface: #1e1e1e;
  --uui-color-header-contrast: #d4d4d4;

  /* Selected states */
  --uui-color-selected: #264f78;
  --uui-color-selected-contrast: #ffffff;
}

ハイコントラストテーマ (high-contrast-theme.css)

:root {
  /* High contrast for accessibility */
  --uui-color-surface: #000000;
  --uui-color-surface-alt: #0a0a0a;

  --uui-color-text: #ffffff;
  --uui-color-text-alt: #e0e0e0;

  --uui-color-border: #ffffff;
  --uui-color-border-standalone: #ffffff;

  --uui-color-interactive: #ffff00;
  --uui-color-interactive-emphasis: #00ffff;

  --uui-color-focus: #ff00ff;
}

ブランドテーマ (brand-theme.css)

:root {
  /* Custom brand colors */
  --uui-color-current: #your-brand-primary;
  --uui-color-current-contrast: #ffffff;
  --uui-color-current-standalone: #your-brand-darker;

  /* Header with brand color */
  --uui-color-header-surface: #your-brand-primary;
  --uui-color-header-contrast: #ffffff;

  /* Interactive elements use brand */
  --uui-color-interactive: #your-brand-primary;
  --uui-color-interactive-emphasis: #your-brand-lighter;
}

インターフェースリファレンス

interface ManifestTheme extends ManifestPlainCss {
  type: 'theme';
}

interface ManifestPlainCss {
  type: string;
  alias: string;
  name: string;
  css: () => Promise<{ default: string } | string>;
}

一般的な CSS カスタムプロパティ

サーフェス

• --uui-color-surface - メインの背景
• --uui-color-surface-alt - 代替の背景
• --uui-color-surface-emphasis - 強調された背景

テキスト

• --uui-color-text - プライマリテキスト
• --uui-color-text-alt - セカンダリテキスト

ステータスカラー

• --uui-color-positive - 成功状態
• --uui-color-warning - 警告状態
• --uui-color-danger - エラー/危険状態

インタラクティブ

• --uui-color-interactive - リンク、ボタン
• --uui-color-interactive-emphasis - ホバー状態
• --uui-color-selected - 選択された項目

ヘッダー

• --uui-color-header-surface - ヘッダーの背景
• --uui-color-header-contrast - ヘッダーのテキスト

ベストプラクティス

• すべての UI コンポーネントでテーマをテストする
• アクセシビリティのために十分なコントラストを確保する
• ダーク/ライトモードのバリアントを検討する
• 一貫性のために CSS カスタムプロパティを使用する

以上です！常に最新のドキュメントを取得し、例は最小限に保ち、完全に動作するコードを生成してください。