Vue-select: How can we theme the vSelect

[nacr]

Is there any support for themes?

And if so how can it be done?

tks

[sagalbot]

There aren't any pre-made themes at the moment. We discussed it in PR #16 but decided that it was unlikely the themes we produce are going to line up with a given users design. If I was wrong about that, I'm happy to merge #16. At the moment, your best bet would be write your own styles from an external stylesheet.

What are you looking for in terms of themes?

[sagalbot]

For example, on the demo site, I've just added an ID to the element and add some simple styles to change the colors a bit:

/* Cyan theme */
#v-select .selected-tag {
    color: #147688;
    background-color: #d7f3f9;
    border-color: #91ddec;
}

#v-select.dropdown.open .dropdown-toggle,
#v-select.dropdown.open .dropdown-menu {
    border-color: #4CC3D9;
}

#v-select .active a {
    background: rgba(50,50,50,.1);
    color: #333;
}

#v-select.dropdown .highlight a,
#v-select.dropdown li:hover a {
    background: #4CC3D9;
    color: #fff;
}

[nacr]

Ok will take a look.

Some how I did not get this working yesterday.

[nacr]

ok Face Palme for me :)

tks m:8ball:

[cleitonsouza]

Sorry for re opening this issue

I took a look in PR #16, but i got the following conclusion: to add my own style for this component, i need to override the current style. I'm right?

If so, then i have a suggestion: add a new prop, like theme, and define a default theme, that have the current style. This will add a classe in the root element default-theme, and the style will be writen like: .default-theme .dropdown-toggle, etc..

In this way, when we pass <v-select theme="my-own">, we can develop the style from scratch

Thanks

If you agree, i will make a PR with this :)