Global theme settings

Ok let me say you got a dark and a light theme and you want to add a custom html header and little bit css to both.

So you create a new theme, name it as you want, i will call it mySpecialHeader. Add your custom html and css to this.
Now edit your dark theme, check the “Theme include other child themes”. See screenshot below.

Select you “mySpecialHeader” in the new dropdwon and add it. Repeat this for light theme. That it, your done.

Pro Tipp: As Discourse uses SaSS for css, you can use sass variables with the !default flag and overwrite them in your light or dark theme.

Example:
To mySpecialHeader CSS I add a var for background-color:

$background-color: rgba(210,210,210,0.9) !default;
#mySpecialHeader {
    background-color: $background-color;
}

As this white color and in my dark theme I want a black color, I do override it in dark theme by define the variable in the css of my dark theme

$background-color: rgba(19,20,24,0.9);

You can also use theme based variables. @lll did write a awesome wiki post about it

8 Likes