imnyang/akiyama.mizuki.guru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: implement dark mode support with theme provider and toggle component

Browse source
This commit is contained in:
암냥 2026-04-21 22:26:20 +09:00
commit cf70aa4a67
No known key found for this signature in database
12 changed files with 248 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

14
apps/frontend/src/components/header.tsx
View file

@ -2,6 +2,7 @@
import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import ThemeToggle from "./theme-toggle";
type Me = {
id: string;
@ -139,12 +140,17 @@ export default function Header() {
return (
<header className="relative z-60 flex h-16 items-center justify-between border-b border-border bg-background/90 backdrop-blur px-6">
<Link href="/" className="text-2xl" id="icon" onClick={handleIconClick}>🎀</Link>
<div className="flex items-center gap-6">
<Link href="/" className="text-2xl" id="icon" onClick={handleIconClick}>🎀</Link>
</div>
{me ? (
<div className="relative flex items-center gap-4" id="menu" ref={menuRef}>
<div className="relative flex items-center gap-4" id="menu" ref={menuRef}>
{me.role === "admin" || me.role === "writer" ? (
<Link href="/add" className="text-[16px] text-foreground/50">[ <span className="text-foreground">+</span> ]</Link>
) : null}
<div>
<ThemeToggle />
</div>
<button
type="button"
@ -170,7 +176,7 @@ export default function Header() {
{me.role === "admin" ? (
<a
href="/dashboard"
className="block rounded px-3 py-2 text-sm text-foreground/80 hover:bg-black/5"
className="block rounded px-3 py-2 text-sm text-foreground/80 hover:bg-accent"
onClick={() => setMenuOpen(false)}
>
Dashboard
@ -178,7 +184,7 @@ export default function Header() {
) : null}
<button
type="button"
className="block w-full rounded px-3 py-2 text-left text-sm text-red-600 hover:bg-red-50"
className="block w-full rounded px-3 py-2 text-left text-sm text-red-600 hover:bg-destructive/10 transition-colors"
onClick={() => {
void logout();
}}