diff --git a/runbot_merge/__manifest__.py b/runbot_merge/__manifest__.py
index 88f8a1e0..4cc0802c 100644
--- a/runbot_merge/__manifest__.py
+++ b/runbot_merge/__manifest__.py
@@ -28,6 +28,7 @@
           ('prepend', 'runbot_merge/static/scss/primary_variables.scss'),
        ],
         'web.assets_frontend': [
+            'runbot_merge/static/scss/revariable.scss',
             'runbot_merge/static/scss/runbot_merge.scss',
         ],
         'web.assets_backend': [
diff --git a/runbot_merge/static/scss/primary_variables.scss b/runbot_merge/static/scss/primary_variables.scss
index bb953494..8b1c999e 100644
--- a/runbot_merge/static/scss/primary_variables.scss
+++ b/runbot_merge/static/scss/primary_variables.scss
@@ -1,3 +1,4 @@
+$variable-prefix: '';
 // colors from the original mergebot
 $primary: #276e72;
 $secondary: #685563;
@@ -5,6 +6,8 @@ $success: #28a745;
 $info: #17a2b8;
 $warning: #ffc107;
 $danger: #dc3545;
+$light: #f8f9fa;
+$dark: #212529;
 $theme-colors: (
   "primary":    $primary,
   "secondary":  $secondary,
@@ -12,7 +15,15 @@ $theme-colors: (
   "info":       $info,
   "warning":    $warning,
   "danger":     $danger,
+  // gray-100
+  "light":      $light,
+  // gray-900
+  "dark":       $dark,
 );
+// gray-600
+$body-color: #6c757d;
+// same as table-bg and alert-bg
+$bg-scale: -80%;
 
 $o-system-fonts: sans-serif;
 
@@ -46,3 +57,20 @@ $h5-font-size:                $font-size-base;
 $h6-font-size:                $font-size-base;
 
 $border-radius: 0.25rem;
+
+// The builtins utilities-bg system is completely stupid because we do a bunch
+// of transformations on the theme-color, then we ignore them all because we
+// just reference the `--#{$category}-rgb` css variables.
+//
+// Update rgba-css-var to reference target-suffixed vars (e.g. -bg, -text) but
+// fallback to the un-suffixed vars if necessary.
+@function rgba-css-var($identifier, $target) {
+  @return rgba(
+    var(
+      --#{$variable-prefix}#{$identifier}-#{$target}-rgb,
+      var(--#{$variable-prefix}#{$identifier}-rgb)
+    ),
+    var(--#{$variable-prefix}#{$target}-opacity)
+  );
+}
+$utilities-bg-colors: map-loop($theme-colors, rgba-css-var, "$key", "bg");
diff --git a/runbot_merge/static/scss/revariable.scss b/runbot_merge/static/scss/revariable.scss
new file mode 100644
index 00000000..e813ed71
--- /dev/null
+++ b/runbot_merge/static/scss/revariable.scss
@@ -0,0 +1,93 @@
+// resets a bunch of CSS rules to either `inherit` color or use CSS variables,
+// such that they properly follow CSS variables
+:root {
+  color-scheme: light dark;
+
+  // dunno why it's not global
+  --bg-opacity: 1;
+
+  @each $color, $value in $theme-colors {
+    --#{$variable-prefix}#{$color}-bg-rgb: #{to-rgb(hsl(
+      hue($value),
+      max(saturation($value) - 16%, 0%),
+      90%,
+    ))};
+  }
+  // the adjusted danger is too saturated and a bit odd, rather than bother with
+  // adjusting the conversion just set the value we want
+  --danger-bg-rgb: 242, 222, 222;
+}
+@function invlight($value) {
+  @return hsl(hue($value), saturation($value), 100% - lightness($value));
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    $ibc: invlight($body-color);
+    --body-color: #{$ibc};
+    --body-color-rgb: #{to-rgb($ibc)};
+    $ibg: invlight($body-bg);
+    --body-bg: #{$ibg};
+    --body-bg-rgb: #{to-rgb($ibg)};
+
+    @each $color, $value in $theme-colors {
+      $value: invlight($value);
+
+      --#{$color}: #{$value};
+      --#{$color}-rgb: #{to_rgb($value)};
+      --#{$color}-bg-rgb: #{to-rgb(hsl(
+        hue($value),
+        min(saturation($value) + 16%, 100%),
+        10%,
+      ))};
+    }
+    --danger-bg-rgb: 41, 10, 10;
+  }
+}
+body {
+  font-family: inherit;
+}
+h1, h2, h3, h4, h5, h6{
+  color: inherit;
+  margin-top: 0.66em !important;
+  margin-bottom: 0.33em !important;
+}
+
+.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-gray-lighter,
+.table-success, .table-info, .table-warning, .table-danger {
+  color: inherit;
+}
+
+.dropdown-item, .dropdown-menu, .dropdown-menu a {
+  color: inherit;
+}
+
+.navbar-light {
+  background-color: var(--body-bg);
+  color: inherit;
+}
+
+.navbar-light .navbar-nav .nav-link {
+  color: inherit;
+}
+
+// reset the table and alert bg rules so they use the generic (rg)bg variables
+@each $category, $_ in $theme-colors {
+  .alert-#{$category} {
+    // inline alert-variant as it can't handle ~~the truth~~ CSS variables
+    background-color: rgba(var(--#{$category}-bg-rgb), var(--bg-opacity));
+    border-color: color-mix(in rgb, var(--#{$category}-rgb) #{$alert-border-scale}, var(--light));
+    --alert-text: color-mix(in rgb, var(--#{$category}-rgb) #{$alert-color-scale}, var(--dark));
+    color: var(--alert-text);
+    .alert-link {
+      color: color-mix(in rgb, var(--alert-text) 20%, var(--dark));
+    }
+  }
+  .table-#{$category} {
+    $c: rgba(var(--#{$category}-bg-rgb), var(--bg-opacity));
+    --table-bg: #{$c};
+    --table-accent-bg: transparent;
+    &.table-active {
+      --table-bg: hsl(from #{$c} h s calc(l - 5));
+    }
+  }
+}
diff --git a/runbot_merge/static/scss/runbot_merge.scss b/runbot_merge/static/scss/runbot_merge.scss
index 0cd5dd53..b5d73e0b 100644
--- a/runbot_merge/static/scss/runbot_merge.scss
+++ b/runbot_merge/static/scss/runbot_merge.scss
@@ -1,30 +1,3 @@
-:root {
-  // dunno why it's not global
-  --bg-opacity: 1;
-
-  --success-rgb: 223, 240, 216;
-  --danger-rgb: 242, 222, 222;
-  --warning-rgb: 252, 248, 227;
-  --info-rgb: 217, 237, 247;
-}
-// reset the table bg rules so they use the generic (rg)bg variables
-@each $category, $whatever in $table-variants {
-  .table-#{$category} {
-    $c: rgba(var(--#{$category}-rgb), var(--bg-opacity));
-    --table-bg: #{$c};
-    --table-accent-bg: transparent;
-    &.table-active {
-      --table-bg: hsl(from #{$c} h s calc(l - 5));
-    }
-  }
-}
-
-// adjust because shift-color($primary, $alert-color-scale) is fucking awful
-.alert-primary {
-  // use string interpolation otherwise sass blows up because it tries to apply
-  // its own hsl function, and that does not support relative colors
-  background-color: #{'hsl(from var(--primary) h calc(s - 16) calc(l + 60))'};
-}
 .bg-unmerged {
   background-color: color-mix(
     in lab,
@@ -35,25 +8,7 @@
 
 html {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: #666666;
 }
-body {
-  color: inherit;
-  font-family: inherit;
-}
-h1, h2, h3, h4, h5, h6{
-  color: inherit;
-  margin-top: 0.66em !important;
-  margin-bottom: 0.33em !important;
-}
-.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-gray-lighter,
-.table-success, .table-info, .table-warning, .table-danger {
-  color: inherit;
-}
-.dropdown-item, .dropdown-menu, .dropdown-menu a {
-  color: inherit;
-}
-
 
 .list-inline {
   margin-bottom: 10px;
@@ -157,5 +112,5 @@ tr.inactive {
   opacity: 0.5;
 }
 td.detached {
-  border-top: 2px solid map-get($theme-colors, "danger");
+  border-top: 2px solid var(--danger);
 }