From 59d16ebde138ca9555e266eaed342bb936e6ce6e Mon Sep 17 00:00:00 2001 From: "D. Rimron-Soutter" Date: Fri, 17 Oct 2025 12:35:48 +0100 Subject: [PATCH] Attempt 1 to add a darkmode --- src/app/layout.tsx | 72 +++++------ src/app/registers/[hex]/page.tsx | 2 +- src/app/registers/page.tsx | 4 +- src/components/Navbar.tsx | 25 ++++ src/components/ThemeDropdown.tsx | 138 +++++++++++++++++++++ src/{app => }/scss/_bootswatch.scss | 0 src/{app => }/scss/_explorer.scss | 0 src/{app => }/scss/_variables.scss | 0 src/{app => }/scss/nbn.scss | 2 +- src/{app => }/services/register.service.ts | 0 10 files changed, 200 insertions(+), 43 deletions(-) create mode 100644 src/components/Navbar.tsx create mode 100644 src/components/ThemeDropdown.tsx rename src/{app => }/scss/_bootswatch.scss (100%) rename src/{app => }/scss/_explorer.scss (100%) rename src/{app => }/scss/_variables.scss (100%) rename src/{app => }/scss/nbn.scss (77%) rename src/{app => }/services/register.service.ts (100%) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index aea75b8..45790e5 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,44 +1,38 @@ import type { Metadata } from "next"; -import Link from 'next/link'; -import "./scss/nbn.scss"; +import "@/scss/nbn.scss"; +import NavbarClient from "@/components/Navbar"; export const metadata: Metadata = { - title: "Spectrum Next Registers", - description: "A platform for exploring the Spectrum Next registers", - robots: { index: true, follow: true }, - formatDetection: { email: false, address: false, telephone: false }, + title: "Spectrum Next Explorer", + description: "A platform for exploring the Spectrum Next hardware", + robots: { index: true, follow: true }, + formatDetection: { email: false, address: false, telephone: false }, }; -export default function RootLayout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { - return ( - - - -
- {children} -
- - - ); -} +const noFlashThemeScript = ` +(function() { + try { + var cookieMatch = document.cookie.match(/(?:^|; )theme=([^;]+)/); + var stored = cookieMatch ? decodeURIComponent(cookieMatch[1]) : null; + var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + var effective = (stored === 'light' || stored === 'dark') ? stored : (prefersDark ? 'dark' : 'light'); + var el = document.documentElement; + if (el.getAttribute('data-bs-theme') !== effective) { + el.setAttribute('data-bs-theme', effective); + } + } catch(_) {} +})();`; + +export default function RootLayout({ children }: { children: React.ReactNode }) { + return ( + + +