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?