karma/website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

made default theme dark and added saving the theme to localstorage

Browse Source
This commit is contained in:
Karma Riuk 2023-09-19 18:57:25 +02:00
parent de5023604f
commit e530ab8a41
3 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/css/style.css
View File

@ -10,6 +10,7 @@
# General
--------------------------------------------------------------*/
:root {
color-scheme: dark;
--highlight: #ffb727;
--highlight-alt: #ffc85a;

20
assets/js/main.js
View File

@ -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);
}

4
index.html
View File

@ -40,7 +40,7 @@
======================================================== -->
</head>
<body>
<body class="dark">
<!-- ======= Header ======= -->
<header id="header" class="fixed-top d-flex justify-content-center
@ -54,7 +54,7 @@
<li><a class="nav-link scrollto" href="#skills">Skills</a></li>
<li><a class="nav-link scrollto " href="#portfolio">Portfolio</a></li>
<li><a class="nav-link scrollto" href="#contact">Contact</a></li>
<li><i class="dark-mode bi icon-white bi-moon-stars-fill" onClick="toggleDarkMode(event)"></i>
<li><i class="dark-mode bi icon-white bi-sun-fill" onClick="toggleDarkMode(event)"></i>
</li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>