The discussion revolves around the possibility of creating child themes in Discourse. AstonJ expresses the need for child themes to maintain a dark version of their customized theme without having to update two separate themes.
AstonJ proposes a solution of creating a theme component with the main theme’s CSS and HTML, then importing it into two separate themes (light and dark) with CSS overrides for the dark theme. tshenry confirms this approach, suggesting that the CSS specific to light/dark themes should be placed in the respective base themes, not overridden in the component.
sam suggests a simpler structure where the light and dark themes are just color schemes, and tshenry agrees. AstonJ confirms that this approach works, and tshenry notes that component CSS takes precedence.
Regarding category colors, AstonJ asks if it’s possible to have different colors per theme. cpradio responds that this can be achieved by overriding the colors with CSS specific to the dark theme.
While child themes are not currently available, the proposed solution using theme components and CSS overrides can achieve similar results.
Some of our users are asking for a dark version of our theme, I’ve been resisting because I know what a nightmare it is having to maintain two separate themes (particularly when they are as customised as ours).
Having the option of child-themes would make life a lot easier. Essentially, child themes work by inheriting from a parent theme and ONLY changes made in the child theme take effect when that theme is chosen.
This means that after creating the initial theme, you go on to create a child theme (say make the background colour and posts darker with CSS overrides) then, if you ever make any changes to the parent theme in future, those changes automatically carry through to the child unless they are specifically overridden. (We don’t have templates on DC but the same principle would apply to templates too - the parent theme templates are used unless a modified version in the child has been created.)
Do you have any plans to add something like this? If not, is it something you would consider please?
So what you are asking for seems to be more like what will be coming in a future release:
Currently your best option is to convert your main theme to a component and pull out any dark/light specific aspects. Then add that component to a base theme that uses a specific color scheme or your dark/light specific CSS customizations you pulled from your original theme.
Create a theme component and put all of my current theme’s CSS and html for the head/footer etc inside that component.
Create a theme for the light version of the site and import the component above into it (so I end up with the theme I have now)
Create a theme for the dark version of the site and import the component above into it
Put the CSS overrides for the dark version of the site into the dark theme (so they override the CSS in the component)
That would seem to be more or less the same as being able to have a child theme but it all depends on whether the CSS in the theme, or the component takes precedence?
Yes! That’s essentially what you’ll want to do for now, but ideally, you won’t want to “override the CSS in the component.” You want to take anything that is specific to light/dark out of the component and place it into the appropriate base theme. Hopefully that makes sense… It is a little confusing. This is just a generic example that will hopefully help illustrate:
Current theme (You will be converting to a component)
div {
background: white; // Remove and place in "Light Theme" and "Dark Theme"
width: 600px; // Leave here since it's common to all themes
}
In the end you want:
Current theme (Now a component)
div {
width: 600px;
}
Light Theme
div {
background: white;
}
Dark Theme
div {
background: black;
}
Components take precedence. The issue is that your users can’t select child themes (theme components) yet. You could technically have two uniquely named copies of your theme and add a “dark” component to one, but that would be a lot more redundant than the steps you laid out.
Yes, even better! I like the “tweaks” being components rather than in the base themes. In the structure you laid out, the Light and Dark themes would just be color schemes, right?
Just another quick question in this - is it possible to have different colours for categories per theme? Our light theme category colours will not be suitable for a dark theme…
but it all depends on whether the CSS in the theme, or the component takes precedence?