Is it possible to create child themes?

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?

1 Like

Isn’t that the same as putting the details/layout/features in a component and only the color changes in the theme?

3 Likes

What version of Discourse are you running?

Theme components have been around for a while.

If you have just one theme, you’ll want to split it up into some subthemes as you describe. . . See

5 Likes

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.

7 Likes

So could I do this…

  1. Create a theme component and put all of my current theme’s CSS and html for the head/footer etc inside that component.
  2. 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)
  3. Create a theme for the dark version of the site and import the component above into it
  4. 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 :slight_smile: but it all depends on whether the CSS in the theme, or the component takes precedence?

3 Likes

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.

4 Likes

Hmm, what is the problem with:

Theme -> component 1, component 2

Light theme -> common CSS, light CSS tweaks
Dark theme -> common CSS, dark CSS tweaks

Seems like a very simple structure to me

8 Likes

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?

4 Likes

Correct, you would leave CSS blank there

4 Likes

So this would work right?

Theme -> component 1, component 2

Main theme -> *Main CSS
Alt theme -> Main CSS, alt theme CSS overrides

So what you’re saying is that the component CSS takes precedence, right?

*Basically the Main CSS would be a straight copy of my current CSS along with template changes (header/footer etc)

1 Like

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…

You would have to override them with CSS that is specific to the Dark Theme.

4 Likes