I’m using Dawn theme and These colors are in RGB format and it is defined in my theme.liquid I really want to know how this colors are working what is the exact color ? Because everywhere I’m using vairable color format like color: var(–color-foreground); in my css how can i know this what is the exact color of this. I see everywhere in theme.liquid and base.css but not find the exact color someone please let me know. Please clear my doubts
Topic summary
A user is trying to understand how CSS color variables work in Shopify’s Dawn theme, specifically variables like --color-foreground that are defined in RGB format in theme.liquid.
The user wants to know:
- What the exact color values are
- How these variable colors function throughout the theme
Solution provided:
- These colors are controlled through Theme Settings → Colors and the selected color scheme
- The RGB values are separated into three parts (r, g, b) as individual variables
- This separation allows developers to use CSS rgb() functions for better color manipulation and control
The color values can be found and modified in the theme customizer’s color scheme settings rather than being hardcoded in the files.
1 Like
Hi @amisha-29
I hope you are doing well,
this is color chosen from scheme under Theme settings → colors and then your chosen scheme
Here three separate parts r (red), g (green) and b(blue) are used in the variable so that you can use rgb css function later to control the color in better way
Thanks!