From 6066872c5ad6ddb12567aa2bf20bf96df4ce1f7a Mon Sep 17 00:00:00 2001
From: teabyte <yazan4code@gmail.com>
Date: Sat, 13 Jan 2024 03:04:43 +0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=B4:=20Update=20editor=20theme=20change?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/EditorSplit.tsx | 6 +++---
 islands/ThemeToggle.tsx    | 7 +++++++
 static/moaco.js            | 7 ++++---
 static/styles.css          | 9 +++++----
 4 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/components/EditorSplit.tsx b/components/EditorSplit.tsx
index 0177852..cf3b827 100644
--- 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
index b9775f1..99cff0a 100644
--- 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
index f5fe9fd..416b1cb 100644
--- 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
index bcc6b1a..129dfe2 100644
--- 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 */