Adjust theme switch

This commit is contained in:
kritzl 2025-03-03 22:56:33 +01:00
commit a43ea460c3
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
8 changed files with 200 additions and 27 deletions

View file

@ -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;

View file

@ -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;
}
}

107
lang/de-informal/lang.php Executable file
View file

@ -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';

18
lang/de-informal/settings.php Executable file
View file

@ -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.';

View file

@ -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';

View file

@ -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';

View file

@ -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>

View file

@ -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">