happyDomain/happyDeliver
2
0
Fork 0
Code Issues 7 Pull requests 7 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

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>