# Is it possible to create child themes?

**URL:** https://meta.discourse.org/t/is-it-possible-to-create-child-themes/98246
**Category:** Feature
**Created:** [September 27, 2018, 11:21pm UTC](https://meta.discourse.org/t/is-it-possible-to-create-child-themes/98246 "2018-09-27T23:21:11Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![AstonJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/astonj/32/215041_2.png) [@AstonJ](https://meta.discourse.org/u/AstonJ)
#### Post date: [September 27, 2018, 11:21pm UTC](https://meta.discourse.org/t/is-it-possible-to-create-child-themes/98246/1 "2018-09-27T23:21:11Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [September 27, 2018, 11:26pm UTC](https://meta.discourse.org/t/is-it-possible-to-create-child-themes/98246/2 "2018-09-27T23:26:01Z")

</div>

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

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [September 27, 2018, 11:27pm UTC](https://meta.discourse.org/t/is-it-possible-to-create-child-themes/98246/3 "2018-09-27T23:27:17Z")

</div>

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

> [@Beginner's guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966):
>
> This is a crash course in Discourse theme basics. The target audience is everyone who is not familiar with Discourse themes. If you’ve already used Discourse theme / theme components, this guide is probably not something you need to read. What are themes and theme components? A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features. Let’s start with themes. Themes In general, themes are not supposed to be compatible …

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [September 27, 2018, 11:38pm UTC](https://meta.discourse.org/t/is-it-possible-to-create-child-themes/98246/4 "2018-09-27T23:38:15Z")

</div>

So what you are asking for seems to be more like what will be coming in a future release:

> [@Discourse Version 2.2](https://meta.discourse.org/t/discourse-version-2-2/95438/1):
>
> User selectable theme components: allow admins to denote certain components are user selectable, if this happens they can be composed into the master theme. (eg: large / small font)

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.

---

<div class="post-metadata">

### Author: ![AstonJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/astonj/32/215041_2.png) [@AstonJ](https://meta.discourse.org/u/AstonJ)
#### Post date: [September 27, 2018, 11:55pm UTC](https://meta.discourse.org/t/is-it-possible-to-create-child-themes/98246/5 "2018-09-27T23:55:17Z")

</div>

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 🙂 but it all depends on whether the CSS in the theme, or the component takes precedence?

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [September 28, 2018, 12:57am UTC](https://meta.discourse.org/t/is-it-possible-to-create-child-themes/98246/6 "2018-09-28T00:57:17Z")

</div>

> [@AstonJ](#):
>
> So could I do this…

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)

```css
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)

```css
div {
    width: 600px;
}

```

### Light Theme

```css
div {
    background: white; 
}

```

### Dark Theme

```css
div {
    background: black; 
}

```

  

> [@AstonJ](#):
>
> 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?

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.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [September 28, 2018, 1:07am UTC](https://meta.discourse.org/t/is-it-possible-to-create-child-themes/98246/7 "2018-09-28T01:07:31Z")

</div>

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

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [September 28, 2018, 1:15am UTC](https://meta.discourse.org/t/is-it-possible-to-create-child-themes/98246/8 "2018-09-28T01:15:26Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [September 28, 2018, 1:18am UTC](https://meta.discourse.org/t/is-it-possible-to-create-child-themes/98246/9 "2018-09-28T01:18:02Z")

</div>

Correct, you would leave CSS blank there

---

<div class="post-metadata">

### Author: ![AstonJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/astonj/32/215041_2.png) [@AstonJ](https://meta.discourse.org/u/AstonJ)
#### Post date: [September 28, 2018, 2:27pm UTC](https://meta.discourse.org/t/is-it-possible-to-create-child-themes/98246/10 "2018-09-28T14:27:43Z")

</div>

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)_

---

<div class="post-metadata">

### Author: ![AstonJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/astonj/32/215041_2.png) [@AstonJ](https://meta.discourse.org/u/AstonJ)
#### Post date: [September 28, 2018, 5:30pm UTC](https://meta.discourse.org/t/is-it-possible-to-create-child-themes/98246/11 "2018-09-28T17:30:37Z")

</div>

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…

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [September 28, 2018, 6:33pm UTC](https://meta.discourse.org/t/is-it-possible-to-create-child-themes/98246/12 "2018-09-28T18:33:44Z")

</div>

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