modular theme-toggle

Author: jessehattabaugh

README.md

@@ -29,17 +29,18 @@ This boilerplate includes modern web features:
 -   `npm run start:https` - Start with HTTPS for testing secure features
 -   `npm run build` - Build for production (optimizes CSS)
 -   `npm run lint` - Run ESLint for code quality checks
--   `npm run test` - Run Lighthouse tests
--   `npm run test:e2e` - Run Playwright end-to-end tests
--   `npm run test:e2e:ui` - Run Playwright tests with UI for debugging
--   `npm run test:e2e:update-snapshots` - Update visual test baselines
+-   `npm run test` - Run Playwright end-to-end tests
+-   `npm run test:ui` - Run Playwright tests with UI for debugging
+-   `npm run test:update-snapshots` - Update visual test baselines
 -   `npm run analyze` - Analyze the site with Lighthouse
 
 ## Web Components
 
+The boilerplate includes modular web components that are encapsulated and easily replaceable:
+
 ### Theme Toggle
 
-A theme toggle component that allows users to switch between light, dark, and system themes:
+A toggle switch component for controlling light, dark, and system themes:
 
 ```html
 <theme-toggle></theme-toggle>
@@ -50,28 +51,41 @@ A theme toggle component that allows users to switch between light, dark, and sy
 -   **Multiple theme modes:** Supports light, dark, and system preference modes
 -   **Preference persistence:** Remembers user's theme choice across sessions
 -   **System preference detection:** Automatically follows system theme when in auto mode
--   **CSS variable integration:** Uses CSS variables for seamless theme switching
+-   **Self-contained styles:** All styles are encapsulated within the component
 -   **Responsive design:** Adapts to different screen sizes
 
 #### JavaScript API:
 
 ```javascript
+// Import the component class if you want to use it programmatically
+import { ThemeToggle } from './components/theme-toggle.js';
+
+// Or use the already registered custom element
+const toggle = document.querySelector('theme-toggle');
+
 // Get the current theme
-const currentTheme = document.querySelector('theme-toggle').getTheme();
+const currentTheme = toggle.getTheme();
 
 // Check if dark mode is active
-const isDark = document.querySelector('theme-toggle').isDarkMode();
+const isDark = toggle.isDarkMode();
 
 // Set theme programmatically
-document.querySelector('theme-toggle').setTheme('dark'); // Options: 'light', 'dark', 'system'
+toggle.setTheme('dark'); // Options: 'light', 'dark', 'system'
 
 // Listen for theme changes
-document.querySelector('theme-toggle').addEventListener('themeChange', (e) => {
+toggle.addEventListener('themeChange', (e) => {
 	console.log('Theme changed:', e.detail.theme);
 	console.log('Is dark mode:', e.detail.isDark);
 });
 ```
 
+#### Customizing or Replacing:
+
+The theme toggle component is designed to be easily customizable or replaceable:
+
+1. Modify the existing component at `/components/theme-toggle.js`
+2. Or create your own component and update the registration in `/components/index.js`
+
 ## Accessibility Features
 
 This boilerplate includes several accessibility enhancements:

package.json

@@ -6,7 +6,6 @@
 		"@playwright/test": "latest",
 		"eslint": "latest",
 		"globals": "latest",
-		"http-server": "latest",
 		"lighthouse": "latest",
 		"npm-run-all": "latest",
 		"serve": "latest"
@@ -16,7 +15,6 @@
 		"kill": "npx kill-port 3000",
 		"lint": "eslint .",
 		"start": "npx serve ./public",
-		"start:https": "npx http-server ./public --ssl --cert ./localhost.crt --key ./localhost.key -o",
 		"test": "playwright test",
 		"test:staging": "cross-env TEST_ENV=staging playwright test",
 		"test:ui": "playwright test --ui",

www/components/index.js

@@ -0,0 +1,11 @@
+/**
+ * Component registry
+ * Import and register all web components here
+ */
+import { ThemeToggle } from './theme-toggle.js';
+
+// Register the custom element
+customElements.define('theme-toggle', ThemeToggle);
+
+// Export components for programmatic usage
+export { ThemeToggle };

www/components/theme-toggle.js

@@ -2,7 +2,7 @@
  * Theme Toggle Web Component
  * A toggle switch for dark/light mode with system preference detection
  */
-class ThemeToggle extends HTMLElement {
+export class ThemeToggle extends HTMLElement {
 	// Key for storing preference in localStorage
 	#storageKey = 'theme-preference';
 
@@ -246,16 +246,16 @@ class ThemeToggle extends HTMLElement {
 		this.shadowRoot.innerHTML = `
       <style>
         :host {
-          --toggle-bg: var(--theme-toggle-bg, rgba(0, 0, 0, 0.1));
-          --toggle-color: var(--theme-toggle-color, inherit);
-          --toggle-hover: var(--theme-toggle-hover, rgba(0, 0, 0, 0.15));
-          --toggle-active: var(--theme-toggle-active, var(--cc-primary, #4f46e5));
+          --toggle-bg: rgba(0, 0, 0, 0.1);
+          --toggle-color: inherit;
+          --toggle-hover: rgba(0, 0, 0, 0.15);
+          --toggle-active: #4f46e5;
         }
 
         @media (prefers-color-scheme: dark) {
           :host {
-            --toggle-bg: var(--theme-toggle-dark-bg, rgba(255, 255, 255, 0.1));
-            --toggle-hover: var(--theme-toggle-dark-hover, rgba(255, 255, 255, 0.15));
+            --toggle-bg: rgba(255, 255, 255, 0.1);
+            --toggle-hover: rgba(255, 255, 255, 0.15);
           }
         }
 
@@ -299,6 +299,13 @@ class ThemeToggle extends HTMLElement {
             display: none;
           }
         }
+
+        /* Respect user's motion preferences */
+        @media (prefers-reduced-motion: reduce) {
+          button {
+            transition: none;
+          }
+        }
       </style>
 
       <button
@@ -348,6 +355,3 @@ class ThemeToggle extends HTMLElement {
 		}
 	}
 }
-
-// Define the custom element
-customElements.define('theme-toggle', ThemeToggle);

www/index.html

@@ -3,24 +3,15 @@
 
 <head>
 	<meta charset="utf-8" />
-	<meta name="viewport" content="width=device-width, initial-scale=" 1" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
 	<meta name="description" content="" data-site-description>
 	<meta name="theme-color" content="#000000">
 	<meta name="color-scheme" content="dark light">
-	<!-- Enable View Transitions API -->
 	<meta name="view-transition" content="same-origin">
 
-	<!-- Security headers -->
-	<meta http-equiv="Content-Security-Policy"
-		content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; connect-src 'self'">
-	<meta http-equiv="X-Content-Type-Options" content="nosniff">
-	<meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin">
-	<meta http-equiv="Permissions-Policy" content="camera=(), microphone=(), geolocation=()">
-
-	<title data-site-title>Website</title>
+	<title>Website</title>
 	<link rel="manifest" href="/manifest.json">
 	<link rel="icon" href="/favicon.ico">
-	<link rel="apple-touch-icon" href="/icon/192.png">
 
 	<!-- Stylesheets -->
 	<link rel="stylesheet" href="/styles/all.css">
@@ -31,13 +22,14 @@
 	<!-- Scripts -->
 	<script type="module" async src="/scripts/async.js"></script>
 	<script type="module" defer src="/scripts/defer.js"></script>
+	<script type="module" defer src="/scripts/transitions.js"></script>
 	<script type="module" defer src="/scripts/config.js"></script>
-	<script type="module" defer src="/components/theme-toggle.js"></script>
+	<script type="module" defer src="/components/index.js"></script>
 </head>
 
 <body>
 	<header view-transition-name="site-header">
-		<h1 data-site-title view-transition-name="site-title">Website</h1>
+		<h1 view-transition-name="site-title">Website</h1>
 		<nav view-transition-name="site-nav" aria-label="Main navigation">
 			<ul>
 				<li><a href="/">Home</a></li>
@@ -48,7 +40,7 @@ <h1 data-site-title view-transition-name="site-title">Website</h1>
 	</header>
 
 	<main view-transition-name="main-content">
-		<h2 data-site-description view-transition-name="page-title">A modern web boilerplate</h2>
+		<h2 view-transition-name="page-title">A modern web boilerplate</h2>
 		<div id="app" view-transition-name="app-container">
 			<!-- Example image with proper alt text -->
 			<img src="placeholder.jpg" alt="Placeholder image" width="200" height="200">
@@ -58,7 +50,7 @@ <h2 data-site-description view-transition-name="page-title">A modern web boilerp
 	</main>
 
 	<footer view-transition-name="site-footer">
-		<small>&copy; <span id="current-year">2024</span></small>
+		<small>&copy; <span id="current-year">2025</span></small>
 	</footer>
 </body>
 

www/scripts/config.js

@@ -5,21 +5,13 @@ document.addEventListener('DOMContentLoaded', () => {
 	// Initialize behaviors
 	setupIntersectionObservers();
 	setupBotProtection();
-	setupThemeToggle();
 	setupMotionPreferences();
-});
 
-/**
- * Set up theme toggle interaction
- */
-function setupThemeToggle() {
-	const themeToggle = document.querySelector('theme-toggle');
-	if (themeToggle) {
-		themeToggle.addEventListener('themeChange', (e) => {
-			console.debug('Theme changed:', e.detail);
-		});
-	}
-}
+	// Listen for theme change events
+	document.addEventListener('themeChange', (e) => {
+		console.debug('Theme changed:', e.detail);
+	});
+});
 
 /**
  * Setup motion preference detection
@@ -33,7 +25,7 @@ function setupMotionPreferences() {
 	}
 
 	// Listen for changes to the prefers-reduced-motion media query
-	window.matchMedia('(prefers-reduced-motion: reduce)').addEventListener('change', event => {
+	window.matchMedia('(prefers-reduced-motion: reduce)').addEventListener('change', (event) => {
 		document.documentElement.classList.toggle('reduced-motion', event.matches);
 		console.debug('Motion preference changed:', event.matches ? 'reduced' : 'no-preference');
 	});