Dark Mode Support about intl-tel-input HOT 2 CLOSED

After playing with this a little bit, I realised 3 things that put me off the idea of providing built-in dark mode support:

• The CSS media query for dark mode @media (prefers-color-scheme: dark) will enable dark mode based on the user's OS system settings, BUT most websites that use this plugin won't be respecting this, and so if the plugin starts respecting this on its own, most websites will end up with a dark plugin on a light website which will look silly.
• When dark mode is enabled, the background colour for the plugin input and dropdown need to match the page background colour, which is normally some shade of dark grey, but it varies massively, and there's no easy way for the plugin to determine what that is
• It's actually really easy to add this yourself - the simplest version is just 2 CSS rules - see example below:

@media (prefers-color-scheme: dark) {
  .iti {
    --iti-arrow-color: #bababa;
  }
  .iti input, .iti__dropdown-content {
    background-color: #212529;
  }
}

Which produces the following styles:

So for these reasons, I've decided not to add built-in dark mode support, and instead will leave it to each dev to add this themselves, based on the above snippet, customised to match their own dark colour scheme.

from intl-tel-input.

Great plugin! I love how simple it is to use.

❤️

Are there any plans to add a dark theme to the plugin?

No plans, but I would welcome a PR that added this!

from intl-tel-input.