I was working on a project, suddenly I faced an issue. There should be normal mode to html form elements for example input, select, and textarea fields when desktop dark mode is on. Dark mode affects the form element's background color, Then I started to look for a solution and found the answer. There is css property called color-scheme which indicates what color scheme can be used.
add color-scheme property as below
input, select, textarea{
color-scheme: light;
}
If I use light then it will use light mode only
input, select, textarea{
color-scheme: light dark;
}
If I use light dark then it will use dark mode and light mode both.
I used only light so that my form elements can remain as normal design, not dark color background.
Top comments (1)
Nice tips. Thanks