Skip to content

Feature/theme toggle #373

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Lakes41 merged 6 commits into from
Jul 29, 2026
Merged

Feature/theme toggle #373

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
00e650b
feat(admin): add AdminModule plugin interface, registry, and first-pa…
Truphile Jul 24, 2026
574cab5
refactor(nav): render admin navigation items dynamically from module …
Truphile Jul 24, 2026
489fb37
docs(admin): add documentation and reusable gate component for AdminM…
Truphile Jul 24, 2026
59ed5b1
feat(ui): add copy to clipboard button for wallet address
Truphile Jul 28, 2026
68a5873
feat: add theme toggle for dark/light mode
Truphile Jul 29, 2026
5f91e21
Merge branch 'main' into feature/theme-toggle
Truphile Jul 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 20 additions & 15 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ import { Nav } from '@/components/nav'
import { SwRegistrar } from '@/components/sw-registrar'
import { BackendHealthCheck } from '@/components/backend-health-check'
import { SyncStatusBanner } from '@/components/ui/sync-status-banner'
import { UnsupportedChainBanner } from '@/components/wallet/unsupported-chain-banner'

import { ThemeProvider } from '@/components/theme-provider'
export const metadata: Metadata = {
title: {
default: 'GuildPass',
Expand All @@ -23,20 +22,26 @@ export const metadata: Metadata = {

export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<html lang="en" suppressHydrationWarning>
<body>
<RootProviders>
{/* Registers the service worker for dashboard offline caching */}
<SwRegistrar />
{/* One-time startup check so a misconfigured/unreachable backend
surfaces immediately, not just after a user action fails */}
<BackendHealthCheck />
{/* Offline/Degraded status banner */}
<SyncStatusBanner className="mb-4 w-full" />
<Nav />
<UnsupportedChainBanner />
<main className="mx-auto max-w-6xl px-4 py-6">{children}</main>
</RootProviders>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<RootProviders>
{/* Registers the service worker for dashboard offline caching */}
<SwRegistrar />
{/* One-time startup check so a misconfigured/unreachable backend
surfaces immediately, not just after a user action fails */}
<BackendHealthCheck />
{/* Offline/Degraded status banner */}
<SyncStatusBanner className="mb-4 w-full" />
<Nav />
<main className="mx-auto max-w-6xl px-4 py-6">{children}</main>
</RootProviders>
</ThemeProvider>
</body>
</html>
)
Expand Down
3 changes: 2 additions & 1 deletion components/nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { features } from "@/lib/features";
import { config } from "@/lib/config";
import { useState, useRef, useEffect } from "react";
import { getNavAdminModules } from "@/lib/admin-modules";
import { ThemeToggle } from "@/components/theme-toggle";

const AVAILABLE_COMMUNITIES = [
{ id: 'guildpass-demo', name: 'GuildPass Demo' },
Expand Down Expand Up @@ -164,7 +165,6 @@ export function Nav() {

const items = [
{ href: `${prefix}/dashboard` as Route, label: "Dashboard", enabled: true },
{ href: `/analytics` as Route, label: "Analytics", enabled: true },
...adminNavItems.map((item) => ({ ...item, enabled: true })),
{
href: `${prefix}/resources/alpha` as Route,
Expand Down Expand Up @@ -213,6 +213,7 @@ export function Nav() {
</Link>
))}
{features.multiCommunity && <DisabledCommunitySwitcher />}
<ThemeToggle />
<ConnectButton />
</nav>
</div>
Expand Down
7 changes: 7 additions & 0 deletions components/theme-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
"use client"

import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
export function ThemeProvider({ children, ...props }: React.ComponentProps<typeof NextThemesProvider>) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
20 changes: 20 additions & 0 deletions components/theme-toggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
"use client"

import * as React from "react"
import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"

export function ThemeToggle() {
const { setTheme, theme } = useTheme()

return (
<button
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
className="inline-flex items-center justify-center rounded-md w-9 h-9 text-sm font-medium transition-colors hover:bg-zinc-100 hover:text-zinc-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 dark:focus-visible:ring-zinc-300 border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-950"
>
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 text-zinc-900" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 text-zinc-100" />
<span className="sr-only">Toggle theme</span>
</button>
)
}
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"diff": "^9.0.0",
"lucide-react": "^0.435.0",
"next": "14.2.5",
"next-themes": "^0.4.6",
"postcss": "^8.4.38",
"react": "18.2.0",
"react-dom": "18.2.0",
Expand Down