In Zusty there are two themes by default, light
and dark
.
You can set theme by adding attribute zust-theme="theme-name"
.
Replace theme-name
with any theme name, light
and dark
.
You can change theme of any element by adding above attribute.
You can also add this attribute to a parent element to change the theme of it's child elements.
Try changing the theme
I've my own theme, yay!
<div class="zust-bg-default" zust-theme="light" style="padding: 10px; border-radius: 10px;">
<p>I've my own theme, yay!</p>
<button class="zust-btn">Button</button>
<p class="zust-form-el">
<input class="zust-input" type="text" placeholder="Input">
</p>
<!-- If you use theme on any element, it will override it's parent's theme -->
<button class="zust-btn" zust-theme="dark">I've my own power</button>
</div>
If you want to change theme of your whole HTML then add this attribute to your page's html
tag.