From e530ab8a41c4d77ecce6a98e834370e1b192ca13 Mon Sep 17 00:00:00 2001 From: Karma Riuk Date: Tue, 19 Sep 2023 18:57:25 +0200 Subject: [PATCH] made default theme dark and added saving the theme to localstorage --- assets/css/style.css | 1 + assets/js/main.js | 20 ++++++++++++-------- index.html | 4 ++-- 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 6ac3557..70712a4 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -10,6 +10,7 @@ # General --------------------------------------------------------------*/ :root { + color-scheme: dark; --highlight: #ffb727; --highlight-alt: #ffc85a; diff --git a/assets/js/main.js b/assets/js/main.js index 9864c15..4ef685a 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -276,15 +276,19 @@ clickable: true, }, }); + if (localStorage.getItem("theme") == "light") { + toggleDarkMode(); + } })(); -function toggleDarkMode(e) { - e.preventDefault(); - e.target.classList.toggle("bi-moon-stars-fill"); - e.target.classList.toggle("bi-sun-fill"); +function toggleDarkMode() { + let dark_indicator = document.querySelector("#navbar i"); + dark_indicator.classList.toggle("bi-moon-stars-fill"); + dark_indicator.classList.toggle("bi-sun-fill"); + document.body.classList.toggle("dark"); - document.documentElement.style.setProperty( - "color-scheme", - document.body.classList.contains("dark") ? "dark" : "light", - ); + + let theme = document.body.classList.contains("dark") ? "dark" : "light"; + document.documentElement.style.setProperty("color-scheme", theme); + localStorage.setItem("theme", theme); } diff --git a/index.html b/index.html index 039975b..36abf3c 100644 --- a/index.html +++ b/index.html @@ -40,7 +40,7 @@ ======================================================== --> - +
Skills
  • Portfolio
  • Contact
    • -
  • +