jude/reminder-bot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

Add dark mode support

Browse Source
This commit is contained in:
jude
2026-05-16 18:20:00 +01:00
parent 9c6c324b02
commit 050277ac8b
20 changed files with 431 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
reminder-dashboard/src/components/App/index.tsx
+63 -50
View File
@@ -1,59 +1,72 @@
import { Sidebar } from "../Sidebar";
import { QueryClient, QueryClientProvider } from "react-query";
import { Route, Router, Switch } from "wouter";
import { Welcome } from "../Welcome";
import { Guild } from "../Guild";
import { FlashProvider } from "./FlashProvider";
import { TimezoneProvider } from "./TimezoneProvider";
import { User } from "../User";
import { GuildReminders } from "../Guild/GuildReminders";
import { GuildTodos } from "../Guild/GuildTodos";
import {Sidebar} from "../Sidebar";
import {QueryClient, QueryClientProvider} from "react-query";
import {Route, Router, Switch} from "wouter";
import {Welcome} from "../Welcome";
import {Guild} from "../Guild";
import {FlashProvider} from "./FlashProvider";
import {TimezoneProvider} from "./TimezoneProvider";
import {User} from "../User";
import {GuildReminders} from "../Guild/GuildReminders";
import {GuildTodos} from "../Guild/GuildTodos";
import {ColorSchemeProvider, useColorScheme} from "./ColorSchemeProvider";
import {useEffect} from "preact/hooks";
const InnerApp = () => {
const {colorScheme} = useColorScheme();
useEffect(() => {
const body = document.querySelector("body");
body.className = body.className.replace(/scheme-\w+/g, "");
body.classList.add(`scheme-${colorScheme}`);
}, [colorScheme]);
return (
<Router base={"/dashboard"}>
<div class={`columns is-gapless dashboard-frame scheme-${colorScheme}`}>
<Sidebar/>
<div class="column is-main-content">
<div style={{margin: "0 12px 12px 12px"}}>
<Switch>
<Route path={"/@me/reminders"} component={User}></Route>
<Route
path={"/:guild/reminders"}
component={() => (
<Guild>
<GuildReminders/>
</Guild>
)}
></Route>
<Route
path={"/:guild/todos"}
component={() => (
<Guild>
<GuildTodos/>
</Guild>
)}
></Route>
<Route>
<Welcome/>
</Route>
</Switch>
</div>
</div>
</div>
</Router>
);
};
export function App() {
const queryClient = new QueryClient();
let scheme = "light";
// if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
// scheme = "dark";
// }
return (
<QueryClientProvider client={queryClient}>
<TimezoneProvider>
<FlashProvider>
<Router base={"/dashboard"}>
<div class={`columns is-gapless dashboard-frame scheme-${scheme}`}>
<Sidebar />
<div class="column is-main-content">
<div style={{ margin: "0 12px 12px 12px" }}>
<Switch>
<Route path={"/@me/reminders"} component={User}></Route>
<Route
path={"/:guild/reminders"}
component={() => (
<Guild>
<GuildReminders />
</Guild>
)}
></Route>
<Route
path={"/:guild/todos"}
component={() => (
<Guild>
<GuildTodos />
</Guild>
)}
></Route>
<Route>
<Welcome />
</Route>
</Switch>
</div>
</div>
</div>
</Router>
</FlashProvider>
</TimezoneProvider>
<ColorSchemeProvider>
<TimezoneProvider>
<FlashProvider>
<InnerApp/>
</FlashProvider>
</TimezoneProvider>
</ColorSchemeProvider>
</QueryClientProvider>
);
}