diff --git a/apps/accessibility/css/themedark.scss b/apps/accessibility/css/themedark.scss
index 9ff59df2b5..685a226f10 100644
--- a/apps/accessibility/css/themedark.scss
+++ b/apps/accessibility/css/themedark.scss
@@ -17,6 +17,10 @@ $color-box-shadow: rgba(darken($color-main-background, 70%), 0.5);
 $color-border: lighten($color-main-background, 7%);
 $color-border-dark: lighten($color-main-background, 14%);
 
+// invert svg icons colors
+$color-white: #000;
+$color-black: #fff;
+
 #app-navigation > ul > li > a:first-child,
 #app-navigation > ul > li > ul > li > a:first-child,
 #expanddiv a {
@@ -43,3 +47,10 @@ $color-border-dark: lighten($color-main-background, 14%);
 #header .menu {
 	border: 1px solid var(--color-border);
 }
+
+// since svg icons are inverted, revert to white for the header
+#header-right > * {
+	[class^='icon-'], [class*=' icon-'] {
+		filter: invert(100%);
+	}
+}
\ No newline at end of file
diff --git a/core/css/variables.scss b/core/css/variables.scss
index 0207a82c4b..4d3d273f26 100644
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -50,8 +50,8 @@ $color-error: #e9322d;
 $color-warning: #eca700;
 $color-success: #46ba61;
 // used for svg
-$color-white: #000 !default;
-$color-black: #fff !default;
+$color-white: #fff !default;
+$color-black: #000 !default;
 
 // rgb(118, 118, 118) / #767676
 // min. color contrast for normal text on white background according to WCAG AA