diff --git a/framework/core/js/src/common/compat.ts b/framework/core/js/src/common/compat.ts
index 27c5549f9..d63f4fcb9 100644
--- a/framework/core/js/src/common/compat.ts
+++ b/framework/core/js/src/common/compat.ts
@@ -33,6 +33,7 @@ import formatNumber from './utils/formatNumber';
 import mapRoutes from './utils/mapRoutes';
 import withAttr from './utils/withAttr';
 import * as FocusTrap from './utils/focusTrap';
+import isDark from './utils/isDark';
 import Notification from './models/Notification';
 import User from './models/User';
 import Post from './models/Post';
@@ -120,6 +121,7 @@ export default {
   'utils/throttleDebounce': ThrottleDebounce,
   'utils/isObject': isObject,
   'utils/focusTrap': FocusTrap,
+  'utils/isDark': isDark,
   'models/Notification': Notification,
   'models/User': User,
   'models/Post': Post,
diff --git a/framework/core/js/src/common/utils/isDark.ts b/framework/core/js/src/common/utils/isDark.ts
new file mode 100644
index 000000000..03755a8e8
--- /dev/null
+++ b/framework/core/js/src/common/utils/isDark.ts
@@ -0,0 +1,21 @@
+/**
+ * The `isDark` utility converts a hex color to rgb, and then calcul a YIQ
+ * value in order to get the appropriate brightness value (is it dark or is it
+ * light?) See https://www.w3.org/TR/AERT/#color-contrast for references. A YIQ
+ * value >= 128 is a light color.
+ */
+
+export default function isDark(hexcolor: String) {
+  let hexnumbers = hexcolor.replace("#", "");
+
+  if (hexnumbers.length == 3) {
+    hexnumbers += hexnumbers;
+  }
+
+  const r = parseInt(hexnumbers.substr(0,2),16);
+  const g = parseInt(hexnumbers.substr(2,2),16);
+  const b = parseInt(hexnumbers.substr(4,2),16);
+  const yiq = ((r*299)+(g*587)+(b*114))/1000;
+
+  return (yiq >= 128) ? false : true;
+}
diff --git a/framework/core/less/common/variables.less b/framework/core/less/common/variables.less
index b82f33347..dd4b8ca2a 100644
--- a/framework/core/less/common/variables.less
+++ b/framework/core/less/common/variables.less
@@ -64,6 +64,13 @@
   @code-color:                     #fff;
 }
 
+// Beyond dark or light mode, we need stable colors depending on the luminosity
+// of the parents element's background. This allow not to change the color
+// variable depending on the dark/light mode to get the same final color, and
+// thus to simplify the logic.
+@text-on-dark:                     #ddd;
+@text-on-light:                    #111;
+
 @hero-bg:                          @control-bg;
 @hero-color:                       @control-color;
 @hero-muted-color:                 @control-color;