Fix data-bs-theme (#1810)

* Fix data-bs-theme

* Add other dark themes

* Add vaporwave-dark to dark theme list

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

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

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"

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