mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
96 lines
2.5 KiB
HTML
96 lines
2.5 KiB
HTML
|
{% assign customize_link = site.data.links.by_id['features-dark-mode'] %}
|
||
|
|
{% assign heading_href = site.url | append: customize_link.path %}
|
||
|
|
|
||
|
|
{% capture bulma_theme %}
|
||
|
|
<div>
|
||
|
|
<h1 class="title">Bulma Theme</h1>
|
||
|
|
<h2 class="subtitle">
|
||
|
|
System Theme with <code>prefers-color-scheme</code>
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
{% endcapture %}
|
||
|
|
|
||
|
|
{% capture dark_theme %}
|
||
|
|
<div data-theme="dark">
|
||
|
|
<h1 class="title">Bulma</h1>
|
||
|
|
|
||
|
|
<p class="subtitle">
|
||
|
|
Modern CSS framework based on <a href="https://bulma.io">Flexbox</a>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="message is-success">
|
||
|
|
<div class="message-body">
|
||
|
|
Changes successfully saved
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="field">
|
||
|
|
<input class="input" type="text" placeholder="Your Name">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="field">
|
||
|
|
<div class="select">
|
||
|
|
<select><option>Select dropdown</option></select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="buttons">
|
||
|
|
<a class="button is-link is-soft">Save Changes</a>
|
||
|
|
<a class="button is-danger is-soft">Cancel</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endcapture %}
|
||
|
|
|
||
|
|
{% capture light_theme %}
|
||
|
|
<div data-theme="light">
|
||
|
|
<h1 class="title">Light Theme</h1>
|
||
|
|
<h2 class="subtitle">
|
||
|
|
Light Theme with <code>[data-theme=light]</code>
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
{% endcapture %}
|
||
|
|
|
||
|
|
<section class="bd-home-section bd-theme-moon theme-dark" data-theme="dark">
|
||
|
|
{%
|
||
|
|
include docs/components/heading.html
|
||
|
|
color="moon"
|
||
|
|
icon="fas fa-moon"
|
||
|
|
title="Dark Mode"
|
||
|
|
subtitle="Choose a dark theme automatically or by user preference"
|
||
|
|
href=heading_href
|
||
|
|
button_icon_after="fas fa-arrow-right"
|
||
|
|
button_label="See <strong>Dark Mode</strong> docs"
|
||
|
|
%}
|
||
|
|
|
||
|
|
<!--div class="bd-home-themes js-themes">
|
||
|
|
<button data-scheme="light" class="bd-nav-item is-sun" aria-label="Light mode">
|
||
|
|
<span class="icon">
|
||
|
|
<i class="fas fa-sun" aria-hidden="true"></i>
|
||
|
|
</span>
|
||
|
|
<span>Light</span>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button data-scheme="dark" class="bd-nav-item is-moon" aria-label="Dark mode">
|
||
|
|
<span class="icon">
|
||
|
|
<i class="fas fa-moon" aria-hidden="true"></i>
|
||
|
|
</span>
|
||
|
|
<span>Dark</span>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button data-scheme="system" class="bd-nav-item is-system" aria-label="System mode">
|
||
|
|
<span class="icon">
|
||
|
|
<i class="fas fa-display" aria-hidden="true"></i>
|
||
|
|
</span>
|
||
|
|
<span>System</span>
|
||
|
|
</button>
|
||
|
|
</div-->
|
||
|
|
|
||
|
|
<div class="bd-home-theme-preview columns" style="align-items: stretch;">
|
||
|
|
<div class="has-radius-large is-align-items-center is-flex" style="padding: 2.5em 3em;">
|
||
|
|
{{ dark_theme }}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{% highlight html %}{{ dark_theme }}{% endhighlight %}
|
||
|
|
</div>
|
||
|
|
</section>
|