Theming / Dark Mode

There are lots of CSS variables available for theming. See intlTelInput.scss for the full list.

Dark mode example (with screenshot below):

@media (prefers-color-scheme: dark) {
  .iti {
    --iti-border-color: #5b5b5b;
    --iti-dialcode-color: #999999;
    --iti-dropdown-bg: #0d1117;
    --iti-icon-color: #aaaaaa;
    --iti-hover-color: #30363d;
  }
}

NOTE: this assumes you already have your own dark mode styling in place for general body/input styling, e.g. something like this:

@media (prefers-color-scheme: dark) {
  body, input {
    color: white;
    background-color: #0d1117;
  }
  input {
    border-color: #5b5b5b;
  }
  input::placeholder {
    color: #8d96a0;
  }
}

Example: