Theming / dark mode

The plugin exposes a set of CSS variables (all prefixed --iti-) that you can override on :root (or any ancestor of the input) to customise colours, spacing, and icon sizes.

Contents

• Supported CSS variables
• Dark mode
• Scaling down the flag images

Supported CSS variables

Colour variables

Spacing & sizing variables

Dropdown arrow variables

Icon variables

Flag variables

Dark mode

Dark mode example (with screenshot below):

@media (prefers-color-scheme: dark) {
  :root {
    --iti-border-color: #495057;
    --iti-dropdown-bg: #212529;
    --iti-icon-color: #dee2e6;
    --iti-hover-color: #30363d;
  }
}

@media (prefers-color-scheme: dark) {
  body, input {
    color: #dee2e6;
    background-color: #212529;
  }
  input {
    border-color: #495057;
  }
  input::placeholder {
    color: #666;
  }
}

Example:

Scaling down the flag images

The flags are rendered at a generous default size so they look crisp on high-DPI displays. If they’re too big for your design, you can shrink them in the CSS by overriding a single variable --iti-flag-width. The height is derived automatically from the 4:3 aspect ratio, and the sprite offsets scale along with it, so every flag stays aligned.

:root {
  --iti-flag-width: 16px;
}

If you need a non-4:3 box around the flag (e.g. a square placeholder), override --iti-flag-height as well.