Add automatic dark/light theme switching based on os

This commit is contained in:
Djordje Atlialp 2021-01-14 10:55:00 +01:00
parent 8035db5c05
commit 79d0488087
16 changed files with 28 additions and 72 deletions

View file

@ -5,7 +5,7 @@
</head>
{{ block "body" . }}
<body class="{{ if ne $.Site.Params.defaultTheme "light" -}} dark-theme {{- end -}}">
<body>
{{ end }}
<div class="container">

View file

@ -1,5 +1,5 @@
{{ define "body" }}
<body class="{{ if ne $.Site.Params.defaultTheme "light" -}} dark-theme {{- end -}} {{ if .Site.Params.background_image }} background-image" style="background-image: url('{{ .Site.Params.backgroundImage }}');" {{ else }}"{{ end }}>
<body class="{{ if .Site.Params.background_image }} background-image" style="background-image: url('{{ .Site.Params.backgroundImage }}');" {{ else }}"{{ end }}>
{{ end }}
{{ define "main" }}

View file

@ -12,8 +12,6 @@
</svg>
</span>
{{ end }}
<span class="theme-toggle unselectable">{{ partial "theme-icon.html" . }}</span>
</span>
</span>
</header>

View file

@ -1,8 +1,7 @@
{{ $main := resources.Get "js/main.js" }}
{{ $menu := resources.Get "js/menu.js" }}
{{ $prism := resources.Get "js/prism.js" }}
{{ $theme := resources.Get "js/theme.js" }}
{{ $secureJS := slice $main $menu $prism $theme | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
{{ $secureJS := slice $main $menu $prism | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
<script type="text/javascript" src="{{ $secureJS.RelPermalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
{{- if .Site.GoogleAnalytics }}

View file

@ -1,5 +0,0 @@
<svg class="theme-toggler" width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 41C32.4934 41 41 32.4934 41 22C41 11.5066 32.4934 3 22
3C11.5066 3 3 11.5066 3 22C3 32.4934 11.5066 41 22 41ZM7 22C7
13.7157 13.7157 7 22 7V37C13.7157 37 7 30.2843 7 22Z"/>
</svg>

Before

Width:  |  Height:  |  Size: 317 B