diff options
Diffstat (limited to 'layouts/partials')
| -rw-r--r-- | layouts/partials/nav.html | 7 | ||||
| -rw-r--r-- | layouts/partials/themeSwitcher.html | 14 |
2 files changed, 21 insertions, 0 deletions
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> |