✴ Update: updating colors and markdown code theme

TeaByte · Jan 11, 2024 · 429fb8f · 429fb8f
1 parent 6162e6b
commit 429fb8f
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 11 deletions.
diff --git a/components/MarkdownSplit.tsx b/components/MarkdownSplit.tsx
@@ -34,8 +34,6 @@ export default function MarkdownSplit(
       <div
         id="document"
         class="markdown-body"
-        data-color-mode="dark"
-        data-dark-theme="dark"
         style={{ backgroundColor: "inherit" }}
         dangerouslySetInnerHTML={{ __html: render(course.content) }}
       />

diff --git a/islands/ThemeToggle.tsx b/islands/ThemeToggle.tsx
@@ -5,20 +5,31 @@ export default function ThemeToggle() {
     const storedTheme = localStorage.getItem("selectedTheme");
     if (storedTheme) {
       document.documentElement.setAttribute("data-theme", storedTheme);
+      updateMarkdownTheme(storedTheme);
     }
   }, []);
 
-  const handleThemeChange = (event: any) => {
-    const storedTheme = localStorage.getItem("selectedTheme");
-    if (storedTheme === "nord") {
-      document.documentElement.setAttribute("data-theme", "dracula");
-      localStorage.setItem("selectedTheme", "dracula");
-    } else {
-      document.documentElement.setAttribute("data-theme", "nord");
-      localStorage.setItem("selectedTheme", "nord");
+  const updateMarkdownTheme = (theme: string) => {
+    const documentDiv = document.getElementById("document");
+    if (documentDiv) {
+      if (theme === "dracula") {
+        documentDiv.setAttribute("data-color-mode", "dark");
+        documentDiv.setAttribute("data-dark-theme", "dark");
+      } else {
+        documentDiv.setAttribute("data-color-mode", "light");
+        documentDiv.setAttribute("data-light-theme", "light");
+      }
     }
   };
 
+  const handleThemeChange = () => {
+    const storedTheme = localStorage.getItem("selectedTheme");
+    const newTheme = storedTheme === "nord" ? "dracula" : "nord";
+    document.documentElement.setAttribute("data-theme", newTheme);
+    localStorage.setItem("selectedTheme", newTheme);
+    updateMarkdownTheme(newTheme);
+  };
+
   return (
     <label class="swap swap-rotate btn btn-active btn-ghost opacity-50">
       <input

diff --git a/routes/[...slug].tsx b/routes/[...slug].tsx
@@ -71,7 +71,7 @@ export default function CoursePage(
       </Head>
       <main>
         <div
-          class="btn btn-info flex items-center gap-1 md:hidden mt-2 absolute z-[999] bottom-2 right-2"
+          class="btn btn-info flex items-center gap-1 md:hidden mt-2 fixed z-[999] bottom-2 right-2"
           id="open-editor"
         >
           <IconAppWindow />

diff --git a/static/styles.css b/static/styles.css
@@ -27,6 +27,11 @@ body .markdown-body {
 
 .markdown-body h2 {
   width: fit-content;
+  border-color: oklch(var(--bc)) !important;
+}
+
+.markdown-body p code {
+  background-color: #44485496 !important;
 }
 
 .markdown-body td, .markdown-body th, .markdown-body code {