+
{label}
- {value === "—" || value === 0 ? — : value}
+ {value === "—" || value === 0
+ ? —
+ : value}
{sub && (
-
{sub}
+
{sub}
)}
{delta && (
+ {theme === "dark" ? : }
+
+ );
+}
+
diff --git a/lib/theme.tsx b/lib/theme.tsx
new file mode 100644
index 0000000..abc1f40
--- /dev/null
+++ b/lib/theme.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "dark" | "light";
+
+interface ThemeContextType {
+ theme: Theme;
+ toggle: () => void;
+}
+
+const ThemeContext = createContext({
+ theme: "dark",
+ toggle: () => {},
+});
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+ const [theme, setTheme] = useState("dark");
+
+ useEffect(() => {
+ const stored = localStorage.getItem("wyview-theme") as Theme | null;
+ if (stored) setTheme(stored);
+ }, []);
+
+ useEffect(() => {
+ const root = document.documentElement;
+ if (theme === "light") {
+ root.classList.add("light");
+ root.classList.remove("dark");
+ } else {
+ root.classList.add("dark");
+ root.classList.remove("light");
+ }
+ localStorage.setItem("wyview-theme", theme);
+ }, [theme]);
+
+ const toggle = () => setTheme((t) => (t === "dark" ? "light" : "dark"));
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useTheme() {
+ return useContext(ThemeContext);
+}
+
diff --git a/tailwind.config.js b/tailwind.config.js
index f4cd223..3cdc62b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
+ darkMode: "class",
content: [
"./app/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
@@ -14,6 +15,12 @@ module.exports = {
"wy-border": "#30363d",
"wy-text-primary": "#c9d1d9",
"wy-text-secondary": "#8b949e",
+ // Light theme
+ "wy-light-bg": "#f0f6ff",
+ "wy-light-surface": "#ffffff",
+ "wy-light-border": "#d0d7de",
+ "wy-light-text-primary": "#1c2128",
+ "wy-light-text-secondary": "#57606a",
},
},
},