diff --git a/package.json b/package.json
index af3094dc76e79fdca2fe96edd07191cd68179da8..13c2d39a2339a7689dcc9d6977af087000115b06 100755
--- a/package.json
+++ b/package.json
@@ -71,20 +71,19 @@           },
           "default": {},
           "markdownDescription": "Enable features in languages that are not supported by default. Add a mapping here between the new language and an already supported language.\n E.g.: `{\"plaintext\": \"html\"}`"
         },
-        "tailwindCSS.colorDecorators": {
-          "type": "string",
-          "enum": [
-            "inherit",
-            "on",
-            "off"
-          ],
-          "markdownEnumDescriptions": [
-            "Color decorators are rendered if `editor.colorDecorators` is `true`.",
-            "Color decorators are rendered.",
-            "Color decorators are not rendered."
-          ],
-          "default": "inherit",
-          "markdownDescription": "Controls whether the editor should render inline color decorators for Tailwind CSS classes and helper functions.",
+        "tailwindCSS.colorDecorators.enabled": {
+          "type": "boolean",
+          "default": true,
+          "scope": "language-overridable"
+        },
+        "tailwindCSS.colorDecorators.classes": {
+          "type": "boolean",
+          "default": true,
+          "scope": "language-overridable"
+        },
+        "tailwindCSS.colorDecorators.cssHelpers": {
+          "type": "boolean",
+          "default": true,
           "scope": "language-overridable"
         },
         "tailwindCSS.validate": {
diff --git a/src/lib/registerColorDecorator.ts b/src/lib/registerColorDecorator.ts
index 5d3aae4e22f64ac611094ac58453acc8fc9088d7..cb01a7bb366da75bd8453c6f90d5a79b312f4daa 100644
--- a/src/lib/registerColorDecorator.ts
+++ b/src/lib/registerColorDecorator.ts
@@ -47,22 +47,20 @@     ) {
       return
     }
 
-    let preference =
-      workspace.getConfiguration('tailwindCSS', editor.document)
-        .colorDecorators || 'inherit'
-
-    let enabled =
-      preference === 'inherit'
-        ? workspace.getConfiguration('editor').colorDecorators
-        : preference === 'on'
+    let settings = workspace.getConfiguration(
+      'tailwindCSS.colorDecorators',
+      editor.document
+    )
 
-    if (enabled !== true) {
+    if (settings.enabled !== true) {
       editor.setDecorations(colorDecorationType, [])
       return
     }
 
     let { colors } = await emitter.emit('getDocumentColors', {
       document: editor.document.uri.toString(),
+      classes: settings.classes,
+      cssHelpers: settings.cssHelpers,
     })
 
     editor.setDecorations(
diff --git a/src/lsp/providers/documentColorProvider.ts b/src/lsp/providers/documentColorProvider.ts
index d9ea6a6edf27b3f390ba55d5d3c0e54353e1d5d8..5c9e9e34917301c3ba93b1cd70a8f4bf3ce6e9a9 100644
--- a/src/lsp/providers/documentColorProvider.ts
+++ b/src/lsp/providers/documentColorProvider.ts
@@ -7,6 +7,7 @@   findHelperFunctionsInDocument,
 } from '../util/find'
 import { getClassNameParts } from '../util/getClassNameAtPosition'
 import { getColor, getColorFromValue } from '../util/color'
+import { logFull } from '../util/logFull'
 import { stringToPath } from '../util/stringToPath'
 const dlv = require('dlv')
 
@@ -14,43 +15,47 @@ export function registerDocumentColorProvider(state: State) {
   onMessage(
     state.editor.connection,
     'getDocumentColors',
-    async ({ document }) => {
+    async ({ document, classes, cssHelpers }) => {
       let colors = []
       let doc = state.editor.documents.get(document)
       if (!doc) return { colors }
 
-      let classLists = findClassListsInDocument(state, doc)
-      classLists.forEach((classList) => {
-        let classNames = getClassNamesInClassList(classList)
-        classNames.forEach((className) => {
-          let parts = getClassNameParts(state, className.className)
-          if (!parts) return
-          let color = getColor(state, parts)
-          if (!color) return
-          colors.push({ range: className.range, color: color.documentation })
+      if (classes) {
+        let classLists = findClassListsInDocument(state, doc)
+        classLists.forEach((classList) => {
+          let classNames = getClassNamesInClassList(classList)
+          classNames.forEach((className) => {
+            let parts = getClassNameParts(state, className.className)
+            if (!parts) return
+            let color = getColor(state, parts)
+            if (!color) return
+            colors.push({ range: className.range, color: color.documentation })
+          })
         })
-      })
+      }
 
-      let helperFns = findHelperFunctionsInDocument(state, doc)
-      helperFns.forEach((fn) => {
-        let keys = stringToPath(fn.value)
-        let base = fn.helper === 'theme' ? ['theme'] : []
-        let value = dlv(state.config, [...base, ...keys])
-        let color = getColorFromValue(value)
-        if (color) {
-          // colors.push({
-          //   range: {
-          //     start: {
-          //       line: fn.valueRange.start.line,
-          //       character: fn.valueRange.start.character + 1,
-          //     },
-          //     end: fn.valueRange.end,
-          //   },
-          //   color,
-          // })
-          colors.push({ range: fn.valueRange, color })
-        }
-      })
+      if (cssHelpers) {
+        let helperFns = findHelperFunctionsInDocument(state, doc)
+        helperFns.forEach((fn) => {
+          let keys = stringToPath(fn.value)
+          let base = fn.helper === 'theme' ? ['theme'] : []
+          let value = dlv(state.config, [...base, ...keys])
+          let color = getColorFromValue(value)
+          if (color) {
+            // colors.push({
+            //   range: {
+            //     start: {
+            //       line: fn.valueRange.start.line,
+            //       character: fn.valueRange.start.character + 1,
+            //     },
+            //     end: fn.valueRange.end,
+            //   },
+            //   color,
+            // })
+            colors.push({ range: fn.valueRange, color })
+          }
+        })
+      }
 
       return { colors }
     }