From a21e009dcf2f27fe1874c6abfecf1f1009e890bd Mon Sep 17 00:00:00 2001 From: Ethan Graf Date: Tue, 5 May 2026 20:25:40 -0400 Subject: [PATCH] Initialize style system --- .prettierignore | 1 + .prettierrc.json | 3 ++- package.json | 3 +++ src/App.tsx | 40 +++++++++++++++++++++++++++++---- src/index.css | 49 +++++++++++++++++++++++++++-------------- src/pages/AboutPage.tsx | 6 ++--- src/pages/HomePage.tsx | 8 ++++--- vite.renderer.config.ts | 5 +++-- 8 files changed, 85 insertions(+), 30 deletions(-) diff --git a/.prettierignore b/.prettierignore index 98cdcd5..f4d284a 100644 --- a/.prettierignore +++ b/.prettierignore @@ -5,3 +5,4 @@ dist coverage *.log package-lock.json +PRODUCT.md diff --git a/.prettierrc.json b/.prettierrc.json index 544138b..7933f57 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1,3 +1,4 @@ { - "singleQuote": true + "singleQuote": true, + "plugins": ["prettier-plugin-tailwindcss"] } diff --git a/package.json b/package.json index 00854a9..2caba05 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "@electron-forge/plugin-fuses": "^7.11.1", "@electron-forge/plugin-vite": "^7.11.1", "@electron/fuses": "^1.8.0", + "@tailwindcss/vite": "^4.2.4", "@types/electron-squirrel-startup": "^1.0.2", "@types/react": "^19.2.14", "@types/react-dom": "^19.2.3", @@ -39,6 +40,8 @@ "eslint-import-resolver-typescript": "^4.4.4", "eslint-plugin-import": "^2.32.0", "prettier": "^3.8.3", + "prettier-plugin-tailwindcss": "^0.8.0", + "tailwindcss": "^4.2.4", "typescript": "~6.0.3", "vite": "^8.0.10" }, diff --git a/src/App.tsx b/src/App.tsx index 488669b..afa82b4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,17 +1,49 @@ +import { useEffect, useState } from 'react'; import { MemoryRouter, NavLink, Route, Routes } from 'react-router-dom'; import { AboutPage } from './pages/AboutPage'; import { HomePage } from './pages/HomePage'; +const navLinkClass = ({ isActive }: { isActive: boolean }) => + [ + 'rounded px-2 py-1 text-foreground transition-colors', + isActive + ? 'bg-accent/15 font-semibold text-accent underline decoration-accent underline-offset-2' + : 'text-foreground/80 hover:bg-border/40 hover:text-foreground', + ].join(' '); + export default function App() { + const [theme, setTheme] = useState<'light' | 'dark'>(() => { + if (typeof document === 'undefined') return 'light'; + return document.documentElement.dataset.theme === 'dark' ? 'dark' : 'light'; + }); + + useEffect(() => { + const root = document.documentElement; + if (theme === 'dark') { + root.dataset.theme = 'dark'; + } else { + root.removeAttribute('data-theme'); + } + }, [theme]); + return ( -
-