umbraco-theme

Implement custom visual themes in the Umbraco backoffice using CSS custom properties.

Updated Mar 6, 2026
One-click install
npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-theme-kraftvaerk
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: umbraco-theme
Source: https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy/tree/main/Kraftvaerk.Umbraco.Alchemy.Frontend/.agents/skills/umbraco-theme
Command: npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-theme-kraftvaerk

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 themes for dark mode, high contrast, or custom branding.

Core Features & Use Cases

  • Theme Implementation: Apply custom CSS to alter colors, typography, and overall look and feel.
  • Accessibility: Create high-contrast themes for users with visual impairments.
  • Branding: Implement company-specific branding within the Umbraco interface.
  • Use Case: A company wants to apply its brand colors and a dark theme to the Umbraco backoffice to match its corporate identity and improve developer experience.

Quick Start

Fetch the latest Umbraco theming documentation and create a new dark theme manifest and CSS file.

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 appearance with a custom theme?

Umbraco supports creating custom themes by leveraging official documentation and extension points, allowing you to apply custom CSS for dark mode, high contrast, or brand-specific styling through CSS custom properties.

Can I implement a dark mode theme in the Umbraco backoffice?

Yes, implementing a dark mode theme in the Umbraco backoffice is supported by defining custom CSS custom properties and registering the theme via the Umbraco extension registry and manifest structure.

Does Umbraco support high contrast themes for backoffice accessibility?

Umbraco supports backoffice accessibility by allowing you to create high contrast themes, utilizing CSS custom properties and extension points to alter visual appearance for users with visual impairments.

What is the best way to apply custom branding to the Umbraco interface?

The best way to apply custom branding to the Umbraco interface is by implementing company-specific styling through CSS custom properties, ensuring adherence to Umbraco's extension registry and manifest structure for theme registration.

Do I need a specific manifest structure to register an Umbraco backoffice theme?

Yes, registering an Umbraco backoffice theme requires strict adherence to Umbraco's extension registry and manifest structure to properly implement custom visual themes and apply the associated CSS files.