question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Provide variables for theme-colors

See original GitHub issue

Pull 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:closed
  • Created 6 years ago
  • Reactions:2
  • Comments:15 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
andresgalantecommented, Sep 18, 2017

@kriim I just had to set a $blue: red type os situation. You are right, this is something that needs fix. I hope #23918 it gets merge

1reaction
mdocommented, Oct 3, 2017

I 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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found