From 5eb97edf097688e6ca6b12202ff15d46488d1328 Mon Sep 17 00:00:00 2001
From: SleeplessOne1917 <28871516+SleeplessOne1917@users.noreply.github.com>
Date: Fri, 16 Feb 2024 22:57:49 +0000
Subject: [PATCH] Make code blocks use correct theme when in dark mode (#2367)

Co-authored-by: SleeplessOne1917 <insomnia-void@protonmail.com>
---
 src/shared/components/app/app.tsx        |  2 +-
 src/shared/components/app/code-theme.tsx | 43 +++++++++++++++---------
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/shared/components/app/app.tsx b/src/shared/components/app/app.tsx
index 5709f766..bcdf14f5 100644
--- a/src/shared/components/app/app.tsx
+++ b/src/shared/components/app/app.tsx
@@ -51,7 +51,7 @@ export class App extends Component<any, any> {
             {siteView && (
               <>
                 <Theme defaultTheme={siteView.local_site.default_theme} />
-                <CodeTheme />
+                <CodeTheme defaultTheme={siteView.local_site.default_theme} />
               </>
             )}
             <Navbar siteRes={siteRes} />
diff --git a/src/shared/components/app/code-theme.tsx b/src/shared/components/app/code-theme.tsx
index 492fbefc..9cc016ef 100644
--- a/src/shared/components/app/code-theme.tsx
+++ b/src/shared/components/app/code-theme.tsx
@@ -1,22 +1,35 @@
+import { dataBsTheme } from "@utils/browser";
 import { Component } from "inferno";
+import { Helmet } from "inferno-helmet";
+import { UserService } from "../../services";
 
-export class CodeTheme extends Component {
+interface CodeThemeProps {
+  defaultTheme: string;
+}
+
+export class CodeTheme extends Component<CodeThemeProps, any> {
   render() {
+    const user = UserService.Instance.myUserInfo;
+    const userTheme = user?.local_user_view.local_user.theme;
+    const theme =
+      user && userTheme !== "browser" ? userTheme : this.props.defaultTheme;
+
     return (
-      <>
-        <link
-          rel="stylesheet"
-          type="text/css"
-          href={`/css/code-themes/atom-one-light.css`}
-          media="(prefers-color-scheme: light)"
-        />
-        <link
-          rel="stylesheet"
-          type="text/css"
-          href={`/css/code-themes/atom-one-dark.css`}
-          media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)"
-        />
-      </>
+      <Helmet>
+        {dataBsTheme(theme) === "dark" ? (
+          <link
+            rel="stylesheet"
+            type="text/css"
+            href={`/css/code-themes/atom-one-dark.css`}
+          />
+        ) : (
+          <link
+            rel="stylesheet"
+            type="text/css"
+            href={`/css/code-themes/atom-one-light.css`}
+          />
+        )}
+      </Helmet>
     );
   }
 }