feat: refine bg/text color for dark mode

[alexzhang1030]

closes #685 #677

Before:

Now:

I just updated background/text color for dark mode to reduce eye strain, especially on darker pages.

I’d appreciate any feedback!

Ref article: https://uxplanet.org/alternatives-to-using-pure-black-000000-for-text-and-backgrounds-54ef0e733cdb

[netlify[bot]]

✅ Deploy Preview for vue-devtools-docs canceled.

Name	Link
🔨 Latest commit	70baa9b7d830337d2c0db010909cd1dc046ee889
🔍 Latest deploy log	https://app.netlify.com/sites/vue-devtools-docs/deploys/673214211613400008fcd8eb

[pkg-pr-new[bot]]

Open in Stackblitz

@vue/devtools-applet

``` pnpm add https://pkg.pr.new/@vue/devtools-applet@686 ```

@vue/devtools-core

``` pnpm add https://pkg.pr.new/@vue/devtools-core@686 ```

@vue/devtools

``` pnpm add https://pkg.pr.new/@vue/devtools@686 ```

@vue/devtools-api

``` pnpm add https://pkg.pr.new/@vue/devtools-api@686 ```

@vue/devtools-kit

``` pnpm add https://pkg.pr.new/@vue/devtools-kit@686 ```

vite-plugin-vue-devtools

``` pnpm add https://pkg.pr.new/vite-plugin-vue-devtools@686 ```

commit: 70baa9b

[webfansplz]

@alexzhang1030 Great work. The whole thing looks a lot better. Here are some personal views to discuss:

1. The tree node element seems a little too bright, I prefer to display #fff directly in dark mode

2. I prefer the background color in the original dark mode, if we want to improve the contrast, we may need to enhance the specific elements.

https://coolors.co/contrast-checker/c41a16-212427

[alexzhang1030]

@alexzhang1030 Great work. The whole thing looks a lot better. Here are some personal views to discuss:

1. The tree node element seems a little too bright, I prefer to display #fff directly in dark mode

2. I prefer the background color in the original dark mode, if we want to improve the contrast, we may need to enhance the specific elements.

coolors.co/contrast-checker/c41a16-212427

Thanks for that, Let me clarify:

1. If the green is too bright, we can explore other colors; an all-white text color can be hard to read because < and > are the same color as the component name.
2. According to an article I referred to, pure black (or colors close to #000) can cause eye strain, while a softer dark grey can be easier on the eyes. I will explore some colors to improve the red text color contrast.

[alexzhang1030]

https://coolors.co/contrast-checker/ffb980-212427

this color looks good

[alexzhang1030]

Revert bg changes due to some limitations, consider css vars in the future.