added dark mode

5 months ago · bce45c1630
parent cd6eddfd1a
commit bce45c1630
2 changed files with 60 additions and 2 deletions
--- a/index.css
+++ b/index.css
@ -1,3 +1,39 @@
 .app-nav ul li {
  width: max-content;
-}
+}
+/* index.css */
+:root {
+  --bg-color: #f9fafb; /* Light mode background */
+  --text-color: #1f2937; /* Light mode text */
+}
+
+[data-theme="dark"] {
+  --bg-color: #111827; /* Dark navy blue background */
+  --text-color: #e5e7eb; /* White text in dark mode */
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth transition */
+}
+/* Button Styling */
+.theme-toggle {
+  position: fixed; /* Always visible */
+  top: 20px;
+  right: 20px;
+  z-index: 1000; /* Ensure it's above other elements */
+}
+
+#toggle-button {
+  cursor: pointer;
+  width: 40px;
+  height: 40px;
+  font-size: 20px;
+  text-align: center;
+  line-height: 40px;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  border: none;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
--- a/index.html
+++ b/index.html
@ -9,8 +9,13 @@
  <link rel="icon" type="image/png" href="images/favicon.png">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
  <link rel="stylesheet" href="index.css">
-  </head>
+</head>
 <body>
+  <div id="theme-toggle" class="theme-toggle">
+    <button id="toggle-button" class="rounded-full p-2 bg-gray-300 text-gray-800 transition duration-300">
+      🌞
+    </button>
+  </div>
  <div id="app"></div>
  <script type="text/javascript">
    (function(c,l,a,r,i,t,y){
@ -38,6 +43,23 @@
      }
    }
  </script>
+  <script>
+    const toggleButton = document.getElementById('toggle-button');
+    const htmlElement = document.documentElement;
+
+    let isDarkMode = false;
+
+    toggleButton.addEventListener('click', () => {
+      isDarkMode = !isDarkMode;
+      if (isDarkMode) {
+        htmlElement.setAttribute('data-theme', 'dark');
+        toggleButton.innerHTML = '🌙';
+      } else {
+        htmlElement.removeAttribute('data-theme');
+        toggleButton.innerHTML = '🌞';
+      }
+    });
+  </script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
 </body>
 </html>