feat: themes

This commit is contained in:
Artemy 2023-08-10 10:22:53 +03:00
parent f4575ca183
commit cb6ff89661
3 changed files with 36 additions and 20 deletions

View file

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

View file

@ -10,3 +10,13 @@ export function shortenNumber(number: number) {
export function capitalize(string: string) { export function capitalize(string: string) {
return string.charAt(0).toUpperCase() + string.slice(1); 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";
}
}

View file

@ -1,10 +1,20 @@
import React from 'react' import React from "react";
import ReactDOM from 'react-dom/client' import ReactDOM from "react-dom/client";
import App from './App.tsx' import App from "./App.tsx";
import './index.css' 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> <React.StrictMode>
<App /> <NextUIProvider>
</React.StrictMode>, <main
) className={`${
localStorage.getItem("theme") || getTheme()
} text-foreground bg-background`}
>
<App />
</main>
</NextUIProvider>
</React.StrictMode>
);