diff --git a/css/area_main-sidebar-nav.less b/css/area_main-sidebar-nav.less
index 4525e98..8eecd0c 100755
--- a/css/area_main-sidebar-nav.less
+++ b/css/area_main-sidebar-nav.less
@@ -70,7 +70,7 @@
}
}
- a {
+ a, label {
&:link,
&:visited {
opacity: .9;
@@ -89,8 +89,12 @@
background-color: var(--color-background);
border-radius: 0.5rem;
+ &.themeToggle input {
+ display: none;
+ }
+
// the toggle element
- a {
+ a, label {
border-radius: 0.5rem;
background-color: var(--color-shade-1);
transition: background-color 150ms;
@@ -159,7 +163,7 @@
position: relative; // always show label, even with collapsed sidebar
z-index: 100;
- a {
+ a, label {
width: 100%;
background-color: transparent;
diff --git a/css/base.less b/css/base.less
index a05abe0..60dc216 100755
--- a/css/base.less
+++ b/css/base.less
@@ -611,18 +611,29 @@ nav > ul {
}
}
- html,
- html.light {
- .light();
- }
-
- html.dark {
- .dark();
- }
-
@media (prefers-color-scheme: dark) {
html {
.dark();
+
+ &:has(#themeLight:checked) {
+ .light();
+ }
+ }
+ #themeToggleDark {
+ display: none !important;
+ }
+ }
+
+ @media (prefers-color-scheme: light) {
+ html {
+ .light();
+
+ &:has(#themeDark:checked) {
+ .dark();
+ }
+ }
+ #themeToggleLight {
+ display: none !important;
}
}
diff --git a/lang/de-informal/lang.php b/lang/de-informal/lang.php
new file mode 100755
index 0000000..c39687d
--- /dev/null
+++ b/lang/de-informal/lang.php
@@ -0,0 +1,107 @@
+<?php
+/**
+ * German language file for template
+ *__background_site__
+ * @license GPL 2 (http://www.gnu.org/licenses/gpl.html)
+ */
+
+
+$lang['direct_prefix'] = 'Direkt';
+$lang['direct_content_main'] = 'Hauptinhalt dieser Seite';
+$lang['direct_quick_search'] = 'Schnellsuche';
+$lang['direct_content_toggle'] = 'Breite des Contents ändern';
+
+$lang['adjunct_linked_logo_text'] = ' - Link zur Startseite';
+$lang['a11y_sidebartoggle'] = 'Navigation anzeigen/verbergen';
+
+$lang['nav-area-head'] = 'Navigationsmenüs und Suche';
+$lang['head_magic_matcher'] = 'MagicMatcher';
+$lang['head_quick_search'] = 'Wikiübergreifende Schnellsuche';
+$lang['head_menu_status'] = 'Seitenstatus';
+$lang['head_breadcrumb_youarehere'] = 'Standortanzeiger';
+$lang['head_menu_trace'] = 'Zuletzt Angesehen';
+$lang['head_meta_box'] = 'Metainformationen zur Seite';
+$lang['head_menu_starred'] = 'Gemerkte Seiten';
+$lang['head_menu_tool-select'] = 'Werkzeuge';
+
+$lang['jump_to_quicksearch'] = 'Springe zur Schnellsuche';
+
+/** it will be shown from plugin lang.php:
+$lang['meta_box_jira_tickets_none'] = 'Keine Jira-Tickets verknüpft';
+$lang['meta_box_tags_none'] = 'Keine Tags verknüpft';
+$lang['js']['meta_box_toc_none'] = 'kein Inhaltsverzeichnis vorhanden';
+$lang['prefix_tasks_user'] = 'Ihre offenen Aufgaben: ';
+*/
+
+$lang['custom_modeswitch'] = 'Lichtschalter';
+
+$lang['tab_tags'] = 'Tags';
+$lang['tab_issues'] = 'Issues';
+
+$lang['quality_trigger'] = 'Seitenanalyse anzeigen/verbergen';
+
+$lang['prefix_tasks_page'] = 'offene Aufgaben auf dieser Seite: ';
+
+$lang['tasks_page_none'] = 'keine offenen Aufgaben für diese Seite';
+$lang['tasks_page_intime'] = 'offenen Aufgaben für diese Seite: %1$d';
+$lang['tasks_page_late'] = 'offenen Aufgaben für diese Seite: %1$d, zu spät: %2$d';
+
+/** is not used
+$lang['discussion'] = 'xxx Diskussion';
+$lang['back_to_article'] = 'xxx Zurück zum Artikel';
+$lang['userpage'] = 'xxx Benutzer-Seite';
+ */
+
+$lang['meta_data'] = 'Meta Daten des Bildes'; /** wird aufgerufen aber nicht ausgegeben - Fehler? */
+$lang['osm_zoom_link_text'] = 'größere Karte anzeigen';
+$lang['osm_zoom_link_title'] = 'externer Link - öffnet in neuem Fenster'; /** in streetmaps - konnte ich nicht finden */
+
+$lang['image_detail'] = 'Detailinformationen zum Bild';
+
+$lang['mode_edit'] = 'Seite bearbeiten';
+
+
+$lang['nav_sidebar'] = 'Navigation';
+$lang['nav_sitemap'] = 'Seitenbaum';
+
+
+/**
+ * preferences colors
+ */
+
+$lang['__site_width__'] = 'Content - Breite (in %)';
+
+$lang['__background_site__'] = 'Website - Hintergrundfarbe';
+$lang['__text_webframe__'] = 'Claim, Titel, Footer (unverlinkt), Navigation (unverlinkt) - Schriftfarbe';
+
+$lang['__nav_menu_color__'] = 'Navigation (verlinkt), Footer (verlinkt), Pagetools Icons, Tabbox - Schriftfarbe';
+$lang['__nav_menu_hover_color__'] = 'Navigation (hover) - Schriftfarbe, Rahmenfarbe; Wiki Icons - Schriftfarbe; Wiki Icons (hover) - Hintergrundfarbe';
+$lang['__nav_menu_hover_bg__'] = 'Navigation (hover) - Hintergrundfarbe; Wiki Icons - Hintergrundfarbe; Wiki Icons (hover) - Schriftfarbe';
+
+$lang['__background__'] = 'Content, Breadcrumb, Pagetools (hover) - Hintergrundfarbe';
+$lang['__text__'] = 'Content: Text - Schriftfarbe';
+
+$lang['__background_neu__'] = 'Content neutral (nicht zu unterschiedlich zum Content-Hintergrund) - Hintergrundfarbe';
+$lang['__text_neu__'] = 'Content neutral - Schriftfarbe';
+
+$lang['__background_page_header__'] = 'Content: Header, Footer, Tabinclude Tab controlls deaktiviert - Hintergrundfarbe';
+$lang['__background_page_footer__'] = 'Content: Footer, Tabinclude Tab controlls deaktiviert - Schriftfarbe';
+
+$lang['__border_light__'] = 'Content: Header, Footer - Rahmenfarbe';
+
+$lang['__highlight__'] = 'Texthervorhebung (z.B. für Suchergebnisse) - Hintergrundfarbe';
+$lang['__highlight_text__'] = 'Texthervorhebung (z.B. für Suchergebnisse) - Schriftfarbe';
+
+$lang['__existing__'] = 'Links zu Wikiseiten, Stift, Pagetools (hover) - Schriftfarbe; Tabbox (hover) - Schriftfarbe, Rahmenfarbe';
+$lang['__link__'] = 'Links zu nicht-Wikiseiten (externe Links) - Schriftfarbe';
+$lang['__missing__'] = 'Links zu nicht vorhandenen Wikiseiten - Schriftfarbe';
+
+$lang['__button_color__'] = 'Buttons - Schriftfarbe';
+$lang['__button_background__'] = 'Buttons - Hintergrundfarbe';
+
+$lang['__background_alt__'] = 'Tabellenkopf, Tabellenzeile (hover), struct Label (hover) - Hintergrundfarbe (alternativ)';
+$lang['__text_alt__'] = 'Tabellenkopf: unverlinkt, Tabellenzeile (hover), struct Label (hover) - Schriftfarbe (alternativ)';
+$lang['__link_alt__'] = 'Tabellenkopf: verlinkt - Schriftfarbe (alternativ)';
+
+$lang['__border__'] = 'Tabellen, Formularfelder, Zitate - Rahmenfarbe';
+$lang['__default_border_radius__'] = 'Wiki Icons, Content (oben rechts) - Borderradius';
diff --git a/lang/de-informal/settings.php b/lang/de-informal/settings.php
new file mode 100755
index 0000000..5bbe996
--- /dev/null
+++ b/lang/de-informal/settings.php
@@ -0,0 +1,18 @@
+<?php
+/**
+ * Deutsche Übersetzung Einstellungen
+ *
+ */
+
+
+$lang['sidebar_sections'] = 'Automatisches Ein- und Ausblenden der Sidebar Abschnitte orientieren sich an diesen Elementen:';
+$lang['sidebar_sections_o_h1'] = 'Überschriften 1. Ordnung';
+$lang['sidebar_sections_o_h1,h2'] = 'Überschriften der 1. und 2. Ordnung';
+$lang['sidebar_sections_o_h1,h2,h3,h4,h5'] = 'Alle Überschriften';
+$lang['sidebar_sections_o_li.level1 > .li'] = 'Top-level Listeneinträge in verschachtelten Listen';
+
+$lang['header_layout'] = 'Layout des Headers anpassen:';
+$lang['header_layout_o_default'] = 'großer Header für langen Wiki Titel und Tagline';
+$lang['header_layout_o_compact'] = 'kompakter Header für kurzen Wiki Titel ohne Tagline';
+
+$lang['autocollapse'] = 'Sidebar automatisch einklappen wenn Nicht-Inhaltsseiten angezigt werden, um mehr Platz zu haben.';
diff --git a/lang/de/lang.php b/lang/de/lang.php
index 478cb44..c39687d 100755
--- a/lang/de/lang.php
+++ b/lang/de/lang.php
@@ -33,6 +33,8 @@ $lang['js']['meta_box_toc_none'] = 'kein Inhaltsverzeichnis vorhanden';
$lang['prefix_tasks_user'] = 'Ihre offenen Aufgaben: ';
*/
+$lang['custom_modeswitch'] = 'Lichtschalter';
+
$lang['tab_tags'] = 'Tags';
$lang['tab_issues'] = 'Issues';
diff --git a/lang/en/lang.php b/lang/en/lang.php
index af8c4b2..2c146f8 100755
--- a/lang/en/lang.php
+++ b/lang/en/lang.php
@@ -33,6 +33,8 @@ $lang['js']['meta_box_toc_none'] = 'no Table of Contents available';
$lang['prefix_tasks_user'] = 'Your open tasks: ';
*/
+$lang['custom_modeswitch'] = 'Light switch';
+
$lang['tab_tags'] = 'Tags';
$lang['tab_issues'] = 'Issues';
diff --git a/main.php b/main.php
index 32a1d52..fdb3d9c 100755
--- a/main.php
+++ b/main.php
@@ -26,6 +26,17 @@ $showSidebar = true;
<!DOCTYPE html>
<html class="edge no-js" lang="<?php echo $conf['lang'] ?>" dir="<?php echo $lang['direction'] ?>">
<head>
+ <script>
+ const setTheme = (theme) => {
+ theme ??= localStorage.theme || "system";
+ document.getElementById("themeLight").checked = theme === "light";
+ document.getElementById("themeDark").checked = theme === "dark";
+ localStorage.theme = theme;
+ };
+ document.addEventListener("DOMContentLoaded", function () {
+ setTheme();
+ });
+ </script>
<?php
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* meta and link relations */
@@ -406,6 +417,14 @@ $classWideContent = (Template::getInstance())->fullWidthClass();
<div class="no"><?php tpl_indexerWebBug() /* provide DokuWiki housekeeping, required in all templates */ ?></div>
-<script src="https://eh22.easterhegg.eu/design/assets/script/styleguide.js" type="text/javascript"></script>
+<script type="text/javascript">
+ document.querySelector("#themeDark").addEventListener("change", (e) => {
+ setTheme(e.target.checked ? "dark" : "system");
+ });
+
+ document.querySelector("#themeLight").addEventListener("change", (e) => {
+ setTheme(e.target.checked ? "light" : "system");
+ });
+</script>
</body>
</html>
diff --git a/tpl/main-sidebar-nav.php b/tpl/main-sidebar-nav.php
index 72c5282..d97fa87 100644
--- a/tpl/main-sidebar-nav.php
+++ b/tpl/main-sidebar-nav.php
@@ -3,21 +3,31 @@ echo \dokuwiki\template\sprintdoc\Template::getInstance()->getNavigation();
?>
<nav class="nav-sitetools">
- <div class="nav toggleTheme dark-only" data-theme="light">
- <a role="heading" aria-level="2">
- <span class="ico">
- <i data-icon="light"></i>
- </span>
- <span class="lbl">Switch to Lightmode</span>
- </a>
+ <div class="nav themeToggle" id="themeToggleLight">
+ <input
+ id="themeLight"
+ type="checkbox"
+ aria-label="Switch between dark and light mode"
+ />
+ <label for="themeLight">
+ <span class="ico">
+ <i data-icon="light"></i>
+ </span>
+ <span class="lbl"><?php echo tpl_getLang('custom_modeswitch'); ?></span>
+ </label>
</div>
- <div class="nav toggleTheme light-only" data-theme="dark">
- <a role="heading" aria-level="2">
- <span class="ico">
- <i data-icon="light"></i>
- </span>
- <span class="lbl">Switch to Darkmode</span>
- </a>
+ <div class="nav themeToggle" id="themeToggleDark">
+ <input
+ id="themeDark"
+ type="checkbox"
+ aria-label="Switch between dark and light mode"
+ />
+ <label for="themeDark">
+ <span class="ico">
+ <i data-icon="light"></i>
+ </span>
+ <span class="lbl"><?php echo tpl_getLang('custom_modeswitch'); ?></span>
+ </label>
</div>
<div class="nav-panel hidden"></div>
<div class="nav"><a href="#sidebar-site-tools" role="heading" aria-level="2">