Dark theme related fixes

packages/common/manifest.ts

@@ -21,6 +21,7 @@ export type NodeDef = {
   firstCharacters: string[];
   regex: string;
   styles: { [key: string]: string };
+  className?: string;
 };
 
 export type Manifest = plugos.Manifest<SilverBulletHooks> & SyntaxExtensions;

packages/common/markdown_ext.ts

@@ -10,6 +10,7 @@ export type MDExt = {
   nodeType: string;
   tag: Tag;
   styles: { [key: string]: string };
+  className?: string;
 };
 
 export function mdExtensionSyntaxConfig({
@@ -58,6 +59,7 @@ export function loadMarkdownExtensions(system: System<any>): MDExt[] {
           firstCharCodes: def.firstCharacters.map((ch) => ch.charCodeAt(0)),
           regex: new RegExp("^" + def.regex),
           styles: def.styles,
+          className: def.className,
         });
       }
     }

packages/plugs/core/core.plug.yaml

@@ -4,29 +4,17 @@ syntax:
     firstCharacters:
       - "#"
     regex: "#[^#\\d\\s]+\\w+"
-    styles:
+    className: sb-hashtag
-      color: blue
   NakedURL:
     firstCharacters:
       - "h"
     regex: "https?:\\/\\/[-a-zA-Z0-9@:%._\\+~#=]{1,256}([-a-zA-Z0-9()@:%_\\+.~#?&=\\/]*)"
-    styles:
+    className: sb-naked-url
-      color: "#0330cb"
-      textDecoration: underline
-      cursor: pointer
   CommandLink:
     firstCharacters:
       - "{"
     regex: "\\{\\[[^\\]]+\\]\\}"
-    styles:
+    className: sb-command-link
-      backgroundColor: "#e3dfdf"
-      cursor: pointer
-      borderTop: 1px solid silver
-      borderLeft: 1px solid silver
-      borderBottom: 1px solid gray
-      borderRight: 1px solid gray
-      borderRadius: 4px
-      padding: 0 4px
 functions:
   clearPageIndex:
     path: "./page.ts:clearPageIndex"

packages/web/style.ts

@@ -43,7 +43,7 @@ export default function highlightStyles(mdExtension: MDExt[]) {
     // { tag: t.content, class: "tbl-content" },
     { tag: t.punctuation, class: "sb-punctuation" },
     ...mdExtension.map((mdExt) => {
-      return { tag: mdExt.tag, ...mdExt.styles };
+      return { tag: mdExt.tag, ...mdExt.styles, class: mdExt.className };
     }),
   ]);
   const fn0 = hls.style;

packages/web/styles/theme.scss

@@ -128,6 +128,27 @@
   font-size: 1.1em;
 }
 
+.sb-hashtag {
+  color: blue;
+}
+
+.sb-naked-url {
+  color: #0330cb;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.sb-command-link {
+  background-color: #e3dfdf;
+  cursor: pointer;
+  border-top: 1px solid silver;
+  border-left: 1px solid silver;
+  border-bottom: 1px solid gray;
+  border-right: 1px solid gray;
+  border-radius: 4px;
+  padding: 0 4px;
+}
+
 /* Color list item this way */
 .sb-line-li .sb-meta {
   color: rgb(150, 150, 150);
@@ -265,8 +286,6 @@
 
 .sb-comment {
   color: #989797;
-  background-color: rgba(210, 210, 210, 0.2);
-  border-radius: 5px;
   font-size: 75%;
   line-height: 75%;
 }
@@ -298,6 +317,16 @@ html[data-theme="dark"] {
     border-bottom: 1px solid #6c6c6c;
   }
 
+  .sb-line-li .sb-meta ~ .sb-meta,
+  .sb-line-fenced-code .sb-meta {
+    color: #d17278;
+  }
+
+  .sb-wiki-link-page {
+    color: #7e99fc;
+    background-color: #a3bce712;
+  }
+
   .sb-code,
   .sb-line-fenced-code,
   .sb-task-marker {
@@ -308,4 +337,16 @@ html[data-theme="dark"] {
     border: rgb(197, 197, 197) 1px solid;
     background-color: #333;
   }
+
+  .sb-hashtag {
+    color: #94b0f4;
+  }
+
+  .sb-naked-url {
+    color: #94b0f4;
+  }
+
+  .sb-command-link {
+    background-color: #595959;
+  }
 }