Add a dark mode

web/src/lib/components/AuthenticationCard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { AuthenticationResults, DnsResults } from "$lib/api/types.gen";
     import { getScoreColorClass } from "$lib/score";
+    import { theme } from "$lib/stores/theme";
     import GradeDisplay from "./GradeDisplay.svelte";
 
     interface Props {
@@ -62,7 +63,7 @@
 </script>
 
 <div class="card shadow-sm" id="authentication-details">
-    <div class="card-header bg-white">
+    <div class="card-header {$theme === 'light' ? 'bg-white' : 'bg-dark'}">
         <h4 class="mb-0 d-flex justify-content-between align-items-center">
             <span>
                 <i class="bi bi-shield-check me-2"></i>
@@ -104,7 +105,7 @@
                                 </div>
                             {/if}
                             {#if authentication.iprev.details}
-                                <pre class="p-2 mb-0 bg-light text-muted small" style="white-space: pre-wrap">{authentication.iprev.details}</pre>
+                                <pre class="p-2 mb-0 {$theme === 'light' ? 'bg-light' : 'bg-secondary'} text-muted small" style="white-space: pre-wrap">{authentication.iprev.details}</pre>
                             {/if}
                         </div>
                     </div>
@@ -128,7 +129,7 @@
                                 </div>
                             {/if}
                             {#if authentication.spf.details}
-                                <pre class="p-2 mb-0 bg-light text-muted small" style="white-space: pre-wrap">{authentication.spf.details}</pre>
+                                <pre class="p-2 mb-0 {$theme === 'light' ? 'bg-light' : 'bg-secondary'} text-muted small" style="white-space: pre-wrap">{authentication.spf.details}</pre>
                             {/if}
                         </div>
                     {:else}
@@ -167,7 +168,7 @@
                                 </div>
                             {/if}
                             {#if authentication.dkim[0].details}
-                                <pre class="p-2 mb-0 bg-light text-muted small" style="white-space: pre-wrap">{authentication.dkim[0].details}</pre>
+                                <pre class="p-2 mb-0 {$theme === 'light' ? 'bg-light' : 'bg-secondary'} text-muted small" style="white-space: pre-wrap">{authentication.dkim[0].details}</pre>
                             {/if}
                         </div>
                     {:else}
@@ -206,7 +207,7 @@
                                 </div>
                             {/if}
                             {#if authentication.x_google_dkim.details}
-                                <pre class="p-2 mb-0 bg-light text-muted small" style="white-space: pre-wrap">{authentication.x_google_dkim.details}</pre>
+                                <pre class="p-2 mb-0 {$theme === 'light' ? 'bg-light' : 'bg-secondary'} text-muted small" style="white-space: pre-wrap">{authentication.x_google_dkim.details}</pre>
                             {/if}
                         </div>
                     </div>
@@ -230,7 +231,7 @@
                                 </div>
                             {/if}
                             {#if authentication.x_aligned_from.details}
-                                <pre class="p-2 mb-0 bg-light text-muted small" style="white-space: pre-wrap">{authentication.x_aligned_from.details}</pre>
+                                <pre class="p-2 mb-0 {$theme === 'light' ? 'bg-light' : 'bg-secondary'} text-muted small" style="white-space: pre-wrap">{authentication.x_aligned_from.details}</pre>
                             {/if}
                         </div>
                     </div>
@@ -276,7 +277,7 @@
                                 {/if}
                             {/if}
                             {#if authentication.dmarc.details}
-                                <pre class="p-2 mb-0 bg-light text-muted small" style="white-space: pre-wrap">{authentication.dmarc.details}</pre>
+                                <pre class="p-2 mb-0 {$theme === 'light' ? 'bg-light' : 'bg-secondary'} text-muted small" style="white-space: pre-wrap">{authentication.dmarc.details}</pre>
                             {/if}
                         </div>
                     {:else}
@@ -303,7 +304,7 @@
                                 {authentication.bimi.result}
                             </span>
                             {#if authentication.bimi.details}
-                                <pre class="p-2 mb-0 bg-light text-muted small" style="white-space: pre-wrap">{authentication.bimi.details}</pre>
+                                <pre class="p-2 mb-0 {$theme === 'light' ? 'bg-light' : 'bg-secondary'} text-muted small" style="white-space: pre-wrap">{authentication.bimi.details}</pre>
                             {/if}
                         </div>
                     {:else if authentication.bimi && authentication.bimi.result == "none"}
@@ -315,7 +316,7 @@
                             </span>
                             <div class="text-muted small">Brand Indicators for Message Identification</div>
                             {#if authentication.bimi.details}
-                                <pre class="p-2 mb-0 bg-light text-muted small" style="white-space: pre-wrap">{authentication.bimi.details}</pre>
+                                <pre class="p-2 mb-0 {$theme === 'light' ? 'bg-light' : 'bg-secondary'} text-muted small" style="white-space: pre-wrap">{authentication.bimi.details}</pre>
                             {/if}
                         </div>
                     {:else}
@@ -345,7 +346,7 @@
                                 <div class="text-muted small">Chain length: {authentication.arc.chain_length}</div>
                             {/if}
                             {#if authentication.arc.details}
-                                <pre class="p-2 mb-0 bg-light text-muted small" style="white-space: pre-wrap">{authentication.arc.details}</pre>
+                                <pre class="p-2 mb-0 {$theme === 'light' ? 'bg-light' : 'bg-secondary'} text-muted small" style="white-space: pre-wrap">{authentication.arc.details}</pre>
                             {/if}
                         </div>
                     </div>

web/src/lib/components/BlacklistCard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { BlacklistCheck, ReceivedHop } from "$lib/api/types.gen";
     import { getScoreColorClass } from "$lib/score";
+    import { theme } from "$lib/stores/theme";
     import GradeDisplay from "./GradeDisplay.svelte";
     import EmailPathCard from "./EmailPathCard.svelte";
 
@@ -15,7 +16,11 @@
 </script>
 
 <div class="card shadow-sm" id="rbl-details">
-    <div class="card-header bg-white">
+    <div
+        class="card-header"
+        class:bg-white={$theme === 'light'}
+        class:bg-dark={$theme !== 'light'}
+    >
         <h4 class="mb-0 d-flex justify-content-between align-items-center">
             <span>
                 <i class="bi bi-shield-exclamation me-2"></i>

web/src/lib/components/ContentAnalysisCard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { ContentAnalysis } from "$lib/api/types.gen";
     import { getScoreColorClass } from "$lib/score";
+    import { theme } from "$lib/stores/theme";
     import GradeDisplay from "./GradeDisplay.svelte";
 
     interface Props {
@@ -13,7 +14,7 @@
 </script>
 
 <div class="card shadow-sm" id="content-details">
-    <div class="card-header bg-white">
+    <div class="card-header {$theme === 'light' ? 'bg-white' : 'bg-dark'}">
         <h4 class="mb-0 d-flex justify-content-between align-items-center">
             <span>
                 <i class="bi bi-file-text me-2"></i>

web/src/lib/components/DnsRecordsCard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { DomainAlignment, DnsResults, ReceivedHop } from "$lib/api/types.gen";
     import { getScoreColorClass } from "$lib/score";
+    import { theme } from "$lib/stores/theme";
     import GradeDisplay from "./GradeDisplay.svelte";
     import MxRecordsDisplay from "./MxRecordsDisplay.svelte";
     import SpfRecordsDisplay from "./SpfRecordsDisplay.svelte";
@@ -27,7 +28,7 @@
 </script>
 
 <div class="card shadow-sm" id="dns-details">
-    <div class="card-header bg-white">
+    <div class="card-header {$theme === 'light' ? 'bg-white' : 'bg-dark'}">
         <h4 class="mb-0 d-flex justify-content-between align-items-center">
             <span>
                 <i class="bi bi-diagram-3 me-2"></i>

web/src/lib/components/EmailAddressDisplay.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { theme } from "$lib/stores/theme";
+
     interface Props {
         email: string;
     }
@@ -24,7 +26,11 @@
     }
 </script>
 
-<div class="bg-light rounded rounded-4 p-4">
+<div
+    class="rounded rounded-4 p-4"
+    class:bg-light={$theme === "light"}
+    class:bg-secondary={$theme !== "light"}
+>
     <div class="input-group">
         <input
             bind:this={inputElement}
@@ -36,6 +42,8 @@
         />
         <button
             class="btn btn-outline-primary clipboard-btn"
+            class:btn-outline-primary={$theme === "light"}
+            class:btn-primary={$theme !== "light"}
             onclick={copyToClipboard}
             title="Copy to clipboard"
         >

web/src/lib/components/HeaderAnalysisCard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { AuthResult, DmarcRecord, HeaderAnalysis } from "$lib/api/types.gen";
     import { getScoreColorClass } from "$lib/score";
+    import { theme } from "$lib/stores/theme";
     import GradeDisplay from "./GradeDisplay.svelte";
 
     interface Props {
@@ -15,7 +16,7 @@
 </script>
 
 <div class="card shadow-sm" id="header-details">
-    <div class="card-header bg-white">
+    <div class="card-header {$theme === 'light' ? 'bg-white' : 'bg-dark'}">
         <h4 class="mb-0 d-flex justify-content-between align-items-center">
             <span>
                 <i class="bi bi-list-ul me-2"></i>

web/src/lib/components/ScoreCard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { ScoreSummary } from "$lib/api/types.gen";
     import GradeDisplay from "./GradeDisplay.svelte";
+    import { theme } from "$lib/stores/theme";
 
     interface Props {
         grade: string;
@@ -33,7 +34,7 @@
     }
 </script>
 
-<div class="card shadow-lg bg-white">
+<div class="card shadow-lg {$theme === 'light' ? 'bg-white' : 'bg-dark'}">
     <div class="card-body p-5 text-center">
         <div class="mb-3">
             {#if reanalyzing}
@@ -55,48 +56,90 @@
             <div class="row g-3 text-start">
                 <div class="col-sm-6 col-md-4 col-lg">
                     <a href="#dns-details" class="text-decoration-none">
-                        <div class="p-2 bg-light rounded text-center summary-card">
-                            <GradeDisplay grade={summary.dns_grade} score={summary.dns_score} />
+                        <div
+                            class="p-2 rounded text-center summary-card"
+                            class:bg-light={$theme === 'light'}
+                            class:bg-secondary={$theme !== 'light'}
+                        >
+                            <GradeDisplay
+                                grade={summary.dns_grade}
+                                score={summary.dns_score}
+                            />
                             <small class="text-muted d-block">DNS</small>
                         </div>
                     </a>
                 </div>
                 <div class="col-sm-6 col-md-4 col-lg">
                     <a href="#authentication-details" class="text-decoration-none">
-                        <div class="p-2 bg-light rounded text-center summary-card">
-                            <GradeDisplay grade={summary.authentication_grade} score={summary.authentication_score} />
+                        <div
+                            class="p-2 rounded text-center summary-card"
+                            class:bg-light={$theme === 'light'}
+                            class:bg-secondary={$theme !== 'light'}
+                        >
+                            <GradeDisplay
+                                grade={summary.authentication_grade}
+                                score={summary.authentication_score}
+                            />
                             <small class="text-muted d-block">Authentication</small>
                         </div>
                     </a>
                 </div>
                 <div class="col-sm-6 col-md-4 col-lg">
                     <a href="#rbl-details" class="text-decoration-none">
-                        <div class="p-2 bg-light rounded text-center summary-card">
-                            <GradeDisplay grade={summary.blacklist_grade} score={summary.blacklist_score} />
+                        <div
+                            class="p-2 rounded text-center summary-card"
+                            class:bg-light={$theme === 'light'}
+                            class:bg-secondary={$theme !== 'light'}
+                        >
+                            <GradeDisplay
+                                grade={summary.blacklist_grade}
+                                score={summary.blacklist_score}
+                            />
                             <small class="text-muted d-block">Blacklists</small>
                         </div>
                     </a>
                 </div>
                 <div class="col-sm-6 col-md-4 col-lg">
                     <a href="#header-details" class="text-decoration-none">
-                        <div class="p-2 bg-light rounded text-center summary-card">
-                            <GradeDisplay grade={summary.header_grade} score={summary.header_score} />
+                        <div
+                            class="p-2 rounded text-center summary-card"
+                            class:bg-light={$theme === 'light'}
+                            class:bg-secondary={$theme !== 'light'}
+                        >
+                            <GradeDisplay
+                                grade={summary.header_grade}
+                                score={summary.header_score}
+                            />
                             <small class="text-muted d-block">Headers</small>
                         </div>
                     </a>
                 </div>
                 <div class="col-sm-6 col-md-4 col-lg">
                     <a href="#spam-details" class="text-decoration-none">
-                        <div class="p-2 bg-light rounded text-center summary-card">
-                            <GradeDisplay grade={summary.spam_grade} score={summary.spam_score} />
+                        <div
+                            class="p-2 rounded text-center summary-card"
+                            class:bg-light={$theme === 'light'}
+                            class:bg-secondary={$theme !== 'light'}
+                        >
+                            <GradeDisplay
+                                grade={summary.spam_grade}
+                                score={summary.spam_score}
+                            />
                             <small class="text-muted d-block">Spam Score</small>
                         </div>
                     </a>
                 </div>
                 <div class="col-sm-6 col-md-4 col-lg">
                     <a href="#content-details" class="text-decoration-none">
-                        <div class="p-2 bg-light rounded text-center summary-card">
-                            <GradeDisplay grade={summary.content_grade} score={summary.content_score} />
+                        <div
+                            class="p-2 rounded text-center summary-card"
+                            class:bg-light={$theme === 'light'}
+                            class:bg-secondary={$theme !== 'light'}
+                        >
+                            <GradeDisplay
+                                grade={summary.content_grade}
+                                score={summary.content_score}
+                            />
                             <small class="text-muted d-block">Content</small>
                         </div>
                     </a>
@@ -117,4 +160,9 @@
         transform: translateY(-2px);
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     }
+
+    :global([data-bs-theme="dark"]) .summary-card:hover {
+        background-color: #495057 !important;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    }
 </style>

web/src/lib/components/SpamAssassinCard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { SpamAssassinResult } from "$lib/api/types.gen";
     import { getScoreColorClass } from "$lib/score";
+    import { theme } from "$lib/stores/theme";
     import GradeDisplay from "./GradeDisplay.svelte";
 
     interface Props {
@@ -13,7 +14,7 @@
 </script>
 
 <div class="card shadow-sm" id="spam-details">
-    <div class="card-header bg-white">
+    <div class="card-header {$theme === 'light' ? 'bg-white' : 'bg-dark'}">
         <h4 class="mb-0 d-flex justify-content-between align-items-center">
             <span>
                 <i class="bi bi-bug me-2"></i>
@@ -79,7 +80,7 @@
                 <strong>Tests Triggered:</strong>
                 <div class="mt-2">
                     {#each spamassassin.tests as test}
-                        <span class="badge bg-light text-dark me-1 mb-1">{test}</span>
+                        <span class="badge {$theme === 'light' ? 'bg-light text-dark' : 'bg-secondary'} me-1 mb-1">{test}</span>
                     {/each}
                 </div>
             </div>
@@ -88,7 +89,7 @@
         {#if spamassassin.report}
             <details class="mt-3">
                 <summary class="cursor-pointer fw-bold">Raw Report</summary>
-                <pre class="mt-2 small bg-light p-3 rounded">{spamassassin.report}</pre>
+                <pre class="mt-2 small {$theme === 'light' ? 'bg-light' : 'bg-secondary'} p-3 rounded">{spamassassin.report}</pre>
             </details>
         {/if}
     </div>
@@ -106,4 +107,15 @@
     details summary:hover {
         color: var(--bs-primary);
     }
+
+    /* Darker table colors in dark mode */
+    :global([data-bs-theme="dark"]) .table-warning {
+        --bs-table-bg: rgba(255, 193, 7, 0.2);
+        --bs-table-border-color: rgba(255, 193, 7, 0.3);
+    }
+
+    :global([data-bs-theme="dark"]) .table-success {
+        --bs-table-bg: rgba(25, 135, 84, 0.2);
+        --bs-table-border-color: rgba(25, 135, 84, 0.3);
+    }
 </style>

web/src/lib/stores/theme.ts

@@ -0,0 +1,20 @@
+import { writable } from "svelte/store";
+import { browser } from "$app/environment";
+
+const getInitialTheme = () => {
+    if (!browser) return "light";
+
+    const stored = localStorage.getItem("theme");
+    if (stored) return stored;
+
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+};
+
+export const theme = writable<"light" | "dark">(getInitialTheme());
+
+theme.subscribe((value) => {
+    if (browser) {
+        localStorage.setItem("theme", value);
+        document.documentElement.setAttribute("data-bs-theme", value);
+    }
+});