diff --git a/package.json b/package.json
index 13c2d39..af3094d 100755
--- a/package.json
+++ b/package.json
@@ -71,19 +71,20 @@
           "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.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,
+        "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.",
           "scope": "language-overridable"
         },
         "tailwindCSS.validate": {
diff --git a/src/lib/registerColorDecorator.ts b/src/lib/registerColorDecorator.ts
index cb01a7b..5d3aae4 100644
--- a/src/lib/registerColorDecorator.ts
+++ b/src/lib/registerColorDecorator.ts
@@ -47,20 +47,22 @@ export function registerColorDecorator(
       return
     }
 
-    let settings = workspace.getConfiguration(
-      'tailwindCSS.colorDecorators',
-      editor.document
-    )
+    let preference =
+      workspace.getConfiguration('tailwindCSS', editor.document)
+        .colorDecorators || 'inherit'
 
-    if (settings.enabled !== true) {
+    let enabled =
+      preference === 'inherit'
+        ? workspace.getConfiguration('editor').colorDecorators
+        : preference === 'on'
+
+    if (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 5c9e9e3..d9ea6a6 100644
--- a/src/lsp/providers/documentColorProvider.ts
+++ b/src/lsp/providers/documentColorProvider.ts
@@ -7,7 +7,6 @@ import {
 } 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')
 
@@ -15,47 +14,43 @@ export function registerDocumentColorProvider(state: State) {
   onMessage(
     state.editor.connection,
     'getDocumentColors',
-    async ({ document, classes, cssHelpers }) => {
+    async ({ document }) => {
       let colors = []
       let doc = state.editor.documents.get(document)
       if (!doc) return { colors }
 
-      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 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 (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 })
-          }
-        })
-      }
+      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 }
     }