FrogMaster 24 Posted November 12, 2021 Share Posted November 12, 2021 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: Link to comment Share on other sites More sharing options...
FrogMaster 24 Posted November 12, 2021 Author Share Posted November 12, 2021 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; } } Link to comment Share on other sites More sharing options...
Solution Happy2Play 8319 Posted November 12, 2021 Solution Share Posted November 12, 2021 (edited) 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 Link to comment Share on other sites More sharing options...
FrogMaster 24 Posted November 12, 2021 Author Share Posted November 12, 2021 I sort of figured that is what was going on. Thanks for confirming my suspicions. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now