From 4a141809035db10422ca8ecf0f99bc9b5fa8dac5 Mon Sep 17 00:00:00 2001
From: Tim Cappalli <tim@cloudauth.dev>
Date: Thu, 14 May 2026 22:15:00 -0400
Subject: [PATCH] Initial dark mode support

---
 src/_includes/components/footer.njk | 10 ++--
 src/_includes/components/header.njk | 47 ++++++++++++++-
 src/_includes/layouts/base.njk      |  9 +--
 src/assets/css/custom.css           | 89 ++++++++++++++++++++++++++++-
 src/assets/js/common.js             |  6 +-
 src/assets/js/theme.js              | 70 +++++++++++++++++++++++
 src/featuredetect/index.njk         |  6 +-
 src/index.njk                       | 77 ++++++++++++++++++++-----
 src/relatedorigins/index.njk        |  2 +-
 src/responsedecoder/index.njk       |  4 +-
 10 files changed, 284 insertions(+), 36 deletions(-)
 create mode 100644 src/assets/js/theme.js

diff --git a/src/_includes/components/footer.njk b/src/_includes/components/footer.njk
index 88daba1..c563b9f 100644
--- a/src/_includes/components/footer.njk
+++ b/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>
diff --git a/src/_includes/components/header.njk b/src/_includes/components/header.njk
index 970e975..d076688 100644
--- a/src/_includes/components/header.njk
+++ b/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>
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
index b2cae26..10ea59d 100644
--- a/src/_includes/layouts/base.njk
+++ b/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,7 +23,7 @@
     <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">
 
@@ -31,8 +31,9 @@
     <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>
diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css
index 30f02ac..a764e36 100644
--- a/src/assets/css/custom.css
+++ b/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;
+}
+
+
diff --git a/src/assets/js/common.js b/src/assets/js/common.js
index 521123f..9bd0826 100644
--- a/src/assets/js/common.js
+++ b/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;
diff --git a/src/assets/js/theme.js b/src/assets/js/theme.js
new file mode 100644
index 0000000..5c29a54
--- /dev/null
+++ b/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)
+      })
+    })
+  })
+})()
diff --git a/src/featuredetect/index.njk b/src/featuredetect/index.njk
index b8c6ed9..02c459a 100644
--- a/src/featuredetect/index.njk
+++ b/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">
diff --git a/src/index.njk b/src/index.njk
index 5b6956e..31d19f7 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -3,11 +3,58 @@ layout: layouts/base.njk
 title: Passkey Developer Tools
 description: A collection of developer tools for passkeys and WebAuthn!
 ---
+<div class="container-fluid" style="z-index: 1030;">
+    <div class="row pt-3 pe-3 justify-content-end">
+        <div class="col-auto">
+            <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>
 <div class="container" style="max-width: 960px;">
-    <div class="text-center mt-5 mb-5 pt-4">
+    <div class="text-center mt-2 mb-5 pt-0">
         <img src="/assets/img/pdd-icon-color-simple.svg" height="120px" alt="Passkeys.dev Icon" class="mb-3">
-        <h1 class="display-4 fw-bold text-dark">Passkey Developer Tools</h1>
-        <p class="lead text-secondary mt-3">Tools for building and debugging passkeys & WebAuthn.
+        <h1 class="display-4 fw-bold">Passkey Developer Tools</h1>
+        <p class="lead text-body-secondary mt-3">Tools for building and debugging passkeys & WebAuthn.
         </p>
         <p>Want to learn more about deploying passkeys?<br />
             <span class="fs-5">Check out <a href="https://passkeys.dev/">passkeys.dev</a></span>
@@ -18,13 +65,13 @@ description: A collection of developer tools for passkeys and WebAuthn!
         <!-- Feature Detect Tool -->
         <div class="col-md-6">
             <a href="/featuredetect/"
-                class="card h-100 shadow border-0 hover-lift rounded-4 text-decoration-none">
+                class="card h-100 shadow border-0 hover-lift rounded-4 text-decoration-none bg-body-tertiary">
                 <div class="card-body p-5 d-flex flex-column text-center">
                     <div class="mb-3">
-                        <span class="display-4"><i class="bi bi-search"></i></span>
+                        <span class="display-4"><i class="bi bi-search text-body"></i></span>
                     </div>
-                    <h2 class="card-title fw-bold mb-3 text-dark">Feature Detection</h2>
-                    <p class="card-text text-dark flex-grow-1 lead fs-6">
+                    <h2 class="card-title fw-bold mb-3 text-body">Feature Detection</h2>
+                    <p class="card-text text-body flex-grow-1 lead fs-6">
                         Test your browser's WebAuthn capabilities for passkeys.
                         This also serves as a demo for the new getClientCapabilities() method!
                     </p>
@@ -35,13 +82,13 @@ description: A collection of developer tools for passkeys and WebAuthn!
         <!-- Related Origins Validator -->
         <div class="col-md-6">
             <a href="/relatedorigins/"
-                class="card h-100 shadow border-0 hover-lift rounded-4 text-decoration-none">
+                class="card h-100 shadow border-0 hover-lift rounded-4 text-decoration-none bg-body-tertiary">
                 <div class="card-body p-5 d-flex flex-column text-center">
                     <div class="mb-3">
-                        <span class="display-4"><i class="bi bi-braces"></i></span>
+                        <span class="display-4"><i class="bi bi-braces text-body"></i></span>
                     </div>
-                    <h2 class="card-title fw-bold mb-3 text-dark">Related Origins Validator</h2>
-                    <p class="card-text text-dark flex-grow-1 lead fs-6">
+                    <h2 class="card-title fw-bold mb-3 text-body">Related Origins Validator</h2>
+                    <p class="card-text text-body flex-grow-1 lead fs-6">
                         Validate and test your Related Origin Requests configuration against the specification
                         or just try things out as part of planning a deployment!
                     </p>
@@ -52,13 +99,13 @@ description: A collection of developer tools for passkeys and WebAuthn!
         <!-- Response Decoder -->
         <div class="col-md-6">
             <a href="/responsedecoder/"
-                class="card h-100 shadow border-0 hover-lift rounded-4 text-decoration-none">
+                class="card h-100 shadow border-0 hover-lift rounded-4 text-decoration-none bg-body-tertiary">
                 <div class="card-body p-5 d-flex flex-column text-center">
                     <div class="mb-3">
-                        <span class="display-4"><i class="bi bi-filetype-json"></i></span>
+                        <span class="display-4"><i class="bi bi-filetype-json text-body"></i></span>
                     </div>
-                    <h2 class="card-title fw-bold mb-3 text-dark">Response Decoder</h2>
-                    <p class="card-text text-dark flex-grow-1 lead fs-6">
+                    <h2 class="card-title fw-bold mb-3 text-body">Response Decoder</h2>
+                    <p class="card-text text-body flex-grow-1 lead fs-6">
                         Get a human-readable view into WebAuthn registration and authentication responses.
                     </p>
                 </div>
diff --git a/src/relatedorigins/index.njk b/src/relatedorigins/index.njk
index d038366..8cb8489 100644
--- a/src/relatedorigins/index.njk
+++ b/src/relatedorigins/index.njk
@@ -85,7 +85,7 @@ extra_scripts:
 
             <div class="result-details">
                 <h5>Detail Log</h5>
-                <div id="logOutput" class="p-3 bg-light border rounded font-monospace small"
+                <div id="logOutput" class="p-3 bg-body-secondary border rounded font-monospace small"
                     style="max-height: 300px; overflow-y: auto;"></div>
             </div>
         </div>
diff --git a/src/responsedecoder/index.njk b/src/responsedecoder/index.njk
index 94abcb4..4172b80 100644
--- a/src/responsedecoder/index.njk
+++ b/src/responsedecoder/index.njk
@@ -45,7 +45,7 @@ extra_scripts:
       <!-- Debug info -->
       <div
         id="logOutput"
-        class="p-3 mt-3 bg-light border rounded font-monospace small d-none"
+        class="p-3 mt-3 bg-body-secondary border rounded font-monospace small d-none"
         style="max-height: 300px; overflow-y: auto"
       >
       </div>
@@ -60,7 +60,7 @@ extra_scripts:
             indent="3"
             show-data-types="false"
             show-size="false"
-            theme='{"base00": "#FFFFFF","base01": "#E0E0E0","base02": "#C5C8C6","base03": "#B4B7B4","base04": "#969896","base05": "#373B41","base06": "#282A2E","base07": "#1D1F21","base08": "#CC342B","base09": "#D63384","base0A": "#FBA922","base0B": "#198844","base0C": "#3971ED","base0D": "#FFBF3B","base0E": "#4F559C","base0F": "#3971ED"}'
+            theme='{"base00": "var(--bs-body-bg)","base01": "var(--bs-tertiary-bg)","base02": "var(--bs-border-color)","base03": "var(--bs-secondary-color)","base04": "var(--bs-secondary-color)","base05": "var(--bs-body-color)","base06": "var(--bs-body-color)","base07": "var(--bs-body-color)","base08": "#CC342B","base09": "#D63384","base0A": "#FBA922","base0B": "#198844","base0C": "#3971ED","base0D": "#FFBF3B","base0E": "#4F559C","base0F": "#3971ED"}'
           >
             {parsedOutput}
           </andypf-json-viewer>