Change Main Text Color

[FrogMaster 24]

Hey Everyone,

I searched around in the forum and unfortunately couldn't find any answers to what I was trying to do. 

I want to change the text/color for all the UI to something other than white. When I inspect the web app, follow the CSS to the primary CSS string and then adjust the color values in the console the outcome is as expected. However when I then go to add my CSS into the Custom CSS box I find that some of my CSS is not applying. I noticed earlier that instead of just :root I had to add html:root. I figure there is likely something I'm missing that is causing parts of my custom CSS to not apply. I do see my CSS in the console, but the primary CSS from theme.css takes priority over my custom CSS in some instances. 

Here is the specific CSS I'm trying to change:

@media (pointer:fine) {
    :not(.layout-tv):root {
        --background-hue: 285;
        --background-saturation: 5.71%;
        --background-lightness: 13.73%;
        --theme-text-color: rgba(255, 255, 255, .95);
        --button-background-hue: 280;
        --button-background-saturation: 2.65%;
        --button-background-lightness: 22.18%;
        --dialog-border-width: var(--line-size);
    }
}

Here is the entirety of my Custom CSS

/* Primary Theme Settings */
html:root {
    --theme-primary-color: #d575d2;
    --theme-primary-color-lightened: #d575d2;
    
	--theme-accent-text-color: #d575d2;
    --theme-text-color-opaque: #d575d2;
    --theme-text-color: rgba(66, 133, 244, 1);
    --theme-body-secondary-text-color: rgba(66, 133, 244, 1);

    --theme-icon-focus-background: rgba(120, 120, 120, 0.2);
}
.cardOverlayButton-hover {
    background: 0 0;
    color: rgb(66 133 244);
}
/* Cannot get this portion of the CSS to work to change the text color */
@media (pointer:fine) {
    :not(.layout-tv):root {
        --theme-text-color: rgba(66, 133, 244, 1);
    }
}

Here is the outcome I'm expecting:

When my CSS applies this is the result I'm getting:

[FrogMaster 24]

So the primary theme CSS was overwriting my CSS like I mentioned. Though it's not the best solution I've just added !important to the end of the specific tag being overwritten. 
That seems to have sorted out the problem.  If anyone has any other suggestions, or information however I never shy away from more knowledge! 

Here is the new CSS that works incase anyone is curious as to the solution I found:
 

/* Primary Theme Settings */
html:root {
    --theme-primary-color: #d575d2;
    --theme-primary-color-lightened: #d575d2;
    --theme-text-color: rgba(66, 133, 244, 1);
    --theme-text-color-opaque: #d575d2;
    --theme-accent-text-color: #d575d2;
    --theme-body-secondary-text-color: rgba(66, 133, 244, 1);
    --theme-icon-focus-background: rgba(120, 120, 120, 0.2);
    --scrollbar-thumb-background: rgb(66 133 244);
}
.cardOverlayButton-hover {
    background: 0 0;
    color: rgb(66 133 244);
}
@media (pointer:fine) {
    :not(.layout-tv):root {
        --theme-text-color: rgba(66, 133, 244, 1) !important;
    }
}

 

[Happy2Play 8282]

Do to the way it is targeted I believe that is the only way (adding !important).

As you mentioned default code is more important then custom css.

Same way that @media code override :root code

So adding this to html:root accomplishes the same

    --theme-text-color: rgba(66, 133, 244, 1) !important;

But you are probably better off targeting the "@media" as it is has a ":not" variable.

Edited November 12, 2021 by Happy2Play

[FrogMaster 24]

I sort of figured that is what was going on. 
Thanks for confirming my suspicions.