Skip to content

Add contrast colors to theme-colors.yml #29361

@MartijnCuppens

Description

@MartijnCuppens

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions