From b1292b958af008763028df9591f5778be9d117f5 Mon Sep 17 00:00:00 2001 From: Jay Sitter <jsit@users.noreply.github.com> Date: Mon, 3 Jul 2023 20:02:24 -0400 Subject: [PATCH] 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 --- src/shared/components/app/app.tsx | 16 ++++++++++++++-- src/shared/utils/browser/data-bs-theme.ts | 11 +++++++++++ src/shared/utils/browser/index.ts | 4 ++++ src/shared/utils/browser/is-dark.ts | 7 +++++++ 4 files changed, 36 insertions(+), 2 deletions(-) create mode 100644 src/shared/utils/browser/data-bs-theme.ts create mode 100644 src/shared/utils/browser/is-dark.ts 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 + ); +} -- 2.44.1