VSCode highlights nested classes with parent selector as properties in SCSS as seen here:
&__recommendation is highlighted in blue which is a bit confusing. Can i make it so vscode highlights it in yellow like a class selector? I'd like it to be like this(it's a .less file):
The code if someone needs to copypaste it:
.product-card {
padding: 15px 27px;
color: red;
font-family: "DM Sans";
font-size: 16px;
font-weight: 700;
&__recommendation {
display: flex;
}
}
Had to add in settings.json:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"entity.name.tag.reference.scss",
"entity.other.attribute-name.parent-selector-suffix.css"
],
"settings": {
"foreground": "#D7BA7D"
}
}
]
}
I've used Developer: Inspect Editor Tokens and Scopes command to find which scopes i need
More information here:
VS Code change theme color only for CSS
https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide
https://code.visualstudio.com/api/extension-guides/color-theme#syntax-colors
https://code.visualstudio.com/api/language-extensions/semantic-highlight-guide#theming
Related
.App {
text-align: center;
** --amenalBlue: #15426C;
--amenalOrange: #D9A460;**
}
h2,h3{
color: gray;
}
/* common table head style */
.tableHead {
*** background-color: var(--amenalOrange);***
}
.tableHead th {
color: var(--amenalBlue);
font-weight: bold;
}
Table head is not taking custom color which i have added but normal hex code is taking. This is happning in MUI table used inside MUI dialog
On the website for Tailwind CSS there is a video of someone editing in vscode.
How did they get the popup to look like that? Can I reproduce it some how?
For those wanting to see the gif on their website: https://tailwindcss.com/docs/editor-setup
You are looking at the result of someone's chosen color theme in their vscode editor. You could contact them and ask for the name of that theme and whether it is available on the VSCode Marketplace or you can make your own.
Specifically for the Suggest Widget you showed in your question:
You can do this in vscode's own settings. In your settings.json
{
"workbench.colorCustomizations": {
"editorSuggestWidget.background": "#344255",
// the first line in your gif is selected
"editorSuggestWidget.selectedBackground": "#485669",
// the letters you have typed to bring up intellisense: 'bg' in your example
"editorSuggestWidget.highlightForeground": "#97f4e2",
// 'bg' in a selected entry
"editorSuggestWidget.focusHighlightForeground": "#97f4e2",
"editorSuggestWidget.foreground": "#fff" // the text color
}
}
The workbench.colorCustomizations object allows you to change the color of many of vscode UI elements. To learn more about this see
Customizing a Color Theme:
You can use IntelliSense while setting workbench.colorCustomizations
values or, for a list of all customizable colors, see the Theme Color
Reference.
So, for instance if you know that is the suggestWidget, just typing "suggestWidget" (including the quotes) inside a workbench.colorCustomizations object should give you all the properties of a suggestWidget of which you can change the color.
Thet are also listed here: Theme Color Reference: Editor Widget Colors.
[I used an eyedropper browser extension to get the colors for the various elements.]
[I assume the rounded corners are a result of MacOS, the demo below is with W11.]
It says in their guide here.
By default VS Code will not trigger completions when editing "string" content, for example within JSX attribute values. Updating the editor.quickSuggestions setting may improve your experience:
Add these settings.json
"editor.quickSuggestions": {
"strings": true
},
"tailwindCSS.includeLanguages": {
"html": "html",
"javascript": "javascript",
"css": "css"
},
Save and restart VS code.
When you want to use tailwind related classes use eg. "text-" you should see the suggestions.
You have to use vscode-custom-css extension
Install the extension and try the CSS below...
.monaco-editor .suggest-widget {
border-radius: 15px 15px 15px 15px;
box-shadow: 0 0 15px 15px rgba(0, 0, 0, 0.1);
padding-top: 15px
}
you can use Tailwind Moon theme to get similar colors also...
Use this extension: vscode-custom-css and this css:
.colorspan {
border-radius: 4px;
}
.monaco-editor .ced-1-TextEditorDecorationType24-3::before {
border-radius: 4px;
}
.monaco-editor .suggest-widget {
border-radius: 15px 15px 15px 15px;
box-shadow: 0 0 15px 15px rgba(0, 0, 0, 0.1);
background-color: #344254 !important;
padding: 10px;
}
.monaco-editor .monaco-highlighted-label .highlight {
color: #79bcb6;
}
.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused {
background-color: #485668 !important;
}
.monaco-editor .monaco-list-row:hover:not(.selected):not(.focused) {
background-color: #485668 !important;
}
By default my angular.json will include the whole ionicon set as follows:
"assets": [
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
],
Since Im using custom icons set, I have removed the above from my assets array but this also removed back icon from <ion-back-button>, any idea how can I import only the ionicicons I am using and avoid including the whole icon pack in my app?
if you want to add custom icons for you can do the following :
create file in themes and name it icons.scss for example
in that file put your icons like this : suppose your icon name will be "products" and the icon file name called " menu.svg "
ion-icon {
&[class*="products"] {
mask-size: contain;
mask-position: 50% 50%;
mask-repeat: no-repeat;
width: 1em; // for example
height: 1em;// for example
background: #yourColor ;
mask-image: url('../assets/menu.svg');
}
}
in app.scss add #import '../theme/icons';
and if you don't want to use default icons , remove #import "ionic.ionicons";
from variables.scss in themes
I commonly have 10+ tabs open per editor window which makes it tedious to scroll back and forth (or use ctrl+tab) to find the file I want.
Is there any way to have the tabs wrap?
Similar to Atom's multirow-tabs.
Update: Looks like it is a work in progress.
UPDATE Feb 2021: In-built support for tabs-wrapping in VSCode v1.53.0+
Just set the workbench.editor.wrapTabs to true in the settings.
I still use my configuration mentioned below to make tabs smaller as per my usage.
UPDATED 28 March 2020 for VSCode v1.43.2
Fixed CSS for tab-close button
Added CSS for smaller bread-crumbs and acion-bar (at the right of tab-bar)
I do the following for multirow tabs in visual-studio-code (until there is official support or an easier solution):
STEP 1: Install the extension VSCode Custom CSS. (Check out the extension page for proper installation instruction. It's a bit of a hack as VSCode does not officially support altering internal CSS.)
STEP 2: Create a CSS file (say, "/home/user/vscode/custom.css") and add the following contents:
/* Following CSS to wrap the tab-bar into multiple rows: */
.tabs-and-actions-container > .monaco-scrollable-element {
height: auto !important;
}
.tabs-and-actions-container > .monaco-scrollable-element > .tabs-container {
height: auto !important;
flex-wrap: wrap;
}
/* Following CSS to make the tabs thinner/smaller (so that they take lesser vertical space): */
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab {
height: 25px;
padding-left: 4px;
font-size: 0.8em; /* smaller font-size for tab icons and label */
}
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .label-name {
font-size: inherit !important; /* inherit updated font-size for label */
}
/* Following CSS for smaller close button on tabs: */
.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close {
width: 20px;
}
.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close .action-label {
height: 12px;
width: 12px;
background-size: 12px;
}
.monaco-workbench .part.editor>.content .editor-group-container.active>.title .tabs-container>.tab>.tab-close .action-label.codicon {
font-size: 12px;
}
/* OPTIONAL: Following CSS for smaller breadcrumbs (below tab-bar) */
.monaco-breadcrumbs {
font-size:0.65em;
opacity: 0.8;
height:18px !important;
}
.tabs-breadcrumbs .breadcrumbs-control {
height: 18px !important;
}
.monaco-workbench .symbol-icon.block {
height: 8px;
width: 8px;
min-height: 8px;
min-width: 14px;
background-position: 50%;
background-size: contain;
}
.breadcrumbs-control .monaco-breadcrumb-item:before {
min-width: 12px !important;
height: 12px !important;
background-size: contain !important;
}
/* OPTIONAL: Following CSS for smaller action-bar (beside the tab-bar) with menu, split, etc. */
.monaco-workbench .part.editor>.content .editor-group-container>.title .editor-actions {
height: 20px;
padding:0;
}
.monaco-workbench .part.editor>.content .editor-group-container>.title .editor-actions .action-label, .monaco-workbench .part.editor>.content .editor-group-container>.title .title-actions .action-label {
height: 20px;
line-height: 20px;
min-width: 14px;
background-size: 8px;
}
.tabs-and-actions-container > .editor-actions > .monaco-toolbar > .monaco-action-bar > .actions-container {
max-width:60px;
flex-wrap:wrap;
}
STEP 3: Point the extension to your custom CSS. Open the VSCode settings.json [Ctrl+Shift+P > "Open Settings(JSON)"] and add the following lines (with your path to custom.css file):
"vscode_custom_css.imports": [
"file:///home/user/vscode/custom.css"
],
"vscode_custom_css.policy": true
STEP 4: Make sure you have gone through the VSCode Custom CSS extension's readme and enabled it properly. You may have to reload VSCode. Also, edit the CSS as per your preferences!
CREDIT: This solution (link to extension and the CSS to wrap tab-bar into multi-lines) was originally posted by Steven Laidlaw in this Github thread. I just extended the CSS for smaller tabs.
UPDATE: Version 1.53 includes wrap tabs!
The new "Wrap Tabs" setting is a checkbox under File > Preferences > Settings > Workbench > Editor Management.
Alternatively, you can set paste the following into your settings.json: "workbench.editor.wrapTabs": true
Significant progress has been made on this issue Allow tabs to wrap to multi-line and the feature is now in the Insiders' Build (and presumably in v1.53 Stable as it works well in my testing):
As seen in the demo, you can even drag tabs from one row to another. There is currently no limit on the number of rows until the editor itself gets too small.
You enable this functionality with
workbench.editor.wrapTabs: true or
Workbench > Editor: Wrap Tabs in the Settings gui.
A couple of notes from testing tab wrapping:
make sure you have configured workbench.editor.tabSizing: fit (this will make the last tab fill the entire row for a more homogeneous look when tabs wrap) [ed. note: you can still use shrink, it just doesn't look as nice]
if the space for the editor or editor toolbar becomes too small, wrapping turns off automatically and turns on again when the size get's larger
you can still drag and drop tabs around even when they wrap
you can still pin a tab and it shows pinned in the beginning of the tabs
when tabs wrap, the tab.border color is not only applied to the right of each tab but also below to separate tabs from each other
Also, depending on your color theme, consider modifying these settings:
"workbench.colorCustomizations": {
"tab.border": "#fff6",
"titleBar.border": "#fff6",
"editorGroupHeader.tabsBorder": "#647c64",
}
to set off the borders of each tab.
There is some hope for a second row of tabs - albeit with pinned tabs but still sounds pretty useful. See Pinned tabs: show them in a secondary tab row above others. Added to the Backlog.
By the way, pinned tabs are coming to v1.46. More on their functionality: v1.46 release notes: pinned tabs
Since multirow tabs are still not officialy supported in VSCode, I wanted to bring a feature request to your attention that I just posted on their github.
Instead of always wrapping tabs to a new row I propose to have them laid out on rows that are completely independent from each other. The user decides, they can mix short rows with long rows that still require scrolling. See the details here:
github.com/microsoft/vscode/issues/80510
My proposed solution certainly requires more work than unceremoniously wrapping tabs to a new row but in return it lets the user organize their tabs in a way that could increase productivity.
I just played with the vscode developer tools console, and looks like this CSS will be enough to do that if incorporated with an extension:
.tabs-and-actions-container .monaco-scrollable-element {
height: auto;
}
.tabs-and-actions-container .monaco-scrollable-element .tabs-container {
flex-wrap: wrap; flex: 1 1 auto;
height: auto;
}
You can add this code to file:///C:/Users/[username]/AppData/Local/Programs/Microsoft%20VS%20Code/resources/app/out/vs/workbench/workbench.main.css file to use it until your application updates.
Note: When you add this to workbench.main.css file, VSCode will alert that the integrity of VScode is corrupted, ignore that message. VSCode will function as before because it's a CSS change (if any javascript doesn't use some positions of the tabs, or something else).
Otherwise as #Bene said, this is a restricted area by VSCode development team. They say:
Restrictions
There are certain restrictions we impose upon extensions.
Here are the restrictions and their purposes.
No DOM Access
Extensions have no access to the DOM of VS Code UI. You
cannot write an extension that applies custom CSS to VS Code or adds
an HTML element to VS Code UI.
At VS Code, we're continually trying to optimize use of the underlying
web technologies to deliver an always available, highly responsive
editor and we will continue to tune our use of the DOM as these
technologies and our product evolve. To ensure that extensions cannot
interfere with the stability and performance of VS Code, and that we
can continue to improve the DOM of VS Code without breaking existing
extensions, we run extensions in an Extension Host process and prevent
direct access to the DOM.
# https://code.visualstudio.com/api/extension-capabilities/overview#no-dom-access
I have found/developed a solution to display pinned tabs in their own row.. It's an addition to what people might be using already, not the answer to this thread per se.
Original reply on github: https://github.com/microsoft/vscode/issues/98160#issuecomment-989276052
vscode v1.62.3
extension: Custom CSS and JS Loader v6.0.2
settings.json
{
"workbench.editor.wrapTabs": true,
"git.decorations.enabled": false,
"workbench.editor.decorations.badges": false,
"workbench.editor.decorations.colors": false,
"vscode_custom_css.imports": ["file:///C:/temp/VScode/custom.css"],
"vscode_custom_css.policy": true
}
p.s. In config above I also disabled some git stuff from tabs to make them more readable.. not sure if it affects other places, use with caution.
custom.css
.tabs-container {
display: flex !important;
flex-wrap: wrap !important;
height: auto !important;
}
.tabs-container::before,
.tabs-container::after {
content: "" !important;
width: 100% !important;
order: 1 !important;
}
.tab {
display: flex !important;
}
.tab:not(.sticky) {
order: 1 !important;
}
Result (gif):
I commonly have 10+ tabs open per editor window which makes it tedious to scroll back and forth (or use ctrl+tab) to find the file I want.
Is there any way to have the tabs wrap?
Similar to Atom's multirow-tabs.
Update: Looks like it is a work in progress.
UPDATE Feb 2021: In-built support for tabs-wrapping in VSCode v1.53.0+
Just set the workbench.editor.wrapTabs to true in the settings.
I still use my configuration mentioned below to make tabs smaller as per my usage.
UPDATED 28 March 2020 for VSCode v1.43.2
Fixed CSS for tab-close button
Added CSS for smaller bread-crumbs and acion-bar (at the right of tab-bar)
I do the following for multirow tabs in visual-studio-code (until there is official support or an easier solution):
STEP 1: Install the extension VSCode Custom CSS. (Check out the extension page for proper installation instruction. It's a bit of a hack as VSCode does not officially support altering internal CSS.)
STEP 2: Create a CSS file (say, "/home/user/vscode/custom.css") and add the following contents:
/* Following CSS to wrap the tab-bar into multiple rows: */
.tabs-and-actions-container > .monaco-scrollable-element {
height: auto !important;
}
.tabs-and-actions-container > .monaco-scrollable-element > .tabs-container {
height: auto !important;
flex-wrap: wrap;
}
/* Following CSS to make the tabs thinner/smaller (so that they take lesser vertical space): */
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab {
height: 25px;
padding-left: 4px;
font-size: 0.8em; /* smaller font-size for tab icons and label */
}
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .label-name {
font-size: inherit !important; /* inherit updated font-size for label */
}
/* Following CSS for smaller close button on tabs: */
.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close {
width: 20px;
}
.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close .action-label {
height: 12px;
width: 12px;
background-size: 12px;
}
.monaco-workbench .part.editor>.content .editor-group-container.active>.title .tabs-container>.tab>.tab-close .action-label.codicon {
font-size: 12px;
}
/* OPTIONAL: Following CSS for smaller breadcrumbs (below tab-bar) */
.monaco-breadcrumbs {
font-size:0.65em;
opacity: 0.8;
height:18px !important;
}
.tabs-breadcrumbs .breadcrumbs-control {
height: 18px !important;
}
.monaco-workbench .symbol-icon.block {
height: 8px;
width: 8px;
min-height: 8px;
min-width: 14px;
background-position: 50%;
background-size: contain;
}
.breadcrumbs-control .monaco-breadcrumb-item:before {
min-width: 12px !important;
height: 12px !important;
background-size: contain !important;
}
/* OPTIONAL: Following CSS for smaller action-bar (beside the tab-bar) with menu, split, etc. */
.monaco-workbench .part.editor>.content .editor-group-container>.title .editor-actions {
height: 20px;
padding:0;
}
.monaco-workbench .part.editor>.content .editor-group-container>.title .editor-actions .action-label, .monaco-workbench .part.editor>.content .editor-group-container>.title .title-actions .action-label {
height: 20px;
line-height: 20px;
min-width: 14px;
background-size: 8px;
}
.tabs-and-actions-container > .editor-actions > .monaco-toolbar > .monaco-action-bar > .actions-container {
max-width:60px;
flex-wrap:wrap;
}
STEP 3: Point the extension to your custom CSS. Open the VSCode settings.json [Ctrl+Shift+P > "Open Settings(JSON)"] and add the following lines (with your path to custom.css file):
"vscode_custom_css.imports": [
"file:///home/user/vscode/custom.css"
],
"vscode_custom_css.policy": true
STEP 4: Make sure you have gone through the VSCode Custom CSS extension's readme and enabled it properly. You may have to reload VSCode. Also, edit the CSS as per your preferences!
CREDIT: This solution (link to extension and the CSS to wrap tab-bar into multi-lines) was originally posted by Steven Laidlaw in this Github thread. I just extended the CSS for smaller tabs.
UPDATE: Version 1.53 includes wrap tabs!
The new "Wrap Tabs" setting is a checkbox under File > Preferences > Settings > Workbench > Editor Management.
Alternatively, you can set paste the following into your settings.json: "workbench.editor.wrapTabs": true
Significant progress has been made on this issue Allow tabs to wrap to multi-line and the feature is now in the Insiders' Build (and presumably in v1.53 Stable as it works well in my testing):
As seen in the demo, you can even drag tabs from one row to another. There is currently no limit on the number of rows until the editor itself gets too small.
You enable this functionality with
workbench.editor.wrapTabs: true or
Workbench > Editor: Wrap Tabs in the Settings gui.
A couple of notes from testing tab wrapping:
make sure you have configured workbench.editor.tabSizing: fit (this will make the last tab fill the entire row for a more homogeneous look when tabs wrap) [ed. note: you can still use shrink, it just doesn't look as nice]
if the space for the editor or editor toolbar becomes too small, wrapping turns off automatically and turns on again when the size get's larger
you can still drag and drop tabs around even when they wrap
you can still pin a tab and it shows pinned in the beginning of the tabs
when tabs wrap, the tab.border color is not only applied to the right of each tab but also below to separate tabs from each other
Also, depending on your color theme, consider modifying these settings:
"workbench.colorCustomizations": {
"tab.border": "#fff6",
"titleBar.border": "#fff6",
"editorGroupHeader.tabsBorder": "#647c64",
}
to set off the borders of each tab.
There is some hope for a second row of tabs - albeit with pinned tabs but still sounds pretty useful. See Pinned tabs: show them in a secondary tab row above others. Added to the Backlog.
By the way, pinned tabs are coming to v1.46. More on their functionality: v1.46 release notes: pinned tabs
Since multirow tabs are still not officialy supported in VSCode, I wanted to bring a feature request to your attention that I just posted on their github.
Instead of always wrapping tabs to a new row I propose to have them laid out on rows that are completely independent from each other. The user decides, they can mix short rows with long rows that still require scrolling. See the details here:
github.com/microsoft/vscode/issues/80510
My proposed solution certainly requires more work than unceremoniously wrapping tabs to a new row but in return it lets the user organize their tabs in a way that could increase productivity.
I just played with the vscode developer tools console, and looks like this CSS will be enough to do that if incorporated with an extension:
.tabs-and-actions-container .monaco-scrollable-element {
height: auto;
}
.tabs-and-actions-container .monaco-scrollable-element .tabs-container {
flex-wrap: wrap; flex: 1 1 auto;
height: auto;
}
You can add this code to file:///C:/Users/[username]/AppData/Local/Programs/Microsoft%20VS%20Code/resources/app/out/vs/workbench/workbench.main.css file to use it until your application updates.
Note: When you add this to workbench.main.css file, VSCode will alert that the integrity of VScode is corrupted, ignore that message. VSCode will function as before because it's a CSS change (if any javascript doesn't use some positions of the tabs, or something else).
Otherwise as #Bene said, this is a restricted area by VSCode development team. They say:
Restrictions
There are certain restrictions we impose upon extensions.
Here are the restrictions and their purposes.
No DOM Access
Extensions have no access to the DOM of VS Code UI. You
cannot write an extension that applies custom CSS to VS Code or adds
an HTML element to VS Code UI.
At VS Code, we're continually trying to optimize use of the underlying
web technologies to deliver an always available, highly responsive
editor and we will continue to tune our use of the DOM as these
technologies and our product evolve. To ensure that extensions cannot
interfere with the stability and performance of VS Code, and that we
can continue to improve the DOM of VS Code without breaking existing
extensions, we run extensions in an Extension Host process and prevent
direct access to the DOM.
# https://code.visualstudio.com/api/extension-capabilities/overview#no-dom-access
I have found/developed a solution to display pinned tabs in their own row.. It's an addition to what people might be using already, not the answer to this thread per se.
Original reply on github: https://github.com/microsoft/vscode/issues/98160#issuecomment-989276052
vscode v1.62.3
extension: Custom CSS and JS Loader v6.0.2
settings.json
{
"workbench.editor.wrapTabs": true,
"git.decorations.enabled": false,
"workbench.editor.decorations.badges": false,
"workbench.editor.decorations.colors": false,
"vscode_custom_css.imports": ["file:///C:/temp/VScode/custom.css"],
"vscode_custom_css.policy": true
}
p.s. In config above I also disabled some git stuff from tabs to make them more readable.. not sure if it affects other places, use with caution.
custom.css
.tabs-container {
display: flex !important;
flex-wrap: wrap !important;
height: auto !important;
}
.tabs-container::before,
.tabs-container::after {
content: "" !important;
width: 100% !important;
order: 1 !important;
}
.tab {
display: flex !important;
}
.tab:not(.sticky) {
order: 1 !important;
}
Result (gif):