githubnext / vitale

TypeScript notebook for developers
https://githubnext.com/projects/vitale/
MIT License
179 stars 4 forks source link

json view doesn't support dark mode #34

Open jaked opened 4 months ago

jaked commented 4 months ago

JSON output is rendered using react-json-view, and the default theme is unreadable in dark mode. Not sure if react-json-view supports dark mode or if there's a way to check the color mode from a VS Code renderer.

jaked commented 4 months ago

this seems doable but it needs some plumbing:

we can track the color theme from the extension with

        /**
         * The currently active color theme as configured in the settings. The active
         * theme can be changed via the `workbench.colorTheme` setting.
         */
        export let activeColorTheme: ColorTheme;

        /**
         * An {@link Event} which fires when the active color theme is changed or has changes.
         */
        export const onDidChangeActiveColorTheme: Event<ColorTheme>;

then check for dark mode with

    /**
     * Represents a color theme.
     */
    export interface ColorTheme {

        /**
         * The kind of this color theme: light, dark, high contrast dark and high contrast light.
         */
        readonly kind: ColorThemeKind;
    }

the current mode needs to be communicated to the notebook renderer and the output pane webview via message passing