diff --git a/libs/config/styling/variables.css b/libs/config/styling/variables.css
index 8d8c904873914ad7fc99b87d15d4297d626e01ff..47bab4049b2c5b4151665b156a374be4f14994bb 100644
--- a/libs/config/styling/variables.css
+++ b/libs/config/styling/variables.css
@@ -182,6 +182,7 @@
   }
 
   body.dark-mode {
+    color-scheme: dark;
     --clr-light: var(--clr-neutral-100);
     --clr-dark: var(--clr-white);
 
diff --git a/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
index d12e943102096959cc998cfe8951bee469298470..a58aca2bebf2d31fa731a33cb44d7b76b74692b9 100644
--- a/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
+++ b/libs/shared/lib/vis/visualizations/rawjsonvis/rawjsonvis.tsx
@@ -1,8 +1,10 @@
-import React, { useEffect } from 'react';
-import ReactJSONView from 'react-json-view';
+import React, { useState, useEffect } from 'react';
+import ReactJSONView, { ThemeKeys } from 'react-json-view';
 import { VisualizationPropTypes, VISComponentType, VisualizationSettingsPropTypes } from '../../common';
 import { SettingsContainer } from '@graphpolaris/shared/lib/vis/components/config';
 import { Input } from '@graphpolaris/shared/lib/components/inputs';
+import { useConfig } from '@graphpolaris/shared/lib/data-access/store';
+import { Theme } from '@graphpolaris/shared/lib/data-access/store/configSlice';
 
 export interface RawJSONVisProps {
   theme: string;
@@ -15,13 +17,28 @@ const settings: RawJSONVisProps = {
 };
 
 export const RawJSONVis = React.memo(({ data, settings }: VisualizationPropTypes) => {
+  const config = useConfig();
+
+  let [theme, setTheme] = useState<ThemeKeys>(settings.theme || 'bright:inverted');
+
+  useEffect(() => {
+    if (theme.startsWith('bright')) {
+      setTheme(config.theme === Theme.dark ? 'bright' : 'bright:inverted');
+    }
+  }, [config.theme]);
+
+
+  if (config.theme === Theme.dark && theme === 'bright:inverted') {
+    setTheme('bright');
+  }
+
   return (
     <ReactJSONView
       src={data}
       collapsed={1}
       quotesOnKeys={false}
       style={{ padding: '20px', flexGrow: 1 }}
-      theme={settings.theme || 'bright:inverted'}
+      theme={theme}
       iconStyle={settings.iconStyle}
       enableClipboard={true}
     />