refactor: consolidate utilities, clean up components, and improve theme persistence
- Consolidate common utilities (cn, format, time) into lib/utils - Remove redundant utility files from pastel and units directories - Clean up unused components (Separator, KeyboardShortcutsHelp) - Relocate CommandPalette to components/units/ui/ - Force dark mode on landing page and improve theme persistence logic - Add FOUC prevention script to RootLayout - Fix sidebar height constraint in AppShell
This commit is contained in:
@@ -109,7 +109,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
:root, .dark {
|
||||
/* CORPORATE DARK THEME (The Standard) */
|
||||
--background: #0a0a0f;
|
||||
--foreground: #ffffff;
|
||||
|
||||
@@ -51,10 +51,32 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en" className="dark">
|
||||
<html lang="en" className="dark" suppressHydrationWarning>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="preconnect" href="https://kit.pivoine.art" />
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
(function() {
|
||||
try {
|
||||
var theme = localStorage.getItem('theme');
|
||||
var isLanding = window.location.pathname === '/';
|
||||
if (isLanding) {
|
||||
document.documentElement.classList.add('dark');
|
||||
document.documentElement.classList.remove('light');
|
||||
} else if (theme === 'light' || (!theme && window.matchMedia('(prefers-color-scheme: light)').matches)) {
|
||||
document.documentElement.classList.add('light');
|
||||
document.documentElement.classList.remove('dark');
|
||||
} else {
|
||||
document.documentElement.classList.add('dark');
|
||||
document.documentElement.classList.remove('light');
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
</head>
|
||||
<body className="antialiased">
|
||||
{children}
|
||||
|
||||
11
app/page.tsx
11
app/page.tsx
@@ -1,3 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import AnimatedBackground from '@/components/AnimatedBackground';
|
||||
import Hero from '@/components/Hero';
|
||||
import Stats from '@/components/Stats';
|
||||
@@ -6,8 +9,14 @@ import Footer from '@/components/Footer';
|
||||
import BackToTop from '@/components/BackToTop';
|
||||
|
||||
export default function Home() {
|
||||
useEffect(() => {
|
||||
// Force dark mode on html element for the landing page
|
||||
document.documentElement.classList.remove('light');
|
||||
document.documentElement.classList.add('dark');
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<main className="relative min-h-screen">
|
||||
<main className="relative min-h-screen dark text-foreground">
|
||||
<AnimatedBackground />
|
||||
<BackToTop />
|
||||
<Hero />
|
||||
|
||||
Reference in New Issue
Block a user