syntaxerrormmm/hugo-theme-anubis2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Dark theme

Browse source
This commit is contained in:
Dmitry Kolosov 2020-07-09 22:15:38 +03:00
parent 32818dacf1
commit 5be39c3882
14 changed files with 254 additions and 281 deletions
Download patch file Download diff file Expand all files Collapse all files

19
layouts/_default/baseof.html
View file

@ -1,5 +1,9 @@
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
{{ $dataTheme := "" }}
{{ if eq site.Params.style "dark-without-switcher" }}
{{ $dataTheme = "dark" }}
{{ end }}
<html lang="{{ .Site.LanguageCode }}" data-theme="{{ $dataTheme }}">
<head>
{{ block "head" . }}
{{ partial "head.html" . }}
@ -16,16 +20,9 @@
<main id="main" tabindex="-1">
{{ block "main" . }}{{ end }}
</main>
<footer>
{{ block "footer" . }}
{{ $languagesCount := $.Site.Home.AllTranslations }}
{{ if gt $languagesCount 1 }}
{{ partial "languageSelect.html" . }}
{{ end }}
{{ partial "footer.html" . }}
{{ end }}
</footer>
{{ block "footer" . }}
{{ partial "footer.html" . }}
{{ end }}
</div>
</body>
</html>

18
layouts/partials/cssColors.html Normal file
View file

@ -0,0 +1,18 @@
<style>
{{ if eq site.Params.style "dark-without-switcher" }}
:root {
{{ partial "dark.css" . | safeCSS }}
}
{{ else if eq site.Params.style "auto-without-switcher" }}
@media (prefers-color-scheme: dark) {
:root {
{{ partial "dark.css" . | safeCSS }}
}
}
{{else }}
[data-theme="dark"] {
{{ partial "dark.css" . | safeCSS }}
}
{{ end }}
</style>

23
layouts/partials/dark.css Normal file
View file

@ -0,0 +1,23 @@
--font-color: #eee;
--bg-color: #212121;
--link-color:#599ada;
--link-state-color:#ff5858;
--link-state-border-color: rgba(238, 54, 54, 0.5);
--thead-bg-color: #343a40;
--table-border-color: lightgrey;
--pre-color: #333;
--pre-bg-color: #f1f1f1;
--bq-color: #ccc;
--hr-color: #ccc;
--pagination-bg-color: #373737;
--pagination-link-color: #b6b6b6;
--post-info-color: grey;
--switcher-color: #333;
--switcher-bg-color: #fff;

17
layouts/partials/footer.html
View file

@ -1,3 +1,14 @@
<p>© {{ if isset .Site.Params "author"}}{{ .Site.Params.author }}, {{end}}{{ now.Year }}<br>
{{ i18n "powered" | humanize }} <a target="_blank" href="https://gohugo.io/">Hugo</a>, {{ i18n "theme" }} <a target="_blank" href="https://github.com/mitrichius/hugo-theme-anubis">Anubis</a>.
</p>
<footer class="common-footer">
{{ $languagesCount := $.Site.Home.AllTranslations }}
{{ if gt $languagesCount 1 }}
{{ partial "languageSelect.html" . }}
{{ end }}
<div class="copyright">
<p>© {{ if isset .Site.Params "author"}}{{ .Site.Params.author }}, {{end}}{{ now.Year }}<br>
{{ i18n "powered" | humanize }} <a target="_blank" href="https://gohugo.io/">Hugo</a>, {{ i18n "theme" }} <a target="_blank" href="https://github.com/mitrichius/hugo-theme-anubis">Anubis</a>.
</p>
</div>
{{ partial "themeSwitcher.html" . }}
</footer>

13
layouts/partials/head.html
View file

@ -14,19 +14,10 @@
<link rel="icon" type="image/x-icon" href="{{ "favicon.ico" | absURL }}">
<link rel="apple-touch-icon-precomposed" href="{{ "favicon.png" | absURL }}">
<link rel="stylesheet" href="{{ "css/light.css" | absURL }}?rnd={{ now.Unix }}" />
{{ partial "cssColors.html" }}
<link rel="stylesheet" href="{{ "css/style.css" | absURL }}?rnd={{ now.Unix }}" />
{{- $style := "light" -}}
{{- if and (isset site.Params "style") (ne site.Params.style "") -}}
{{- $style = site.Params.style | lower -}}
{{- end -}}
{{- if eq $style "dark" -}}
<link rel="stylesheet" href="{{ "css/dark.css" | absURL }}?rnd={{ now.Unix }}" />
{{- else -}}
<link rel="stylesheet" href="{{ "css/light.css" | absURL }}?rnd={{ now.Unix }}" />
{{- end -}}
{{ range .Site.Params.customCSS -}}
<link rel="stylesheet" href="{{ . | absURL }}?rnd={{ now.Unix }}">
{{- end }}

77
layouts/partials/themeSwitcher.html Normal file
View file

@ -0,0 +1,77 @@
{{ $style := "light-without-switcher" }}
{{ if and (isset site.Params "style") (ne site.Params.style "") }}
{{ $style = site.Params.style | lower }}
{{ end }}
{{ if not (in (slice "light-without-switcher" "dark-without-switcher" "auto-without-switcher") $style) }}
<button class="theme-switcher">
Dark theme
</button>
<script>
const STORAGE_KEY = 'user-color-scheme'
const defaultTheme = {{ $style }}
let currentTheme
let switchButton
let autoDefinedScheme = window.matchMedia('(prefers-color-scheme: dark)')
const autoChangeScheme = e => {
currentTheme = e.matches ? 'dark' : 'light'
document.documentElement.setAttribute('data-theme', currentTheme)
changeButtonText()
}
document.addEventListener('DOMContentLoaded', function() {
switchButton = document.querySelector('.theme-switcher')
currentTheme = detectCurrentScheme()
if (currentTheme == 'dark') {
document.documentElement.setAttribute('data-theme', 'dark')
}
if (currentTheme == 'auto') {
autoChangeScheme(autoDefinedScheme);
autoDefinedScheme.addListener(autoChangeScheme);
}
changeButtonText()
switchButton.addEventListener('click', switchTheme, false)
})
function detectCurrentScheme() {
if (localStorage.getItem(STORAGE_KEY)) {
return localStorage.getItem(STORAGE_KEY)
}
if (defaultTheme) {
return defaultTheme
}
if (!window.matchMedia) {
return 'light'
}
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark'
}
return 'light'
}
function changeButtonText()
{
console.log(currentTheme)
switchButton.textContent = currentTheme == 'dark' ? 'Light theme' : 'Dark theme'
}
function switchTheme(e) {
if (currentTheme == 'dark') {
localStorage.setItem(STORAGE_KEY, 'light')
document.documentElement.setAttribute('data-theme', 'light')
currentTheme = 'light'
} else {
localStorage.setItem(STORAGE_KEY, 'dark')
document.documentElement.setAttribute('data-theme', 'dark')
currentTheme = 'dark'
}
changeButtonText()
}
</script>
{{ end }}