diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden.scss b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
index 0bfc53c5091..d1644a1174e 100644
--- a/addons/web_editor/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
@@ -1,6 +1,3 @@
-// Hacky way to detect if its the backend or not
-$-is-backend: variable-exists('primary');
-
 // Use auto threshold for yiq colors
 $yiq-contrasted-threshold: false !default;
 
@@ -9,22 +6,13 @@ $colors: () !default;
 $colors: map-merge($o-color-palette, $colors);
 
 // Automatically extend bootstrap to create theme background/text/button classes
-$-palette: $o-theme-color-palette;
-@if $-is-backend {
-    $-palette: map-remove($-palette, 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark');
-}
 $theme-colors: () !default;
-$theme-colors: map-merge($-palette, $theme-colors);
+$theme-colors: map-merge($o-theme-color-palette, $theme-colors);
 
-// Extend grays with transparent ones (for some reason, BS4 create black-50 and
-// white-50 but does not allow overridding that with variables), also use the
-// theme gray palette (which is supposed to at least declare white and black).
-$-palette: $o-gray-color-palette;
-@if $-is-backend {
-    $-palette: map-remove($-palette, '100', '200', '300', '400', '500', '600', '700', '800', '900');
-}
+// Automatically extend bootstrap gray palette (the theme palette is supposed to
+// at least declare white and black)
 $grays: () !default;
-$grays: map-merge($-palette, $grays);
+$grays: map-merge($o-gray-color-palette, $grays);
 
 // Bootstrap use standard variables to define individual colors which are then
 // placed into a map which is then used to get the value of each individual
diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss b/addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss
new file mode 100644
index 00000000000..8e1042c4cbd
--- /dev/null
+++ b/addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss
@@ -0,0 +1,3 @@
+
+$o-theme-color-palette: map-remove($o-theme-color-palette, 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark');
+$o-gray-color-palette: map-remove($o-gray-color-palette, '100', '200', '300', '400', '500', '600', '700', '800', '900');
diff --git a/addons/web_editor/static/src/scss/secondary_variables.scss b/addons/web_editor/static/src/scss/secondary_variables.scss
index e1e4e62ca66..e4355eeaa2b 100644
--- a/addons/web_editor/static/src/scss/secondary_variables.scss
+++ b/addons/web_editor/static/src/scss/secondary_variables.scss
@@ -30,6 +30,8 @@ $o-theme-color-palette: map-merge((
 }
 
 // Gray colors
+// Extend grays with transparent ones (for some reason, BS4 create black-50 and
+// white-50 but does not allow overridding that with variables).
 $o-gray-color-palette: nth($o-gray-color-palettes, $o-gray-color-palette-number) !default;
 $o-gray-color-palette: map-merge($o-transparent-grays, $o-gray-color-palette);
 @function palette-gray($key) {
diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml
index ac8b3c396f3..b67d8ee7771 100644
--- a/addons/web_editor/views/editor.xml
+++ b/addons/web_editor/views/editor.xml
@@ -74,6 +74,7 @@
 
 <template id="_assets_backend_helpers" inherit_id="web._assets_backend_helpers">
     <xpath expr="//link" position="before">
+        <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/bootstrap_overridden_backend.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/bootstrap_overridden.scss"/>
     </xpath>
 </template>