umbraco-theme

Create/edit themes for the Umbraco backend by overriding CSS variables and customizing UI elements.

26|13|Updated Nov 30, 2025
One-click install
npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-theme
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: umbraco-theme
Source: https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills/tree/main/plugins/umbraco-backoffice-skills/skills/umbraco-theme
Command: npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-theme

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill allows for the customization of the Umbraco backoffice's visual appearance, enabling the implementation of custom themes for branding, accessibility, or user preference.

Core Features & Use Cases

  • Theme Implementation: Apply custom visual styles to the Umbraco backoffice.
  • CSS Customization: Override default CSS variables for colors, typography, and layout.
  • Use Case: Implement a dark mode theme for the Umbraco backoffice to reduce eye strain during long working sessions, or apply a branded theme that matches your company's visual identity.

Quick Start

Use the umbraco-theme skill to create a dark mode theme for the Umbraco backoffice.

Frequently Asked Questions about umbraco-theme

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I customize the Umbraco backoffice theme?

Customize the Umbraco backoffice theme by defining CSS variables and overriding visual elements. You register custom themes using Umbraco's extension registry and manifest structure to apply specific branding styles.

Can I create a dark mode theme for the Umbraco backoffice?

Yes, you can create a dark mode theme for the Umbraco backoffice by overriding default CSS variables for colors. This reduces eye strain during long working sessions by applying custom visual styles.

Does Umbraco support high contrast accessibility themes for the backoffice?

Umbraco supports high contrast accessibility themes by allowing you to override CSS variables. This enables specific visual adjustments for user preferences and accessibility requirements within the backoffice interface.

How do I register a custom backoffice theme in Umbraco?

Register a custom backoffice theme in Umbraco by adhering to the extension registry and manifest structure. This process integrates your customized CSS variables and visual overrides into the backoffice environment.

What CSS properties can I override to change Umbraco backoffice branding?

Override default CSS variables for colors, typography, and layout to change Umbraco backoffice branding. This allows you to apply a custom theme that matches your company's visual identity across the interface.

Do I need Umbraco extensions to apply a custom backoffice theme?

Yes, applying a custom backoffice theme requires adherence to Umbraco's extension registry and manifest structure. This framework integration ensures your CSS variable overrides and visual elements are properly loaded.