Follow the editor theme

[FranklinYu]

Currently the theme is configured with

{"vscode-json-editor.theme": "dark"}

This configuration key defaults to light. It would be great if the default value follows VS Code.

This idea was proposed originally in https://github.com/sunmorgus/vscode-json-editor/issues/2#issuecomment-416557681.

[Josar]

So this works:

"vscode-json-editor.theme": "light",
 "workbench.colorTheme": "Quiet Light",

And this works

  "vscode-json-editor.theme": "dark",
  "workbench.colorTheme": "Visual Studio Dark",

[FranklinYu]

@Josar Excuse me, but how is that related?

[Josar]

I came from https://github.com/sunmorgus/vscode-json-editor/issues/2#issuecomment-416557681 und thought maybe stating a configuration which works might help others. As i had to try and change the themes back and forth and restart multiple times until i got it working.

I think i got the wrong thread.

[Josar]

So basically this can be achieved by adding the class selector to the css file. see https://code.visualstudio.com/api/extension-guides/webview#theming-webview-content

When you have your desired color scheme in your VS Code instance, run the Developer: Generate Color Theme From Current Settings command. This will generate a color theme file that you can then publish in your own extension. https://stackoverflow.com/questions/47117621/how-to-get-the-vscode-theme-color-in-vscode-extensions

/* Configuration for .vscode-dark */
/* content from jsoneditor.dark.min.css */
div.jsoneditor,div.jsoneditor-menu,.vscode-dark{
    border-color:#4b4b4b
}
div.jsoneditor-menu,.vscode-dark {
    background-color:#4b4b4b
}
div.jsoneditor textarea.jsoneditor-text,div.jsoneditor-tree,.vscode-dark{
    color:#fff
}
div.jsoneditor-field,div.jsoneditor-value,.vscode-dark{
    color:#fff
}
table.jsoneditor-search div.jsoneditor-frame,.vscode-dark{
    background:grey
}
tr.jsoneditor-highlight,tr.jsoneditor-selected,.vscode-dark{
    background-color:grey
}
div.jsoneditor-field.jsoneditor-highlight,div.jsoneditor-field[contenteditable=true]:focus,div.jsoneditor-field[contenteditable=true]:hover,div.jsoneditor-value.jsoneditor-highlight,div.jsoneditor-value[contenteditable=true]:focus,div.jsoneditor-value[contenteditable=true]:hover,.vscode-dark{
    background-color:grey;
    border-color:grey
}
div.jsoneditor-field.highlight-active,div.jsoneditor-field.highlight-active:focus,div.jsoneditor-field.highlight-active:hover,div.jsoneditor-value.highlight-active,div.jsoneditor-value.highlight-active:focus,div.jsoneditor-value.highlight-active:hover,.vscode-dark{
    background-color:#b1b1b1;
    border-color:#b1b1b1
}
div.jsoneditor-tree button:focus,.vscode-dark{
    background-color:#868686
}
div.jsoneditor td.jsoneditor-separator,div.jsoneditor-readonly,.vscode-dark{
    color:#acacac
}
div.jsoneditor-value.jsoneditor-string,.vscode-dark{
    color:#0f8
}
div.jsoneditor-value.jsoneditor-array,div.jsoneditor-value.jsoneditor-object,.vscode-dark{
    color:#bababa
}
div.jsoneditor-value.jsoneditor-number,.vscode-dark{
    color:#ff4040
}
div.jsoneditor-value.jsoneditor-boolean,.vscode-dark{
    color:#ff8048
}
div.jsoneditor-value.jsoneditor-null,.vscode-dark{
    color:#49a7fc
}
div.jsoneditor-value.jsoneditor-invalid,.vscode-dark{
    color:#fff
}

/* Standard configuration for .vscode-light  and .vscode-high-contrast*/
< previous content of jsoneditor.min.css

[phillijw]

I can barely read the key names for some reason. I haven't touched any of the theme settings for Json Editor:

[doneykoo]

I can barely read the key names for some reason. I haven't touched any of the theme settings for Json Editor

I met this problem once as well. Figured out the way to configure it. fyi, the steps are:

• open Extensions panel and show installed (shotcut: ctrl shift p ">extensions: show installed")
• find the "Json Editor"
• click the little gear (wheel, gizmo) icon button at bottom-right, to open settings menu
• select "Configure Extension Settings"
• change the "Theme" option from "light" to "dark"
• reopen JsonEditor (i.e., close the existing JsonEditor editor panel if opened)

[ldexterldesign]

🥴 Thanks for sweet software but LOL how was this not tested with the default VSCode theme?!

Regards

[gregchamblin]

I have forked this project, and implemented several of the requests and fixes. Please check it out.

https://marketplace.visualstudio.com/items?itemName=GregChamblin.vscode-json-editor

[FranklinYu]

@gregchamblin Thanks. I find #20 related.

[WBDC]

I can barely read the key names for some reason. I haven't touched any of the theme settings for Json Editor

I met this problem once as well. Figured out the way to configure it. fyi, the steps are:

• open Extensions panel and show installed (shotcut: ctrl shift p ">extensions: show installed")
• find the "Json Editor"
• click the little gear (wheel, gizmo) icon button at bottom-right, to open settings menu
• select "Configure Extension Settings"
• change the "Theme" option from "light" to "dark"
• reopen JsonEditor (i.e., close the existing JsonEditor editor panel if opened)

Tried this, but still no joy. My theme is Atom One Dark

[starball5]

Related on Stack Overflow: How to change the Json editor colors in Visual Studio Code?.