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.

Add contrast colors to `theme-colors.yml`

See original GitHub issue

In our docs we check for the name of the colors to apply a light or dark color:

https://github.com/twbs/bootstrap/blob/master/site/content/docs/4.3/utilities/colors.md#L33

We could add this to the theme-colors.yml file like this:

- name: primary
  hex: "#007bff"
  contrast_color: white
- name: secondary
  hex: "#868e96"
  contrast_color: white
- name: success
  hex: "#28a745"
  contrast_color: white
- name: danger
  hex: "#dc3545"
  contrast_color: white
- name: warning
  hex: "#ffc107"
  contrast_color: dark
- name: info
  hex: "#17a2b8"
  contrast_color: white
- name: light
  hex: "#f8f9fa"
  contrast_color: dark
- name: dark
  hex: "#343a40"
  contrast_color: white

This will be easier to maintain since we don’t have to check for light or warning everywhere.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
XhmikosRcommented, Mar 31, 2020

I’ll have a look at #30044 later.

1reaction
XhmikosRcommented, Sep 3, 2019

That or have text-white as a default and only specify the exceptions.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Understanding Themes in Microsoft Office (At Last!) | InformIT
This palette shows 10 theme colors, with lighter and darker ... In contrast, if you apply one of the colors in the Standard...
Read more >
How about a theme.color.yml [#3033981] | Drupal.org
I have been looking for a great way to manage color through out a Drupal site, this module looks like it could be...
Read more >
themes.yaml - Aesthetic
Provides emphasis and contrast to the primary color. tertiary - Additional complementary color for more variation. neutral - Whites, grays, blacks, etc that ......
Read more >
Settings - Material Theme UI Documentation
Contrast Mode: Add contrast to specific panels and components. ... Configure Custom Theme Colors: Open the settings page for the Custom Theme Colors....
Read more >
Theme Color | Visual Studio Code Extension API
Theme colors are available as CSS variables in webviews, and an extension is ... an additional border around items across the UI to...
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