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>