Fixed theme chooser not displayed upon first connection and some cleanup

This commit is contained in:
Julien Dessaux 2023-01-28 23:21:42 +01:00
parent 9ab3804aec
commit 7ab6159c7f
Signed by: adyxax
GPG key ID: F92E51B86E07177E
3 changed files with 5 additions and 8 deletions

View file

@ -1,5 +1,4 @@
.black-theme { .black-theme {
/* Black mode */
--bg-0: #181818; --bg-0: #181818;
--bg-1: #252525; --bg-1: #252525;
--bg-2: #3b3b3b; --bg-2: #3b3b3b;
@ -24,7 +23,6 @@
--br_violet: #b891f5; --br_violet: #b891f5;
} }
.dark-theme { .dark-theme {
/* Dark mode */
--bg-0: #103c48; --bg-0: #103c48;
--bg-1: #184956; --bg-1: #184956;
--bg-2: #2d5b69; --bg-2: #2d5b69;
@ -49,7 +47,6 @@
--br_violet: #bd96fa; --br_violet: #bd96fa;
} }
.light-theme { .light-theme {
/* Light mode */
--bg-0: #fbf3db; --bg-0: #fbf3db;
--bg-1: #ece3cc; --bg-1: #ece3cc;
--bg-2: #d5cdb6; --bg-2: #d5cdb6;

View file

@ -14,12 +14,12 @@
{{- end -}} {{- end -}}
{{- $url := urls.Parse .URL -}} {{- $url := urls.Parse .URL -}}
{{- $baseurl := urls.Parse $.Site.Params.Baseurl -}} {{- $baseurl := urls.Parse $.Site.Params.Baseurl -}}
<li class="nav-menu-margins-left-and-right{{if $active }} nav-menu-active{{end}}"> <li{{if $active }} class="nav-menu-active"{{end}}>
<a href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}"{{ if ne $url.Host $baseurl.Host }}target="_blank" {{ end }}>{{ .Name }}</a> <a href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}"{{ if ne $url.Host $baseurl.Host }}target="_blank" {{ end }}>{{ .Name }}</a>
</li> </li>
{{ end }} {{ end }}
<li> <li>
<select id="themes" class="nav-menu-magin-left" onchange="setTheme()"> <select id="themes" onchange="setTheme()">
<option value="black-theme">Black</option> <option value="black-theme">Black</option>
<option value="dark-theme">Dark</option> <option value="dark-theme">Dark</option>
<option value="light-theme">Light</option> <option value="light-theme">Light</option>

View file

@ -1,15 +1,15 @@
<script> <script>
function setTheme() { function setTheme() {
const themeName = document.getElementById('themes').value; const themeName = document.getElementById('themes').value;
localStorage.setItem('theme', themeName);
document.documentElement.className = themeName; document.documentElement.className = themeName;
localStorage.setItem('theme', themeName);
} }
(function () { // Set the theme on page load (function () { // Set the theme on page load
const elt = document.getElementById('themes');
elt.style.display = 'block';
const themeName = localStorage.getItem('theme'); const themeName = localStorage.getItem('theme');
if (themeName) { if (themeName) {
document.documentElement.className = themeName; document.documentElement.className = themeName;
const elt = document.getElementById('themes');
elt.style.display = "block";
elt.value = themeName; elt.value = themeName;
} }
})(); })();