Update bs theme when site theme is changed (#2226)

src/client/index.tsx

@@ -2,7 +2,6 @@ import { initializeSite, setupDateFns } from "@utils/app";
 import { hydrate } from "inferno-hydrate";
 import { BrowserRouter } from "inferno-router";
 import { App } from "../shared/components/app/app";
-import { UserService } from "../shared/services";
 
 import "bootstrap/js/dist/collapse";
 import "bootstrap/js/dist/dropdown";
@@ -15,7 +14,7 @@ async function startClient() {
 
   const wrapper = (
     <BrowserRouter>
-      <App user={UserService.Instance.myUserInfo} />
+      <App />
     </BrowserRouter>
   );
 

src/server/handlers/catch-all-handler.tsx

@@ -117,7 +117,7 @@ export default async (req: Request, res: Response) => {
 
     const wrapper = (
       <StaticRouter location={url} context={isoData}>
-        <App user={site?.my_user} />
+        <App />
       </StaticRouter>
     );
 

src/shared/components/app/app.tsx

@@ -3,10 +3,9 @@ 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";
+import { FirstLoadService, I18NextService } from "../../services";
 import AuthGuard from "../common/auth-guard";
 import ErrorGuard from "../common/error-guard";
 import { ErrorPage } from "./error-page";
@@ -17,14 +16,10 @@ import { Theme } from "./theme";
 import AnonymousGuard from "../common/anonymous-guard";
 import { CodeTheme } from "./code-theme";
 
-interface AppProps {
+export class App extends Component<any, any> {
-  user?: MyUserInfo;
-}
-
-export class App extends Component<AppProps, any> {
   private isoData: IsoDataOptionalSite = setIsoData(this.context);
   private readonly mainContentRef: RefObject<HTMLElement>;
-  constructor(props: AppProps, context: any) {
+  constructor(props: any, context: any) {
     super(props, context);
     this.mainContentRef = createRef();
   }
@@ -34,8 +29,6 @@ export class App extends Component<AppProps, any> {
     this.mainContentRef.current?.focus();
   }
 
-  user = UserService.Instance.myUserInfo;
-
   render() {
     const siteRes = this.isoData.site_res;
     const siteView = siteRes?.site_view;
@@ -46,7 +39,7 @@ export class App extends Component<AppProps, any> {
           <div
             id="app"
             className="lemmy-site"
-            data-bs-theme={dataBsTheme(this.props.user)}
+            data-bs-theme={dataBsTheme(siteRes)}
           >
             <button
               type="button"

src/shared/components/home/login.tsx

@@ -1,5 +1,5 @@
 import { setIsoData } from "@utils/app";
-import { isBrowser } from "@utils/browser";
+import { isBrowser, updateDataBsTheme } from "@utils/browser";
 import { getQueryParams } from "@utils/helpers";
 import { Component, linkEvent } from "inferno";
 import { RouteComponentProps } from "inferno-router/dist/Route";
@@ -47,6 +47,7 @@ async function handleLoginSuccess(i: Login, loginRes: LoginResponse) {
 
   if (site.state === "success") {
     UserService.Instance.myUserInfo = site.data.my_user;
+    updateDataBsTheme(site.data);
   }
 
   const { prev } = getLoginQueryParams();

src/shared/components/person/settings.tsx

@@ -61,6 +61,7 @@ import { PersonListing } from "./person-listing";
 import { InitialFetchRequest } from "../../interfaces";
 import TotpModal from "../common/totp-modal";
 import { LoadingEllipses } from "../common/loading-ellipses";
+import { updateDataBsTheme } from "@utils/browser";
 
 type SettingsData = RouteDataResponse<{
   instancesRes: GetFederatedInstancesResponse;
@@ -1621,6 +1622,7 @@ export class Settings extends Component<any, SettingsState> {
         } = siteRes.data.my_user!.local_user_view;
 
         UserService.Instance.myUserInfo = siteRes.data.my_user;
+        updateDataBsTheme(siteRes.data);
 
         i.setState(prev => ({
           ...prev,

src/shared/utils/app/initialize-site.ts

@@ -1,9 +1,11 @@
 import { GetSiteResponse } from "lemmy-js-client";
 import { setupEmojiDataModel, setupMarkdown } from "../../markdown";
 import { I18NextService, UserService } from "../../services";
+import { updateDataBsTheme } from "@utils/browser";
 
 export default function initializeSite(site?: GetSiteResponse) {
   UserService.Instance.myUserInfo = site?.my_user;
+  updateDataBsTheme(site);
   I18NextService.i18n.changeLanguage();
   if (site) {
     setupEmojiDataModel(site.custom_emojis ?? []);

src/shared/utils/app/set-theme.ts

@@ -1,5 +1,5 @@
 import { fetchThemeList } from "@utils/app";
-import { isBrowser, loadCss } from "@utils/browser";
+import { dataBsTheme, isBrowser, loadCss } from "@utils/browser";
 
 export default async function setTheme(theme: string, forceReload = false) {
   if (!isBrowser()) {
@@ -32,5 +32,8 @@ export default async function setTheme(theme: string, forceReload = false) {
   const cssLoc = `/css/themes/${theme}.css`;
 
   loadCss(theme, cssLoc);
+  document
+    .getElementById("app")
+    ?.setAttribute("data-bs-theme", dataBsTheme(theme));
   document.getElementById(theme)?.removeAttribute("disabled");
 }

src/shared/utils/browser/data-bs-theme.ts

@@ -1,17 +1,23 @@
-import { MyUserInfo } from "lemmy-js-client";
+import { GetSiteResponse } from "lemmy-js-client";
 import isDark from "./is-dark";
 
-export default function dataBsTheme(user?: MyUserInfo) {
+export default function dataBsTheme(siteResOrTheme?: GetSiteResponse | string) {
-  return (isDark() && user?.local_user_view.local_user.theme === "browser") ||
+  const theme =
-    (user &&
+    typeof siteResOrTheme === "string"
-      [
+      ? siteResOrTheme
-        "darkly",
+      : siteResOrTheme?.my_user?.local_user_view.local_user.theme ??
-        "darkly-red",
+        siteResOrTheme?.site_view.local_site.default_theme ??
-        "darkly-pureblack",
+        "browser";
-        "darkly-compact",
+
-        "i386",
+  return (isDark() && theme === "browser") ||
-        "vaporwave-dark",
+    [
-      ].includes(user.local_user_view.local_user.theme))
+      "darkly",
+      "darkly-red",
+      "darkly-pureblack",
+      "darkly-compact",
+      "i386",
+      "vaporwave-dark",
+    ].includes(theme)
     ? "dark"
     : "light";
 }

src/shared/utils/browser/index.ts

@@ -9,6 +9,7 @@ import restoreScrollPosition from "./restore-scroll-position";
 import saveScrollPosition from "./save-scroll-position";
 import setAuthCookie from "./set-auth-cookie";
 import share from "./share";
+import updateDataBsTheme from "./update-data-bs-theme";
 
 export {
   canShare,
@@ -22,4 +23,5 @@ export {
   saveScrollPosition,
   setAuthCookie,
   share,
+  updateDataBsTheme,
 };

src/shared/utils/browser/update-data-bs-theme.ts

@@ -0,0 +1,11 @@
+import { GetSiteResponse } from "lemmy-js-client";
+import isBrowser from "./is-browser";
+import dataBsTheme from "./data-bs-theme";
+
+export default function updateDataBsTheme(siteRes?: GetSiteResponse) {
+  if (isBrowser()) {
+    document
+      .getElementById("app")
+      ?.setAttribute("data-bs-theme", dataBsTheme(siteRes));
+  }
+}