Global theme settings

Feature
1

I love the ability to theme discourse and it works really well for individual themes but I feel like global settings for /head / CSS etc that would apply to all themes would make things so much easier when trying to manage multiple themes.

Is this possible?

2

That is what the Theme Components are for. Add a general theme as compoment to your specific themes and do the general things inside the component. You can use this to override parts of existing themes as well.

10 Likes
3

Have you got an example of how that works please, I don’t fully understand what you mean, thanks

1 Like
4

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.

image
image395Ă—720 70.7 KB

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
5

Wow, that is awesome, thanks for clarifying it’s usage and the link to Core Variables, I think I can do it now :+1:

2 Likes