Component styles can be added to certain components to apply specific color themes. They can be applied to boxes and navbars.
NOTE: The vertical margins you see in the examples below are only added for this demo. Boxes have no margins set by default.
This is a default theme and here is a link.
This is a shade theme and here is a link.
This is an inverse theme and here is a link.
This is an alt-inverse theme and here is a link.
This is a success theme and here is a link.
This is a warning theme and here is a link.
This is a error theme and here is a link.
This is an offline theme and here is a link.
This theme has the alert texture theme added to the shade them and has a link.
<div class="joy-box joy-theme--default">
<p>This is a
<strong>default</strong> theme and here is a <a href="#">link</a>.</p>
</div>
<div class="joy-box joy-theme--shade">
<p>This is a
<strong>shade</strong> theme and here is a <a href="#">link</a>.</p>
</div>
<div class="joy-box joy-theme--inverse">
<p>This is an
<strong>inverse</strong> theme and here is a <a href="#">link</a>.</p>
</div>
<div class="joy-box joy-theme--alt-inverse">
<p>This is an
<strong>alt-inverse</strong> theme and here is a <a href="#">link</a>.</p>
</div>
<div class="joy-box joy-theme--success">
<p>This is a
<strong>success</strong> theme and here is a <a href="#">link</a>.</p>
</div>
<div class="joy-box joy-theme--warning">
<p>This is a
<strong>warning</strong> theme and here is a <a href="#">link</a>.</p>
</div>
<div class="joy-box joy-theme--error">
<p>This is a
<strong>error</strong> theme and here is a <a href="#">link</a>.</p>
</div>
<div class="joy-box joy-theme--offline joy-theme--inverse-text">
<p>This is an
<strong>offline</strong> theme and here is a <a href="#">link</a>.</p>
</div>
<div class="joy-box joy-box joy-theme--shade joy-theme--alert-texture">
<p>This theme has the
<strong>alert texture</strong> theme added to the shade them and has a <a href="#">link</a>.</p>
</div>