Guides

Simple Theming

Vinoshipper offers a variety of themes to quickly customize the look of your Vinoshipper elements while maintaining accessibility for your customers.

Suggest Edits

Supported Themes

Vinoshipper guarantees support for these themes in current and future development of Vinoshipper Injector.

Theme Color"Light" variant"Dark" Variant
Default (Blue)N/A'dark'
Indigo'indigo''indigo-dark'
Purple'purple''purple-dark'
Pink'pink''pink-dark'
Red'red''red-dark'
Orange'orange''orange-dark'
Yellow'yellow''yellow-dark'
Green'green''green-dark'
Teal'teal''teal-dark'
Cyan'cyan''cyan-dark'
Gray'gray''gray-dark'
Black'black''black-dark'

We patterned these themes based on Bootstrap 5.2 color offerings, but we do not require Bootstrap to use Vinoshipper Injector.

Setting a Theme

You can set this theme under the Vinoshipper.init() configuration under the theme setting. Below is an example to set the Red Dark theme.

window.document.addEventListener('vinoshipper:loaded', () => {
	window.Vinoshipper.init(000, {
		theme: 'red-dark',
	})
}, false);

Changing a Theme on a Specific Component

🚧

Global Theme will be Ignored

Setting a theme for a specific element will always ignore the global theme.
You will need to manually change the HTML if you want to change the theme.

You are able to set a different theme to a specific Vinoshipper component. This will override the globally set theme for the specific instance.

Using the Add To Cart buttons as an example, define the attribute data-vs-theme to the desired theme. In the example below, the Add To Cart button will render a red button. This HTML attribute is reactive.

<div class="vs-add-to-cart" data-vs-product-id="000" data-vs-theme="red"></div>

Updated about 1 year ago