vue-tel-input
vue-tel-input copied to clipboard
Dark mode support
How can I get dark mode as in demo page. Should I override classes one by one by using "!important"?
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;
}