diff --git a/frontend/javascript/vegacharts.js b/frontend/javascript/vegacharts.js
index 76617ff65..efecad489 100644
--- a/frontend/javascript/vegacharts.js
+++ b/frontend/javascript/vegacharts.js
@@ -1,8 +1,48 @@
 import '../styles/vega.scss'
 
 import { expressionInterpreter } from 'vega-interpreter'
+import { mergeConfig } from 'vega'
 import embed from 'vega-embed'
 
+const backgroundColor = 'var(--bs-body-bg)'
+const textColor = 'var(--bs-body-color)'
+const mediumColor = 'var(--bs-secondary-bg)'
+
+const colorTheme = {
+  background: backgroundColor,
+
+  view: {
+    stroke: mediumColor
+  },
+
+  title: {
+    color: textColor,
+    subtitleColor: textColor
+  },
+
+  style: {
+    'guide-label': {
+      fill: textColor
+    },
+    'guide-title': {
+      fill: textColor
+    },
+    cell: { stroke: null },
+    'group-title': { font: 'Inter', fontSize: 14, fontWeight: 'bold' }
+  },
+
+  axis: {
+    domainColor: mediumColor,
+    gridColor: mediumColor,
+    tickColor: mediumColor,
+    labelColor: textColor,
+    labelFont: 'Inter',
+    labelFontSize: 12,
+    titleFont: 'Inter',
+    titleFontWeight: 'normal'
+  }
+}
+
 const LOCALE = {
   de: {
     number: {
@@ -95,6 +135,7 @@ document.querySelectorAll('[data-vegachart]').forEach((el) => {
     expr: expressionInterpreter,
     renderer: 'svg',
     actions: showActions,
+    config: mergeConfig(colorTheme, spec.config),
     ...extras
   })
 })
diff --git a/frontend/styles/vega.scss b/frontend/styles/vega.scss
index 587d39a3a..e11745669 100644
--- a/frontend/styles/vega.scss
+++ b/frontend/styles/vega.scss
@@ -1,3 +1,6 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+
 .vega-chart {
   overflow: hidden;
   width: 100%;
@@ -9,3 +12,13 @@
 .vega-embed {
   width: 100%;
 }
+
+#vg-tooltip-element {
+  background-color: var(--#{$prefix}body-bg);
+  border: 1px solid var(--#{$prefix}tertiary-bg);
+  color: var(--#{$prefix}body-color);
+
+  td.key {
+    color: var(--#{$prefix}secondary-color);
+  }
+}