Adjust theme switch
This commit is contained in:
parent
0501598d41
commit
a43ea460c3
8 changed files with 200 additions and 27 deletions
|
@ -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;
|
||||
|
|
|
@ -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
107
lang/de-informal/lang.php
Executable 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
18
lang/de-informal/settings.php
Executable 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.';
|
|
@ -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';
|
||||
|
||||
|
|
|
@ -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';
|
||||
|
||||
|
|
21
main.php
21
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>
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue