diff --git a/src/Umbraco.Web.UI.Client/.gitignore b/src/Umbraco.Web.UI.Client/.gitignore
index 4e0b770e27..b5676c1781 100644
--- a/src/Umbraco.Web.UI.Client/.gitignore
+++ b/src/Umbraco.Web.UI.Client/.gitignore
@@ -20,6 +20,7 @@ types
 .vscode/*
 !.vscode/extensions.json
 !.vscode/*.code-snippets
+!.vscode/settings.json
 .idea
 .DS_Store
 *.suo
diff --git a/src/Umbraco.Web.UI.Client/.vscode/extensions.json b/src/Umbraco.Web.UI.Client/.vscode/extensions.json
index e376e1876f..5c7db24a59 100644
--- a/src/Umbraco.Web.UI.Client/.vscode/extensions.json
+++ b/src/Umbraco.Web.UI.Client/.vscode/extensions.json
@@ -6,6 +6,7 @@
 		"dbaeumer.vscode-eslint",
 		"runem.lit-plugin",
 		"esbenp.prettier-vscode",
-		"hbenl.vscode-test-explorer"
+		"hbenl.vscode-test-explorer",
+		"vunguyentuan.vscode-css-variables"
 	]
 }
diff --git a/src/Umbraco.Web.UI.Client/.vscode/settings.json b/src/Umbraco.Web.UI.Client/.vscode/settings.json
new file mode 100644
index 0000000000..bbe4249d07
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+	"cssVariables.lookupFiles": ["node_modules/@umbraco-ui/uui-css/dist/custom-properties.css"]
+}