Provide variables for theme-colors
See original GitHub issuePull request #22836 introduced the two color maps colors and theme-colors:
$colors: (
blue: $blue,
indigo: $indigo,
purple: $purple,
pink: $pink,
red: $red,
orange: $orange,
yellow: $yellow,
green: $green,
teal: $teal,
cyan: $cyan,
white: $white,
gray: $gray-600,
gray-dark: $gray-800
) !default;
$theme-colors: (
primary: $blue,
secondary: $gray-600,
success: $green,
info: $cyan,
warning: $yellow,
danger: $red,
light: $gray-100,
dark: $gray-800
) !default;
While updating a test project to v4-beta I noticed that it isn’t possible anymore to override the theme-colors properly. To override theme-colors.primary one had to change the variable blue.
Would it be possible to introduce variables for the theme-colors which are then used in the color map? This way one could override single elements of the theme colors without doing strange things like $blue: red; or having to redefine the whole theme-colors map (while making sure that all other used variables are already defined, e.g. $green).
My suggestion is to do something like this:
$primary: $blue !default;
$secondary: $gray-600 !default,
$success: $green !default,
$info: $cyan !default,
$warning: $yellow !default,
$danger: $red !default,
$light: $gray-100 !default,
$dark: $gray-800 !default
$theme-colors: (
primary: $primary,
secondary: $secondary,
success: $success,
info: $info,
warning: $warning,
danger: $danger,
light: $light,
dark: $dark
) !default;
Issue Analytics
- State:
- Created 6 years ago
- Reactions:2
- Comments:15 (1 by maintainers)
Top Results From Across the Web
Common CSS Color Variables and Properties in Theming
An effort to collect, categorize, and summarize some of the common CSS custom properties that are being used to maintain colors in modern ......
Read more >How to create better themes with CSS variables
Here we're defining a variable we'll call --primaryColor in three different places. We're setting the background-color property to the value ...
Read more >What do you name color variables? | CSS-Tricks
I first give a name to all the colors I use using that tool, for example “$color-cornflower-blue: #6195ED;” and then I create variables...
Read more >Switch Between Color Schemes with CSS Variables and ...
In this tutorial, we'll discuss how to implement different color schemes on a website using CSS variables and one line of vanilla JavaScript. ......
Read more >How To Configure Application Color Schemes With CSS ...
Variables are a basic tool that help organize colors on a project. For a long time, front-end engineers used preprocessor variables to configure ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

@kriim I just had to set a
$blue: redtype os situation. You are right, this is something that needs fix. I hope #23918 it gets mergeI understand the appeal of separate variables, but it definitely diminishes the usefulness of the maps. Say you want to change a color—that’s straightforward enough. But if you want to add a new one, you have to declare the variable and add it to the map. Not a ton of work, but it takes away some of the ease of use here for what amounts to a syntax change for snagging a color.