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
orlight-teal.css
into new file, for examplemy-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 examplemy-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!
- For Standard UI, create PR in SDNext repo
- For Modern UI, create PR in ModernUI repo
But...If you're not comfortable with that, you can always share your theme in Discussions