User Themes

Custom themes require only basic CSS knowledge—each theme is a single CSS file.

Tip

Theme changes appear immediately on page refresh without restarting the server. Always clear your browser cache between edits.

The easiest approach: Open browser inspector (F12 in Chrome), go to the Network tab, and select Disable cache.

You can also test changes live in the inspector and copy them to your theme file once satisfied.

Standard UI

• Themes are CSS files in the /javascript folder
• Copy an existing theme (e.g., black-teal.css or light-teal.css) to a new file (e.g., my-theme.css)
• Edit my-theme.css to customize colors, fonts, sizes, borders, padding, margins, etc.
• The new theme will be selectable in the UI after a server restart

Modern UI

• Themes are CSS files in the /extensions-builtin/sdnext-modernui/themes folder
• Copy an existing theme (e.g., default.css) to a new file (e.g., my-theme.css)
• Edit my-theme.css to customize colors, fonts, sizes, borders, padding, margins, etc.
• The new theme will be selectable in the UI after a server restart

Contributing

Share your theme with the community by submitting a pull request:

• Standard UI: Create a PR in the SD.Next repo
• Modern UI: Create a PR in the ModernUI repo

Alternatively, share your theme in Discussions.