systemausfall.org/hugo-theme-hilfe
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Dark mode (#66)

Browse source
This commit is contained in:
Robert Kaussow 2021-04-27 23:44:35 +02:00 • committed by GitHub
parent 5eff47c68b
commit 59be9a504f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
50 changed files with 1527 additions and 1154 deletions
Download patch file Download diff file Expand all files Collapse all files

4
layouts/_default/baseof.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="{{ .Site.Language.Lang }}">
<html lang="{{ .Site.Language.Lang }}" class="color-toggle-hidden">
<head>
{{ partial "head/meta" . }}
@ -12,7 +12,7 @@
<body itemscope itemtype="https://schema.org/WebPage">
{{ partial "svg-icon-symbols" . }}
<div class="wrapper">
<div class="wrapper {{ if default false .Site.Params.geekdocDarkModeDim }}dark-mode-dim{{ end }}">
<input type="checkbox" class="hidden" id="menu-control" />
{{ partial "site-header" (dict "Root" . "MenuEnabled" true) }}

1
layouts/partials/head/meta.html
View file

@ -1,5 +1,6 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark" />
{{ $description := default (default .Site.Title .Site.Params.description) (default .Summary .Description) }}
{{ $keywords := default .Site.Params.Keywords .Keywords }}

2
layouts/partials/head/others.html
View file

@ -1,5 +1,7 @@
<link rel="icon" href="{{ "favicon/favicon-32x32.png" | relURL }}" type="image/x-icon">
<script src="{{ index .Site.Data.assets "js/darkmode.min.js" | relURL }}"></script>
<link rel="preload" as="font" href="{{ "fonts/Metropolis.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">
<link rel="preload" as="font" href="{{ "fonts/LiberationSans.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">
<link rel="preload" as="font" href="{{ "fonts/LiberationSans-Bold.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">

5
layouts/partials/site-header.html
View file

@ -12,5 +12,10 @@
{{ .Root.Site.Title }}
</span>
</a>
<span id="gdoc-dark-mode">
<svg class="icon gdoc_brightness_dark"><use xlink:href="#gdoc_brightness_dark"></use></svg>
<svg class="icon gdoc_brightness_light"><use xlink:href="#gdoc_brightness_light"></use></svg>
<svg class="icon gdoc_brightness_auto"><use xlink:href="#gdoc_brightness_auto"></use></svg>
</span>
</div>
</header>

30
layouts/shortcodes/img.html
View file

@ -1,4 +1,4 @@
{{ $source := ($.Page.Resources.ByType "image").GetMatch (printf "*%s*" (.Get "name")) }}
{{ $source := ($.Page.Resources.ByType "image").GetMatch (printf "%s" (.Get "name")) }}
{{ $customAlt := .Get "alt" }}
{{ $customSize := .Get "size" }}
{{ $lazyLoad := default (default true $.Site.Params.GeekdocImageLazyLoading) (.Get "lazy") }}
@ -16,21 +16,19 @@
<div class="flex justify-center">
<figure class="gdoc-markdown__figure">
<a class="gdoc-markdown__link--raw" href="{{ .RelPermalink }}">
<img
{{ if $lazyLoad }}loading="lazy"{{ end }}
{{ with $customSize }}
src="{{ index $size $customSize }}" alt="{{ $caption }}"
{{ else }}
srcset="{{ $size.tiny }} 320w,
{{ $size.small }} 600w,
{{ $size.medium }} 1200w,
{{ $size.large }} 2x"
sizes="(max-width: 320px) 320w,
(max-width: 600px) 600w,
(max-width: 1200px) 1200w,
2x"
src="{{ $size.large }}" alt="{{ $caption }}"
{{ end }}/>
<picture>
<source
{{ with $customSize }}
srcset="{{ index $size $customSize }}"
{{ else }}
srcset="{{ $size.small }} 600w,
{{ $size.medium }} 1200w"
sizes="100vw"
{{ end }} />
<img
{{ if $lazyLoad }}loading="lazy"{{ end }}
src="{{ $size.large }}" alt="{{ $caption }}" />
</picture>
</a>
{{ with $caption }}
<figcaption>{{ . }}{{ with $source.Params.credits }} ({{ . | $.Page.RenderString }}){{ end }}</figcaption>

19
layouts/shortcodes/mermaid.html
View file

@ -3,8 +3,25 @@
<script defer src="{{ index .Site.Data.assets "js/mermaid.min.js" | relURL }}"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
let currentMode = localStorage.getItem(THEME);
let darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
let primaryColor = "#ececff";
let darkMode = false;
console.log(currentMode)
if (currentMode === DARK_MODE || (currentMode === AUTO_MODE && darkModeQuery.matches)) {
primaryColor = "#6C617E";
darkMode = true;
}
mermaid.initialize({
flowchart: { useMaxWidth: true }
flowchart: { useMaxWidth: true },
theme: "base",
themeVariables: {
darkMode: darkMode,
primaryColor: primaryColor,
},
});
});
</script>