Socialify

Folder ..

Viewing theme-toggler.html
34 lines (34 loc) • 1.6 KB

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
{{- $isExamples := eq .Layout "examples" -}}
<button class="btn {{ if $isExamples }}btn-bd-primary{{ else }}btn-link nav-link px-0 px-lg-2{{ end }} py-2 dropdown-toggle d-flex align-items-center"
        id="bd-theme"
        type="button"
        aria-expanded="false"
        data-bs-toggle="dropdown"
        {{ if not $isExamples }}data-bs-display="static"{{ end }}
        aria-label="Toggle theme (auto)">
  <svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
  <span class="{{ if $isExamples }}visually-hidden{{ else }}d-lg-none ms-2{{ end }}" id="bd-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end{{ if $isExamples }} shadow{{ end }}" aria-labelledby="bd-theme-text">
  <li>
    <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
      <svg class="bi me-2 opacity-50"><use href="#sun-fill"></use></svg>
      Light
      <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
    </button>
  </li>
  <li>
    <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
      <svg class="bi me-2 opacity-50"><use href="#moon-stars-fill"></use></svg>
      Dark
      <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
    </button>
  </li>
  <li>
    <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
      <svg class="bi me-2 opacity-50"><use href="#circle-half"></use></svg>
      Auto
      <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
    </button>
  </li>
</ul>