VS code theme color is changed automatically - visual-studio-code

Above is today's color theme. Please see variable name SideMenu.
And another one is a picture which is taken few days ago.
You can see SideMenu color is different. It's not a problem of styled-components theme. Because every static variable's name's colors are changed.
It's not first time. few weeks ago, I had this experience and it's very annoying. Why the color theme of vs code (This is default Dark+ Theme) is changed automatically? I feel very unfamiliar with this color, and I want to stop the changing and hope to go back previous color.
How can I do that and Why this happens?

Ah! This is due to activation of Semantic Highlighting
You can disable or enable it to to get the coloring you want. Usually its enabled for default themes. If you disable it, you will get your old colors back.
You can disable/enable it here
Or you can add "editor.semanticHighlighting.enabled": false to settings.json

The is an option explorer.autoReveal in settings (either user or workspace) which controls if the explorer should automatically reveal files when opening them.
Open VS User Settings (Preferences > User Settings). This will open two side-
by-side documents.
Add a new "explorer.autoReveal": false setting to the User Settings document
on the right if it's not already there. This is so you aren't editing the
Default Setting directly, but instead adding to it.
Save the User Settings file.

Please enter your settings.json file for clear question. There might a code snippet like "workbench.preferredDarkColorTheme": "Default Dark+ Experimental" or "workbench.colorTheme": "so and so" in the settings.json. You have to remove this, because this might set your default theme to some preset theme. So, you will not be able to change your Color Theme on a fresh start.

Related

How to re-enable the default themes?

In VS Code, I don't have the default themes available anymore.
But I would like to be able to select the dark+ default theme.
I have searched in the Extensions panel but nothing shows up, it does not seem to be available to be re-downloaded or re-enabled.
Does anyone know how to get the default themes available again?
Thanks to Dorin Botan's comment, I just needed to do input #builtin to the Extensions panel:
And then from the Setting icon, enable the default themes again.

VS Code terminal colors are screwy

I'm using the default theme. The terminal's colors are impossible to read, make no sense, and are inconsistent. I've tried switching themes but they're terrible in all the themes.
Here's what it looks like in the default. Are you able to read my yellow input against the gray background? And why isn't there a black background everywhere?
I realize there are settings that can manually set the fore/background colors. But I'm thinking something is broken for me because of how screwy the terminal behaves.
For example, here's what I see when I first start the terminal, type a bunch of stuff, backspace to delete half of it, resize the terminal pane, then delete some more. Notice how some of the deleted spaces have yellow and some have gray. Also notice how the area where the CWD would be shown is all black.
Here are the contents of my settings.json file:
{
"window.zoomLevel": 0,
"git.enableSmartCommit": true,
"workbench.startupEditor": "newUntitledFile"
}
What needs fixing, and how?
Edit:
Just to satisfy your curiosity, I added this to my settings.json file:
"workbench.colorCustomizations": {
"terminal.foreground": "#ffffff",
"terminal.background": "#000000"
}
No joy:
There might be something wrong in your console settings, you might want to remove the content of HKCU\Console in your registry. Save it before, obviously, but there shouldn't be any side effect: it'll just be recreated with the default settings.
Okay, so here's a list of all possible settings that you could tweak in your terminal window colorscheme: (source)
"workbench.colorCustomizations": {
"terminal.background":"#1D2021",
"terminal.foreground":"#A89984",
"terminalCursor.background":"#A89984",
"terminalCursor.foreground":"#A89984",
"terminal.ansiBlack":"#1D2021",
"terminal.ansiBlue":"#0D6678",
"terminal.ansiBrightBlack":"#665C54",
"terminal.ansiBrightBlue":"#0D6678",
"terminal.ansiBrightCyan":"#8BA59B",
"terminal.ansiBrightGreen":"#95C085",
"terminal.ansiBrightMagenta":"#8F4673",
"terminal.ansiBrightRed":"#FB543F",
"terminal.ansiBrightWhite":"#FDF4C1",
"terminal.ansiBrightYellow":"#FAC03B",
"terminal.ansiCyan":"#8BA59B",
"terminal.ansiGreen":"#95C085",
"terminal.ansiMagenta":"#8F4673",
"terminal.ansiRed":"#FB543F",
"terminal.ansiWhite":"#A89984",
"terminal.ansiYellow":"#FAC03B"
}
Now for me, the colors of folder names was too bright over an even brighter background color that highlighted them and I couldn't read squat (that's because of my VSCode theme called NightOwl -- :P Sarah) so I thought (wrongly) to change terminal.background and terminal.foreground properties but that refer to the entire rendered window of the terminal.
Because these properties are actually named after Ansi Escape Codes, what I was actually looking for were these properties: terminal.ansiBlue for folder name text color and terminal.ansiGreen for folder name background highlight color.
As soon as I tweaked those, my terminal was good to go.
The way to do it is to just set all these settings and start removing or changing them to see which is which for your preference. K Thx Bye
Also beware that terminal.ansiGreen is used by git diff as a color to show additions.
On March 8th 2022 the default value for the integrated terminal "minimum contrast ratio" was updated from 1 (no effect) to 4.5 (minimal effect). Depending on your color settings and what is being displayed, this can cause your integrated terminal foreground colors to be wrong.
To disable this feature, override the default in your own settings.json file:
"terminal.integrated.minimumContrastRatio": 1
There are two solutions. Xavier's solution works, and mklement0's comment was also correct.
Solution #1
Do what Xavier said (and upvote his answer).
But, if you don't want to mess up registry settings (or if, like me, you have lots of registry settings nestled under the HKCU\Console root), then...
Solution #2
Get Windows 10 build number 18309 (or newer)
Join the Windows Insider Program
Make sure you're on a "ring" that includes a new-enough build. For me at this moment that meant joining the "fast" ring
Wait forever for updates to finish installing
Add "terminal.integrated.windowsEnableConpty": true to your settings.json
Restart terminals
Upvote mklement0's comment
...
Profit!
I am new to VS Code (and I'm trying to better my PowerShell skills) and have/had this same problem. Deleting all the Reg keys cited above related to colors seemed to fix it, but I believe the root problem is that VS Code seems to be trying to honor the color scheme set up outside the VS Code Terminal itself, from the shell. Really annoying and I'm not sure how to separate the two.
I had setup a blue background/yellow font scheme in PS prior to installing VS Code. That was the same color scheme the terminal in VS Code was displaying directly around the text.

VSCode: Increase opacity of linter warnings

I resently switched to Visual Studio Code as my editor. I installed my favorite theme "Material Theme Palenight High Contrast". I'm in love with it. There is just on problem, that really hinders me when coding on my laptop.
The squiggly lines of the linting error are super dark, because they have opacity.
As you can see here, one can barely see the error below item. Is there a way to change the opacity of linting errors?
EDIT: I tried setting workbench.colorCustomizations but that caused my theme to disappear.
Edit 2: I tried setting the theme specific settings like this:
"workbench.colorCustomizations": {
"[Material Theme Ocean High Contrast]": {
"editorError.foreground": "#ff0000"
}
},
but it didn't work. The color of the squiggly stayed the same.
The instructions on the theme page you linked say to use editor.colorCustomizations, not workbench.colorCustomizations. Have you tried that?
There's also a bit above the link I gave that talks about setting the accent color. They don't define what "accent color" means, so I'm not sure if that color is the thing you're trying to change, but you might try it.
I was able to find a fix. Go to the place where your extensions are installed:
/Users/user-name/.vscode/extensions/extension-name/themes/theme-name.json
In that file find the values for editorError.foreground and editorWarning.foreground. Here you can overwrite their values and it will work.
I'm just asking myself, whether this should be an issue for the VSCode repository? Since setting the settings in the user settings should overwrite this. One shouldn't have to change this .json file. Especially since this will change back again, if you re-install the theme.
Dummy Edit 🤦🏻‍♂️:
Damn, I accidently wrote Oceaning insteand of Palenight. The color customizations work... My bad. No need to do this hacky trick I described above.

How to modify the theme in VS Code

This is not a duplicate of how to configure theme options, that is clear from answers like this.
I'd like to modify or tweak the current setting, meaning: I'd like to load what is currently configured. For example the value currently configured for
editor.tokenColorCustomizations["[Cobalt2]"]["comments"]["foreground"]
to be able to tweak it a bit, say making the color more bright.
When I load this key in the User Settings I see a color red ("#FF0000) as default, which is obviously not what the theme has.
I know I can 1) open the cobalt2.json 2) find the setting and 3) copy/paste in my User Settings. But I was looking for a more friendly/easier approach.
Is there a more friendly/easier approach? How can I preload the current setting in my User Settings?
You can use this command from command palette:
Developer: Generate Color Theme From Current Settings
to see all the colors defined. If you have overwritten some colors in settings.json that change will be reflected too.
Command to assign to a keybinding: workbench.action.generateColorTheme.
Also, there is an open issue to fill the current value in settings: #25633

The selected entry in Eclipse content assist is unreadable because of colours

In my Eclipse installation, the selected entry in the content assist menu is almost unreadable because the colour is white on white-greyish. See image below.
I can change the background and text colour of the non-selected entries in the list from eclipse preferences, but the selected entry is always the same colour and is always unreadable. I use the Eclipse Color Theme RecognEyes, but that should only affect the editor as far as I understand.
How do I make the text of the selected entry in the context assist menu readable?
Update
After reading m1shk4's answer it does indeed seem that Eclipse takes it's colours from the current gnome theme. However it does this in a kind of weird way.
The background colour of the content assist "window" is the input boxes background colour, and the text colour is the input boxes text colour. This all seems logical.
However the background colour of the selected entry is the windows background colour, but the text of the selected entry is not the background text colour.
See image below for an illustration.
Does anybody know how to fix or workaround this issue?
Working workaround
It seems this issue is rather specific with the default gnome theme in Ubuntu. Switching to another gnome theme solves the issue for me.
Not sure if it's still in time but this might help all of you who are having the same problem, as I had:
Create a file ~/.gtkrc-2.0 and add this content to the file:
style "eclipse_fix"
{
base[ACTIVE] = shade(0.7, "#4283d3")
}
class "GtkTreeView" style "eclipse_fix"
Then just set Unity a new theme (in Configuration > appearance) and set again to the previous theme (Ambiance for instance). That will read the new file created above and the new color will take effect in eclipse.
I'm on Eclipse Neon and using Eclipse Color Themes.
I've solved this issue by:
Window-> Preferences-> General-> Appearance:
->Uncheck "Use mixed fonts and colors for labels."
Windows > Preference > General > Appearance > Color and Fonts
Basic > Content Assist background color, Content Assist foreground color:
and voilà!
Update
Interface is in Russian, but I think it's clear that colors, you're looking for, correspond to Selected Items entry. On my screenshot its light-blue for background and black for foreground.
If you are on Ubuntu / Unity, go ahead and install and start gnome-color-chooser.
Global Colors -> Default Configuration, Entry Fields -> selected and change fg and bg colors according to your needs.
I have the same issue on Windows 7. I found that text color(unselected text) of the content assist box can be changed under:
Desktop->Personalize->Window Color->Advanced Appearance Settings->Item->MessageBox
The only problem is one cannot set the background color for the MessageBox. -> any help from someone else?
At least this way you can read something...
NOTE: Be warned that a lot of other applications may depend on the messageBox color!
I was able to fix this in Ubuntu 12.04 by editing a file in the theme (I use Radiance):
sudo vi /usr/share/themes/Radiance/gtk-2.0/gtkrc
At the top is a key "gtk-color-scheme" with a bunch of color variables that are used later in the file. I make these changes: tooltip_fg_color:#000000 selected_fg_color:#000000 tooltip_bg_color:#f5f5b5
After making the changes, change your theme to something else then back, and most everything looks better! I did have to restart eclipse to get the fonts in the borders of the window to update.
Note that unfortunately these changes get overwritten sometimes during updates. There may be a way to use ~/.gtkrc-2.0 to do the same thing, I just don't know anything about that file.