✴: Update editor theme change

TeaByte · Jan 13, 2024 · 6066872 · 6066872
1 parent 5abc172
commit 6066872
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 10 deletions.
diff --git a/components/EditorSplit.tsx b/components/EditorSplit.tsx
@@ -6,15 +6,15 @@ export default function EditorSplit(props: { slug: string }) {
   return (
     <>
       <div class="mt-4">
-        <div class="mb-2 mx-2">
+        <div class="mx-2 border-[6px] border-base-300 rounded-btn pb-2">
           <div
-            class="h-[400px]"
+            class="h-[400px] rounded-box"
             dir="ltr"
             id="editor"
           >
             <p
               id="editor-loading"
-              class="flex h-full items-center justify-center text-lg bg-[#1E1E1E] rounded-box"
+              class="flex h-full items-center justify-center text-lg rounded-btn text-base-content"
             >
               جاري تحميل المحرر
             </p>

diff --git a/islands/ThemeToggle.tsx b/islands/ThemeToggle.tsx
@@ -1,5 +1,10 @@
 import { useEffect } from "preact/hooks";
 
+declare var window: Window & typeof globalThis;
+interface Window {
+  monaco: any;
+}
+
 export default function ThemeToggle() {
   useEffect(() => {
     const storedTheme = localStorage.getItem("selectedTheme");
@@ -15,9 +20,11 @@ export default function ThemeToggle() {
       if (theme === "dracula") {
         documentDiv.setAttribute("data-color-mode", "dark");
         documentDiv.setAttribute("data-dark-theme", "dark");
+        window.monaco.editor.setTheme("vs-dark");
       } else {
         documentDiv.setAttribute("data-color-mode", "light");
         documentDiv.setAttribute("data-light-theme", "light");
+        window.monaco.editor.setTheme("vs-light");
       }
     }
   };

diff --git a/static/moaco.js b/static/moaco.js
@@ -6,10 +6,11 @@ require.config({
 
 require(["vs/editor/editor.main"], () => {
   document.getElementById("editor-loading").style.display = "none";
-  const editorDiv = document.getElementById("editor");
-  window.editor = monaco.editor.create(editorDiv, {
+  const isNord = localStorage.getItem("selectedTheme") === "nord";
+  const vsTheme = isNord ? "vs-light" : "vs-dark";
+  window.editor = monaco.editor.create(document.getElementById("editor"), {
     language: "javascript",
-    theme: "vs-dark",
+    theme: vsTheme,
     minimap: { enabled: false },
   });
   setInterval(() => {

diff --git a/static/styles.css b/static/styles.css
@@ -17,15 +17,16 @@ body, .markdown-body {
 }
 
 /* Monaco Editor */
-.monaco-editor, .overflow-guard {
-  border-radius: 0.3rem;
-}
+/* .monaco-editor, .overflow-guard {
+  border-radius: 0.2rem;
+} */
 
 .iPadShowKeyboard{
   display: none;
 }
+
 .no-user-select, .showUnused {
-  padding-top: 10px !important;
+  padding-top: 8px !important;
 }
 
 /* Markdown */