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.
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 searched that VSCode have built-in ColorPicker from this Link
But i'm trying to learn code igniter with vscode and there's nothing like that. How to enable it ? i tried to enable editor.colorDecorators:true but its doesn't change anything.
When I had that same problem it was because I had "editor.hover.enabled": false, in my VS Code settings and setting it to true got the color picker working.
Go to settings, the small cog in the bottom left of the screen.
Type in 'hover' into the settings search bar and make sure 'Editor>Hover:Enabled' is checked
Now when you hover a color, the color picker should appear
If you are not seeing the color box, check CSS is selected as the language in the bottom right, if it is not, click on it and select CSS.
try:
body {
background-color: rgb(255,255,255)
}
then hover over 'rgb'
edit:
I've just noticed it also works for #fff, but you need to lose the quotes
Note there is an issue which can explain the lack of color picker, for large files (typically more than 500 lines).
#139743: "Built-in color picker stops working on large css files".
This is fixed by commit c0aa5bb and available in VSCode Insiders today, to be released with VSCode 1.75 (Jan. 2023).
I had this issue the language mode is selected to postcss and not css. When I set to css the color picker boxes appeared again.
CSS-in-JS is popular nowadays, use vscode-color-picker to bring the color picker to files other than css/sass/less (the built-in color picker supports styling files only, for now)
After installation, add the languages list to the settings because the extension does not turn on the feature by default.
on Mac: press Command + Shift + P then choose Open User Settings (JSON)
Then add these settings:
"vscode-color-picker.languages": [
"php",
"html",
"css",
"rust",
"python",
"json",
"jsonc",
"yaml",
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"vue-html"
]
As I tested:
It does not work with .tsx file (although it is in the list of the supported languages)
Works well with .js and .ts.
You don't need to do any settings, just remove the double quotes from the color (from "#fff" to #fff).
If that doesn't work out then use these extension, I prefer it to the VS Code picker:
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.
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.