Skip to content

Making a Theme

Theming is designed to be as easy as possible, as such, by default, no theme is applied to Vue Simple Phone. As such is easy to create your own with just css!

To create your own theme, all you need to do is define the following classes with styles...

vue-simple-phone-container, vue-simple-phone-label, vue-simple-phone-input-container, vue-simple-phone-button, vue-simple-phone-button-icon, vue-simple-phone-button-number, vue-simple-phone-button-dropdown-wrapper, vue-simple-phone-button-dropdown-icon, vue-simple-phone-input, vue-simple-phone-button-dropdown, vue-simple-phone-button-dropdown-list, and vue-simple-phone-button-dropdown-item

You can simply copy and paste an existing theme, like light, and change the theme to your liking, and then import that stylesheet to use it.

Additionally you can use the theme builder to customize a theme to your liking