diff options
| author | Julien Dessaux | 2023-01-25 17:45:06 +0100 |
|---|---|---|
| committer | Julien Dessaux | 2023-01-25 18:59:53 +0100 |
| commit | 627f1f5d32ebeb89c41f72d960b4ab35778f7625 (patch) | |
| tree | 29bd5f7531bd5bfe9c06c93f9166fdbd704676b9 /layouts | |
| parent | Updated last blog article (diff) | |
| download | www-627f1f5d32ebeb89c41f72d960b4ab35778f7625.tar.gz www-627f1f5d32ebeb89c41f72d960b4ab35778f7625.tar.bz2 www-627f1f5d32ebeb89c41f72d960b4ab35778f7625.zip | |
Added themes
Diffstat (limited to 'layouts')
| -rw-r--r-- | layouts/404.html | 4 | ||||
| -rw-r--r-- | layouts/_default/baseof.html | 6 | ||||
| -rw-r--r-- | layouts/partials/nav.html | 7 | ||||
| -rw-r--r-- | layouts/partials/themeSwitcher.html | 14 |
4 files changed, 26 insertions, 5 deletions
diff --git a/layouts/404.html b/layouts/404.html index dfe20b2..31808d1 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -15,8 +15,7 @@ {{- $header := resources.Get "header.css" -}} {{- $home := resources.Get "home.css" -}} {{- $pagination := resources.Get "pagination.css" -}} - {{- $selenized := resources.Get "selenized.css" -}} - {{- $allCss := slice $base $code $footer $header $home $pagination $selenized | resources.Concat "static/all.css" | fingerprint | minify -}} + {{- $allCss := slice $base $code $footer $header $home $pagination | resources.Concat "static/all.css" | fingerprint | minify -}} <link rel="stylesheet" href="{{ $allCss.Permalink }}"> {{ range .AlternativeOutputFormats -}} @@ -33,5 +32,6 @@ <p>Sorry, but the page you were trying to view does not exist. Please refer to the menu above to resume your navigation.</p> </main> {{- partial "footer.html" . -}} + {{- partial "themeSwitcher.html" . -}} </body> </html> diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 239a5ab..201d609 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,7 +1,7 @@ {{ $title := print .Title " | " .Site.Title }} {{ if .IsHome }}{{ $title = .Site.Title }}{{ end }} <!doctype html> -<html class="no-js" lang="en"> +<html class="black-theme" lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> @@ -15,8 +15,7 @@ {{- $header := resources.Get "header.css" -}} {{- $home := resources.Get "home.css" -}} {{- $pagination := resources.Get "pagination.css" -}} - {{- $selenized := resources.Get "selenized.css" -}} - {{- $allCss := slice $base $code $footer $header $home $pagination $selenized | resources.Concat "static/all.css" | fingerprint | minify -}} + {{- $allCss := slice $base $code $footer $header $home $pagination | resources.Concat "static/all.css" | fingerprint | minify -}} <link rel="stylesheet" href="{{ $allCss.Permalink }}"> {{ range .AlternativeOutputFormats -}} @@ -32,5 +31,6 @@ {{- block "main" . }}{{ end -}} </main> {{- partial "footer.html" . -}} + {{- partial "themeSwitcher.html" . -}} </body> </html> diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html index 1020c03..5abfc6f 100644 --- a/layouts/partials/nav.html +++ b/layouts/partials/nav.html @@ -2,6 +2,13 @@ <nav> <ul> <li class="nav-menu-title{{if .IsHome}} nav-menu-active{{end}}"><a href="/">{{ .Site.Title }}</a></li> + <li> + <select id="themes" class="nav-menu-magin-left" onchange="setTheme()"> + <option value="black-theme">Black</option> + <option value="dark-theme">Dark</option> + <option value="light-theme">Light</option> + </select> + </li> {{- $p := . -}} {{- range first 1 .Site.Menus.main.ByWeight -}} diff --git a/layouts/partials/themeSwitcher.html b/layouts/partials/themeSwitcher.html new file mode 100644 index 0000000..685bd82 --- /dev/null +++ b/layouts/partials/themeSwitcher.html @@ -0,0 +1,14 @@ +<script> + function setTheme() { + const themeName = document.getElementById('themes').value; + localStorage.setItem('theme', themeName); + document.documentElement.className = themeName; + } + (function () { // Set the theme on page load + const themeName = localStorage.getItem('theme'); + if (themeName) { + document.documentElement.className = themeName; + document.getElementById('themes').value = themeName; + } + })(); +</script> |