From b1c3c1965cb8fb15ddf2852cc865796d884d7298 Mon Sep 17 00:00:00 2001
From: Dennis Collaris <d.a.c.collaris@uu.nl>
Date: Mon, 5 Aug 2024 09:16:13 +0000
Subject: [PATCH] feat: support dark mode in RawJSONVis
---
libs/config/styling/variables.css | 1 +
.../visualizations/rawjsonvis/rawjsonvis.tsx | 23 ++++++++++++++++---
2 files changed, 21 insertions(+), 3 deletions(-)
diff --git a/libs/config/styling/variables.css b/libs/config/styling/variables.css
index 8d8c90487..47bab4049 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 d12e94310..a58aca2be 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}
/>
--
GitLab