Add manual theme switcher (fixes #5)

This commit is contained in:
daudix
2024-08-18 02:19:34 +03:00
parent 656a6f2328
commit 67c698b949
10 changed files with 285 additions and 108 deletions

View File

@ -46,8 +46,14 @@
}
{%- if config.extra.primary_color_dark %}
[data-theme="dark"] {
--primary-color: {{ config.extra.primary_color_dark }};
--primary-color-alpha: {{ config.extra.primary_color_dark_alpha }};
--contrast-color: {% if config.extra.fix_contrast_dark %}rgba(0, 0, 0, 0.8){% else %}#fff{% endif %};
}
@media (prefers-color-scheme: dark) {
:root {
:root:not([data-theme="light"]) {
--primary-color: {{ config.extra.primary_color_dark }};
--primary-color-alpha: {{ config.extra.primary_color_dark_alpha }};
--contrast-color: {% if config.extra.fix_contrast_dark %}rgba(0, 0, 0, 0.8){% else %}#fff{% endif %};
@ -83,15 +89,19 @@
{%- include "partials/copy_button.html" %}
{%- endif %}
{%- set scripts = [] %}
{%- if config.build_search_index %}
{%- include "partials/search.html" %}
{%- set scripts = ["elasticlunr.min.js"] %}
{%- else %}
{%- set scripts = [""] %}
{%- set scripts = scripts | concat(with=["elasticlunr.min.js"]) %}
{%- endif %}
{%- if config.extra.nav.show_theme_switcher %}
{%- set scripts = scripts | concat(with=["theme-switcher.js"]) %}
{%- endif %}
{%- if config.extra.scripts %}
{%- set scripts = config.extra.scripts %}
{%- set scripts = scripts | concat(with=config.extra.scripts) %}
{%- endif %}
{%- if page.extra.scripts %}

View File

@ -46,6 +46,32 @@
{%- if config.languages | length > 0 %}
{%- include "partials/language_switcher.html" %}
{%- endif -%}
{%- if config.extra.nav.show_theme_switcher %}
<li id="theme-switcher">
<details>
<summary title="{{ macros_translate::translate(key='theme', default='Theme', language_strings=language_strings) }}">
<i class="icon"></i>
</summary>
<ul>
<li>
<button id="theme-light" onclick="switchTheme('light')" title="{{ macros_translate::translate(key='theme_light', default='Switch to light theme', language_strings=language_strings) }}">
<i class="icon"></i>
</button>
</li>
<li>
<button id="theme-dark" onclick="switchTheme('dark')" title="{{ macros_translate::translate(key='theme_dark', default='Switch to dark theme', language_strings=language_strings) }}">
<i class="icon"></i>
</button>
</li>
<li>
<button id="theme-system" onclick="switchTheme('system')" title="{{ macros_translate::translate(key='theme_system', default='Use system theme', language_strings=language_strings) }}">
<i class="icon"></i>
</button>
</li>
</ul>
</details>
</li>
{%- endif %}
{%- if config.generate_feeds and config.extra.nav.show_feed %}
<li id="feed">
<a href="{{ get_url(path=config.feed_filenames[0]) }}" title="{{ macros_translate::translate(key='feed', default='Feed', language_strings=language_strings) }}">