CSS customization

A theme may include a theme.css file with extra rules. It is meant for restyling, for example:

.ribbon .rb-btn:hover .rb-icon { filter: drop-shadow(0 0 10px var(--ribbon-glow)); }

What is refused

If the file contains any of the following, the whole theme is reported as unusable and the reason is shown:

• @import, @font-face, @namespace, @charset
• url(...), image-set(...), expression(...)
• javascript:
• backslash escapes
• </ and control characters
• a file larger than 128 KB

What is silently dropped

• Rules that target dialogs, password fields, anything containing “brand”, contentinfo, or :host and ::part.
• At-rules other than @media, @keyframes and @supports.

This keeps themes away from the secure password prompt and the branding bar.

Using pictures from CSS

Put the image in the theme’s Graphics folder and refer to it through its custom property. The property name is the file name in lower case with non-alphanumeric characters turned into dashes, prefixed with --asset-:

Graphics\Logo Big.png becomes background-image: var(--asset-logo-big);

Images may be PNG, JPEG, WebP or GIF, at most 512 KB each, with at most 32 files.

Trying changes

After editing, open Appearance → Import & folder and choose Rescan, then preview the theme under Themes. If a theme shows as unusable, the message says why; fix the file and rescan.