From: SleeplessOne1917 <abias1122@gmail.com> Date: Tue, 4 Jul 2023 20:53:28 +0000 (+0000) Subject: Fix data-bs-theme (#1810) X-Git-Url: http://these/git/%22%7Burl%7D/%7BdonateLemmyUrl%7D?a=commitdiff_plain;h=322a44bf24ec63bc2c0518ea7751e4a3a2f8e9e7;p=lemmy-ui.git Fix data-bs-theme (#1810) * Fix data-bs-theme * Add other dark themes * Add vaporwave-dark to dark theme list --- diff --git a/src/client/index.tsx b/src/client/index.tsx index 36059f9..2bdd948 100644 --- a/src/client/index.tsx +++ b/src/client/index.tsx @@ -2,7 +2,7 @@ import { initializeSite, setupDateFns } from "@utils/app"; import { hydrate } from "inferno-hydrate"; import { Router } from "inferno-router"; import { App } from "../shared/components/app/app"; -import { HistoryService } from "../shared/services"; +import { HistoryService, UserService } from "../shared/services"; import "bootstrap/js/dist/collapse"; import "bootstrap/js/dist/dropdown"; @@ -14,7 +14,7 @@ async function startClient() { const wrapper = ( <Router history={HistoryService.history}> - <App /> + <App user={UserService.Instance.myUserInfo} /> </Router> ); diff --git a/src/server/handlers/catch-all-handler.tsx b/src/server/handlers/catch-all-handler.tsx index 6b21494..4b01104 100644 --- a/src/server/handlers/catch-all-handler.tsx +++ b/src/server/handlers/catch-all-handler.tsx @@ -114,7 +114,7 @@ export default async (req: Request, res: Response) => { const wrapper = ( <StaticRouter location={url} context={isoData}> - <App /> + <App user={site?.my_user} /> </StaticRouter> ); diff --git a/src/shared/components/app/app.tsx b/src/shared/components/app/app.tsx index 3452f96..2000bec 100644 --- a/src/shared/components/app/app.tsx +++ b/src/shared/components/app/app.tsx @@ -3,6 +3,7 @@ import { dataBsTheme } from "@utils/browser"; import { Component, RefObject, createRef, linkEvent } from "inferno"; import { Provider } from "inferno-i18next-dess"; import { Route, Switch } from "inferno-router"; +import { MyUserInfo } from "lemmy-js-client"; import { IsoDataOptionalSite } from "../../interfaces"; import { routes } from "../../routes"; import { FirstLoadService, I18NextService, UserService } from "../../services"; @@ -14,10 +15,14 @@ import { Navbar } from "./navbar"; import "./styles.scss"; import { Theme } from "./theme"; -export class App extends Component<any, any> { +interface AppProps { + user?: MyUserInfo; +} + +export class App extends Component<AppProps, any> { private isoData: IsoDataOptionalSite = setIsoData(this.context); private readonly mainContentRef: RefObject<HTMLElement>; - constructor(props: any, context: any) { + constructor(props: AppProps, context: any) { super(props, context); this.mainContentRef = createRef(); } @@ -29,10 +34,6 @@ export class App extends Component<any, any> { user = UserService.Instance.myUserInfo; - componentDidMount() { - this.setState({ bsTheme: dataBsTheme(this.user) }); - } - render() { const siteRes = this.isoData.site_res; const siteView = siteRes?.site_view; @@ -43,7 +44,7 @@ export class App extends Component<any, any> { <div id="app" className="lemmy-site" - data-bs-theme={this.state?.bsTheme} + data-bs-theme={dataBsTheme(this.props.user)} > <button type="button" diff --git a/src/shared/utils/browser/data-bs-theme.ts b/src/shared/utils/browser/data-bs-theme.ts index 8d73f31..9743336 100644 --- a/src/shared/utils/browser/data-bs-theme.ts +++ b/src/shared/utils/browser/data-bs-theme.ts @@ -1,11 +1,17 @@ +import { MyUserInfo } from "lemmy-js-client"; import isDark from "./is-dark"; -export default function dataBsTheme(user) { +export default function dataBsTheme(user?: MyUserInfo) { return (isDark() && user?.local_user_view.local_user.theme === "browser") || (user && - ["darkly", "darkly-red", "darkly-pureblack"].includes( - user.local_user_view.local_user.theme - )) + [ + "darkly", + "darkly-red", + "darkly-pureblack", + "darkly-compact", + "i386", + "vaporwave-dark", + ].includes(user.local_user_view.local_user.theme)) ? "dark" : "light"; }