From b0d482fb4faf1cc66d8ac4d291426700b72946d7 Mon Sep 17 00:00:00 2001
From: Benji Grant <benjamin.grantGRA0007@gmail.com>
Date: Wed, 3 Sep 2025 00:55:21 +1000
Subject: [PATCH] Hide color names on a case-by-case basis

---
 .changes/hide-individual-color-names.md |  5 +++++
 README.md                               |  6 ++++++
 src/live.ts                             | 13 ++++++++++---
 src/preview.ts                          | 13 ++++++++++---
 src/settings.ts                         |  4 ++--
 5 files changed, 33 insertions(+), 8 deletions(-)
 create mode 100644 .changes/hide-individual-color-names.md

diff --git a/.changes/hide-individual-color-names.md b/.changes/hide-individual-color-names.md
new file mode 100644
index 0000000..c2d1aea
--- /dev/null
+++ b/.changes/hide-individual-color-names.md
@@ -0,0 +1,5 @@
+---
+"obsidian-css-inlay-colors": minor:feat
+---
+
+Surround colors in square brackets to hide the color names on a case-by-case basis
diff --git a/README.md b/README.md
index 6abfaf8..85f5dd0 100644
--- a/README.md
+++ b/README.md
@@ -18,6 +18,12 @@ Enable the color picker setting to change a color using a color picker in live p
 
 By default, colors can be copied to the clipboard by clicking on them. This only works in reading mode, and can be disabled in the plugin settings.
 
+### Hide Color Names
+
+Surround a color with square brackets (\`[\#663399]\`) to hide the color name and only show the inlay swatch in live preview and reading mode.
+
+There's also an option in the plugin settings to hide all color names globally.
+
 ### Custom CSS
 
 Customize the inlays by targeting the `.css-color-inlay` class. For example, you can make them circular with the following snippet:
diff --git a/src/live.ts b/src/live.ts
index 82f1ca3..4b36b0d 100644
--- a/src/live.ts
+++ b/src/live.ts
@@ -25,7 +25,7 @@ export const inlayExtension = (settings: CssColorsPluginSettings) => {
 
       update(update: ViewUpdate) {
         if (
-          settings.hideNames ||
+          update.selectionSet ||
           update.docChanged ||
           update.viewportChanged ||
           syntaxTree(update.startState) !== syntaxTree(update.state)
@@ -111,7 +111,14 @@ const createColorWidgets = (
         if (
           node.type.prop(tokenClassNodeProp)?.split(' ').includes('inline-code')
         ) {
-          const text = view.state.sliceDoc(node.from, node.to)
+          let text = view.state.sliceDoc(node.from, node.to)
+          let isNameHidden = false
+
+          // If color is surrounded with square brackets, the name should be hidden
+          if (text.startsWith('[') && text.endsWith(']')) {
+            text = text.slice(1, -1)
+            isNameHidden = true
+          }
 
           // Not a valid color
           let color: Color | undefined
@@ -123,7 +130,7 @@ const createColorWidgets = (
           }
 
           if (
-            settings.hideNames &&
+            (settings.hideNames || isNameHidden) &&
             !view.state.selection.ranges.some(
               (range) => range.from - 1 <= node.to && range.to + 1 >= node.from,
             )
diff --git a/src/preview.ts b/src/preview.ts
index 8944f25..505b911 100644
--- a/src/preview.ts
+++ b/src/preview.ts
@@ -5,7 +5,14 @@ import type { CssColorsPluginSettings } from './settings'
 export const inlayPostProcessor =
   (settings: CssColorsPluginSettings) => (el: HTMLElement) => {
     for (const code of el.findAll('code')) {
-      const color = code.innerText.trim()
+      let color = code.innerText.trim()
+      let isNameHidden = false
+
+      // If color is surrounded with square brackets, the name should be hidden
+      if (color.startsWith('[') && color.endsWith(']')) {
+        color = color.slice(1, -1)
+        isNameHidden = true
+      }
 
       // Not a valid color
       try {
@@ -15,13 +22,13 @@ export const inlayPostProcessor =
       }
 
       // Clear codeblock before adding inlay
-      if (settings.hideNames) {
+      if (settings.hideNames || isNameHidden) {
         code.innerHTML = ''
       }
 
       code.createSpan({
         prepend: true,
-        cls: `css-color-inlay ${settings.hideNames ? 'css-color-name-hidden' : ''}`,
+        cls: `css-color-inlay ${settings.hideNames || isNameHidden ? 'css-color-name-hidden' : ''}`,
         attr: { style: `--css-color-inlay-color: ${color};` },
       })
 
diff --git a/src/settings.ts b/src/settings.ts
index ca4bf7b..3ca72a0 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -57,9 +57,9 @@ export class CssColorsSettingsTab extends PluginSettingTab {
       })
 
     new Setting(containerEl)
-      .setName('Hide color names')
+      .setName('Hide all color names')
       .setDesc(
-        'Hides the inline code block in live preview and reading mode so only the color inlay is visible.',
+        'Hides the inline code block in live preview and reading mode for all colors so only the color inlay is visible. You can also do this on a case-by-case basis by surrounding the color with square brackets.',
       )
       .addToggle((toggle) =>
         toggle