feat: themes

src/App.tsx

@@ -1,6 +1,4 @@
 import "./App.css";
-
-import { NextUIProvider } from "@nextui-org/react";
 import { PipedAPI } from "piped-api";
 import { HashRouter, Navigate, Route, Routes } from "react-router-dom";
 import TrendingPage from "./pages/trending";
@@ -16,16 +14,14 @@ function App() {
   window.piped_api = new PipedAPI();
 
   return (
-    <NextUIProvider>
-      <HashRouter>
-        <NavbarComponent />
-        <Routes>
-          <Route path="/" element={<Navigate to="/trending" />} />
-          <Route path="/trending" element={<TrendingPage />} />
-          <Route path="/channel/:id" element={<ChannelPage />} />
-        </Routes>
-      </HashRouter>
-    </NextUIProvider>
+    <HashRouter>
+      <NavbarComponent />
+      <Routes>
+        <Route path="/" element={<Navigate to="/trending" />} />
+        <Route path="/trending" element={<TrendingPage />} />
+        <Route path="/channel/:id" element={<ChannelPage />} />
+      </Routes>
+    </HashRouter>
   );
 }
 

src/components/utils.ts

@@ -10,3 +10,13 @@ export function shortenNumber(number: number) {
 export function capitalize(string: string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
+
+export function getTheme() {
+  if (window.matchMedia) {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  } else {
+    return "light";
+  }
+}

src/main.tsx

@@ -1,10 +1,20 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+import { NextUIProvider } from "@nextui-org/react";
+import { getTheme } from "./components/utils.ts";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+    <NextUIProvider>
+      <main
+        className={`${
+          localStorage.getItem("theme") || getTheme()
+        } text-foreground bg-background`}
+      >
+        <App />
+      </main>
+    </NextUIProvider>
+  </React.StrictMode>
+);