Skip to content

Usage for Themes #6

Open
Open
@tf

Description

@tf

I am really excited about this project. One thing I haven't wrapped my head around is how one could use these values to create "theme-able" components. Let's say there are some variables that allow customization of a component - things like colors and fonts. Since the component's css module has to import its values from some concrete file, I see no way how one could switch between two css files defining different values.

One could create two css modules that differ only in values, but then I would have to duplicate all the rules.

Basically, I wonder what would be the counterpart of the following SASS code:

// component.scss
.my-component {
   background-color: $my-component-background-color;
}

// theme-a.scss
$my-component-background-color: green;
@import "my-component"

// theme-b.scss
$my-component-background-color: red;
@import "my-component"

Or is this simply something css module values are not supposed to solve?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions