Does it handle accessibility?

Yes, the skill includes patterns for high-contrast CSS properties to ensure your backoffice themes meet modern accessibility requirements.

How do I apply the generated theme?

Once the files are generated and registered in your project, the theme will appear as an option in the user profile settings within the Umbraco backoffice.

What version of Umbraco does this skill support?

This skill is designed for modern Umbraco versions (v14+) that utilize the new backoffice extension registry and UUI (Umbraco UI) components.

Can I create multiple themes at once?

Yes, the skill can generate multiple CSS files and a combined manifest for various theme options such as Dark, Light, and High Contrast.

Where does it get the CSS variable names?

It references the latest Umbraco Foundation and UUI documentation to ensure correct variable naming like --uui-color-surface and --uui-color-interactive.

Umbraco Backoffice Theming

Name: Umbraco Backoffice Theming
Author: umbraco

byumbraco

•

内容管理

Customizes and implements visual themes for the Umbraco backoffice using CSS custom properties and the extension registry.

The Umbraco Theme skill empowers developers to programmatically create and register custom visual appearances for the Umbraco CMS backoffice. It automates the process of fetching the latest documentation, defining CSS custom properties for surfaces, text, and interactive elements, and generating the necessary manifest files for seamless integration into the Umbraco Extension Registry. This skill is essential for implementing dark mode, high-contrast accessibility themes, or specific corporate branding within the Umbraco editing environment to improve the editor experience.

主要功能

01Comprehensive CSS variable mapping for UI components

021 GitHub stars

03Automated document fetching from official Umbraco sources

04Streamlined branding implementation for custom backoffice experiences

05Support for dark mode, light mode, and high-contrast variants

06Generation of theme manifests for the Umbraco Extension Registry

使用场景

01Applying custom brand colors and logos to the Umbraco backoffice

02Implementing a dark mode option for Umbraco editors

03Creating high-contrast themes to meet WCAG accessibility standards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add umbraco/umbraco-cms-backoffice-skills umbraco-theme

For use in Claude.ai and ChatGPT

Download Skill