skills.rest
1k-off
1k-offCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

umbraco-theme

Register Umbraco backoffice themes via manifests and CSS custom properties.

1|Updated May 21, 2026
Search Tags:#branding#accessibility#dark mode#css variables#umbraco#extension registry#backoffice theme
One-click install
npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-theme-1k-off
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-theme
Source: https://github.com/1k-off/umbraco-observability-playground/tree/main/.agents/skills/umbraco-theme
Command: npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-theme-1k-off

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Umbraco backoffice teams need a fast way to deliver branded, accessible UI variations (for example dark mode, high-contrast, or client-specific colors) without manually tweaking styles across the UI.

Core Features & Use Cases

  • Theme implementation using Umbraco theme manifests: register a backoffice theme by defining a theme alias, name, and CSS entry point so users can select it in their profile settings.
  • CSS Custom Properties for consistent styling: override key --uui-color-* variables (surfaces, text, status colors, interactive states, and header colors) to reliably restyle the backoffice.
  • Support for multiple variants: create distinct themes such as dark, high-contrast, or brand themes by providing separate CSS files and swapping which one is registered.

Quick Start

Fetch the latest Umbraco theme docs, then implement your theme manifest and CSS that overrides the relevant --uui-color-* custom properties for your desired look.

Frequently Asked Questions about umbraco-theme

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

FAQPage Schema
How do I create a custom dark mode theme for the Umbraco backoffice?▼

To create an Umbraco backoffice dark mode theme, define a theme manifest with `type: 'theme'` and supply a CSS file that overrides `--uui-color-*` custom properties. This reliably restyles surfaces, text, and interactive states without manual style tweaks.

What CSS variables do I need to override for Umbraco backoffice branding?▼

Umbraco backoffice branding requires overriding `--uui-color-*` CSS custom properties. You adjust variables for surfaces, text, status colors, interactive states, and header colors within your theme's registered CSS loader to deliver consistent client-specific UI variations.

How does theme registration work in the Umbraco extension registry?▼

Theme registration in the Umbraco extension registry involves defining a manifest with `type: 'theme'`, an alias, and a name. You link a CSS entry point via the theme's registered `css` loader so users can select the theme in their profile settings.

Can I implement high-contrast accessibility themes for Umbraco backoffice users?▼

Yes, you can implement high-contrast accessibility themes for Umbraco backoffice users. By providing a separate CSS file that overrides `--uui-color-*` variables for maximum contrast, you swap the registered CSS to support distinct accessibility variants.

What is the best way to apply client-specific colors to Umbraco without manual style overrides?▼

The best way to apply client-specific colors without manual style overrides is implementing an Umbraco theme manifest. You register a branded CSS entry point that defines `--uui-color-*` custom properties, ensuring consistent UI styling across the entire backoffice.

Do I need to manually tweak UI styles across the board for each Umbraco theme variant?▼

No, you do not need to manually tweak styles for each Umbraco theme variant. By swapping which CSS file is registered in your theme manifest, you can support multiple variants like dark, high-contrast, and brand themes efficiently.

Related Skills

Explore More Design & Creative Skills→
albanistrefialbanistrefi
4

umbraco-theme

Generate Umbraco backoffice theme manifests and CSS using --uui-color-* variables.

Community
Intermediate
kraftvaerkkraftvaerk

umbraco-theme

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

Official
Intermediate
kraftvaerkkraftvaerk

umbraco-backoffice

Create Umbraco backoffice extensions using UUI components and blueprints.

Official
Advanced
umbracoumbraco
26

umbraco-theme

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

Official
Intermediate