菜单
Implement themes in Umbraco backoffice using official docs
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Implement UFM (Umbraco Flavored Markdown) components in Umbraco backoffice using official docs
Add a new Umbraco extension project reference to the main Umbraco instance and solution
Understand and use localization in Umbraco backoffice (foundational concept)
Implement property editor UIs in Umbraco backoffice using official docs
Quick setup for Umbraco extension development - creates instance, extension, and registers it
Review checks reference for validating Umbraco backoffice extensions
| name | umbraco-theme |
| description | Implement themes in Umbraco backoffice using official docs |
| version | 1.0.0 |
| location | managed |
| allowed-tools | Read, Write, Edit, WebFetch |
Themes in Umbraco allow you to customize the visual appearance of the backoffice. They can override CSS custom properties to change colors, typography, and other visual elements. This enables dark mode, high contrast, custom branding, or any other visual theme. Users can select themes from their profile settings.
Always fetch the latest docs before implementing:
umbraco-extension-registryimport 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'),
},
];
: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;
}
: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;
}
: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>;
}
--uui-color-surface - Main background--uui-color-surface-alt - Alternative background--uui-color-surface-emphasis - Emphasized background--uui-color-text - Primary text--uui-color-text-alt - Secondary text--uui-color-positive - Success states--uui-color-warning - Warning states--uui-color-danger - Error/danger states--uui-color-interactive - Links, buttons--uui-color-interactive-emphasis - Hover states--uui-color-selected - Selected items--uui-color-header-surface - Header background--uui-color-header-contrast - Header textThat's it! Always fetch fresh docs, keep examples minimal, generate complete working code.