1 files changed, 21 insertions, 0 deletions
diff --git a/addons/web_editor/static/src/js/common/utils.js b/addons/web_editor/static/src/js/common/utils.js
index 1ed08a80792..61e8f648ee8 100644
--- a/addons/web_editor/static/src/js/common/utils.js
+++ b/addons/web_editor/static/src/js/common/utils.js
@@ -167,6 +167,26 @@ function _computeColorClasses(colorNames, prefix = 'bg-') {
     }
     return classes;
 }
+/**
+ * @param {string} key
+ * @param {CSSStyleDeclaration} [htmlStyle] if not provided, it is computed
+ * @returns {string}
+ */
+function _getCSSVariableValue(key, htmlStyle) {
+    if (htmlStyle === undefined) {
+        htmlStyle = window.getComputedStyle(document.documentElement);
+    }
+    // Get trimmed value from the HTML element
+    let value = htmlStyle.getPropertyValue(`--${key}`).trim();
+    // If it is a color value, it needs to be normalized
+    value = ColorpickerWidget.normalizeCSSColor(value);
+    // Normally scss-string values are "printed" single-quoted. That way no
+    // magic conversation is needed when customizing a variable: either save it
+    // quoted for strings or non quoted for colors, numbers, etc. However,
+    // Chrome has the annoying behavior of changing the single-quotes to
+    // double-quotes when reading them through getPropertyValue...
+    return value.replace(/"/g, "'");
+}
 
 return {
     CSS_SHORTHANDS: CSS_SHORTHANDS,
@@ -178,5 +198,6 @@ return {
     areCssValuesEqual: _areCssValuesEqual,
     isColorCombinationName: _isColorCombinationName,
     computeColorClasses: _computeColorClasses,
+    getCSSVariableValue: _getCSSVariableValue,
 };
 });