✅ Deploy Preview for vue-devtools-docs canceled.

Open in Stackblitz

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

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

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

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

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

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

commit: 70baa9b

@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 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.

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

this color looks good

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