Se programo la interaccion de dark mode

coxmau77 · Feb 1, 2024 · aa21e3b · aa21e3b
1 parent 0b7f7ab
commit aa21e3b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/css/style.css b/css/style.css
@@ -37,7 +37,6 @@ html {
   font-size: 18px;
   font-family: var(--font-family);
   text-wrap: balance;
-  background-color: pink;
 }
 
 body {

diff --git a/js/script.js b/js/script.js
@@ -1 +1,15 @@
-console.log("Hola mundo!");
+const themeButton = document.getElementById('theme_button');
+const darkTheme = 'dark-theme';
+const selectedTheme = localStorage.getItem('selected-theme');
+const userHasDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light';
+if (selectedTheme) {
+    document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme);
+} else {
+    if (userHasDarkTheme) document.body.classList.add(darkTheme);
+}
+
+themeButton.addEventListener('click', () => {
+    document.body.classList.toggle(darkTheme);
+    localStorage.setItem('selected-theme', getCurrentTheme());
+});