umbraco-theme by umbraco/umbraco-cms-backoffice-skills
npx skills add https://github.com/umbraco/umbraco-cms-backoffice-skills --skill umbraco-themeUmbraco 中的主题允许您自定义后台管理界面的视觉外观。它们可以覆盖 CSS 自定义属性来更改颜色、排版和其他视觉元素。这实现了深色模式、高对比度、自定义品牌或任何其他视觉主题。用户可以从其个人资料设置中选择主题。
在实施前请务必获取最新文档:
umbraco-extension-registry广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
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'),
},
];
:root {
/* 背景颜色 */
--uui-color-surface: #1e1e1e;
--uui-color-surface-alt: #252526;
--uui-color-surface-emphasis: #2d2d30;
/* 文本颜色 */
--uui-color-text: #d4d4d4;
--uui-color-text-alt: #9d9d9d;
/* 主色/强调色 */
--uui-color-default: #3c3c3c;
--uui-color-positive: #4ec9b0;
--uui-color-warning: #dcdcaa;
--uui-color-danger: #f14c4c;
/* 交互颜色 */
--uui-color-interactive: #569cd6;
--uui-color-interactive-emphasis: #9cdcfe;
/* 边框颜色 */
--uui-color-border: #3c3c3c;
--uui-color-border-standalone: #454545;
/* 页眉 */
--uui-color-header-surface: #1e1e1e;
--uui-color-header-contrast: #d4d4d4;
/* 选中状态 */
--uui-color-selected: #264f78;
--uui-color-selected-contrast: #ffffff;
}
:root {
/* 高对比度,便于访问 */
--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 {
/* 自定义品牌颜色 */
--uui-color-current: #your-brand-primary;
--uui-color-current-contrast: #ffffff;
--uui-color-current-standalone: #your-brand-darker;
/* 使用品牌颜色的页眉 */
--uui-color-header-surface: #your-brand-primary;
--uui-color-header-contrast: #ffffff;
/* 交互元素使用品牌色 */
--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 - 主背景--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 - 页眉文本就是这样!请务必获取最新文档,保持示例简洁,生成完整可用的代码。
每周安装数
73
代码仓库
GitHub 星标数
17
首次出现
2026年2月4日
安全审计
安装于
github-copilot53
cursor23
opencode21
codex21
gemini-cli19
amp19
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.
Weekly Installs
73
Repository
GitHub Stars
17
First Seen
Feb 4, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
github-copilot53
cursor23
opencode21
codex21
gemini-cli19
amp19
Tailwind CSS 最佳实践指南 | Mastra AI 官方样式规范与组件库使用规则
529 周安装