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,7 +14,6 @@ function App() {
   window.piped_api = new PipedAPI();
 
   return (
-    <NextUIProvider>
     <HashRouter>
       <NavbarComponent />
       <Routes>
@@ -25,7 +22,6 @@ function App() {
         <Route path="/channel/:id" element={<ChannelPage />} />
       </Routes>
     </HashRouter>
-    </NextUIProvider>
   );
 }
 

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>
+    <NextUIProvider>
+      <main
+        className={`${
+          localStorage.getItem("theme") || getTheme()
+        } text-foreground bg-background`}
+      >
         <App />
-  </React.StrictMode>,
-)
+      </main>
+    </NextUIProvider>
+  </React.StrictMode>
+);