gildas-lormeau/JSONVue

Add a Dark UI theme option out of the box (and use OS settings as default)

LazaroOnline opened this issue · 2 comments

LazaroOnline commented

The full white page shown by this extension is a pain for the eyes when working at night.

Please, provide an accessible option to turn the UI black in one easy step from the extension's top right menu or the extension icon in browser's top bar.

I know that there is a "csseditor", but I don't want to mess around developing my own styles for every application that I want to make dark.

I also know there are other addon alternatives like:

But I would like to keep using this one that I'm sure will have better support in general and has more users.

The default value for Dark/Light theme should be picked from the OS/browser configuration as shown here:
https://www.freecodecamp.org/news/how-to-detect-a-users-preferred-color-scheme-in-javascript-ec8ee514f1ef/

LazaroOnline commented

Here is a Dark theme style example that could be the default.
Also if someone finds this issue in GitHub they can copy this style in their config while this issue gets solved (if ever).

body {
  white-space: pre;
  font-family: monospace;
  background-color: #222;
  color:white;
}

.property {
  font-weight: bold;
}

.type-null {
  color: gray;
}

.type-boolean {
  color: fuchsia;
}

.type-number {
  color: SandyBrown;
}

.type-string {
  color: lightgreen;
}

.callback-function {
  color: gray;
}

.collapser:after {
  content: "-";
}

.collapsed > .collapser:after {
  content: "+";
}

.ellipsis:after {
  content: " … ";
}

.collapsible {
  margin-left: 2em;
}

.hoverable {
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 2px;
  padding-right: 2px;
  border-radius: 2px;
}

.hovered {
  background-color: rgba(1, 2, 3, 1);  
}

.collapser {
  padding-right: 6px;
  padding-left: 6px;
}
a {
  color: aqua;
}
  • ❤️2
gildas-lormeau commented

I added a default dark theme in the latest version (0.1.10+).