Use unique names for theme colors #40

New issue

Open

opened 2025-10-14 16:13:49 -06:00 by navan · 0 comments

navan commented

2025-10-14 16:13:49 -06:00

Owner

Originally created by @spenserblack on 7/19/2022

Bootstrap collects theme colors together using a map, but the variables themselves can have identities that are different from their map keys.
e5643aaa89/scss/_variables.scss (L77-L87)

The folder structure could look like this:

scss/_main.scss
scss/sakura.scss
scss/themes/default.scss
scss/themes/[theme-name].scss

Where sakura.scss would look like this:

@import "themes/default";
@import "main";

And themes/default.scss would look this:

// what's currently in sakura.scss
$color-blossom: #1d7484;
$color-fade: #982c61;
// ...
$theme-colors: (
  "color-blossom": $color-blossom,
  "color-fade": $color-fade,
  // ...
);

And themes/[theme-name].scss would look like this:

// copied from sakura-dark.scss for an example
$color-blossom-theme-name: #1d7484;
$color-fade-theme-name: #982c61;
// ...
$theme-colors: (
  "color-blossom": $color-blossom-theme-name,
  "color-fade": $color-fade-theme-name,
  // ...
);

Why?

By making the variable names for each theme unique, users would be able to import them and do something like this:

@import "../node_modules/sakura.css/scss/themes/default";
@import "../node_modules/sakura.css/scss/themes/dark";
.alert {
  background-color: $color-blossom;
  color: $color-bg;

  &.dark {
    background-color: $color-blossom-dark;
    color: $color-bg-dark;
  }
}

I haven't used SCSS too much, though, so perhaps there's another way to import variables without them overriding each other? 🤔

*Originally created by @spenserblack on 7/19/2022* Bootstrap collects theme colors together using a map, but the variables themselves can have identities that are different from their map keys. https://github.com/twbs/bootstrap/blob/e5643aaa89eb67327a5b4abe7db976f0ea276b70/scss/_variables.scss#L77-L87 The folder structure could look like this: ``` scss/_main.scss scss/sakura.scss scss/themes/default.scss scss/themes/[theme-name].scss ``` Where `sakura.scss` would look like this: ```scss @import "themes/default"; @import "main"; ``` And `themes/default.scss` would look this: ```scss // what's currently in sakura.scss $color-blossom: #1d7484; $color-fade: #982c61; // ... $theme-colors: ( "color-blossom": $color-blossom, "color-fade": $color-fade, // ... ); ``` And `themes/[theme-name].scss` would look like this: ```scss // copied from sakura-dark.scss for an example $color-blossom-theme-name: #1d7484; $color-fade-theme-name: #982c61; // ... $theme-colors: ( "color-blossom": $color-blossom-theme-name, "color-fade": $color-fade-theme-name, // ... ); ``` ### Why? By making the variable names for each theme unique, users would be able to import them and do something like this: ```scss @import "../node_modules/sakura.css/scss/themes/default"; @import "../node_modules/sakura.css/scss/themes/dark"; .alert { background-color: $color-blossom; color: $color-bg; &.dark { background-color: $color-blossom-dark; color: $color-bg-dark; } } ``` I haven't used SCSS too much, though, so perhaps there's another way to import variables without them overriding each other? :thinking: