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 { 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>
);
}

View file

@ -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";
}
}

View file

@ -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>
);