Zusty CSS Logo
Zusty CSS Logo
Version 1.2.0 is out now. Check out Release Notes.

Theme

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.

checkSuccessfully Copied

Get involved in improving Zusty CSS.

Report a BugFeature Request

Support us by

Starring it on GitHubJoining our Discord ServerSharing on Twitter

Rapid Search Inside of Docs