happyDomain/happyDeliver
2
0
Fork 0
Code Issues 7 Pull requests 8 Projects Releases Packages Wiki Activity Actions

Add a dark mode

Browse source
This commit is contained in:
nemunaire 2025-10-25 11:16:56 +07:00
commit 0325139461
12 changed files with 199 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

10
web/src/app.html
View file

@ -25,6 +25,16 @@
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<script>
// Apply theme before render to prevent flash
(function () {
const stored = localStorage.getItem("theme");
const theme =
stored ||
(window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
document.documentElement.setAttribute("data-bs-theme", theme);
})();
</script>
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

21
web/src/lib/components/AuthenticationCard.svelte
View file

@ -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>

7
web/src/lib/components/BlacklistCard.svelte
View file

@ -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>

3
web/src/lib/components/ContentAnalysisCard.svelte
View file

@ -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>

3
web/src/lib/components/DnsRecordsCard.svelte
View file

@ -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>

10
web/src/lib/components/EmailAddressDisplay.svelte
View file

@ -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"
>

3
web/src/lib/components/HeaderAnalysisCard.svelte
View file

@ -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>

74
web/src/lib/components/ScoreCard.svelte
View file

@ -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>

18
web/src/lib/components/SpamAssassinCard.svelte
View file

@ -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>

20
web/src/lib/stores/theme.ts Normal file
View file

@ -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);
}
});

28
web/src/routes/+layout.svelte
View file

@ -4,12 +4,22 @@
import "../app.css";
import Logo from "$lib/components/Logo.svelte";
import { theme } from "$lib/stores/theme";
import { onMount } from "svelte";
interface Props {
children?: import("svelte").Snippet;
}
let { children }: Props = $props();
onMount(() => {
document.documentElement.setAttribute("data-bs-theme", $theme);
});
function toggleTheme() {
$theme = $theme === "light" ? "dark" : "light";
}
</script>
<div class="min-vh-100 d-flex flex-column">
@ -17,11 +27,21 @@
<div class="container">
<a class="navbar-brand fw-bold" href="/">
<i class="bi bi-envelope-check me-2"></i>
<Logo />
<Logo color={$theme === "light" ? "black" : "white"} />
</a>
<span class="d-none d-md-inline navbar-text text-primary small">
Open-Source Email Deliverability Tester
</span>
<div>
<span class="d-none d-md-inline navbar-text text-primary small">
Open-Source Email Deliverability Tester
</span>
<button
class="btn btn-link ms-auto {$theme == 'light' ? 'text-dark' : 'text-light'}"
onclick={toggleTheme}
aria-label="Toggle theme"
title="Toggle theme"
>
<i class="bi bi-{$theme === 'light' ? 'moon-stars-fill' : 'sun-fill'}"></i>
</button>
</div>
</div>
</nav>

37
web/src/routes/+page.svelte
View file

@ -252,6 +252,26 @@
text-shadow: black 0 0 1px;
}
/* Dark mode hero adjustments */
:global([data-bs-theme="dark"]) .hero {
background:
linear-gradient(135deg, rgba(50, 65, 140, 0.85) 0%, rgba(65, 40, 95, 0.9) 100%),
url("/img/report.webp");
background-size: cover;
background-position: center 25%;
background-repeat: no-repeat;
}
:global([data-bs-theme="dark"]) .hero h1,
:global([data-bs-theme="dark"]) .hero p {
text-shadow: black 0 0 3px;
}
/* Dark mode section background */
:global([data-bs-theme="dark"]) #steps {
background-color: var(--bs-secondary-bg) !important;
}
.fade-in {
animation: fadeIn 0.6s ease-out;
}
@ -293,4 +313,21 @@
box-shadow: 0 1rem 2rem rgba(25, 135, 84, 0.5);
}
}
@keyframes pulse-dark {
0%,
100% {
transform: scale(1);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}
50% {
transform: scale(1.08);
box-shadow: 0 1rem 2rem rgba(25, 135, 84, 0.7);
}
}
/* Dark mode pulse animation */
:global([data-bs-theme="dark"]) .cta-button {
animation: pulse-dark 2s infinite;
}
</style>