skills.rest
albanistrefi
albanistrefiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

umbraco-theme

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

4|Updated Mar 6, 2026
Search Tags:#theme#dark mode#umbraco#backoffice#css custom properties#extension registry
One-click install
npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-theme-albanistrefi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-theme
Source: https://github.com/albanistrefi/umbraco_CLI/tree/main/skills/extensions/umbraco-theme
Command: npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-theme-albanistrefi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you implement an Umbraco backoffice theme safely and correctly by translating the official theme guidance into working manifest and CSS that developers can ship.

Core Features & Use Cases

  • Fetch and apply official documentation: Retrieves the latest Foundation, Extension Registry, and Theme guidance before generating implementation files.
  • Generate a theme manifest: Produces a theme registration manifest that matches Umbraco’s expected extension-registry structure (type, alias, name, and CSS loader).
  • Create themed CSS using official custom properties: Builds CSS files that override the documented --uui-color-* variables to deliver dark mode, high-contrast, or brand styling.
  • Explain what to test: Clarifies how the created theme should be validated in the backoffice, based on what was generated.

Quick Start

Fetch the latest Umbraco theme documentation and ask the Skill to generate a manifest and a dark-mode CSS file using your brand colors for the --uui-color-* custom properties.

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 a custom dark mode theme for the Umbraco backoffice, you generate an extension-registry manifest and a CSS file that overrides the official `--uui-color-*` custom properties. This applies the documented variables to deliver your desired dark mode or brand styling.

What are Umbraco backoffice CSS custom properties and how do they work for theming?▼

Umbraco backoffice CSS custom properties are documented `--uui-color-*` variables that control the interface's visual styling. You override these variables in a custom CSS file to implement high-contrast, dark mode, or brand-specific themes through the extension registry.

How do I register a custom backoffice theme in the Umbraco extension registry?▼

You register a custom backoffice theme by generating a manifest that matches Umbraco’s expected extension-registry structure. This manifest requires a specific registration type, an alias, a name, and a configured CSS loader to apply your theme.

Do I need to fetch Umbraco documentation before implementing backoffice themes?▼

Yes, fetching the latest Umbraco Foundation, Extension Registry, and Theme guidance is required before generating implementation files. This ensures the generated manifest and CSS correctly map to the most current documented `--uui-color-*` variables.

How do I validate a custom Umbraco backoffice theme after generating the CSS?▼

To validate a custom Umbraco backoffice theme, you apply the generated manifest and CSS loader to your environment and test the overridden `--uui-color-*` variables directly within the backoffice interface to ensure the styling renders correctly.

Related Skills

Explore More Design & Creative Skills→
1k-off1k-off
1

umbraco-theme

Register Umbraco backoffice themes via manifests and CSS custom properties.

Community
Intermediate
kraftvaerkkraftvaerk

umbraco-backoffice

Create Umbraco backoffice extensions using UUI components and blueprints.

Official
Advanced
kraftvaerkkraftvaerk

umbraco-search-result-item

Generate custom search result item components for the Umbraco backoffice.

Official
Intermediate
albanistrefialbanistrefi
4

umbraco-manifest-picker

Select registered Umbraco extension manifests via umb-input-manifest.

Community
Intermediate