experimental bluesky client
Add dark/light toggle; fix light mode styling
+15
-11
+14
-10
src/components/Header.tsx
+14
-10
src/components/Header.tsx
···
1
1
import { Link } from '@tanstack/react-router'
2
+
import ThemeToggle from './ThemeToggle'
2
3
3
4
export default function Header({ did }: { did: string | null }) {
4
5
return (
···
15
16
</Link>
16
17
</h2>
17
18
)}
18
-
{did && (
19
-
<form method="POST" action="/logout" className="ml-auto">
20
-
<button
21
-
type="submit"
22
-
className="rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-3 py-1.5 text-sm text-[var(--sea-ink-soft)] hover:text-[var(--sea-ink)] transition-colors sm:px-4 sm:py-2"
23
-
>
24
-
Sign out
25
-
</button>
26
-
</form>
27
-
)}
19
+
<div className="ml-auto flex items-center gap-2">
20
+
<ThemeToggle />
21
+
{did && (
22
+
<form method="POST" action="/logout">
23
+
<button
24
+
type="submit"
25
+
className="rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-3 py-1.5 text-sm text-[var(--sea-ink-soft)] hover:text-[var(--sea-ink)] transition-colors sm:px-4 sm:py-2"
26
+
>
27
+
Sign out
28
+
</button>
29
+
</form>
30
+
)}
31
+
</div>
28
32
</nav>
29
33
</header>
30
34
)
+1
-1
src/routes/login.tsx
+1
-1
src/routes/login.tsx
···
21
21
placeholder="you.bsky.social"
22
22
/>
23
23
<button
24
-
className="bg-[--lagoon] text-white rounded-lg px-4 py-2 w-full font-semibold hover:bg-[--lagoon-deep] transition-colors"
24
+
className="bg-[--lagoon] text-[#173a40] dark:text-white rounded-lg px-4 py-2 w-full font-semibold hover:bg-[--lagoon-deep] transition-colors"
25
25
type="submit"
26
26
>
27
27
Login with Atmosphere