---
title: Dark mode playground
page-header: Dark mode playground
---
{% assign colors = '' | split: ',' %}
{% for color in site.theme-colors %}
{% assign colors = colors | push: color[0] %}
{% endfor %}
{% for color in site.colors %}
{% assign colors = colors | push: color[0] %}
{% endfor %}
{% capture html %}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias magni minus omnis provident qui repudiandae saepe sunt vel, veniam voluptatibus? Cum eius est harum molestias necessitatibus quasi repellat velit voluptatum.
{% include ui/button.html text="Default" icon="check" %}
{% for color in colors %}
{% assign title = color | capitalize %}
{% include ui/button.html color=color text=title icon="check" %}
{% endfor %}
{% include ui/button.html text="Default" disabled=true %}
{% for color in colors %}
{% assign title = color | capitalize %}
{% include ui/button.html color=color text=title icon="check" disabled=true %}
{% endfor %}
{% for color in colors %}
{% assign title = color | capitalize %}
{% include ui/button.html color=color text=title icon="check" ghost=true %}
{% endfor %}
{% for color in colors %}
{% assign title = color | capitalize %}
{% include ui/button.html color=color text=title icon="check" ghost=true disabled=true %}
{% endfor %}
{% for color in colors %}
{% assign title = color | capitalize %}
{% include ui/button.html color=color text=title icon="check" outline=true %}
{% endfor %}
{% for color in colors %}
{% assign title = color | capitalize %}
{% include ui/button.html color=color text=title icon="check" outline=true disabled=true %}
{% endfor %}
{% endcapture %}