drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-08-23 13:36:41 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(navbar): toggle theme inside navbar (#759)

Browse Source 
* feat(theme-toggle): toggle inside navbar

* chore: used partial parameters

* chore: create a constant for icons height inside navbar

* feat: better style integration

* review: invert enable label option

* review: change class value

* review

Co-authored-by: Xin <5097752+imfing@users.noreply.github.com>

* docs: theme toggle

* docs: translations

---------

Co-authored-by: Xin <5097752+imfing@users.noreply.github.com>
This commit is contained in:
Ludovic Fernandez
2025-08-16 17:46:15 +02:00
committed by GitHub
parent 880084b091
commit 6613f94b75
6 changed files with 35 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
layouts/_partials/theme-toggle.html
View File

@@ -1,21 +1,22 @@
{{- $hideLabel := .hideLabel | default false -}}
{{- $hideLabel := .hideLabel -}}
{{- $iconHeight := .iconHeight | default 12 -}}
{{- $class := .class | default "hx:px-2 hx:text-xs hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:hover:bg-primary-100/5 hx:dark:hover:text-gray-50 hx:font-medium hx:text-gray-600 hx:transition-colors hx:dark:text-gray-400" -}}
{{- $changeTheme := (T "changeTheme") | default "Change theme" -}}
{{- $light := (T "light") | default "Light" -}}
{{- $dark := (T "dark") | default "Dark" -}}
<button
title="{{ $changeTheme }}"
data-theme="light"
class="hextra-theme-toggle hx:cursor-pointer hx:group hx:h-7 hx:rounded-md hx:px-2 hx:text-left hx:text-xs hx:font-medium hx:text-gray-600 hx:transition-colors hx:dark:text-gray-400 hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:hover:bg-primary-100/5 hx:dark:hover:text-gray-50"
class="hextra-theme-toggle hx:cursor-pointer hx:group hx:rounded-md hx:text-left {{ $class }}"
type="button"
aria-label="{{ $changeTheme }}"
>
<div class="hx:flex hx:items-center hx:gap-2 hx:capitalize">
{{- partial "utils/icon.html" (dict "name" "sun" "attributes" "height=12 class=\"hx:group-data-[theme=light]:hidden\"") -}}
{{- partial "utils/icon.html" (dict "name" "sun" "attributes" (printf "height=%d class=\"hx:group-data-[theme=light]:hidden\"" $iconHeight)) -}}
{{- if not $hideLabel }}<span class="hx:group-data-[theme=light]:hidden">{{ $light }}</span>{{ end -}}
{{- partial "utils/icon.html" (dict "name" "moon" "attributes" "height=12 class=\"hx:group-data-[theme=dark]:hidden\"") -}}
{{- partial "utils/icon.html" (dict "name" "moon" "attributes" (printf "height=%d class=\"hx:group-data-[theme=dark]:hidden\"" $iconHeight)) -}}
{{- if not $hideLabel }}<span class="hx:group-data-[theme=dark]:hidden">{{ $dark }}</span>{{ end -}}
</div>
</button>