Theme creation : Tips and tricks, 🖌️ 🎨

[KevinJump]

Theme creation for Umbraco 8/9 can be quite easy/complicated depending on exactly how much of the UI you want to theme.

for back office themes the themes are loaded from the /app_plugins/backofficethemes/themes folder - you can see this in the repo Themes folder this should be your starting point for making a theme -

a theme consists of :

• theme.css
• theme.js
• theme.json
• theme.png

the css and js files will be loaded into the back office when the theme is selected
the png file is used to show the theme to the user in the list
the .json file gives the theme name, etc so the back end can show it so someone.

Easy themes - material colors

All of the non-dark themes are using the material colors palette from google . and as such a lot the styles etc are very similar.

to make this easier there is a material-light.css file that defines most of the changes with css variables, meaning if you look at something like the green theme, it is merely defining these variables and the other style-sheet does the rest.

@import "../material-light.css";

:root {
    /* primary colours */
    --color-primary: #2e7d32;
    --color-primary-text: var(--color-text-light);
    --color-primary-light: #60ad5e;
    --color-primary-light-text: var(--color-text-dark);
    --color-primary-dark: #004F04;
    --color-primary-dark-text: var(--color-text-light);
    /* secondary colours */
    --color-secondary: #689f38;
    --color-secondary-text: var(--color-text-light);
    --color-secondary-light: #99d066;
    --color-secondary-light-text: var(--color-text-dark);
    --color-secondary-dark: #387002;
    --color-secondary-dark-text: var(--color-text-light);
}

if you want a light theme, you can use this method to make it almost any colors you can imagine 😄

Hard themes - dark mode

Dark mode themes are way harder - because making sure everything can be given a dark background and the colours still work for umbraco involved a lot of style definitions and there are still a few areas we haven't managed to get this right.

the dark theme, is a much bigger theme - currently coming in at 640+ lines it still needs more work, and we would welcome anyone chipping in here.