fix: Add data-bs-theme attribute for user dark/light modes (#1782)

[lemmy-ui.git] / src / shared / components / app / app.tsx

diff --git a/src/shared/components/app/app.tsx b/src/shared/components/app/app.tsx
index 96bf10168e8e47aa9729e3f59390eb06d9ddc11f..3452f9627c3159d672b676b98b75e3a8c0d166f8 100644 (file)
--- a/src/shared/components/app/app.tsx
+++ b/src/shared/components/app/app.tsx
@@ -1,10 +1,11 @@
 import { isAuthPath, setIsoData } from "@utils/app";
+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 { IsoDataOptionalSite } from "../../interfaces";
 import { routes } from "../../routes";
-import { FirstLoadService, I18NextService } from "../../services";
+import { FirstLoadService, I18NextService, UserService } from "../../services";
 import AuthGuard from "../common/auth-guard";
 import ErrorGuard from "../common/error-guard";
 import { ErrorPage } from "./error-page";
@@ -25,6 +26,13 @@ export class App extends Component<any, any> {
     event.preventDefault();
     this.mainContentRef.current?.focus();
   }
+
+  user = UserService.Instance.myUserInfo;
+
+  componentDidMount() {
+    this.setState({ bsTheme: dataBsTheme(this.user) });
+  }
+
   render() {
     const siteRes = this.isoData.site_res;
     const siteView = siteRes?.site_view;
@@ -32,13 +40,18 @@ export class App extends Component<any, any> {
     return (
       <>
         <Provider i18next={I18NextService.i18n}>
-          <div id="app" className="lemmy-site">
-            <a
-              className="skip-link bg-light text-dark p-2 text-decoration-none position-absolute start-0 z-3"
+          <div
+            id="app"
+            className="lemmy-site"
+            data-bs-theme={this.state?.bsTheme}
+          >
+            <button
+              type="button"
+              className="btn skip-link bg-light position-absolute start-0 z-3"
               onClick={linkEvent(this, this.handleJumpToContent)}
             >
-              ${I18NextService.i18n.t("jump_to_content", "Jump to content")}
-            </a>
+              {I18NextService.i18n.t("jump_to_content", "Jump to content")}
+            </button>
             {siteView && (
               <Theme defaultTheme={siteView.local_site.default_theme} />
             )}
@@ -58,7 +71,7 @@ export class App extends Component<any, any> {
 
                         return (
                           <ErrorGuard>
-                            <main tabIndex={-1} ref={this.mainContentRef}>
+                            <div tabIndex={-1}>
                               {RouteComponent &&
                                 (isAuthPath(path ?? "") ? (
                                   <AuthGuard>
@@ -67,7 +80,7 @@ export class App extends Component<any, any> {
                                 ) : (
                                   <RouteComponent {...routeProps} />
                                 ))}
-                            </main>
+                            </div>
                           </ErrorGuard>
                         );
                       }}