Add an option to color bullets

PatrickDeVries · Nov 17, 2023 · 8d00e1a · 8d00e1a
1 parent 40a1ae8
commit 8d00e1a
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 32 deletions.
diff --git a/example.png b/example.png
diff --git a/settings.png b/settings.png
diff --git a/src/main.ts b/src/main.ts
@@ -5,55 +5,81 @@ const onSettingsChange = () => {
   const colors: string[] = logseq.settings?.colors.split(',')
   const maxDepth: number = logseq.settings?.maxDepth
   const shouldFillBars: boolean = logseq.settings?.shouldFillBars
+  const shouldColorBullets: boolean = logseq.settings?.shouldColorBullets
+
+  let providedStyles: string
 
   const vars: [string, string][] = colors.map((color, i) => [
     `--block-thread-color-level-${i + 1}`,
     color,
   ])
-
   const varsString = vars.map(pair => pair.join(': ') + ';').join('\n')
+  providedStyles = `:root { ${varsString} }`
 
-  const fillBarsString = `
-    .block-children-left-border::after {
-      content: '';
-      position: absolute;
-      left: 2px;
-      height: 100%;
-      width: 30px;
-
-      opacity: .33;
-    }
+  const threadColorStyles = Array.from(
+    { length: maxDepth },
+    (_, i) => `
+      .ls-block[level="${i + 1}"] .block-children {
+        border-left-color: var(--block-thread-color-level-${(i % colors.length) + 1});
+      }
 
-    ${Array.from(
-      { length: maxDepth },
-      (_, i) => `
       .ls-block[level="${i + 1}"] .block-children-left-border::after {
         background-color: var(--block-thread-color-level-${(i % colors.length) + 1});
       }
-  `,
-    ).join('\n')}
+    `,
+  ).join('\n')
+  providedStyles = `
+    ${providedStyles}
+    ${threadColorStyles}
   `
 
-  const threadColorString = Array.from(
-    { length: maxDepth },
-    (_, i) => `
-    .ls-block[level="${i + 1}"] .block-children {
-      border-left-color: var(--block-thread-color-level-${(i % colors.length) + 1});
-    }
+  if (shouldFillBars) {
+    const fillBarsStyles = `
+      .block-children-left-border::after {
+        content: '';
+        position: absolute;
+        left: 2px;
+        height: 100%;
+        width: 30px;
 
-    .ls-block[level="${i + 1}"] .block-children-left-border::after {
-      background-color: var(--block-thread-color-level-${(i % colors.length) + 1});
-    }
-`,
-  ).join('\n')
+        opacity: .33;
+      }
+
+      ${Array.from(
+        { length: maxDepth },
+        (_, i) => `
+          .ls-block[level="${i + 1}"] .block-children-left-border::after {
+            background-color: var(--block-thread-color-level-${(i % colors.length) + 1});
+          }
+        `,
+      ).join('\n')}
+    `
+    providedStyles = `
+      ${providedStyles}
+      ${fillBarsStyles}
+    `
+  }
+
+  if (shouldColorBullets) {
+    const colorBulletsStyles = `
+      ${Array.from(
+        { length: maxDepth },
+        (_, i) => `
+          .ls-block[level="${i + 1}"] .bullet-container .bullet {
+            background-color: var(--block-thread-color-level-${(i % colors.length) + 1});
+          }
+        `,
+      ).join('\n')}
+    `
+    providedStyles = `
+      ${providedStyles}
+      ${colorBulletsStyles}
+    `
+  }
 
   logseq.provideStyle({
     key: PL.id + '-threads',
-    style: `
-    :root { ${varsString} }
-    ${threadColorString}
-    ${shouldFillBars && fillBarsString}
-    `,
+    style: providedStyles,
   })
 }
 
@@ -78,6 +104,13 @@ logseq
       title: 'Fill bars',
       type: 'boolean',
     },
+    {
+      key: 'shouldColorBullets',
+      default: true,
+      description: 'Whether or not to color bullets',
+      title: 'Color bullets',
+      type: 'boolean',
+    },
     {
       key: 'maxDepth',
       default: 20,