CODEWITHSUNDEEP
htmlcssangularionic-frameworksass
AdaLollA
AdaLollA

Reputation: 371

Color all element's background and text on page with SCSS in Ionic3

I am attempting to recolour all element's background and text of a page in SCSS in an ionic 3 project.

The SASS code I am using at the moment is:

* {
    background-color: black;
    color: white;
}

The problem is that only the background colour is changed. The problem is that the text stays in default colour.

I would look for a different attribute to overwrite but the "color" attribute works in html styling. The following HTML code performs the wanted changes:

<ion-card-header style="color: white">
    Title
</ion-card-header>

The "color" attribute also works on all other elements that need to be recoloured, but I don't feel like the solution is to add the HTML styling to every single element.

How can I overwrite all text colours for this page using SCSS (just like the already working background)?

Upvotes: 1

Views: 103

Answers (1)

Temani Afif
Temani Afif

Reputation: 273750

You are facing a specifity issue that's why color is not working on some elements, as you can read here :

Universal selector (*), combinators (+, >, ~, ' ') and negation pseudo-class (:not()) have no effect on specificity.

So if you want to still use * as a selector you may add !important like this :

* {
    background-color: black;
    color: white!important;
}

When an important rule is used on a style declaration, this declaration overrides any other declarations.

Upvotes: 1

Related Questions