I really like the V.S. Code theme, Abyss. On occasion I find that the theme makes my code difficult to read, the text rendered in the editor will look like it is blending into the background, therefore; I thought changing individual syntax color would be a good solution.
I want to be able to adjust a couple of color-tokens, while leaving the rest of the syntax unchanged. How can I select, and change the properties of color tokens, without impacting any other parts of the theme that's currently set in the editor?
I want to use the code syntax color of the GitHub dark default theme with the Abyss theme on the rest of UI.
I found a site (click to see) that suggests changing the syntax colors with the editor.tokenColorCustomizations property.
I am not able to understand that how can I copy the color configuration from GiHub dark default to the Abyss theme.
V.S. Code users have the ability to style the syntax that is displayed in the editor, as well as the ability to style the editor its self — this includes the workbench, and all off the items in the workbench. To start styling the workbench, or syntax in the editor, you must first add the following JSON properties to either your user-scoped settings.json file, or by adding it to a workspace-scoped settings.json.
"workbench.colorCustomizations":{ /* properties here */ }
"editor.tokenColorCustomizations":[ /* properties here */ ]
Example of a properly configured settings.json file:
// "./.vscode/settings.json"
{
"workbench.colorCustomizations": {
"editor.background": "#08182F",
"sideBar.background": "#00132D",
"panel.background": "#00132D",
"activityBar.background": "#002040",
"editorGroupHeader.tabsBackground": "#00132D",
"tab.inactiveBackground": "#00132D",
"tab.activeBackground": "#003054",
"tab.activeBorder": "#003054",
"breadcrumb.background": "#003054",
"statusBar.background": "#005280",
"sideBar.border": "#103050",
"titleBar.border": "#103050",
"statusBar.border": "#103050",
"menu.border": "#103050",
"contrastBorder": "#103050",
"panel.border": "#103050",
"editorRuler.foreground": "#103050",
"tab.border": "#103050",
"tab.lastPinnedBorder": "#103050",
"activityBar.border": "#103050",
},
"editor.tokenColorCustomizations": [
{
"scope": "punctuation",
"settings": {
"foreground": "#C4C4C4",
"fontStyle": ""
}
},
{
"scope": "comment",
"settings": {
"foreground": "#246488",
"fontStyle": ""
}
},
{
"scope": "string",
"settings": {
"foreground": "#98DAF4",
"fontStyle": ""
}
},
]
}
There are many more properties that can be used to style your editor and syntax. A good resource to refer to is this template, its from the YO CODE generator, and it is what several theme designers use as a starting point when creating a new theme.
Theme Template (e.g. you don't have to make a theme to use the properties).
The most useful tool at your disposal is when writing theme properties — just like in the example above — is VSCodes suggestion widget. The suggestion widget is most often used to auto complete code, however, its usefulness extends much further than finishing a line of text for you. If you type, "background", while you are focused inside of one of the colors, or tokenColors, properties a whole list of available background properties will be available to choose from, and you are not limited to just background properties, the suggestion widget will work for finding borders, foregrounds, icons, buttons, inputs, bars, highlights and a whole lot more
Perhaps the best resource to read would be the VSCode Contributed Page on Color-Themes
EDIT: If you download the GitHub theme, you can find the theme's JSON file, which is the source code for the "Dark GitHub Theme" in the following location:
$HOME/.vscode/extensions/github.github-vscode-theme-4.1.1/themes/dark.json
When ever you have a theme's source JSON Document, you can copy and paste individual properties from the theme you located, into your ./.vscode/settings.json file using the properties:
"workbench.colorCustomizations":{ /* properties here */ }
"editor.tokenColorCustomizations":[ /* properties here */ ]
NOTE: It takes some practice, and some reading to get good at creating themes, or even just configuring your current theme to customize it a bit like your doing now.
ADDITIONAL HELP
I think it might help if I explain what it is your doing.
The workspace settings.json file, located in the root of each project...
"./.vscode/settings.json"
...takes precedence over all other configuration files, therefore, when a setting, or property is being configured in two files, and one of the files is "./.vscode/settings.json" then the configuration set inside "./.vscode/settings.json" will win-out the configuration in the other file, because "./.vscode/settings.json" overrides any configurations it holds, that are also held somewhere else. (I Hope that makes sense)...
Next to the workspace "settings.json" file, is the users settings.json file, which is located at:
"$HOME/.config/Code/User/settings.json"
So basically all you need to know at this point is your settings.json files are the word of the land, everything else is overridden. This is very important, because when you use the settings.json files to set color-token properties to highlight some syntax that is being colored by a theme, and your recoloring it because you don't like it, what you are doing, is overriding the theme's JSON file located in the themes extension directory # $HOME/.vscode/extensions. If you don't set a property in a valid settings.json file, then the property will remain unchanged. This lets you select and choose which properties to change, by overriding the properties you don't like. And as I have stated in the comments and above, these are the properties you will use to preform the overrides.
"colors":{ /* properties here */ }
"tokenColors":[ /* properties here */ ]
Rather than trying to copy and paste entire themes, just try to change a single element. Once you succeed at changing one element, then you can try changing several in unison.
ctrl+shift+p =>preferences:color theme==> select Dark+(default dark)
I would like to know how to tweak my VSCode theme (One Dark Pro), a theme with semantic highlighting.
I cannot override some of its semantic token types.
With most themes I would write this in settings.json:
{
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"name": "Javascript - Variable/object",
"scope": [
"variable.other.object.js"
],
"settings": {
"foreground": "#c7452e",
"fontStyle": "bold italic"
}
}
]
}
}
But with this theme (and also other ones with semantic opinion) I cannot override it, as if I needed to use !important in CSS.
So this is the result of my token and scope inspection after my rule.
As you can see, my settings are indeed read but are apparently not 'specific' enough as to beat the semantic interpretation or overridden by it, and are disregarded (last three lines) and instead the modifying semantic token type takes prevalence.
Is there a way to do this per individual textmate scope (i.e. without losing the rest of the semantics of that wonderful theme) like if I just want to change the color of that particular item?
So when syntax is highlighted by a theme, settings.json files have priority over the syntax highlighting implemented by your set theme, however, if you activate semantic highlighting, then the theme highlights your syntax, your settings.json file takes priority & overrides the theme, and then the language server has priority over the theme and over the local user, & workspace, settings.json files. So in other words, you can't override the token because the token is being overridden already by a scope that has higher priority than your configuration file. Now with that said, if you don't like it, just turn Semantic highlighting off (code snippet below shows the configuration for turning off semantic highlighting).
/** #file "./.vscode/settings.json" */
{
"editor.semanticHighlighting.enabled": false
}
Is there currently any way I can create an extension that applies a text decorator above or below the specified range which I can use to supply any HTML/CSS visual I want?
I'm still working through the API and my guess is either no, or not directly via the extensions API.
It depends on what types of decorations you are talking about. Since you used the words "text decorator" then I'm going to assume you're talking about the decoration API described here.
As you can see, there are several css properties that they officially support, but none of them "arbitrary css".
What I've done, though, in my vscode dimmer extension, is apply an opacity style using this technique:
dimDecoration = vscode.window.createTextEditorDecorationType(<vscode.DecorationRenderOptions> {
textDecoration: `none; opacity: ${opacity / 100}`
});
When vscode sees this, it basically adds text-decoration: none; opacity: 1 to the stylesheet.This allows me to use arbitrary styling.
The above snippet creates a "Decoration" which can then be applied to ranges as shown below.
function dimEditor(editor: vscode.TextEditor) {
if (!dimDecoration) return;
let startPosition = new vscode.Position(0, 0)
let endPosition = new vscode.Position(editor.document.lineCount, Number.MAX_VALUE);
editor.setDecorations(dimDecoration, [new vscode.Range(startPosition, endPosition)]);
}
Disclaimer: Of course, this isn't officially supported and they could change the way they process the arguments to stop at the first ; and anybody using this workaround would have a broken extension.
Edit:
If you're wanting to have a "hover" behavior, there is the HoverProvider api. It can take a "marked string" which is essentially markdown, and display it. This extension uses it to display img previews on hover.
If markdown will meet your needs you can try that, otherwise you can try with arbitrary HTML and see if it accepts that.
i create my own starterkit base on https://github.com/barbar/vortigern and all ok but i have one problem.
Usually when i want to connect all style to the App i'll do
import '../styles/scss/bundle.scss';
bundle.scss - contains all imports.
But in isomorphic case all some complicate.
.global {
background: yellow;
>.child {
background: tomato;
}
}
transform in:
.app_global_1pn {
background: yellow; }
.app_global_1pn > .app_qwe_FD8 {
background: tomato; }
question 1: app_global_1pn - that name will remain forever? And i'm can use it like
<Tag className='app_global_1pn' />
question 2: Is there an solution without uglify style?
This behavior exists so that duplicate style names in multiple css modules don't cause conflicts with the generated CSS. If you don't want to use css modules, then you can always pre-compile your CSS and load it as a static .css file. But then you won't have the benefits of css-modules such as hot-reloading etc.
I want to change stacklayoutpanel header back ground color using css and I tried everything.
.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader .gwt-StackLayoutPanelContent .gwt-StackLayoutPanelItem {
color: red;
border:red;
border-color: red;
background:red;
background-color:red;
}
But only changed the text color and I don't want that. Please can you explain how can I do that?
StackLayoutPanel wraps hour header widget/text to an internal class named Header, which is not publicly accessible. One approach is to override default clean.css .gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader styles by copying it to your own css file, then appending !important to styles you want to change.
However, better and cleaner solution is to do the following:
// add/insert your item first
myStackLayoutPanel.add(widget, header, size);
// retrieve the Header internal widget (AFTER ADDING!)
Widget internHeader = header.getParent();
// replace default style
internHeader.setStyleName("my_custom_style");
If you don't like using class css styles, you may alternatively do something like:
... same as above
// reset the default style
internHeader.setStyleName("");
// then add your styles programmatically
Style style = internHeader.getElement().getStyle();
style.setBackgroundColor();
etc.
It is important to retrieve the internal header widget after call to add/insert!
Your CSS style is incorrect. It's trying to target classes with the following hierarchy:
.gwt-StackLayoutPanel
.gwt-StackLayoutPanelHeader
.gwt-StackLayoutPanelContent
.gwt-StackLayoutPanelItem
Which is completely incorrect. If you want ALL elements with those classes to have the same background color, you would write your CSS rule like this:
.gwt-StackLayoutPanel,
.gwt-StackLayoutPanelHeader,
.gwt-StackLayoutPanelContent,
.gwt-StackLayoutPanelItem
{
background-color: red;
}
You better create your own css file based on gwt's default and make changes there. You also need to exclude gwt default css from your_module.gwt.xml and put there your newly created