diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden.scss b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
index 460d51a7424..f80dd76c1e2 100644
--- a/addons/web_editor/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
@@ -1,3 +1,6 @@
+// TODO this whole file is probably not needed in the backend and may be the
+// cause of color issues. It will be reviewed in master (probably removed from
+// backend bundles and simplified).
 
 // Automatically update bootstrap colors map (unused by BS itself)
 $colors: () !default;
diff --git a/addons/web_editor/static/src/scss/web_editor.backend.scss b/addons/web_editor/static/src/scss/web_editor.backend.scss
index 53f2031d241..cb5668822b4 100644
--- a/addons/web_editor/static/src/scss/web_editor.backend.scss
+++ b/addons/web_editor/static/src/scss/web_editor.backend.scss
@@ -1,3 +1,14 @@
+:root {
+    // Make sure black and white CSS variables are defined as they are needed
+    // for the colorpickers to work properly. In the frontend, those are
+    // automatically defined because they are part of the $grays map. In the
+    // backend, bootstrap is more standard and those are not added in the $grays
+    // map (not needed and was actually a problem to make the enterprise dark
+    // mode work properly).
+    --white: #{$white};
+    --black: #{$black};
+}
+
 .o_field_html {
     position: relative;
     word-wrap: break-word;
diff --git a/addons/web_editor/static/tests/test_utils.js b/addons/web_editor/static/tests/test_utils.js
index 8e7df76622b..a7546154551 100644
--- a/addons/web_editor/static/tests/test_utils.js
+++ b/addons/web_editor/static/tests/test_utils.js
@@ -28,7 +28,19 @@ const COLOR_PICKER_TEMPLATE = `
             <button data-color="white-50"/>
             <button data-color="white-75"/>
         </div>
-        <div class="o_colorpicker_section" data-name="common" data-display="Common Colors" data-icon-class="fa fa-paint-brush"/>
+        <div class="o_colorpicker_section" data-name="common" data-display="Common Colors" data-icon-class="fa fa-paint-brush">
+            <button data-color="black"></button>
+            <button data-color="900"></button>
+            <button data-color="800"></button>
+            <button data-color="700" class="d-none"></button>
+            <button data-color="600"></button>
+            <button data-color="500" class="d-none"></button>
+            <button data-color="400"></button>
+            <button data-color="300" class="d-none"></button>
+            <button data-color="200"></button>
+            <button data-color="100"></button>
+            <button data-color="white"></button>
+        </div>
     </colorpicker>
 `;
 const SNIPPETS_TEMPLATE = `