I use dendron an extension that creates wikilinks in vscode.
when i choose high contrast theme, the color of the uncreated note (as in the note is not yet created for that wikilink) becomes too dark.
when i choose dark theme, the color of the uncreated note link is an orange which is visible.
I found this https://code.visualstudio.com/api/references/theme-color which talks about all the possible settings. but i cannot identify which one this is for.
Can advise?
Use the Scope Inspector by running the Developer: Inspect Editor Tokens and Scopes command to find out VS code's internal token name for the uncreated note:
Then use the identified token to set a certain color for it in your JSON settings:
"editor.tokenColorCustomizations": {
"[Default Dark+]": {
"textMateRules": [
{
"scope": "support.type.property-name",
"settings": {
"foreground": "#65a9b9"
}
},
]
},
}
Related
Is it possible programmatically to detect if the current theme is light or dark in VSCode?
Use Case:
I am developing a VSCode extension which is going to add Hovers to the editor, and I would like to have icons in the hovers. However, the background of the hover changes based on the current colour theme, so I need to choose the icons to display based on the colour theme.
Several other places in VSCode you are able to specify icons urls in the form:
let icon = {
light: "uri for light icon",
dark: "uri for dark icon",
};
so clearly VSCode has a notion of light vs dark themes.
This is similar to this question but AFAIK that answer only applies to webviews, and this issue is also brought up in this VSCode issue after it was closed
As of VS code 1.40, there is no API for this. Please file a feature request.
If you really, really want this info today though, you can read the current user's "workbench.colorTheme" setting and map this to dark/light. Instead of hardcoding this mapping, look it up by looping through the contributes of all known extensions using vscode.extensions.all.map(ext => ext.packageJSON). Here's an example theme contribution (the property you are interested in is uiTheme):
{
...
"contributes": {
"themes": [
{
"label": "Red",
"uiTheme": "vs-dark",
"path": "./themes/Red-color-theme.json"
}
]
}
}
I'm going crazy here trying to figure out how to customize the token colors in my vs code editor. I'm using the "Material Theme Lighter High Contrast" but I want to change the color of the "Type" tokens. So I changed my settings.json file to include the following:
"editor.tokenColorCustomizations": {
"[Atom One Dark]": {
"comments": "#a2ffe3d8"
},
"[Material Theme Lighter High Contrast]": {
"functions": "#00ff4c"
}
},
After changing the settings I go to reload my window and for a couple of seconds I can see the color change to the new setting but then it goes right back to the awful yellow. Any ideas what's going on?
Thank you everyone for all the help. After hours of spending way too much time trying to figure out this theme stuff instead of working on my actual project, I have finally figured out the problem. When you use enhanced colorization you can't use the normal token types. See here for more info https://code.visualstudio.com/docs/cpp/colorization-cpp
I've just installed vs code but when I write the code lines they are white, not colored...
How can I change the color?
That's how it looks:
Monican your issue isn't a background or theme issue.
You must install vuejs -> Syntax Highlight for Vue.js
I'm not a Vuejs Developer and I can't give you recommendations/
You should find which Vuejs extenstion / extensions will be your best friend(s).
Just open Extension panel and type vue.
Please contact me if you need an extra help.
Press ctrl+shift+x and search for extension(for example if you have dart then search for Dart extension), if already installed then first uninstall it >> Restart VS Code >> again now install dart extension(or any programming exe. which you using currently)>> now see issue has solved.
You need to install an extension that adds syntax highlighting (and other features) for .vue files.
You can search the extension marketplace, or click the Language indicator in the bottom right (which currently says Plain Text).
Custom Syntax Coloring for Visual Studio Code:
On VS code, go to "Preferences" --> "Settings", on the "Search Bar" type and search "Launch", then click on "Edit in settings.json" under the Launch phrase.
Then add these codes:
{
"window.zoomLevel": 0,
"editor.minimap.enabled": false,
"workbench.activityBar.visible": false,
"editor.fontSize": 18,
"workbench.colorTheme": "Absent (rainglow)"
"editor.tokenColorCustomizations":
{
"strings": "#d86464",
"keywords": "#ff00ea",
"comments": "#ddf129",
"types": "#00ff6a",
"variables": "#00c3ff",
"functions": "#00fff2",
"numbers": "#ae19f3",
"textMateRules":
[
{
"scope":
[
"" // This is for regular font
],
"settings":
{
"foreground": "#fa9c0f", // Color assigned for regular font.
},
},
{
"scope":
[
"keyword" // This is for keyword font
],
"settings":
{
"foreground": "#ffffff", // Color assigned to keyword font.
},
},
],
},
}
To change the regular plain white text color, change the hex color:
"#fa9c0f" // Color assigned for regular font.
that should do the trick.
VS Code has to be the best IDE as of right now. You can color customize literally everything, from scroll side bars to menu settings. Syntax highlighting seriously makes a developer more productive and less error prone.
You can make the perfect custom IDE however you wish with more details from:
https://code.visualstudio.com/api/references/theme-color
Go to settings and add this command: "editor.foreground": "#ff0000" to make the text in the editor red. Zyou can also load Themes and Syntax Themes to change the text colors as well. If you are displaying line numbers with your code you can change the color of the line numbers with: "editorLineNumber.foreground": "#eeff00". These statements are added to the right-hand side of the settings display.
You need to install extension for programming language you use, If extension is already installed then it may require "Reload". You can search extension and check whether if requires "Reload" or not. After reload the formatting will be fine.
Is there a way to override VSC's default theme style (e.g. italic or bold for comments) using user setting instead of editing the file like this suggestion here?
I've done it with colours as described here but cannot find any document from Microsoft about styles.
Setting the style in user setting can override any theme (at least the default ones) you use so you don't have to edit a file every time you change the theme.
settings.json Ctrl+,
"editor.tokenColorCustomizations": {
"textMateRules": [{
"scope": "comment",
"settings": {
"fontStyle": ""
}
}]
}
https://code.visualstudio.com/docs/extensions/themes-snippets-colorizers#_textmate-theme-rules
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.