diff --git a/_includes/footer.html b/_includes/footer.html index 742db1ee..4f8a0432 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,16 +1,28 @@ diff --git a/_includes/head.html b/_includes/head.html index 4b6b7201..a37ec798 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -17,6 +17,7 @@ {% endif %} + {% include favicon.html %} {% include seo.html %} diff --git a/assets/css/style.scss b/assets/css/style.scss index 198b44a2..a17c34ea 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -480,6 +480,12 @@ input:checked+label.btn-outline-secondary:hover, input:checked+label.btn-outline border-color: #565e64; } +// Select +.form-select-dark { + background-color: #444; + border: 1px solid #333; +} + @media only screen and (min-width: 576px) { // Version of .position-absolute that only triggers for sm+ .position-absolute-sm { diff --git a/assets/js/theme.js b/assets/js/theme.js new file mode 100644 index 00000000..cfc6e2ec --- /dev/null +++ b/assets/js/theme.js @@ -0,0 +1,34 @@ +function loadTheme() { + if(!localStorage.theme || localStorage.theme == "default") { + document.getElementById("themeCSS")?.remove(); + } else { + if(document.getElementById("themeCSS")) { + document.getElementById("themeCSS").href = `/assets/css/${localStorage.theme}.css`; + } else { + let l = document.createElement("link"); + l.rel = "stylesheet"; + l.type = "text/css"; + l.media = "screen"; + l.href = `/assets/css/${localStorage.theme}.css` + l.id = "themeCSS"; + + document.head.appendChild(l); + } + } + +} + +function setTheme(theme) { + if(theme == "default") + delete localStorage.theme; + else + localStorage.theme = theme; + loadTheme(); +} + +loadTheme(); + +window.onload = () => { + if(localStorage.theme) + document.getElementById("themeSelector").value = localStorage.theme; +}