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.