From af3e4737ba632c423f9fb789afd533ae8805518b Mon Sep 17 00:00:00 2001
From: Zef Hemel <zef@zef.me>
Date: Sun, 29 Oct 2023 12:26:57 +0100
Subject: [PATCH] More tweak to widget rendering

---
 plugs/editor/editor.ts                    | 2 +-
 plugs/markdown/assets/markdown_widget.css | 7 ++++++-
 plugs/markdown/markdown_content_widget.ts | 3 +--
 web/styles/theme.scss                     | 2 +-
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/plugs/editor/editor.ts b/plugs/editor/editor.ts
index 9ec3c74..5a32502 100644
--- a/plugs/editor/editor.ts
+++ b/plugs/editor/editor.ts
@@ -13,8 +13,8 @@ export async function setEditorMode() {
 export async function toggleDarkMode() {
   let darkMode = await clientStore.get("darkMode");
   darkMode = !darkMode;
-  await editor.setUiOption("darkMode", darkMode);
   await clientStore.set("darkMode", darkMode);
+  await editor.reloadUI();
 }
 
 export async function foldCommand() {
diff --git a/plugs/markdown/assets/markdown_widget.css b/plugs/markdown/assets/markdown_widget.css
index 92e06e6..9e6f44d 100644
--- a/plugs/markdown/assets/markdown_widget.css
+++ b/plugs/markdown/assets/markdown_widget.css
@@ -10,6 +10,12 @@ body {
     display: initial !important;
 }
 
+#sb-root {
+    display: block !important;
+    width: initial !important;
+    height: initial !important;
+}
+
 #sb-editor {
     flex: initial !important;
     height: initial !important;
@@ -21,7 +27,6 @@ body {
 
 body {
     font-family: var(--editor-font);
-    background-color: var(--root-background-color);
     color: var(--root-color);
 }
 
diff --git a/plugs/markdown/markdown_content_widget.ts b/plugs/markdown/markdown_content_widget.ts
index 57a625a..9ebc1f5 100644
--- a/plugs/markdown/markdown_content_widget.ts
+++ b/plugs/markdown/markdown_content_widget.ts
@@ -27,8 +27,7 @@ export async function prepareJS(originalMarkdown: string) {
     `;
 }
 
-export async function wrapHTML(  html: string
-): Promise<string> {
+export async function wrapHTML(html: string): Promise<string> {
   const css = await asset.readAsset("assets/markdown_widget.css");
 
   return `
diff --git a/web/styles/theme.scss b/web/styles/theme.scss
index d855c61..e6df756 100644
--- a/web/styles/theme.scss
+++ b/web/styles/theme.scss
@@ -217,7 +217,7 @@ html[data-theme="dark"] {
   --editor-frontmatter-background-color: rgb(41, 40, 35, 0.5);
   --editor-frontmatter-color: var(--subtle-color);
   --editor-frontmatter-marker-color: #fff;
-  --editor-directive-background-color: rgba(72, 72, 72, 0.2);
+  --editor-directive-background-color: rgba(72, 72, 72, 0.5);
   --editor-directive-border-color: #0000000f;
   --editor-directive-color: #5b5b5b;
   --editor-directive-info-color: var(--subtle-color);