accent-colorIt is a not too new property that has been supported since Chrome 93. I haven’t introduced this property properly before. It wasn’t until recently that I got a deeper understanding of this attribute when I switched the overall theme color for some systems.
In simple terms, CSS supports coloring form elementsaccent-color with a few simple lines of CSS , and yes, it only takes a few lines of code to apply theme colors to the form inputs of the page.
Form elements have been criticized for being difficult to customize . And accent-colorthis is a very big change in the specification. We can start to customize the native form style more!Click to preview
how to useaccent-color
OK, let’s learn together how we should use it accent-color.
First, let’s implement such a simple form interface:
< div class = "wrapper" >
< form action = "" >
< fieldset >
< legend > Accent-color Demo </ legend >
<label>
Strawberries
< input type = "checkbox" id = "berries_1" value = "strawberries" >
</ label >
<label>
Radio Buttons
< div >
< input type = "radio" name = "accented-demo" checked >
< input type = "radio" name = "accented-demo" >
< input type = "radio" name = "accented-demo" >
< / div >
</label>
<label>
Range Slider
< input type = "range" >
</ label >
<label>
Progress element
< progress max = "100" value = "50" > 50% </ progress >
</ label >
</ fieldset >
</ form >
</ div >
It only requires the simplest layout CSS, which accent-colorhas little to do with , so I won’t list it. In this way, our DEMO is roughly as follows:
As you can see, the theme color of the form control is blue . Before, we could not modify this color.
Now, we can simply accent-colorchange the theme color of the form with the help of:
:root {
accent- color : rgba ( 250 , 15 , 117 );
}
Among them, rgba(250, 15, 117)represents pink. At this time, the overall effect becomes:
Of course, this accent-coloralso supports passing in CSS variables and modifying them together with more other colors.
We can simply transform the above DEMO:
:root {
--brand : rgba ( 250 , 15 , 117 );
accent- color : var (--brand);
}
fieldset {
border : 1px solid var (--brand);
}
legend {
color : var (--brand);
}
We set a CSS variable --brand: rgba(250, 15, 117), which not only assigns this color to the form accent-color, but also assigns it to other elements. For example, here, we assigned <fieldset>the border color of and <legend>the text color of .
In this way, when we modify the CSS variable value, the entire theme color will change together
For the complete DEMO, you can click here: CodePen Demo — Accent-color with custom property
Generally speaking, more often, we will accent-colorapply to:
Used in conjunction with color-scheme to adapt to day and night modes
There is another detail that is easily overlooked. accent-colorAlso supports use with color-scheme .
OK, what is color-scheme? color-scheme is a CSS property used to specify the color scheme or theme of a web page. It defines which color scheme a web page element should use to render content.
The color-scheme attribute has the following possible values:
- auto: Indicates using the default color scheme of the user agent (browser). This is usually what the browser automatically chooses based on operating system or user settings.
- light: Indicates using a light color scheme. This usually includes a light background and dark text.
- dark: Indicates using a dark color scheme. This usually includes a dark background and light text.
By specifying appropriate color-scheme values, developers can provide different color schemes for web pages to adapt to user preferences or operating system settings. This helps provide better accessibility and user experience.
For example, we can color-schemaset the page’s to light dark:
body {
color -scheme: light dark;
}
The above code indicates that the page will support both light and dark color schemes. It tells the browser that the web page wants to adapt to the user agent’s (browser’s) default color scheme and support both light and dark modes.
When used color-scheme: light dark, the browser chooses an appropriate color scheme based on the user agent’s default color scheme. If the user agent is in light mode, the web page will use a light color scheme to render the content; if the user agent is in dark mode, the web page will use a dark color scheme to render the content.
At this point, our code can be transformed like this:
:root {
--brand : rgba ( 250 , 15 , 117 , 1 );
accent- color : var (--brand);
}
@media ( prefers-color-scheme : dark) {
:root {
--brand : rgba ( 3 , 169 , 244 , 1 );
}
body {
background : #000 ;
color : #fff ;
}
}
body {
color -scheme: light dark;
}
Below is the effect of adjusting day mode and night mode on my phone:
Use @media (prefers-color-scheme: dark) {}media queries to display different content in dark mode accent-color.
Maybe some people
@media (prefers-color-scheme: dark)don’t know much about , you can read my article –Using CSS prefers-* specifications to improve the accessibility and robustness of the website
For the complete DEMO, you can click here: CodePen Demo — Accent-color with custom propertyClick to preview
at last
So, have you learned it? And, according to the specification description, accent-colorit will be applied to more elements in the future. Will gradually become more important in future CSS. It’s not a bad thing to get the hang of it early.
Well, this article ends here, I hope this article is helpful to you:)
If you want to get the most interesting CSS information, don’t miss my official account- iCSS front-end interesting facts😄
More exciting CSS technical articles are summarized in my Github — iCSS , which will be continuously updated. Welcome to click a star to subscribe and collect.
If you still have any questions or suggestions, you can communicate more. It is an original article. The writing style is limited and the talent is shallow. If there is anything wrong in the article, please let me know.