added dark/light mode and control
This commit is contained in:
Hunter W.
122
app/globals.css
122
app/globals.css
@@ -1,52 +1,52 @@
|
||||
:root {
|
||||
|
||||
/* Background */
|
||||
--bg: #101114;
|
||||
--bg-raised: #141518;
|
||||
--surface: #1a1b1f;
|
||||
--surface-hover: #212229;
|
||||
--surface-active: #282a33;
|
||||
|
||||
--bg: #ffffff;
|
||||
--bg-raised: #f8f8fa;
|
||||
--surface: #f1f2f4;
|
||||
--surface-hover: #e8e9ed;
|
||||
--surface-active: #dfe0e5;
|
||||
|
||||
/* Border */
|
||||
--border: #2c2d34;
|
||||
--border-strong: #3d3f48;
|
||||
--border-subtle: #232429;
|
||||
|
||||
--border: #d4d5db;
|
||||
--border-strong: #b8bac2;
|
||||
--border-subtle: #e4e5ea;
|
||||
|
||||
/* Foreground / text */
|
||||
--fg: #e4e5e9;
|
||||
--fg-secondary: #a0a3ad;
|
||||
--muted: #5f6270;
|
||||
--faint: #43454f;
|
||||
|
||||
--fg: #131419;
|
||||
--fg-secondary: #4e5264;
|
||||
--muted: #7e8290;
|
||||
--faint: #b0b3bd;
|
||||
|
||||
/* Accent */
|
||||
--accent: #8a9dff;
|
||||
--accent-hover: #9dacff;
|
||||
--accent-strong: #7088ff;
|
||||
--accent-bg: rgba(138, 157, 255, 0.08);
|
||||
--accent-bg-hover: rgba(138, 157, 255, 0.14);
|
||||
|
||||
--accent: #5468e0;
|
||||
--accent-hover: #4758cc;
|
||||
--accent-strong: #3d4cb8;
|
||||
--accent-bg: rgba(84, 104, 224, 0.07);
|
||||
--accent-bg-hover: rgba(84, 104, 224, 0.13);
|
||||
|
||||
/* Semantic */
|
||||
--success: #5ec98f;
|
||||
--success-bg: rgba(94, 201, 143, 0.08);
|
||||
--warning: #e0a855;
|
||||
--warning-bg: rgba(224, 168, 85, 0.08);
|
||||
--error: #e06565;
|
||||
--error-bg: rgba(224, 101, 101, 0.08);
|
||||
--info: #60a5d6;
|
||||
--info-bg: rgba(96, 165, 214, 0.08);
|
||||
|
||||
--success: #1a8f54;
|
||||
--success-bg: rgba(26, 143, 84, 0.07);
|
||||
--warning: #b07818;
|
||||
--warning-bg: rgba(176, 120, 24, 0.07);
|
||||
--error: #c93c3c;
|
||||
--error-bg: rgba(201, 60, 60, 0.07);
|
||||
--info: #2e7db5;
|
||||
--info-bg: rgba(46, 125, 181, 0.07);
|
||||
|
||||
/* Overlay / depth */
|
||||
--overlay: rgba(0, 0, 0, 0.55);
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
|
||||
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.30);
|
||||
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);
|
||||
|
||||
--overlay: rgba(0, 0, 0, 0.2);
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10);
|
||||
|
||||
/* Radii */
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 10px;
|
||||
--radius-xl: 16px;
|
||||
|
||||
|
||||
/* Spacing */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
@@ -58,7 +58,7 @@
|
||||
--space-10: 40px;
|
||||
--space-12: 48px;
|
||||
--space-16: 64px;
|
||||
|
||||
|
||||
/* Typography */
|
||||
--text-xs: 11px;
|
||||
--text-sm: 13px;
|
||||
@@ -71,7 +71,7 @@
|
||||
--leading-tight: 1.2;
|
||||
--leading-normal: 1.5;
|
||||
--leading-relaxed: 1.7;
|
||||
|
||||
|
||||
/* Transitions */
|
||||
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
@@ -80,6 +80,50 @@
|
||||
--duration-slow: 350ms;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
|
||||
/* Background */
|
||||
--bg: #101114;
|
||||
--bg-raised: #141518;
|
||||
--surface: #1a1b1f;
|
||||
--surface-hover: #212229;
|
||||
--surface-active: #282a33;
|
||||
|
||||
/* Border */
|
||||
--border: #2c2d34;
|
||||
--border-strong: #3d3f48;
|
||||
--border-subtle: #232429;
|
||||
|
||||
/* Foreground / text */
|
||||
--fg: #e4e5e9;
|
||||
--fg-secondary: #a0a3ad;
|
||||
--muted: #5f6270;
|
||||
--faint: #43454f;
|
||||
|
||||
/* Accent */
|
||||
--accent: #8a9dff;
|
||||
--accent-hover: #9dacff;
|
||||
--accent-strong: #7088ff;
|
||||
--accent-bg: rgba(138, 157, 255, 0.08);
|
||||
--accent-bg-hover: rgba(138, 157, 255, 0.14);
|
||||
|
||||
/* Semantic */
|
||||
--success: #5ec98f;
|
||||
--success-bg: rgba(94, 201, 143, 0.08);
|
||||
--warning: #e0a855;
|
||||
--warning-bg: rgba(224, 168, 85, 0.08);
|
||||
--error: #e06565;
|
||||
--error-bg: rgba(224, 101, 101, 0.08);
|
||||
--info: #60a5d6;
|
||||
--info-bg: rgba(96, 165, 214, 0.08);
|
||||
|
||||
/* Overlay / depth */
|
||||
--overlay: rgba(0, 0, 0, 0.55);
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
|
||||
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.30);
|
||||
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
@@ -104,4 +148,4 @@ body {
|
||||
h1 {
|
||||
font-size: 32px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,6 +2,8 @@ import type { Metadata } from "next";
|
||||
import { JetBrains_Mono, DM_Sans } from "next/font/google";
|
||||
import { SITE } from "@/data/content";
|
||||
import "./globals.css";
|
||||
import { ThemeProvider } from 'next-themes'
|
||||
import ThemeSwitch from "@/components/ThemeSwitch";
|
||||
|
||||
const mono = JetBrains_Mono({
|
||||
subsets: ["latin"],
|
||||
@@ -26,8 +28,14 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" className={`${mono.variable} ${sans.variable}`}>
|
||||
<body>{children}</body>
|
||||
<html lang="en" className={`${mono.variable} ${sans.variable}`} suppressHydrationWarning>
|
||||
<head />
|
||||
<body>
|
||||
<ThemeProvider attribute="data-theme">
|
||||
<ThemeSwitch/>
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user