메뉴
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.