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 36059f97bb39830d07692c38d5c545ce8e338a45..2bdd948fd1412d7a2db8eb86abf842bd9034a0c3 100644 (file)
--- 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 6b2149443fcfdff87f8f294518e291eb032f8687..4b0110452d41c3c7aae88c05d1620f3684b055a2 100644 (file)
--- 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 3452f9627c3159d672b676b98b75e3a8c0d166f8..2000bec2d29f8cbba5236d3bd9828a9bf3750e10 100644 (file)
--- 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 8d73f315abd80ac998168898fc06789c61ff513f..974333668962a8f2633105ae299b48ef2147c0c5 100644 (file)
--- 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";
 }