Is it possible to create child themes?

Contribute Feature
6

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