Skip to content

Commit f17ce0b

Browse files
geobzageobza
authored
Add dark mode #7 (#17)
* Add dark mode #7 * Remove unnecessary Notes.txt file * Tweak canvas and surface colouring * tweaked primary + secondary text
1 parent 4e5b9c0 commit f17ce0b

3 files changed

Lines changed: 57 additions & 16 deletions

File tree

‎src/components/Header.astro‎

Lines changed: 36 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
---
2+
import { Icon } from 'astro-icon/components';
23
const navLinks = [
34
{ href: '/projects', label: 'Projects' },
45
{ href: '/webring', label: 'Webring' },
@@ -11,21 +12,40 @@ const path = Astro.url.pathname;
1112
<a href="/projects" class="text-lg font-bold tracking-tight">
1213
Carleton Computer Science <span class="text-accent">Showcase</span>
1314
</a>
14-
<nav class="flex gap-5 text-sm">
15-
{
16-
navLinks.map(({ href, label }) => (
17-
<a
18-
href={href}
19-
aria-current={path.startsWith(href) ? 'page' : undefined}
20-
class:list={[
21-
'hover:text-accent transition-colors',
22-
path.startsWith(href) ? 'text-accent' : 'text-muted',
23-
]}
24-
>
25-
{label}
26-
</a>
27-
))
28-
}
29-
</nav>
15+
<div class="grouped flex items-center gap-5">
16+
<nav class="flex gap-5 text-sm">
17+
{
18+
navLinks.map(({ href, label }) => (
19+
<a
20+
href={href}
21+
aria-current={path.startsWith(href) ? 'page' : undefined}
22+
class:list={[
23+
'hover:text-accent transition-colors',
24+
path.startsWith(href) ? 'text-accent' : 'text-muted',
25+
]}
26+
>
27+
{label}
28+
</a>
29+
))
30+
}
31+
</nav>
32+
<button
33+
id="theme-toggle"
34+
type="button"
35+
aria-label="Toggle dark mode"
36+
class="text-muted hover:text-accent inline-flex items-center justify-center transition-colors"
37+
>
38+
<!-- Import Lucide Icons -->
39+
<Icon name="lucide:sun" class="hidden size-5 dark:inline" />
40+
<Icon name="lucide:moon" class="size-5 dark:hidden" />
41+
</button>
42+
</div>
3043
</div>
3144
</header>
45+
46+
<script is:inline>
47+
document.getElementById('theme-toggle')?.addEventListener('click', () => {
48+
const isDark = document.documentElement.classList.toggle('dark');
49+
localStorage.setItem('theme', isDark ? 'dark' : 'light');
50+
});
51+
</script>

‎src/layouts/Base.astro‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,16 @@ const {
1616

1717
<html lang="en">
1818
<head>
19+
<!-- Checks whether user set to dark mode or prefers-color-scheme is dark -->
20+
<script is:inline>
21+
const saved = localStorage.getItem('theme');
22+
if (
23+
saved === 'dark' ||
24+
(!saved && matchMedia('(prefers-color-scheme: dark)').matches)
25+
) {
26+
document.documentElement.classList.add('dark');
27+
}
28+
</script>
1929
<meta charset="utf-8" />
2030
<!-- Favicon: add files to public/ then uncomment (favicon ticket)
2131
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

‎src/styles/global.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import 'tailwindcss';
2+
@custom-variant dark (&:where(.dark, .dark *));
23

34
/*
45
* Design tokens (Carleton theme, light mode).
@@ -29,6 +30,16 @@
2930
--radius-card: 0.75rem;
3031
}
3132

33+
html.dark {
34+
--color-canvas: #1b1b1b; /* Carleton black — page background */
35+
--color-surface: #242526; /* cards, panels — a step lighter than canvas */
36+
--color-ink: #f0efed; /* primary text — the light off-white */
37+
--color-muted: #adacac; /* secondary text */
38+
--color-accent: #ff3b3b; /* slightly brightened Carleton red for dark bg */
39+
--color-accent-contrast: #ffffff; /* text/icons on an accent fill */
40+
--color-line: #2c2c2c; /* borders, dividers */
41+
}
42+
3243
@layer base {
3344
html {
3445
background-color: var(--color-canvas);

0 commit comments

Comments
 (0)