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 # General
--------------------------------------------------------------*/ --------------------------------------------------------------*/
:root { :root {
color-scheme: dark;
--highlight: #ffb727; --highlight: #ffb727;
--highlight-alt: #ffc85a; --highlight-alt: #ffc85a;

20
assets/js/main.js
View File

@ -276,15 +276,19 @@
clickable: true, clickable: true,
}, },
}); });
if (localStorage.getItem("theme") == "light") {
toggleDarkMode();
}
})(); })();
function toggleDarkMode(e) { function toggleDarkMode() {
e.preventDefault(); let dark_indicator = document.querySelector("#navbar i");
e.target.classList.toggle("bi-moon-stars-fill"); dark_indicator.classList.toggle("bi-moon-stars-fill");
e.target.classList.toggle("bi-sun-fill"); dark_indicator.classList.toggle("bi-sun-fill");
document.body.classList.toggle("dark"); document.body.classList.toggle("dark");
document.documentElement.style.setProperty(
"color-scheme", let theme = document.body.classList.contains("dark") ? "dark" : "light";
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> </head>
<body> <body class="dark">
<!-- ======= Header ======= --> <!-- ======= Header ======= -->
<header id="header" class="fixed-top d-flex justify-content-center <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="#skills">Skills</a></li>
<li><a class="nav-link scrollto " href="#portfolio">Portfolio</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><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> </li>
</ul> </ul>
<i class="bi bi-list mobile-nav-toggle"></i> <i class="bi bi-list mobile-nav-toggle"></i>