How to make Dark theme work sync flowbite-svelte Dark mode?

[Zerowalker]

A bit off-topic but I was wondering how I can make svelte-jsoneditor sync it's dark mode theme with https://flowbite-svelte.com/docs/components/darkmode.

Basically if I enable Dark Mode svelte-jsoneditor should also enable Dark Mode,
and when disabled/light, it goes back default.

I tried doing this, but it doesn't seem to work.

<script>
	import { JSONEditor } from 'svelte-jsoneditor';
	import 'svelte-jsoneditor/themes/jse-theme-dark.css';
	import { DarkMode } from 'flowbite-svelte';
</script>
<DarkMode class="text-primary-500 dark:text-primary-600 border dark:border-gray-800"></DarkMode>
<div class="dark:jse-theme-dark">
	<JSONEditor  />
</div>

and app.css containing this:

@import 'tailwindcss';

@plugin 'flowbite/plugin';

@custom-variant dark (&:where(.dark, .dark *));

@theme {
	--color-primary-50: #fff5f2;
	--color-primary-100: #fff1ee;
	--color-primary-200: #ffe4de;
	--color-primary-300: #ffd5cc;
	--color-primary-400: #ffbcad;
	--color-primary-500: #fe795d;
	--color-primary-600: #ef562f;
	--color-primary-700: #eb4f27;
	--color-primary-800: #cc4522;
	--color-primary-900: #a5371b;

	--color-secondary-50: #f0f9ff;
	--color-secondary-100: #e0f2fe;
	--color-secondary-200: #bae6fd;
	--color-secondary-300: #7dd3fc;
	--color-secondary-400: #38bdf8;
	--color-secondary-500: #0ea5e9;
	--color-secondary-600: #0284c7;
	--color-secondary-700: #0369a1;
	--color-secondary-800: #075985;
	--color-secondary-900: #0c4a6e;
}

@source "../node_modules/flowbite-svelte/dist";
@source "../node_modules/flowbite-svelte-icons/dist";

I thought this would enable jse-theme-dark when dark is set in body, but it doesn't seem to work.
Just using jse-theme-dark does work, so I know the class itself work as intended.

[josdejong]

I'm not familiar with flowbite, I assume that dark:jse-theme-dark means to apply the class jse-theme-dark when the variable dark is true, guess that should indeed work within that framework.