Skip to content

User Themes

Creating custom themes can be done with minimal knowledge of CSS as each theme is a single CSS file

Tip

While you're modifying a theme, its changes will be visible immediately on page refresh, no need for server restart
However, make sure that you clear browser cache between edits
Easiest approach is to open browser inspector window (F12 in Chrome) and select disable cache in network tab
You can also experiment with live edits in browser inspector and only copy them to theme once you're satisfied with changes

Standard UI

  • Theme is a CSS file in /javascript folder
  • Copy existing theme file, for example black-teal.css or light-teal.css into new file, for example my-theme.css
  • Edit my-theme.css to change colors, fonts, sizes, borders, paddings, margings, etc.
  • Theme will be selectable in UI after server restart

Modern UI

  • Theme is a CSS file in /extensions-builtin/sdnext-modernui/themes folder
  • Copy existing theme file, for example default.css into new file, for example my-theme.css
  • Edit my-theme.css to change colors, fonts, sizes, borders, paddings, margings, etc.
  • Theme will be selectable in UI after server restart

Contributing

Once you're happy with your theme, you can share it with the community by submitting a pull request that includes your CSS file!

But...If you're not comfortable with that, you can always share your theme in Discussions