How to prevent dark mode effect on HTML form elements
Tawhidul Islam Khan
Posted on July 27, 2023
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.
Posted on July 27, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.