vue-tel-input icon indicating copy to clipboard operation
vue-tel-input copied to clipboard

Dark mode support

Open ihsanser opened this issue 2 years ago • 1 comments

How can I get dark mode as in demo page. Should I override classes one by one by using "!important"?

ihsanser avatar Jun 05 '23 07:06 ihsanser

I've been created my own dark theme


.dark-theme .vue-tel-input {
  background: #2a2a2a;
  border: 1px solid #4f4e4e;
  color: #fff;
  border-radius: 8px;
}

.dark-theme .vue-tel-input:focus-within {
  border-color: #1976D2FF;
}

.dark-theme .vti__dropdown {
  background-color: #414141;
}

.dark-theme .vti__dropdown:hover,
.dark-theme .vti__dropdown.open,
.dark-theme .vti__dropdown.disabled {
  background-color: #373737;
}

.dark-theme .vti__dropdown-list {
  background-color: #2a2a2a;
  border: 1px solid #4f4e4e;
}

.dark-theme .vti__dropdown-item {
  color: #fff;
}

.dark-theme .vti__dropdown-item.highlighted {
  background-color: #373737;
}

.dark-theme .vti__selection .vti__country-code {
  color: #fff;
}

.dark-theme .vti__input {
  background: #2a2a2a;
  color: #fff;
  border: none;
}

.dark-theme .vti__search_box {
  background: #2a2a2a;
  border: 1px solid #4f4e4e;
  color: #fff;
}


hamonCordova avatar Jun 28 '23 19:06 hamonCordova