Is it possible to customize the colors used by VSC background and text? I've tried all the color themes and none gives me what I need to see text clearly and comfortably. I can't find information on this in the Help, in the menus, or by searching on the Web.
I found the full list of color settings. I would imagine this would be useful to almost every user. It is at https://code.visualstudio.com/api/references/theme-color .
Related
My current theme is One Dark Pro. Overall, I like this theme but there are some syntax colors that I really don't like, such as HTML syntax colors. I really like the ones which are in Ayu theme Mirage. So, I want to edit these colors and it's been 2 days and I am stuck with this problem. I tried everything like read the VS-code docs, watch videos and read a lot of articles but can't change them. Although, I was able to change comments colors because of this article(How do I change color of comments in visual studio code?).Also, I thought about just switching to ayu theme mirage but it does not have diverse colors while coding in JavaScript.
I will attach some screen-shots please help me out guys.
https://i.stack.imgur.com/SCFK5.png
I would like to know what is the JSON setting to change the background colour of a VSCode Jupyter Notebook cell.
I found the VSCode Theme colour reference but I can't find the specific setting to do so.
I found the perfect colour theme but I would like to tweak the background colour cell just a bit.
For those interested the setting is:
"editorWidget.background": "#ff0000",
To find it, from the command palette I ran:
Developer: Generate Color Theme from Current Settings
This will create a new json document with ALL the elements currently affected by your current theme, from there I search for all the occurrences of the hex colour until I found the matching setting.
UPDATE: Please see Mark's answer below
Mark's answer is not comprehensive enough. Not sure if it is the best, please try.
In the settings.json -- can be found at File(Windows)/Code(Mac)>Preferences>Settings
Adding this into the json will work -- notebook's setting has to be put under the workbench.colorCustomizations.
"workbench.colorCustomizations": {
"notebook.cellEditorBackground": "#FFFFFF",
},
The rest of the settings you may follow Mark's guide above.
However, customizing the color background alone at jupyter notebook at vscode is not enough, i need the complete best settings including the font colors. Please share if you found the settings for all under notebook. Or can we change the notebook theme only but leaving the rest of vscode theme untouched?
vscode v1.59 is adding this colorCustomization:
"notebook.cellEditorBackground"
Also available:
"notebook.cellBorderColor"
Previously:
That theme color reference link doesn't seem to be kept up-to-date. See vscode Theme Color reference instead. There are a lot of notebook-related theme colors:
Notebook colors
including:
notebook.focusedCellBackground
notebook.selectedCellBackground
and many more.
I have a theme installed on VS Code that I really like but the color it uses for links is really hard to read.
Is there a way to customise the color of these links? I don't want to throw out the entire theme just because of this one issue.
"textLink.foreground": "#e06c75",
"textLink.activeForeground": "#41a6d9"
https://code.visualstudio.com/docs/getstarted/theme-color-reference#_text-colors
I'm creating a custom colour theme extension for Visual Studio Code and I can't find out how to customise the colours for certain parts of the user interface. The theme is complete, apart from customising the reference popup window.
Here is the popup window I'm trying to customise:
I wish to change the blue background and if possible, the blue border lines. I'm sure this can be done because some of the built-in themes do so. Does anyone have an idea what I would need to put into the colour theme file to achieve this?
I'm also looking for pointers to customise the status bar colour (at the base of the editor).
As far as I know, this is not possible.
Some of the built-in themes are build differently. Most themes are textmate style themes, but you can see here that some of the built-in themes are .json files and are somehow handled differently.
You can find the theme documentation here. Specifically, this part is relevant:
Besides the TextMate language grammar standard scopes, VS Code also
has custom theme settings which you can use to tune your own theme:
rangeHighlight: Background color of range highlighted, like by Quick open and Find features.
selectionHighlight: Background color of regions highlighted while selecting.
inactiveSelection: Background color of selections when not in focus.
wordHighlight: Background color of a symbol during read-access, like reading a variable.
wordHighlightStrong: Background color of a symbol during write-access, like writing to a variable.
findMatchHighlight: Background color of regions matching the search.
currentFindMatchHighlight: Background color of the current region matching the search.
findRangeHighlight: Background color of regions selected for search.
linkForeground: Color of links.
activeLinkForeground: Color of active links.
hoverHighlight: Background color when hovered.
referenceHighlight: Background color of a reference when finding all references.
guide: Color of the guides displayed to indicate nesting levels.
You can find an example VS Code theme here which includes the custom
settings.
As we can see here, there is no special override for the references pane.
We can, though, see in the code that the dark blue for dark themes and the light blue for light themes that you're seeing in the references pane is a default value set in code here.
The colours for the UI itself are stored in the following file (ubuntu): /usr/share/code/resources/app/out/vs/workbench/electron-browser/workbench.main.css
You can edit that, or wait for March 2017 where a new version will be released which will allow customising these colours more easily.
Revisiting this in Sept/2022 out of necessity, I confirmed VS Code 1.70 has native support for manipulating colors for the Go to References/Definitions and Peek... overlays.
Change the overlay background and border as follows, but there's lots of other settings too; see peekView*
"workbench.colorCustomizations": {
"peekViewEditor.background": "#01041a",
"peekViewResult.background": "#054c8a",
"peekView.border": "#04fafa"
In other words, when you type for and hit ctrl+space, you can pick various template for loops. After selecting, it creates the code and lets you tab between various aspects of the code (such as which array you're looping over). I've switched to dark colors on Eclipse, but I can't find anywhere to change the highlight for these tab areas, so they show up with light backgrounds and my light foreground colors and are completely unreadable.
Is it possible to change these colors somewhere? If so, where?
It took me some time, but I found it.
Look under window>Preferences>General>Text Editors>Linked Mode
Then it is "Editable Range" you are looking for.
In preferences:
Result:
Since you didn't find a prefs setting by searching for "color", there probably is no way to do this. I suggest to open a bug at https://bugs.eclipse.org/bugs/