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
Related
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"
}
},
]
},
}
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'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.
I updated Visual Studio Code and the appearance of the currently selected line of code in the editor window has changed and now looks like this:
I tried searching online and reading their documentation, but it is not clear how to change the appearance of the highlighted line. I would like it to be one consistent color, it currently looks like a 1.5px outline. Does anyone know how to change this in the user settings file?
The outline is coming from the editor.lineHighlightBorder setting. In your user or workspace settings, add the following properties and then experiment with the colors until they match your preferences.
"workbench.colorCustomizations": {
"editor.lineHighlightBorder": "#222",
"editor.lineHighlightBackground": "#222",
}
If you prefer, you can ensure the settings only apply to a specific theme:
"workbench.colorCustomizations": {
"[Material Theme High Contrast]": {
"editor.lineHighlightBorder": "#222",
"editor.lineHighlightBackground": "#222",
}
}
Hello I'm trying to make custom theme for VS Code and want to see style changes right after editing, currently i need to restart editor to see changes which is not very productive.
Is there is any way to enable something like "hot reload" for theme/extension development?
"hot reload" for theme/extension,
not specifically, but there is a Reload Window command, which is quite fast.
It is a suggested solution by VSCode.
You can Press Ctrl+Shift+P for Command Palette and type Reload Window,
or define a key binding: Open Keyboard Shortcuts from menu or Ctrl+K,Ctrl+S,
find Reload Window command using Search, add your desired key combination
As already suggested by Alex and also VSCode's themes article,
a flexible way to edit a theme, is to transfer lines with values you want to tweak into the Settings. Or create new ones, it's easier there, as you can take advantage of IntelliSense and "live" update, which is not really live, but upon Settings file Save (not all settings are live, e.g. editor.foreground will not auto update)
Once you are satisfied with the changes, or with your new entries, transfer lines containing them from Setting to the Theme file and reload.
Settings in Setting file have priority, will override values from Theme file, if they exist there.
There are usually two sections in a Theme file, one defining Workbench colors,
in Theme file, these settings are under colors Key. e.g.:
"colors": {
"editor.background": "#000000",
"editor.something": "#ffffff"
}
but to tweak them in the User Settings, they must go in workbench.colorCustomizations Key. e.g.:
"workbench.colorCustomizations": {
"editor.background": "#000000",
}
then there are Syntax highlighting colors,
these might be in Theme file in an Array under tokenColors Key, or referenced to external file.
To tweak e.g. String color and style:
{
"name": "String",
"scope": "string",
"settings": {
"fontStyle": "",
"foreground": "#E6DB74"
}
},
place it in User Setting under editor.tokenColorCustomizations inside textMateRules:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"name": "String",
"scope": "string",
"settings": {
"fontStyle": "",
"foreground": "#E6DB74"
}
},
]
},
(*) Trailing commas
Watch out for the trailing commas. They can be a nuisance. The last entry must not have it and when you are copying items up and down, it's easy to miss one.
As a little help you can take advantage of the fact that Settings will forgive you if you'll leave it there. From some point of view, considering that the setting will reside in Settings only temporarily, it might be less error prone to not remove the comma from Settings, if it was already there in Theme file and you're going to put the line/block back to Theme file after tweaking. This is why I included the comma, against JSON rules in examples above.
(*) Error in JSON
If you make an error in JSON and then save and reload VSCode still with the error in JSON, the modifications will not show and theme will look the same as from before the reload. It looks like the VSCode is still using a cached version of the Theme file from before the error was made.
This is quite confusing. Expected behavior would be to fall back to default Theme.
If you then open the Theme selector, your theme will still be listed as selected, but if you select another one and then try to select yours again (one with the error), VSCode will ignore this action, keeping the another theme. This behavior might confuse further, expected would be to show error, or not allow to make the selection.
Edit: from vscode 1.31.0 hot-reload is working for theme in [Extension Development Host (when launching F5 extensionHost].
Hot reload works in settings.json Ctrl+,. After theme is ready simply move the content.
"workbench.colorCustomizations": {},
"editor.tokenColorCustomizations": {
"textMateRules": []
},
The best I came up with, was to make a shortcut to:
code -n c:\projectdir
and give it a keyboard shortcut like Ctrl + F1.
Then, after editing, save your file, hit Ctrl + F1 and a new VS Code will open up with the theme freshly loaded. If you open up files with several different languages, you get a good preview. Then you can just close that window again, and continue editing your theme. Rinse, repeat.