Support dark mode using media query

[janne-tervo]

Feature request

Support dark mode where Django admin does.

About me

(optional) If you're new to the octue ecosystem, and you don't mind, it'd be great to hear a little bit of the wider context about
you and what you're working on, so we can understand how best to help.

Use Case

Change the glaring white background to a darker tone.

Current state

Not using this package.

Proposed Solution

Please describe, if you can, how you think the feature should be implemented or problem solved

See the dark theme dockumentation: https://github.com/josdejong/svelte-jsoneditor?tab=readme-ov-file#dark-theme

Here's a simple gist applying this: https://gist.github.com/janne-tervo/98325c15ed6fbfd63099ccd20d1dfe00

This version would require including the file jse-theme-dark.css styles from the svelte json editor in the package, somehow.

Code explained below:

// You can add the required class to the div in javascript before loading the component

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      // Apply the dark theme
      target.classList.add('jse-theme-dark');
  }

You also need to load the dark css, with the optional media query. Note that you need this file to exist.

<style>
    @import '{% static "django_svelte_jsoneditor/css/jse-theme-dark.css" %}' (prefers-color-scheme: dark);
</style>

Supporting Octue

Octue is an Open-Source Software organisation helping you and many others to fight climate change. Providing support for your issues costs us c. 500GBP/day. Might your organisation be in a position to help sponsor this issue?

• We already are (eg via technical partnership or GitHub Sponsors )
• Yes (we'll prioritise this issue, and be in touch)
• No (we'll work on this issue as and when it aligns with our core development activity)