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.
I am not a huge fan of the peach color in the explorer for modified files. Searching through the color theme reference I can't seem to find an override..
https://code.visualstudio.com/docs/getstarted/theme-color-reference
I've even tried disabling extensions and I am still seeing those predefined colors.. I am using the Monokai Soda theme but that doesn't seem to be what is setting those colors in the sidebar..
Any help appreciated - it's kinda driving me crazy..
ANSWER
Needed a combo of error style and git overrides, see answer below:
"workbench.colorCustomizations": {
"list.errorForeground": "#b3e5ec",
"list.warningForeground": "#00d9ff",
"gitDecoration.modifiedResourceForeground": "#00ffb3",
"gitDecoration.untrackedResourceForeground": "#f7aeae"
}
Turns out that the colour you're seeing isn't due to modified content. It's due to having problems/errors in your file. If you hover over the file name you should see x problems detected in this file.
To change the colour of those, you can use
"workbench.colorCustomizations": {
"list.errorForeground": "#00AA00"
}
The colour for modified files looks like the colour that settings.json is highlighted in, aka light green.
I have a problem about code highlighting in Peek Definition window of Visual Studio Code.
When I peek any function or class code with Peek Definition, the entire code block, not only the function or class name, will be highlighted with bright orange background, so that it's hard to read the code for me.
I attached a sample image of the situation.
I'll appreciate your help.
Since no one officially answered your question, I figured I'll just post the solution (thanks #Alex for the hint!):
Open the settings menu
On Windows/Linux - File > Preferences > Settings
On macOS - Code > Preferences > Settings
Search for Color Customizations and click on Edit in settings.json
Insert your custom highlighting (peekViewEditor.matchHighlightBackground) in the right window:
"workbench.colorCustomizations": {
"[*Your Theme*]": {
"peekViewEditor.matchHighlightBackground": "*Your Chosen Color*"
}
}
If you'd like to make other changes to the peek editor, take a look at the official documentation.
I build a project and get some problems in the "Problems view", I click on the problem to see a line of code with that problem highlighted.
And it gets highlighted indeed. However, if dark-styled theme is used, highlight is, for me at least, really hard to notice (line 23 is highlighted):
I guess this color can't be simply hard-coded somewhere since it's different in, for example, red theme and light-styled themes:
Is there a way to change this color?
UPD: This question is not a duplicate of "change the error style"; error style (squiggle) applies to all errors at once, my question is about highlighting only the selected error.
Apparently, you can actually change it without using an extension. I created an issue and got the answer that this color is called editor.rangeHighlightBackground and you can override it in your User Settings (settings.json) by:
{
"workbench.colorCustomizations": {
"editor.rangeHighlightBackground": "#00AA00"
}
}
To open User Settings just use Cmd+, on mac or Ctrl+, on windows
A wrapup answer:
For VS Code 1.52+
You can use this snippet to customize error colors:
"workbench.colorCustomizations": {
"editorError.background": "#ff80ab66",
"editorError.foreground": "#d50000",
}
Available properties: https://code.visualstudio.com/api/references/theme-color
Check if you can apply a different theme with VSCode 1.52 (Nov. 2020), considering the new feature:
Error background colors
Theme authors can now leverage new theme colors for errors in the editor.
Edior errors, warnings, and infos can now be styled via:
editorError.background
editorWarning.background
editorInfo.background
Visual Studio Code's default status bar color is blue, and I find it quite distracting. I used this extension to change the color, but it has stopped working after the 1.10.2 update.
You can change the colour of the statusbar by editing the user settings by adding these lines of code in it:
"workbench.colorCustomizations": {
"statusBar.background" : "#1A1A1A",
"statusBar.noFolderBackground" : "#212121",
"statusBar.debuggingBackground": "#263238"
}
I am going to save 30 minutes of time to noobs like me - it has to be edited in the settings.json file.
The easiest way to access it is menu command File → Preferences → Settings, search for "Color", choose an option "Workbench: Color Customizations" → "Edit in settings.json".
This uses the solution proposed by Gama11, but note:
the final form of the code in the settings.json file should be like this - note the double curly braces around "workbench.colorCustomizations":
{
// fontSize just for testing purposes, commented out.
//"editor.fontSize" : 12
// StatusBar color:
"workbench.colorCustomizations": {
"statusBar.background" : "#303030",
"statusBar.noFolderBackground" : "#222225",
"statusBar.debuggingBackground": "#511f1f"
}
}
After you copy/pasted code above, press Ctrl + S to save the changes to 'settings.json'.
The solution has been adapted from Status Bar colors.
Since every theme is so different, you probably don't want to make changes like this globally. Instead, specify them on a per-theme basis: e.g.:
"workbench.colorCustomizations": {
"[Some Theme Name]": {
"statusBar.background" : "#486357",
"statusBar.foreground" : "#c8e9c5",
},
"[Some Other Theme Name]": {
"statusBar.background" : "#385357",
"statusBar.foreground" : "#d7e9c4",
}
},
That way when you switch between your favorite themes, your customizations of them will not be forgotten, and will make sense in that context.
These are the steps I took to set the Visual Studio Code status bar colors on macOS for a workspace (not globally).
Menu View → Command Palette... → search for "Open Workspace Settings (JSON)".
(This will open the project [project-name].code-workspace file.)
Add the color customizations in the settings property.
{
"folders": [],
"settings": {
"workbench.colorCustomizations": {
"statusBar.background": "#938e04",
"statusBar.foreground": "#ffffff"
}
}
}
This is really useful when you have multiple instances of Visual Studio Code open and want to visually differentiate each window without having to change the global theme.
2022 Update:
Visual Studio Code now opens settings directly on command "Open Workspace Settings (JSON)".
You can just enter the workbench customizations directly:
{
"workbench.colorCustomizations": {
"statusBar.background": "#938e04",
"statusBar.foreground": "#ffffff"
}
}
There is a stronger, more robust solution than the previous answers in my opinion, and that’s to change the status bar color based on the file you're working on—it’s called ColorTabs, and it allows you to provide a list of regular expressions and change that color based on that.
Disclaimer - I wrote the extension.
I just registered so I can't comment directly on HelloWorldDude's reply, but that's exactly what I was looking for: Different colors per workspace to quickly differentiate between Visual Studio Code windows.
I'm on Windows 10 with Visual Studio Code 1.63.1 and the per-project setting is located in the .vscode folder of the project root, and the file itself is settings.json.
The syntax that worked for me does not include "folders" and "settings", but just the contents of the settings block, like so:
{
"workbench.colorCustomizations": {
"statusBar.background": "#7c0101",
"statusBar.foreground": "#ffffff"
}
}
You can change the color by edit extensions:
"colors":{
"statusBar.background": "#505050",
},
There is one more extension available, Peacock, to change the color of the workplace. It allows you to choose a different color for every Visual Studio Code instance.
If you are using the Vim plugin, the best way to change status bar color depending on mode is to go to settings, search for "status bar color" and check "allow Visual Studio Code to change color based on mode"
Here is a snapshot of the Vim plugin status color control:
Visual Studio 1.75 (Jan. 2023) will propose one more option, from issue 155294:
I am becoming a power-user of our debugger (yeah, finally).
This means that most of my "VS Code time" I have some kind of debuggee running or connected.
So, I am seeing the ugly orange debug status bar treatment a lot.
I don't like it and for me it's enough to see the activitybar icon decorations.
Instead of setting statusBar.debuggingBackground in workbench.colorCustomizations, there is now (PR 168513) a dedicated setting:
debug.enableStatusBarColor: Color status bar when debugger is active
This is available in VSCode insider today.
This is also mentioned in "How to prevent status bar colour in visual studio code from changing to orange on running any java file" by Mark.
Press Control + Shift + P when you just open Visual Studio Code and type "open settings(UI)" and search for window.titleBarStyle and change the option from native to custom so that you can restore the colour of status bar from white to black.
Important note: This technique works for update version 1.32 of Visual Studio Code released in February 2019. Make sure that you have updated your Visual Studio Code to the latest version 1.32 or further latest ones as it may not work for the older versions.