From: Jay Sitter <jsit@users.noreply.github.com>
Date: Tue, 4 Jul 2023 00:02:24 +0000 (-0400)
Subject: fix: Add data-bs-theme attribute for user dark/light modes (#1782)
X-Git-Url: http://these/git/readmes/%24%7B%60data:application/%7B%60%24%7BghostArchiveUrl%7D/static/git-logo.png?a=commitdiff_plain;h=b1292b958af008763028df9591f5778be9d117f5;p=lemmy-ui.git

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

* fix: Add data-bs-theme attribute for user dark/light modes

* fix: Remove unnecessary optional chain

* fix: Oops -- add missing files
---

diff --git a/src/shared/components/app/app.tsx b/src/shared/components/app/app.tsx
index be0319d..3452f96 100644
--- 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,7 +40,11 @@ export class App extends Component<any, any> {
     return (
       <>
         <Provider i18next={I18NextService.i18n}>
-          <div id="app" className="lemmy-site">
+          <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"
diff --git a/src/shared/utils/browser/data-bs-theme.ts b/src/shared/utils/browser/data-bs-theme.ts
new file mode 100644
index 0000000..8d73f31
--- /dev/null
+++ b/src/shared/utils/browser/data-bs-theme.ts
@@ -0,0 +1,11 @@
+import isDark from "./is-dark";
+
+export default function dataBsTheme(user) {
+  return (isDark() && user?.local_user_view.local_user.theme === "browser") ||
+    (user &&
+      ["darkly", "darkly-red", "darkly-pureblack"].includes(
+        user.local_user_view.local_user.theme
+      ))
+    ? "dark"
+    : "light";
+}
diff --git a/src/shared/utils/browser/index.ts b/src/shared/utils/browser/index.ts
index b12737c..d07b16e 100644
--- a/src/shared/utils/browser/index.ts
+++ b/src/shared/utils/browser/index.ts
@@ -1,5 +1,7 @@
 import canShare from "./can-share";
+import dataBsTheme from "./data-bs-theme";
 import isBrowser from "./is-browser";
+import isDark from "./is-dark";
 import loadCss from "./load-css";
 import restoreScrollPosition from "./restore-scroll-position";
 import saveScrollPosition from "./save-scroll-position";
@@ -7,7 +9,9 @@ import share from "./share";
 
 export {
   canShare,
+  dataBsTheme,
   isBrowser,
+  isDark,
   loadCss,
   restoreScrollPosition,
   saveScrollPosition,
diff --git a/src/shared/utils/browser/is-dark.ts b/src/shared/utils/browser/is-dark.ts
new file mode 100644
index 0000000..f2cdda1
--- /dev/null
+++ b/src/shared/utils/browser/is-dark.ts
@@ -0,0 +1,7 @@
+import isBrowser from "./is-browser";
+
+export default function isDark() {
+  return (
+    isBrowser() && window.matchMedia("(prefers-color-scheme: dark)").matches
+  );
+}