Init Commit

themes/adritian/layouts/partials/selector-theme.html

@@ -0,0 +1,38 @@
+{{/* indicates where the partial is placed
+so far the placement can either be header or footer */}}
+{{- $placement := .Scratch.Get "selectorPlacement" }}
+{{- $direction := .Scratch.Get "dropdownDirection" }}
+<div id='{{ .Scratch.Get "selectorPlacement" }}-color-selector'
+  class='d-grid gap-2 col-6 mx-auto nav-link dropdown {{ if eq $direction "up" }}dropup{{ end }} {{ if eq $placement "mobile-header" }}nav-link{{ end }}'>
+  <button class="btn btn-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center show bd-theme-selector"
+    id='bd-theme-{{ .Scratch.Get "selectorPlacement" }}' type="button" aria-expanded="true" data-bs-toggle="dropdown"
+    data-bs-display="static" aria-label='{{ i18n "toggle_theme" }}'>
+    <span class="theme-icon auto d-none" aria-hidden="true">{{ i18n "theme_auto_short" }}</span>
+    <span class="current-theme">{{ i18n "theme_auto" }}</span>
+    <span class="d-lg-none ms-2 visually-hidden bd-theme-text" id="bd-theme-text-{{ $placement }}">{{ i18n
+      "toggle_theme" }}</span>
+  </button>
+  <ul id="theme-dropdown-{{ $placement }}" class="dropdown-menu dropdown-menu-end {{ if eq $direction " up" }}dropup{{
+    end }}" aria-labelledby="bd-theme-text-{{ $placement }}" data-bs-popper="static">
+    <li>
+      <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="light"
+        aria-pressed="true">
+        {{ i18n "theme_light" }}
+      </button>
+    </li>
+    <li>
+      <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark"
+        aria-pressed="false">
+        {{ i18n "theme_dark" }}
+        <span class="theme-icon dark d-none" aria-hidden="true">{{ i18n "theme_dark_short" }}</span>
+      </button>
+    </li>
+    <li>
+      <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto"
+        aria-pressed="false">
+        {{ i18n "theme_auto" }}
+        <span class="theme-icon light d-none" aria-hidden="true">{{ i18n "theme_light_short" }}</span>
+      </button>
+    </li>
+  </ul>
+</div>