1
0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00

Add theme settings (#2054)

This commit is contained in:
Paweł Kuna
2025-03-23 20:52:06 +01:00
committed by GitHub
parent 215eaa4acb
commit 9bbcb99b90
52 changed files with 1459 additions and 685 deletions

View File

@@ -14,7 +14,7 @@ permalink: illustrations.html
{% assign skinColor = site.skinColors | first %}
{% assign color = site.colors | first %}
<div class="mb-7" style="--tblr-illustrations-primary: {{ color.hex }}; --tblr-illustrations-skin: {{ skinColor.hex }};" id="current-illustration-style">
<div class="mb-7" style="--tblr-illustrations-primary: var(--tblr-color-primary); --tblr-illustrations-skin: {{ skinColor.hex }};" id="current-illustration-style">
<div class="row row-cards">
<div class="col-12">
<div class="row row-cards row-deck g-4">
@@ -33,10 +33,22 @@ permalink: illustrations.html
<div>
<div class="form-label">Primary color</div>
<div class="row g-2">
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="var(--tblr-color-primary)" class="form-colorinput-input js-select-color" checked />
<span class="form-colorinput-color bg-primary"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="var(--tblr-bg-surface-inverted)" class="form-colorinput-input js-select-color" />
<span class="form-colorinput-color bg-inverted"></span>
</label>
</div>
{% for color in site.colors %}
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="{{ color[1].hex }}" class="form-colorinput-input js-select-color" {% if forloop.first %} checked{% endif %} />
<input name="color" type="radio" value="{{ color[1].hex }}" class="form-colorinput-input js-select-color" />
<span class="form-colorinput-color bg-{{ color[1].class }}"></span>
</label>
</div>