[docs] Added toggle button for dark mode in examples list #306

Closes #306 Co-authored-by: Federico Capoano <[email protected]>
openwisp · Dec 23, 2024 · edc87a7 · edc87a7
1 parent ad4f314
commit edc87a7
Showing 1 changed file with 121 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -1,71 +1,144 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>netjsongraph.js: basic examples</title>
+    <title>netjsongraph.js: Examples</title>
     <meta charset="utf-8" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap"
       rel="stylesheet"
     />
     <style>
-      body {
+      :root {
+        --bg-primary: #f4f4f4;
+        --bg-secondary: #ffffff;
+        --text-primary: #1a1a1a;
+        --text-secondary: #333;
+        --card-hover: #f0f0f0;
+        --accent-color: #3498db;
+        --transition-speed: 0.3s;
+      }
+
+      :root.dark-mode {
+        --bg-primary: #121212;
+        --bg-secondary: #1e1e1e;
+        --text-primary: #e0e0e0;
+        --text-secondary: #b0b0b0;
+        --card-hover: #2c2c2c;
+        --accent-color: #4ecdc4;
+      }
+
+      * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
-        background-color: #eceaea;
-        overflow-x: hidden;
-        font-family: "Roboto", sans-serif;
+        transition: background-color var(--transition-speed) ease,
+                    color var(--transition-speed) ease;
+      }
+
+      body {
+        font-family: 'Inter', sans-serif;
+        background-color: var(--bg-primary);
+        color: var(--text-primary);
+        line-height: 1.6;
+      }
+
+      .theme-toggle {
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        background-color: var(--bg-secondary);
+        border: none;
+        padding: 10px 15px;
+        border-radius: 20px;
+        cursor: pointer;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-weight: 600;
+        color: var(--text-secondary);
+        z-index: 1000;
+      }
+
+      .theme-toggle:hover {
+        background-color: var(--card-hover);
       }
 
       header {
         text-align: center;
-        color: #333;
-        font-size: 21px;
+        padding: 40px 20px;
+        background-color: var(--bg-secondary);
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+      }
+
+      header h1 {
+        font-size: 2.5rem;
+        font-weight: 700;
+        color: var(--text-primary);
       }
 
       main {
         display: flex;
-        justify-content: space-between;
-        width: 80vw;
+        justify-content: center;
         flex-wrap: wrap;
-        margin: 50px auto;
+        gap: 20px;
+        max-width: 1200px;
+        margin: 40px auto;
+        padding: 0 20px;
       }
 
-      main a {
-        text-decoration: none;
-        color: black;
-        font-size: 17px;
-        transition: all 0.2s ease;
-        text-align: center;
-        font-weight: 300;
+      .cards {
+        background-color: var(--bg-secondary);
+        border-radius: 12px;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+        transition: all var(--transition-speed) ease;
+        overflow: hidden;
       }
 
-      .cards {
-        background-color: #fff;
-        padding: 12px;
-        margin: 10px;
+      .cards a {
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 200px;
-        transition: all 0.2s ease;
+        text-decoration: none;
+        color: var(--text-secondary);
+        font-weight: 500;
+        padding: 15px 20px;
+        width: 250px;
+        text-align: center;
+        transition: all var(--transition-speed) ease;
       }
 
       .cards:hover {
-        transform: scale(1.2);
-        border: 1px solid red;
+        transform: translateY(-10px);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
       }
+
       .cards:hover a {
-        color: red;
+        color: var(--accent-color);
+      }
+
+      @media (max-width: 768px) {
+        main {
+          flex-direction: column;
+          align-items: center;
+        }
+        .cards a {
+          width: 100%;
+        }
       }
     </style>
   </head>
   <body>
+    <button class="theme-toggle" aria-label="Toggle Dark Mode">
+      🌓 Toggle Theme
+    </button>
+
     <header>
       <h1>NetJSONGraph.js Example Demos</h1>
     </header>
+
     <main>
       <div class="cards">
         <a href="./examples/netjsongraph.html" target="_blank">Basic usage</a>
@@ -164,5 +237,26 @@ <h1>NetJSONGraph.js Example Demos</h1>
         >
       </div>
     </main>
+
+    <script>
+      const themeToggle = document.querySelector('.theme-toggle');
+      const htmlElement = document.documentElement;
+
+      // Check for saved theme preference or system preference
+      const savedTheme = localStorage.getItem('theme');
+      const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+      if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
+        htmlElement.classList.add('dark-mode');
+      }
+
+      themeToggle.addEventListener('click', () => {
+        htmlElement.classList.toggle('dark-mode');
+
+        // Save theme preference
+        const currentTheme = htmlElement.classList.contains('dark-mode') ? 'dark' : 'light';
+        localStorage.setItem('theme', currentTheme);
+      });
+    </script>
   </body>
 </html>