Adds dark mode support

src/_includes/components/footer.njk

@@ -1,20 +1,20 @@
-<footer class="footer mt-auto py-4 bg-white border-top">
+<footer class="footer mt-auto py-4 bg-body-tertiary border-top">
     <div class="container">
         <div class="d-flex flex-column flex-md-row justify-content-md-between align-items-center">
             <!-- Left Side: Logo + Text -->
             <div class="d-flex align-items-center mb-2 mb-md-0" style="min-width: 0;">
-                <a href="https://passkeys.dev" class="d-flex align-items-center text-decoration-none text-dark me-3 flex-shrink-0">
+                <a href="https://passkeys.dev" class="d-flex align-items-center text-decoration-none text-body me-3 flex-shrink-0">
                     <img src="/assets/img/pdd-icon-color-simple.svg" alt="Logo" width="24" height="24" class="me-2">
                     <span class="fw-bold">passkeys.dev</span>
                 </a>
-                <span class="text-muted small border-start ps-3 lh-sm">
-                    Brought to you by members of the <a href="https://www.w3.org/groups/cg/wica/" target="_blank" class="text-decoration-none text-success">W3C Web Identity & Credentials Adoption CG</a> and the <a href="https://fidoalliance.org/" target="_blank" class="text-decoration-none text-success">FIDO Alliance</a>.
+                <span class="text-body-secondary small border-start ps-3 lh-sm">
+                    Brought to you by members of the <a href="https://www.w3.org/groups/cg/wica/" target="_blank" class="text-decoration-none text-success-emphasis">W3C Web Identity & Credentials Adoption CG</a> and the <a href="https://fidoalliance.org/" target="_blank" class="text-decoration-none text-success-emphasis">FIDO Alliance</a>.
                 </span>
             </div>
 
             <!-- Right Side: Privacy -->
             <div class="flex-shrink-0 ms-md-3">
-                 <a href="https://passkeys.dev/privacy-policy/" target="_blank" class="text-decoration-none text-muted small">Privacy</a>
+                 <a href="https://passkeys.dev/privacy-policy/" target="_blank" class="text-decoration-none text-body-secondary small">Privacy</a>
             </div>
         </div>
     </div>

src/_includes/components/header.njk

@@ -1,8 +1,8 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom mb-4">
+<nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary border-bottom mb-4">
     <div class="container">
         <a class="navbar-brand d-flex align-items-center me-4" href="/">
             <img src="/assets/img/pdd-icon-color-simple.svg" alt="Logo" width="40" height="40" class="me-2 rounded-2">
-            <span class="fw-bold text-dark">Passkey Developer Tools</span>
+            <span class="fw-bold">Passkey Developer Tools</span>
         </a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
             aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -25,6 +25,49 @@
                     </a></li>
                 </ul>
             </div>
+            <div class="ms-auto d-flex align-items-center ps-3">
+                <style>
+                    .theme-toggle-group {
+                        background: var(--bs-secondary-bg);
+                        padding: 2px;
+                        border-radius: 50px;
+                        display: flex;
+                        gap: 2px;
+                    }
+                    .theme-toggle-btn {
+                        border: none;
+                        background: none;
+                        width: 22px;
+                        height: 22px;
+                        border-radius: 50%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        color: var(--bs-secondary-color);
+                        transition: all 0.2s ease;
+                        padding: 0;
+                        font-size: 0.75rem;
+                    }
+                    .theme-toggle-btn:hover {
+                        color: var(--bs-body-color);
+                    }
+                    .theme-toggle-btn.active {
+                        background: var(--bs-primary);
+                        color: white !important;
+                    }
+                </style>
+                <div class="theme-toggle-group" role="group" aria-label="Theme toggle">
+                    <button class="theme-toggle-btn" data-bs-theme-value="light" title="Light mode">
+                        <i class="bi bi-sun-fill"></i>
+                    </button>
+                    <button class="theme-toggle-btn" data-bs-theme-value="auto" title="Follow system">
+                        <i class="bi bi-circle-half"></i>
+                    </button>
+                    <button class="theme-toggle-btn" data-bs-theme-value="dark" title="Dark mode">
+                        <i class="bi bi-moon-stars-fill"></i>
+                    </button>
+                </div>
+            </div>
         </div>
     </div>
 </nav>

src/_includes/layouts/base.njk

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ lang or metadata.language or 'en' }}" dir="{{ languages[lang].dir or 'ltr' }}">
+<html lang="{{ lang or metadata.language or 'en' }}" dir="{{ languages[lang].dir or 'ltr' }}" data-bs-theme="auto">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -23,16 +23,17 @@
     <meta name="robots" content="index, follow">
     <meta name="googlebot" content="index, follow">
 
-    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <link href="/assets/css/custom.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
 
     <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon-16x16.png">
     <link rel="icon" href="/assets/img/favicon.ico" sizes="32x32">
+    <script src="/assets/js/theme.js"></script>
 </head>
-<body class="d-flex flex-column h-100 bg-light">
+<body class="d-flex flex-column h-100">
     {% if page.url != "/" %}
         {% include "components/header.njk" %}
     {% endif %}
@@ -43,7 +44,7 @@
 
     {% include "components/footer.njk" %}
 
-    <script src="/assets/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
     {% if extra_scripts %}
         {% for script in extra_scripts %}
             <script src="{{ script }}"></script>

src/assets/css/custom.css

@@ -18,8 +18,95 @@ body {
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
 }
 
+[data-bs-theme="dark"] .hover-lift:hover {
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
+}
+
+.btn-outline-secondary {
+  --bs-btn-color: var(--bs-body-color);
+  --bs-btn-border-color: var(--bs-border-color);
+  --bs-btn-hover-bg: var(--bs-secondary);
+  --bs-btn-hover-border-color: var(--bs-secondary);
+  --bs-btn-active-bg: var(--bs-secondary);
+  --bs-btn-active-border-color: var(--bs-secondary);
+}
+
 @media (min-width: 768px) {
   .border-start-md {
-    border-left: 1px solid #dee2e6 !important;
+    border-left: 1px solid var(--bs-border-color) !important;
   }
 }
+
+[data-bs-theme="dark"] .list-group-item-success {
+  background-color: rgba(25, 135, 84, 0.25) !important;
+  color: #acecc7 !important;
+}
+
+[data-bs-theme="dark"] .list-group-item-danger {
+  background-color: rgba(220, 53, 69, 0.25) !important;
+  color: #f8d7da !important;
+}
+
+[data-bs-theme="dark"] .list-group-item-success a,
+[data-bs-theme="dark"] .list-group-item-danger a {
+  color: inherit !important;
+}
+
+
+/* CodeFlask Dark Mode Support */
+[data-bs-theme="dark"] .codeflask {
+  background: var(--bs-body-bg) !important;
+  color: #ffffff !important;
+}
+
+[data-bs-theme="dark"] .codeflask__pre,
+[data-bs-theme="dark"] .codeflask__flatten {
+  color: #ffffff !important;
+}
+
+[data-bs-theme="dark"] .codeflask__textarea {
+  background: transparent !important;
+  color: transparent !important;
+  caret-color: #ffffff !important;
+}
+
+[data-bs-theme="dark"] .codeflask .token.string {
+  color: #a5d6ff !important;
+}
+
+[data-bs-theme="dark"] .codeflask .token.property {
+  color: #79c0ff !important;
+}
+
+[data-bs-theme="dark"] .codeflask .token.punctuation {
+  color: #d1d7dd !important;
+}
+
+[data-bs-theme="dark"] .codeflask .token.number,
+[data-bs-theme="dark"] .codeflask .token.boolean {
+  color: #ff7b72 !important;
+}
+
+[data-bs-theme="dark"] .codeflask__lines {
+  background: #161b22 !important;
+  border-right: 1px solid var(--bs-border-color) !important;
+  color: #ffffff !important;
+}
+
+/* CodeFlask Placeholder support */
+[data-bs-theme="dark"] .codeflask__textarea::placeholder {
+  color: #ffffff !important;
+  opacity: 0.6;
+}
+
+[data-bs-theme="dark"] .codeflask__textarea:-ms-input-placeholder {
+  color: #ffffff !important;
+  opacity: 0.6;
+}
+
+[data-bs-theme="dark"] .codeflask__textarea::-ms-input-placeholder {
+  color: #ffffff !important;
+  opacity: 0.6;
+}
+
+

src/assets/js/common.js

@@ -17,9 +17,9 @@ export function log(opts) {
 
   const line = document.createElement('div');
   let colorClass = "text-body";
-  if (type === "warn") colorClass = "text-warning";
-  if (type === "error") colorClass = "text-danger";
-  if (type === "success") colorClass = "text-success";
+  if (type === "warn") colorClass = "text-warning-emphasis";
+  if (type === "error") colorClass = "text-danger-emphasis";
+  if (type === "success") colorClass = "text-success-emphasis";
 
   line.className = `mb-1 ${colorClass}`;
   line.innerText = message;

src/assets/js/theme.js

@@ -0,0 +1,70 @@
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2024 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+  'use strict'
+
+  const getStoredTheme = () => localStorage.getItem('theme')
+  const setStoredTheme = theme => {
+    if (theme === 'auto') {
+      localStorage.removeItem('theme')
+    } else {
+      localStorage.setItem('theme', theme)
+    }
+  }
+
+  const getPreferredTheme = () => {
+    const storedTheme = getStoredTheme()
+    if (storedTheme) {
+      return storedTheme
+    }
+
+    return 'auto'
+  }
+
+  const setTheme = theme => {
+    if (theme === 'auto') {
+      document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+    updateUI(theme)
+  }
+
+  const updateUI = (theme) => {
+    document.querySelectorAll('.theme-toggle-btn').forEach(btn => {
+      if (btn.getAttribute('data-bs-theme-value') === theme) {
+        btn.classList.add('active')
+        btn.setAttribute('aria-pressed', 'true')
+      } else {
+        btn.classList.remove('active')
+        btn.setAttribute('aria-pressed', 'false')
+      }
+    })
+  }
+
+  // Set initial theme
+  setTheme(getPreferredTheme())
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    const storedTheme = getStoredTheme()
+    if (!storedTheme) {
+      setTheme('auto')
+    }
+  })
+
+  window.addEventListener('DOMContentLoaded', () => {
+    updateUI(getPreferredTheme())
+
+    document.querySelectorAll('.theme-toggle-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const theme = btn.getAttribute('data-bs-theme-value')
+        setStoredTheme(theme)
+        setTheme(theme)
+      })
+    })
+  })
+})()

src/featuredetect/index.njk

@@ -103,8 +103,8 @@ extra_scripts:
                 </button>
             </h2>
             <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#extensions">
-                <div class="accordion-body">
-                    <ul>
+                <div class="accordion-body p-3">
+                    <ul class="list-group list-group">
                         <li id="extCmtgKey"
                             class="list-group-item d-flex justify-content-between align-items-center">
                             Credential Manager Trust Group Key (cmtgKey)*
@@ -193,7 +193,7 @@ extra_scripts:
             </div>
         </div>
     </div>
-    <div class="alert alert-light text-center mt-3" role="alert">
+    <div class="alert alert-light text-body-secondary text-center mt-3" role="alert">
         Features with an asterisk (*) are currently in development, are not committed, and may change at any time.
     </div>
     <div class="alert alert-primary text-center mt-3" role="alert">