Implement theme toggle functionality and update styles for light/dark…

… modes (#320)
TBD54566975 · Oct 17, 2024 · bc9da6b · bc9da6b
1 parent 92f676e
commit bc9da6b
Show file tree

Hide file tree

Showing 7 changed files with 3,613 additions and 98 deletions.
diff --git a/javascript/dwa-starter-vanillajs-vite/components.js b/javascript/dwa-starter-vanillajs-vite/components.js
@@ -1,57 +1,76 @@
-// components.js
 function AboutPage() {
-    // Create the main container
     const container = document.createElement('div');
-    container.classList.add('space-y-4', 'p-6', 'text-center');
+    container.classList.add('min-h-screen', 'p-6', 'text-center', 'bg-blue-100', 'dark:bg-blue-900', 'text-gray-900', 'dark:text-white', 'transition-colors', 'duration-300');
 
-    // Create the main title
     const title = document.createElement('h1');
     title.textContent = 'DWA Starter Vanilla';
-    title.classList.add('text-3xl', 'font-bold', 'mb-4');
+    title.classList.add('text-3xl', 'font-bold', 'mb-4', 'text-blue-800', 'dark:text-blue-200');
 
-    // Create the first paragraph
     const para1 = document.createElement('p');
     para1.textContent = "Decentralized Web App: it's a Web5 Progressive Web App.";
-    para1.classList.add('text-lg');
+    para1.classList.add('text-lg', 'text-blue-700', 'dark:text-blue-300');
 
-    // Create the subtitle
     const subtitle = document.createElement('h2');
     subtitle.textContent = 'Why PWA?';
-    subtitle.classList.add('text-2xl', 'font-semibold', 'mt-4');
+    subtitle.classList.add('text-2xl', 'font-semibold', 'mt-4', 'text-blue-800', 'dark:text-blue-200');
 
-    // Create the second paragraph
     const para2 = document.createElement('p');
     para2.textContent = 'It\'s a perfect match with Web5 DWNs since a PWA can work offline and DWN has a synced local storage.';
-    para2.classList.add('text-lg');
+    para2.classList.add('text-lg', 'text-blue-700', 'dark:text-blue-300');
 
-    // Append elements to the container
     container.appendChild(title);
     container.appendChild(para1);
     container.appendChild(subtitle);
     container.appendChild(para2);
 
-    // Return the container element
     return container;
   }
 
-export function Home() {
-    document.getElementById('app').innerHTML = `<h1>Home</h1>`;
-}
-
-export function About() {
+  export function Home() {
+    const homeContainer = document.createElement('div');
+    homeContainer.classList.add('min-h-screen', 'p-6', 'bg-green-100', 'dark:bg-green-900', 'text-gray-900', 'dark:text-white', 'transition-colors', 'duration-300');
+
+    const title = document.createElement('h1');
+    title.textContent = 'Home';
+    title.classList.add('text-3xl', 'font-bold', 'mb-4', 'text-green-800', 'dark:text-green-200');
+
+    homeContainer.appendChild(title);
+
+    document.getElementById('app').innerHTML = '';
+    document.getElementById('app').appendChild(homeContainer);
+  }
+
+  export function About() {
     const app = document.getElementById('app');
-    app.innerHTML = ''; // Clear the current content
-
-    // Create and append the About page
-    const aboutPage = AboutPage(); // Call the AboutPage function to get the component
+    app.innerHTML = '';
+    const aboutPage = AboutPage();
     app.appendChild(aboutPage);
-}
-
-export function Settings() {
-    document.getElementById('app').innerHTML = `<h1>Settings</h1>`;
-}
-
-export function NotFound() {
-    document.getElementById('app').innerHTML = `<h1>404 - Page Not Found</h1>`;
-}
-
+  }
+
+  export function Settings() {
+    const settingsContainer = document.createElement('div');
+    settingsContainer.classList.add('min-h-screen', 'p-6', 'bg-purple-100', 'dark:bg-purple-900', 'text-gray-900', 'dark:text-white', 'transition-colors', 'duration-300');
+
+    const title = document.createElement('h1');
+    title.textContent = 'Settings';
+    title.classList.add('text-3xl', 'font-bold', 'mb-4', 'text-purple-800', 'dark:text-purple-200');
+
+    settingsContainer.appendChild(title);
+
+    document.getElementById('app').innerHTML = '';
+    document.getElementById('app').appendChild(settingsContainer);
+  }
+
+  export function NotFound() {
+    const notFoundContainer = document.createElement('div');
+    notFoundContainer.classList.add('min-h-screen', 'p-6', 'bg-red-100', 'dark:bg-red-900', 'text-gray-900', 'dark:text-white', 'transition-colors', 'duration-300');
+
+    const title = document.createElement('h1');
+    title.textContent = '404 - Page Not Found';
+    title.classList.add('text-3xl', 'font-bold', 'mb-4', 'text-red-800', 'dark:text-red-200');
+
+    notFoundContainer.appendChild(title);
+
+    document.getElementById('app').innerHTML = '';
+    document.getElementById('app').appendChild(notFoundContainer);
+  }
diff --git a/javascript/dwa-starter-vanillajs-vite/index.html b/javascript/dwa-starter-vanillajs-vite/index.html
@@ -1,17 +1,10 @@
-<!-- index.html -->
-
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>DWA Starter</title>
-    <meta
-      name="description"
-      content="A Decentralized Web Application template"
-    />
-    <link rel="stylesheet" href="dist/output.css" />
+    <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <nav>

diff --git a/javascript/dwa-starter-vanillajs-vite/main.js b/javascript/dwa-starter-vanillajs-vite/main.js
@@ -1,37 +1,101 @@
-// main.js
+// Function to create and render the toggle button
+function createThemeToggleButton() {
+    console.log('Creating theme toggle button');
+    const nav = document.querySelector('nav');
+    const button = document.createElement('button');
+    button.id = 'theme-toggle';
+    button.textContent = 'Toggle Theme';
+    button.setAttribute('aria-label', 'Toggle Dark Mode');
+    button.classList.add('theme-toggle-btn');
+    nav.appendChild(button);
+    button.addEventListener('click', toggleTheme);
+    console.log('Theme toggle button created and added to nav');
+}
+
+function toggleTheme() {
+    console.log('Toggle theme function called');
+    const body = document.body;
+    const isDarkMode = body.classList.contains('dark-mode');
+    console.log('Current mode is dark:', isDarkMode);
+
+    if (isDarkMode) {
+        body.classList.remove('dark-mode');
+        body.classList.add('light-mode');
+        console.log('Switched to light mode:', body.classList);  // Log class list
+    } else {
+        body.classList.remove('light-mode');
+        body.classList.add('dark-mode');
+        console.log('Switched to dark mode:', body.classList);  // Log class list
+    }
+    localStorage.setItem('theme', isDarkMode ? 'light' : 'dark');
+}
+
+
+// Apply stored theme preference or system preference on load
+function applyStoredTheme() {
+    console.log('Applying stored theme');
+    const storedTheme = localStorage.getItem('theme');
+    const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+    const body = document.body;
+
+    console.log('Stored theme:', storedTheme);
+    console.log('System prefers dark scheme:', prefersDarkScheme.matches);
+
+    if (storedTheme === 'dark' || (storedTheme === null && prefersDarkScheme.matches)) {
+        body.classList.add('dark-mode');
+        console.log('Applied dark mode');
+    } else {
+        body.classList.add('light-mode');
+        console.log('Applied light mode');
+    }
+}
+
+// Initial setup on DOM content loaded
+document.addEventListener('DOMContentLoaded', () => {
+    console.log('DOM content loaded');
+    applyStoredTheme(); // Apply the stored theme or system preference
+    createThemeToggleButton(); // Create the theme toggle button and attach to nav
+    // Initial routing setup (if using navigation in your app)
+    router();
+    console.log('Initial setup completed');
+});
 
+// Import your components for routing (if necessary)
 import { Home, About, Settings, NotFound } from './components.js';
 
-// Define routes and their corresponding components
+// Define routes and their corresponding components (if necessary)
 const routes = {
     '/': Home,
     '/about': About,
     '/settings': Settings,
 };
 
-// Function to handle navigation
+// Function to handle navigation (if necessary)
 function navigateTo(url) {
+    console.log('Navigating to:', url);
     history.pushState(null, null, url);
     router();
 }
 
 // Router function to render components based on the current URL
 function router() {
+    console.log('Router function called');
     const path = window.location.pathname;
+    console.log('Current path:', path);
     const route = routes[path] || NotFound;
     route();
 }
 
-// Event delegation for link clicks
+// Event delegation for link clicks (if necessary)
 document.addEventListener('click', (e) => {
     if (e.target.matches('[data-link]')) {
+        console.log('Link clicked:', e.target.href);
         e.preventDefault();
         navigateTo(e.target.href);
     }
 });
 
-// Listen to popstate event (back/forward navigation)
+// Listen to popstate event (back/forward navigation) (if necessary)
 window.addEventListener('popstate', router);
 
-// Initial call to router to render the correct component on page load
-document.addEventListener('DOMContentLoaded', router);
+console.log('Script loaded');