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"
}
]
}
}
Related
The February 2021 version brought a breaking change for the colors of autocomplete lists:
https://code.visualstudio.com/updates/v1_54#_updated-listtree-ui
Where we have the following settings for the colors of the focused item:
quickInputList.focusIconForeground
quickInputList.focusForeground
quickInputList.focusBackground
The three work fine.
However, when setting focusIconForeground, it seems that we can override the color of the icon... but what if I want to keep the original color of the icon, even when the item is focused?
For example, suppose I have the following settings:
"workbench.colorCustomizations": {
"[Default Light+]": {
"quickInputList.focusIconForeground": "#ff0000",
"quickInputList.focusForeground": "#000000",
"quickInputList.focusBackground": "#e0e0e0",
},
},
If so, this is the rendered autocomplete list:
See how the icon of the focused item is red. I want it to remain purple, its original color.
So, what setting can I use in quickInputList.focusIconForeground to keep the icon at its original color?
As a side note... I'm using "Default Light+" theme, but I noticed that many other themes (like "Quiet Light" and "Monokai") do exactly what I'm trying to do.
I had to dig into the actual source code of VSCode in order to find this. What happen is: the suggestion box icon is called product icon, which is actually a glyph icon font that can be themed. It ships with no color, because the color is defined by the active color theme.
When the suggestion box is rendered, VSCode checks if current theme has defined a color to the icon. If there is no color, a default color is given according to the icon type. However, if the color theme defined a color to the icon, this color is used, regardless of the icon type – that is, the theme overrides the color. The parameter for this color is editorSuggestWidget.selectedIconForeground, as noted in JayDev's answer. The code which does this can be seen here.
Now the theme I'm using, "Default Light+", does override this color, and there is no way to clear this overriding in VSCode settings file. Other themes do not override, and those themes show the original icon color, which is the behavior I want. So, what I had to do was simply modify the theme, inside VSCode installation folder, commenting out the offending line, which can be found here. For reference, in VSCode installation folder, it's line 28 of this file:
resources\app\extensions\theme-defaults\themes\light_vs.json
The line itself to be commented out is:
"list.activeSelectionIconForeground": "#FFF"
Another solution would simply be to create another theme, based off "Default Light+", with this fix. However, if the theme is updated in the future, I'd have to keep the pace, something I don't want to do. So, what I'm doing is adding this fix to this patch I wrote a while ago to automate other VSCode customizations.
Note: All source code references were taken off VSCode commit da77887 (June 10, 2021). These references may, obviously, change in the future.
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 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",
}
}
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:
I'm trying to highlight the error in more aggressive way, is it possible in VS Code?
Basically to change style of this:
UPD: example of aggressive highlight in webStorm:
UPDATE - Nov 2020
Properties to set a background color on error styles are finally coming! Merged PR here
editorInfo.background
editorWarning.background
editorError.background
This is not shipped yet - I suppose it will likely ship in the next major version (v1.16). Will update here to confirm the version when this happens.
v1.12 and above
Customization of error underline colors are now available natively via workbench.colorCustomizations in workspace settings. See the docs here.
"workbench.colorCustomizations": {
"editorError.foreground": "#000000", // squiggly line
"editorError.border": "#ffffff" // additional border under squiggly line
}
Unfortunately, as far as I can find, for now the native customizations are limited to this. To highlight the error with a background color, for example, you will still have to resort to the plugin method below...
v1.7.2 and above
Error styles can be fully customised via css with the vscode-custom-css extension.
Create a file custom-styles.css with the following (change the styles as preferred)
.monaco-editor.vs .redsquiggly,
.monaco-editor.vs-dark .redsquiggly {
background: rgba(255,255,255,0.2);
border-bottom: 1px solid #fff;
}
Point the extension to custom-styles.css by adding the following in Preferences > User Settings (settings.json)
{
"vscode_custom_css.imports" : [
"file:///path/to/file/custom-styles.css"
]
}
Open up the command palette (Mac: cmd+shift+P, Windows/Linux: ctrl+shift+P) and search for and execute Enable Custom CSS and JS, then restart VS Code.
You're done!
Screenshot with the above styles applied:
If you get any mistakes in the config, or you make any changes in custom-styles.css, try restarting VS Code completely, and it should refresh and pick up the correctly configured/new styles.
N.B. Thanks #Stepan Suvorov for raising the github issue and #Matt Bierner for pointing out the appropriate css, so I could get this fixed with the extension.
If any VS Code devs happen to be reading this, firstly thanks - VS Code is awesome - but the built-in error styling is a significant accessibility issue for colourblind people. I'm red-green colourblind and the red squiggle on a black background is quite a strain to notice for me, particularly with single characters.
The ability to customise the error styles is last thing I really missed, switching to VS Code from atom. Official support for this would be a great feature!
After almost a year, unfortunately, vscode-custom-css stop working for me; in the meantime vscode introduced some settings to customize the layout.
Try to add this in the user settings:
{
// ...,
"workbench.colorCustomizations": {
"editorError.border": "#ca2323a4",
"editorError.foreground": "#ffffffb7"
}
}
It will show the errors in this way:
You will soon be able to modify the background color of errors, warnings and info. See https://github.com/microsoft/vscode/pull/110112, should be in v1.52.
editorError.background
editorWarning.background
editorInfo.background
Previously, the background color could not be changed.
This works in version 1.58.0:
The following JSON goes into your settings.json, which I accessed via settings -> Workbench -> Appearance -> Color Customization:
{
"workbench.colorCustomizations": {
"errorForeground": "#ffffff",
"editorError.background": "#ff0000",
"editorWarning.foreground": "#ffffff",
"editorWarning.background": "#dddd00",
"editorInfo.foreground": "#ffffff",
"editorInfo.background": "#0000ff"
}
}
To my knowledge, changing the styling of errors is not something that VSCode themes or extensions can currently do. This logic is built in. Here's the css used to render the redsquiggly currently
I suggest you open a feature request against VSCode