Skip to content

fix theme toggle button #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ohmlaws merged 4 commits into from
Jul 8, 2026
+71 −333
Merged

fix theme toggle button #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
332ad65
Update sidebar links and navigation items
roniui Jul 8, 2026
9934939
Refactor HTML structure for theme mode handling
roniui Jul 8, 2026
4a7f2db
Delete _sass/themes/_light.scss
roniui Jul 8, 2026
33db90b
Add theme mode variable to SCSS file
roniui Jul 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 58 additions & 8 deletions _includes/sidebar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,30 +49,80 @@
</li>
<!-- .nav-item -->
{% endfor %}
</ul>
</ul>
</nav>

<div class="sidebar-bottom d-flex flex-wrap align-items-center w-100">
{% unless site.theme_mode %}
<button type="button" class="btn btn-link nav-link" aria-label="Switch Mode" id="mode-toggle">
<i class="fas fa-adjust"></i>
</button>
<div class="sidebar-bottom d-flex flex-wrap align-items-center w-100">
{% unless site.theme_mode == 'light' or site.theme_mode == 'dark' %}
{%- capture icon_system -%}
<i class="fa-solid fa-display" data-theme-mode="system"></i>
{%- endcapture -%}

{%- capture icon_light -%}
<i class="fa-regular fa-sun" data-theme-mode="light"></i>
{%- endcapture -%}

{%- capture icon_dark -%}
<i class="fa-regular fa-moon" data-theme-mode="dark"></i>
{%- endcapture -%}

<div class="btn-group dropup">
<button
type="button"
class="btn btn-link nav-link"
aria-label="Switch Mode"
id="mode-toggle"
data-bs-toggle="dropdown"
>
{{- icon_light -}}
{{- icon_dark -}}
{{- icon_system -}}
</button>
<ul class="dropdown-menu rounded-3 mb-1 p-1">
<li>
<button class="dropdown-item d-flex align-items-center" type="button" data-theme-mode="light">
{{- icon_light -}}
{{- site.data.locales[lang].theme.light -}}
</button>
</li>
<li>
<button class="dropdown-item d-flex align-items-center" type="button" data-theme-mode="dark">
{{- icon_dark -}}
{{- site.data.locales[lang].theme.dark -}}
</button>
</li>
<li>
<button class="dropdown-item d-flex align-items-center" type="button" data-theme-mode="system">
{{- icon_system -}}
{{- site.data.locales[lang].theme.system -}}
</button>
</li>
</ul>
</div>

{% if site.data.contact.size > 0 %}
<span class="icon-border"></span>
{% endif %}
{% endunless %}

{% for entry in site.data.contact %}
{%- assign url = null -%}

{% case entry.type %}
{% when 'github', 'twitter' %}
{%- unless site[entry.type].username -%}
{%- continue -%}
{%- endunless -%}
{%- capture url -%}
https://{{ entry.type }}.com/{{ site[entry.type].username }}
{%- endcapture -%}
{% when 'email' %}
{% assign email = site.social.email | split: '@' %}
{%- unless site.social.email -%}
{%- continue -%}
{%- endunless -%}
{%- assign email = site.social.email | split: '@' -%}
{%- capture url -%}
javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
javascript:void(location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@'))
{%- endcapture -%}
{% when 'rss' %}
{% assign url = '/feed.xml' | relative_url %}
Expand Down
17 changes: 9 additions & 8 deletions _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,14 @@

{% include lang.html %}

{% if site.theme_mode %}
{% capture prefer_mode %}data-mode="{{ site.theme_mode }}"{% endcapture %}
{% endif %}

<!-- `site.alt_lang` can specify a language different from the UI -->
<html lang="{{ page.lang | default: site.alt_lang | default: site.lang }}" {{ prefer_mode }}>
{% include head.html %}
<html
lang="{{ page.lang | default: site.alt_lang | default: site.lang }}"
{%- if site.theme_mode == 'light' or site.theme_mode == 'dark' -%}
data-bs-theme="{{ site.theme_mode }}"
{%- endif -%}
>
{% include head.html lang=lang %}

<body>
{% include sidebar.html lang=lang %}
Expand All @@ -25,7 +26,7 @@

<div class="row flex-grow-1">
<main aria-label="Main Content" class="col-12 col-lg-11 col-xl-9 px-md-4">
{% if layout.refactor or layout.layout == 'default' %}
{% if layout.layout == 'default' %}
{% include refactor-content.html content=content lang=lang %}
{% else %}
{{ content }}
Expand Down Expand Up @@ -84,4 +85,4 @@
{% include_cached search-loader.html lang=lang %}
<script src="{{ '/assets/js/pwa-install.js' | relative_url }}"></script>
</body>
</html>
</html>
Loading
Loading