More tweak to widget rendering

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() {

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);
 }
 

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 `

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);