done Adding dark mode and improved UI kognise#347 , added code in in…

…dex.html , style.css and added two png in docs/icons done Adding dark mode and improved UI kognise#347 , added code in index.html , style.css and added two png in docs/icons
maxwithbug · Oct 1, 2024 · fa81838 · fa81838
1 parent d950cbc
commit fa81838
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 3 deletions.
diff --git a/.changeset/lemon-ways-buy.md b/.changeset/lemon-ways-buy.md
@@ -0,0 +1,5 @@
+---
+"water.css": minor
+---
+
+done Adding dark mode and improved UI #347 , added code in index.html `// Toggle between dark and light themesthemeToggl`
diff --git a/.changeset/lucky-carrots-tell.md b/.changeset/lucky-carrots-tell.md
@@ -0,0 +1,5 @@
+---
+"water.css": minor
+---
+
+done Adding dark mode and improved UI #347 , added code in index.html , style.css and added two png in docs/icons
diff --git a/.changeset/neat-boats-watch.md b/.changeset/neat-boats-watch.md
@@ -0,0 +1,5 @@
+---
+"water.css": minor
+---
+
+done Adding dark mode and improved UI #347 , added code in index.html , style.css and added two png in docs/icons
diff --git a/docs/icons/moon.png b/docs/icons/moon.png
diff --git a/docs/icons/sun.png b/docs/icons/sun.png
diff --git a/docs/index.html b/docs/index.html
@@ -71,11 +71,38 @@
         { element: '#icon-32', href: { dark: './icons/light-favicon-32x32.png' } }
       ])
     </script>
-  </head>
 
-  <body>
-    <h1>Water.css</h1>
 
+</head>
+
+<body>
+
+  <h1>Water.css</h1>
+  <!-- toggle dark-mode  -->
+  <div id="theme-container" aria-label="Toggle dark mode">
+    <button id="theme-toggle">
+      <img id="themeIcon" class="" src="./icons/sun.png" alt="Toggle dark mode icon"  />
+    </button>
+  </div>
+  <script>
+    const themeToggleButton = document.getElementById('theme-toggle')
+const themeStylesheet = document.getElementById('js-stylesheet')
+const themeIcon = document.getElementById('themeIcon')
+// Toggle between dark and light themes
+themeToggleButton.addEventListener('click', () => {
+      const currentTheme = themeStylesheet.getAttribute('href')
+
+      if (currentTheme.includes('light.min.css')) {
+        // Switch to dark theme
+        themeStylesheet.setAttribute('href', './water.css/dark.min.css')
+        themeIcon.setAttribute('src', './icons/sun.png') // Path to light mode icon
+      } else {
+        // Switch to light theme
+        themeStylesheet.setAttribute('href', './water.css/light.min.css')
+        themeIcon.setAttribute('src', './icons/moon.png') // Path to dark mode icon
+      }
+    })
+  </script>     
     <p>
       Water.css is a drop-in collection of CSS styles to make simple websites like this just a
       little bit nicer.

diff --git a/docs/style.css b/docs/style.css
@@ -63,3 +63,29 @@ body > footer {
   align-items: center;
   justify-content: space-between;
 }
+
+/* toggle dark mode */
+#theme-container {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 1000;
+}
+
+#theme-toggle {
+  padding: 10px 15px;
+  background-color: #bebebe;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  box-shadow: 0 2px 5px #0003;
+  color: #000;
+}
+
+#theme-toggle:hover {
+  color: #fff;
+}
+
+#themeIcon {
+  height: 25px;
+}