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.

[feature] [v4] make $colors overridable

See original GitHub issue

Feature Request

Ionic Info I do not use ionic-cli sorry…

Describe the Feature Request Be able to override $colors

Describe Preferred Solution The hard way is to make $colors !default in globals.scss

Describe Alternatives

re-export colors.scss and avoid import globals.scss to override $colors.
make $primary, $secondary … colors overridable (!default)

Additional Context The purpose is to change primary, secondary, … colors and be able to add ours

.ion-color-myColor {
  //
}

Thanks anyway for the great job !

Issue Analytics

State:
Created 5 years ago
Comments:11 (5 by maintainers)

Top GitHub Comments

3reactions

paulstelzercommented, Sep 12, 2018

@marticrespi I also created an post on Medium.com how to make it works -> https://medium.com/@paulstelzer/ionic-4-how-to-add-more-colors-and-use-them-as-color-in-buttons-and-more-7175ab4ae4e7

1reaction

paulstelzercommented, Sep 11, 2018

@marticrespi Do not forgot to add .ion-color-vibrant (in your case) in the global.scss file. So you need to add

.ion-color-vibrant {
    --ion-color-base: var(--ion-color-vibrant) !important;
    --ion-color-base-rgb: var(--ion-color-vibrant-rgb) !important;
    --ion-color-contrast: var(--ion-color-vibrant-contrast) !important;
    --ion-color-contrast-rgb: var(--ion-color-vibrant-contrast-rgb) !important;
    --ion-color-shade: var(--ion-color-vibrant-shade) !important;
    --ion-color-tint: var(--ion-color-vibrant-tint) !important;
}

And afterwards you can use <ion-button color="vibrant">

Top Results From Across the Web

Feature: Allow color theme overrides on the command line ...

I want to be able to override the "highlight" color via a flag, but while we're at it, it seems it might be...

[Variants] How to keep the icon color override while changing ...

I created a button variant: a button with icons. Then I'm creating an instance and I'm replacing the icon symbol. The color keeps...

override-colors - CSS: Cascading Style Sheets - MDN Web Docs

The override-colors descriptor takes a comma-separated list of the color index and new color value. The color index is zero-based and any color ......

Discover how to override theme colors in Bootstrap 5 using Sass

Try declaring the $theme-colors map as advised in this article. You don't need the map-merge command for that! Just make sure to include...

Unable to override $theme-color in bootstrap - Stack Overflow

To change the primary, or any of the theme colors in Bootstrap 4 SASS, set the appropriate variables before importing bootstrap.scss .