diff --git a/web-client/src/theme/variables.scss b/web-client/src/theme/variables.scss
index ce8e37e94..982d1921c 100644
--- a/web-client/src/theme/variables.scss
+++ b/web-client/src/theme/variables.scss
@@ -92,6 +92,20 @@
   --ion-color-morning-blue-contrast-rgb: 0, 0, 0;
   --ion-color-morning-blue-shade: #808f8e;
   --ion-color-morning-blue-tint: #9dabaa;
+
+  --ion-color-black: #000000;
+  --ion-color-black-rgb: 0, 0, 0;
+  --ion-color-black-contrast: #ffffff;
+  --ion-color-black-contrast-rgb: 255, 255, 255;
+  --ion-color-black-shade: #000000;
+  --ion-color-black-tint: #1a1a1a;
+
+  --ion-color-white: #ffffff;
+  --ion-color-white-rgb: 255, 255, 255;
+  --ion-color-white-contrast: #000000;
+  --ion-color-white-contrast-rgb: 0, 0, 0;
+  --ion-color-white-shade: #e0e0e0;
+  --ion-color-white-tint: #ffffff;
 }
 
 .ion-color-prussian-blue {
@@ -192,3 +206,21 @@
   --ion-color-shade: var(--ion-color-morning-blue-shade);
   --ion-color-tint: var(--ion-color-morning-blue-tint);
 }
+
+.ion-color-black {
+  --ion-color-base: var(--ion-color-black);
+  --ion-color-base-rgb: var(--ion-color-black-rgb);
+  --ion-color-contrast: var(--ion-color-black-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-black-contrast-rgb);
+  --ion-color-shade: var(--ion-color-black-shade);
+  --ion-color-tint: var(--ion-color-black-tint);
+}
+
+.ion-color-white {
+  --ion-color-base: var(--ion-color-white);
+  --ion-color-base-rgb: var(--ion-color-white-rgb);
+  --ion-color-contrast: var(--ion-color-white-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-white-contrast-rgb);
+  --ion-color-shade: var(--ion-color-white-shade);
+  --ion-color-tint: var(--ion-color-white-tint);
+}