mirror of
https://github.com/artegoser/ultyt.git
synced 2024-11-24 04:46:23 +03:00
feat: themes
This commit is contained in:
parent
f4575ca183
commit
cb6ff89661
3 changed files with 36 additions and 20 deletions
20
src/App.tsx
20
src/App.tsx
|
@ -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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
26
src/main.tsx
26
src/main.tsx
|
@ -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>
|
||||||
|
);
|
||||||
|
|
Loading…
Add table
Reference in a new issue