Modern CSS solution accent color

Mondo Technology Updated on 2024-02-27

Preface.

Standing on the shoulders of giants sometimes makes a brand color change. Describes the accent-color property in modern CSS solutions, which can be used to easily customize the theme color of form elements. By setting the accent-color and color-scheme attributes, developers can adapt web pages in different color modes to improve user experience. In the future, the accent-color attribute will be used in more elements and will become even more important for web design. Today's front-end morning reading class article was shared by @sbco, public account: icss front-end anecdote authorization.

The body of the text starts here

accent-color is a not-so-new attribute that has been supported since chrome 93. I haven't talked about this property before. It wasn't until recently that when I switched the theme color of some systems as a whole, I had a deeper understanding of this property.

In simple terms, CSS accent-color supports coloring form elements with a few simple lines of CSS, and yes, it only takes a few lines to apply a theme color to the form input of a page.

Form elements have been complained about being difficult to customize. The accent-color is a very big change to the specification, and we are starting to be able to customize the style of the native form more!

Okay, let's learn how we should use accent-color.

First, let's implement a simple form interface like this:

accent-color demolegend>


strawberries


label>


radio buttons


div>


label>


range slider


label>


progress element


50%progress>


label>


fieldset>


form>


div>
I only need the simplest layout css, which has little to do with accent-color, so I won't list it, so our demo looks like this:

As you can see, the theme color of the form widget is blue, and we couldn't change this color before.

Now, we can simply use accent-color to change the theme color of the form

:root
Among them,rgba(250, 15, 117)Represents pink, and at this point, the overall effect becomes:

Of course, this accent-color can also be modified with CSS variables.

No.2143] CSS variables have brought improvements and changes to the development of JS interactive components.

We can do a simple reinvention of the demo above

:root 


fieldset 


legend
We set up a CSS variable--brand: rgba(250, 15, 117), except for assigning this color to the formaccent-color, which can also be assigned to many other elements. Here, for example, we assign a value toand the color of the borderThe color of the text.

This way, when we modify the value of the css variable, the whole accent color changes along with it:

codepen demo --accent-color with custom property:

In general, more often than not, we apply accent-color to:

checkbox

radiorange

progress

There's another detail that's easy to overlook. accent-color can also be used with color-scheme.

OK, what is color-scheme? Color-Scheme is a property of CSS that specifies the color scheme or theme of a web page. It defines which color scheme should be used for web page elements to render the content.

No.1886] Ant Design.

The color-scheme property has the following possible values:

auto: Indicates the default color scheme used by the user (browser). This is usually the scheme that the browser automatically chooses based on the operating system or user settings.

light: Indicates the use of a light color scheme. This often includes a light background and dark text.

dark: Indicates the use of a dark color scheme. This typically includes a dark background and light text.

By specifying the appropriate color-scheme value, developers can provide different color schemes for web pages to suit the user's preferences or the settings of the operating system. This helps to provide better accessibility and user experience.

For example, we can set the page's color-schema to light dark:

body
** above means 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's default color scheme and support both light and dark modes.

When usedcolor-scheme: light dark, the browser selects the appropriate color scheme based on the user's default color scheme. If the user is in light mode, the page will use the light color scheme to render the content; If the user** is in dark mode, the page will use the dark color scheme to render the content.

At this time, our ** can be transformed like this:

:root 


media (prefers-color-scheme: dark) body 


body
Here's what I look like on my phone to adjust the day mode and night mode:

Passed@media (prefers-color-scheme: dark) {**Query, in dark mode, shows different accent-colors.

How, have you learned? And, according to the specification, accent-color will be applied to more elements in the future. It will gradually become more important in CSS in the future. It's not a bad thing to get it done early.

Original:

Related Pages

    Solution ZEISS T SCAN hawk 2 Handheld 3D Scanning for RV Retrofits

    With the continuous development of science and technology,D scanning technology is becoming more and more widely used in various fields.In the automot...

    Modern solutions for plant cooling equipment

    In an industrial production environment,the right temperature is key to ensuring efficient operation and employee well being.Especially in summer,high...

    Building automation solutions

    In today s era of continuous technological development,building automation solutions have become an important part of modern building management.Build...

    Partition Tutorial Solution

    Zoning is a common solution that can help us better manage and utilize space.Whether it s in the home or in the office,zoning can provide better organ...

    Smart building solutions

    With the continuous development of emerging technologies such as artificial intelligence,information technology has connected people and things,things...