Skip to content

Commit fcf61ee

Browse files
author
Benjamin Pasero
committed
themes - add more tab styling options (microsoft#52862)
1 parent 898c012 commit fcf61ee

3 files changed

Lines changed: 132 additions & 77 deletions

File tree

‎src/vs/workbench/browser/parts/editor/media/editordroptarget.css‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,9 @@
1717
left: 0;
1818
width: 100%;
1919
height: 100%;
20-
2120
pointer-events: none; /* very important to not take events away from the parent */
22-
2321
opacity: 0; /* hidden initially */
2422
transition: opacity 150ms ease-out;
25-
/* color: red; */
2623
}
2724

2825
#monaco-workbench-editor-drop-overlay > .editor-group-overlay-indicator.overlay-move-transition {

‎src/vs/workbench/browser/parts/editor/tabsTitleControl.ts‎

Lines changed: 53 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import { ScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElemen
2525
import { ScrollbarVisibility } from 'vs/base/common/scrollable';
2626
import { getOrSet } from 'vs/base/common/map';
2727
import { IThemeService, registerThemingParticipant, IColorTheme, ICssStyleCollector, HIGH_CONTRAST } from 'vs/platform/theme/common/themeService';
28-
import { TAB_INACTIVE_BACKGROUND, TAB_ACTIVE_BACKGROUND, TAB_ACTIVE_FOREGROUND, TAB_INACTIVE_FOREGROUND, TAB_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND, TAB_UNFOCUSED_ACTIVE_FOREGROUND, TAB_UNFOCUSED_INACTIVE_FOREGROUND, TAB_UNFOCUSED_ACTIVE_BACKGROUND, TAB_UNFOCUSED_ACTIVE_BORDER, TAB_ACTIVE_BORDER, TAB_HOVER_BACKGROUND, TAB_HOVER_BORDER, TAB_UNFOCUSED_HOVER_BACKGROUND, TAB_UNFOCUSED_HOVER_BORDER, EDITOR_GROUP_HEADER_TABS_BACKGROUND, WORKBENCH_BACKGROUND, TAB_ACTIVE_BORDER_TOP, TAB_UNFOCUSED_ACTIVE_BORDER_TOP, TAB_ACTIVE_MODIFIED_BORDER, TAB_INACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_ACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_INACTIVE_MODIFIED_BORDER } from 'vs/workbench/common/theme';
28+
import { TAB_INACTIVE_BACKGROUND, TAB_ACTIVE_BACKGROUND, TAB_ACTIVE_FOREGROUND, TAB_INACTIVE_FOREGROUND, TAB_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND, TAB_UNFOCUSED_ACTIVE_FOREGROUND, TAB_UNFOCUSED_INACTIVE_FOREGROUND, TAB_UNFOCUSED_ACTIVE_BACKGROUND, TAB_UNFOCUSED_ACTIVE_BORDER, TAB_ACTIVE_BORDER, TAB_HOVER_BACKGROUND, TAB_HOVER_BORDER, TAB_UNFOCUSED_HOVER_BACKGROUND, TAB_UNFOCUSED_HOVER_BORDER, EDITOR_GROUP_HEADER_TABS_BACKGROUND, WORKBENCH_BACKGROUND, TAB_ACTIVE_BORDER_TOP, TAB_UNFOCUSED_ACTIVE_BORDER_TOP, TAB_ACTIVE_MODIFIED_BORDER, TAB_INACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_ACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_INACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_INACTIVE_BACKGROUND, TAB_HOVER_FOREGROUND, TAB_UNFOCUSED_HOVER_FOREGROUND } from 'vs/workbench/common/theme';
2929
import { activeContrastBorder, contrastBorder, editorBackground, breadcrumbsBackground } from 'vs/platform/theme/common/colorRegistry';
3030
import { ResourcesDropHandler, fillResourceDataTransfers, DraggedEditorIdentifier, DraggedEditorGroupIdentifier, DragAndDropObserver } from 'vs/workbench/browser/dnd';
3131
import { Color } from 'vs/base/common/color';
@@ -1046,7 +1046,7 @@ export class TabsTitleControl extends TitleControl {
10461046
}
10471047

10481048
// Label
1049-
tabLabelWidget.element.style.color = this.getColor(isGroupActive ? TAB_ACTIVE_FOREGROUND : TAB_UNFOCUSED_ACTIVE_FOREGROUND) || '';
1049+
tabContainer.style.color = this.getColor(isGroupActive ? TAB_ACTIVE_FOREGROUND : TAB_UNFOCUSED_ACTIVE_FOREGROUND) || '';
10501050
}
10511051

10521052
// Tab is inactive
@@ -1055,11 +1055,11 @@ export class TabsTitleControl extends TitleControl {
10551055
// Container
10561056
removeClass(tabContainer, 'active');
10571057
tabContainer.setAttribute('aria-selected', 'false');
1058-
tabContainer.style.backgroundColor = this.getColor(TAB_INACTIVE_BACKGROUND) || '';
1058+
tabContainer.style.backgroundColor = this.getColor(isGroupActive ? TAB_INACTIVE_BACKGROUND : TAB_UNFOCUSED_INACTIVE_BACKGROUND) || '';
10591059
tabContainer.style.boxShadow = '';
10601060

10611061
// Label
1062-
tabLabelWidget.element.style.color = this.getColor(isGroupActive ? TAB_INACTIVE_FOREGROUND : TAB_UNFOCUSED_INACTIVE_FOREGROUND) || '';
1062+
tabContainer.style.color = this.getColor(isGroupActive ? TAB_INACTIVE_FOREGROUND : TAB_UNFOCUSED_INACTIVE_FOREGROUND) || '';
10631063
}
10641064
}
10651065

@@ -1287,15 +1287,17 @@ export class TabsTitleControl extends TitleControl {
12871287
}
12881288

12891289
registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
1290+
12901291
// Add border between tabs and breadcrumbs in high contrast mode.
12911292
if (theme.type === HIGH_CONTRAST) {
12921293
const borderColor = (theme.getColor(TAB_BORDER) || theme.getColor(contrastBorder));
12931294
collector.addRule(`
1294-
.monaco-workbench div.tabs-and-actions-container {
1295-
border-bottom: 1px solid ${borderColor};
1296-
}
1295+
.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container {
1296+
border-bottom: 1px solid ${borderColor};
1297+
}
12971298
`);
12981299
}
1300+
12991301
// Styling with Outline color (e.g. high contrast theme)
13001302
const activeContrastBorderColor = theme.getColor(activeContrastBorder);
13011303
if (activeContrastBorderColor) {
@@ -1349,6 +1351,25 @@ registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) =
13491351
`);
13501352
}
13511353

1354+
// Hover Foreground
1355+
const tabHoverForeground = theme.getColor(TAB_HOVER_FOREGROUND);
1356+
if (tabHoverForeground) {
1357+
collector.addRule(`
1358+
.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab:hover {
1359+
color: ${tabHoverForeground} !important;
1360+
}
1361+
`);
1362+
}
1363+
1364+
const tabUnfocusedHoverForeground = theme.getColor(TAB_UNFOCUSED_HOVER_FOREGROUND);
1365+
if (tabUnfocusedHoverForeground) {
1366+
collector.addRule(`
1367+
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:hover {
1368+
color: ${tabUnfocusedHoverForeground} !important;
1369+
}
1370+
`);
1371+
}
1372+
13521373
// Hover Border
13531374
const tabHoverBorder = theme.getColor(TAB_HOVER_BORDER);
13541375
if (tabHoverBorder) {
@@ -1387,13 +1408,13 @@ registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) =
13871408

13881409
// Adjust gradient for focused and unfocused hover background
13891410
const makeTabHoverBackgroundRule = (color: Color, colorDrag: Color, hasFocus = false) => `
1390-
.monaco-workbench .part.editor > .content:not(.dragged-over) .editor-group-container${hasFocus ? '.active' : ''} > .title .tabs-container > .tab.sizing-shrink:not(.dragged):hover > .tab-label::after {
1391-
background: linear-gradient(to left, ${color}, transparent) !important;
1392-
}
1411+
.monaco-workbench .part.editor > .content:not(.dragged-over) .editor-group-container${hasFocus ? '.active' : ''} > .title .tabs-container > .tab.sizing-shrink:not(.dragged):hover > .tab-label::after {
1412+
background: linear-gradient(to left, ${color}, transparent) !important;
1413+
}
13931414
1394-
.monaco-workbench .part.editor > .content.dragged-over .editor-group-container${hasFocus ? '.active' : ''} > .title .tabs-container > .tab.sizing-shrink:not(.dragged):hover > .tab-label::after {
1395-
background: linear-gradient(to left, ${colorDrag}, transparent) !important;
1396-
}
1415+
.monaco-workbench .part.editor > .content.dragged-over .editor-group-container${hasFocus ? '.active' : ''} > .title .tabs-container > .tab.sizing-shrink:not(.dragged):hover > .tab-label::after {
1416+
background: linear-gradient(to left, ${colorDrag}, transparent) !important;
1417+
}
13971418
`;
13981419

13991420
// Adjust gradient for (focused) hover background
@@ -1414,54 +1435,53 @@ registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) =
14141435
if (editorDragAndDropBackground && adjustedTabDragBackground) {
14151436
const adjustedColorDrag = editorDragAndDropBackground.flatten(adjustedTabDragBackground);
14161437
collector.addRule(`
1417-
.monaco-workbench .part.editor > .content.dragged-over .editor-group-container.active > .title .tabs-container > .tab.sizing-shrink.dragged-over:not(.active):not(.dragged) > .tab-label::after,
1418-
.monaco-workbench .part.editor > .content.dragged-over .editor-group-container:not(.active) > .title .tabs-container > .tab.sizing-shrink.dragged-over:not(.dragged) > .tab-label::after {
1419-
background: linear-gradient(to left, ${adjustedColorDrag}, transparent) !important;
1420-
}
1438+
.monaco-workbench .part.editor > .content.dragged-over .editor-group-container.active > .title .tabs-container > .tab.sizing-shrink.dragged-over:not(.active):not(.dragged) > .tab-label::after,
1439+
.monaco-workbench .part.editor > .content.dragged-over .editor-group-container:not(.active) > .title .tabs-container > .tab.sizing-shrink.dragged-over:not(.dragged) > .tab-label::after {
1440+
background: linear-gradient(to left, ${adjustedColorDrag}, transparent) !important;
1441+
}
14211442
`);
14221443
}
14231444

1424-
// Adjust gradient for active tab background (focused and unfocused editor groups)
1425-
const makeTabActiveBackgroundRule = (color: Color, colorDrag: Color, hasFocus = false) => `
1426-
.monaco-workbench .part.editor > .content:not(.dragged-over) .editor-group-container${hasFocus ? '.active' : ':not(.active)'} > .title .tabs-container > .tab.sizing-shrink.active:not(.dragged) > .tab-label::after {
1445+
const makeTabBackgroundRule = (color: Color, colorDrag: Color, focused: boolean, active: boolean) => `
1446+
.monaco-workbench .part.editor > .content:not(.dragged-over) .editor-group-container${focused ? '.active' : ':not(.active)'} > .title .tabs-container > .tab.sizing-shrink${active ? '.active' : ''}:not(.dragged) > .tab-label::after {
14271447
background: linear-gradient(to left, ${color}, transparent);
14281448
}
14291449
1430-
.monaco-workbench .part.editor > .content.dragged-over .editor-group-container${hasFocus ? '.active' : ':not(.active)'} > .title .tabs-container > .tab.sizing-shrink.active:not(.dragged) > .tab-label::after {
1450+
.monaco-workbench .part.editor > .content.dragged-over .editor-group-container${focused ? '.active' : ':not(.active)'} > .title .tabs-container > .tab.sizing-shrink${active ? '.active' : ''}:not(.dragged) > .tab-label::after {
14311451
background: linear-gradient(to left, ${colorDrag}, transparent);
14321452
}
14331453
`;
14341454

1435-
// Adjust gradient for unfocused active tab background
1455+
// Adjust gradient for focused active tab background
14361456
const tabActiveBackground = theme.getColor(TAB_ACTIVE_BACKGROUND);
14371457
if (tabActiveBackground && adjustedTabBackground && adjustedTabDragBackground) {
14381458
const adjustedColor = tabActiveBackground.flatten(adjustedTabBackground);
14391459
const adjustedColorDrag = tabActiveBackground.flatten(adjustedTabDragBackground);
1440-
collector.addRule(makeTabActiveBackgroundRule(adjustedColor, adjustedColorDrag, true));
1460+
collector.addRule(makeTabBackgroundRule(adjustedColor, adjustedColorDrag, true, true));
14411461
}
14421462

14431463
// Adjust gradient for unfocused active tab background
14441464
const tabUnfocusedActiveBackground = theme.getColor(TAB_UNFOCUSED_ACTIVE_BACKGROUND);
14451465
if (tabUnfocusedActiveBackground && adjustedTabBackground && adjustedTabDragBackground) {
14461466
const adjustedColor = tabUnfocusedActiveBackground.flatten(adjustedTabBackground);
14471467
const adjustedColorDrag = tabUnfocusedActiveBackground.flatten(adjustedTabDragBackground);
1448-
collector.addRule(makeTabActiveBackgroundRule(adjustedColor, adjustedColorDrag));
1468+
collector.addRule(makeTabBackgroundRule(adjustedColor, adjustedColorDrag, false, true));
14491469
}
14501470

1451-
// Adjust gradient for inactive tab background
1471+
// Adjust gradient for focused inactive tab background
14521472
const tabInactiveBackground = theme.getColor(TAB_INACTIVE_BACKGROUND);
14531473
if (tabInactiveBackground && adjustedTabBackground && adjustedTabDragBackground) {
14541474
const adjustedColor = tabInactiveBackground.flatten(adjustedTabBackground);
14551475
const adjustedColorDrag = tabInactiveBackground.flatten(adjustedTabDragBackground);
1456-
collector.addRule(`
1457-
.monaco-workbench .part.editor > .content:not(.dragged-over) .editor-group-container > .title .tabs-container > .tab.sizing-shrink:not(.dragged) > .tab-label::after {
1458-
background: linear-gradient(to left, ${adjustedColor}, transparent);
1459-
}
1476+
collector.addRule(makeTabBackgroundRule(adjustedColor, adjustedColorDrag, true, false));
1477+
}
14601478

1461-
.monaco-workbench .part.editor > .content.dragged-over .editor-group-container > .title .tabs-container > .tab.sizing-shrink:not(.dragged) > .tab-label::after {
1462-
background: linear-gradient(to left, ${adjustedColorDrag}, transparent);
1463-
}
1464-
`);
1479+
// Adjust gradient for unfocused inactive tab background
1480+
const tabUnfocusedInactiveBackground = theme.getColor(TAB_UNFOCUSED_INACTIVE_BACKGROUND);
1481+
if (tabUnfocusedInactiveBackground && adjustedTabBackground && adjustedTabDragBackground) {
1482+
const adjustedColor = tabUnfocusedInactiveBackground.flatten(adjustedTabBackground);
1483+
const adjustedColorDrag = tabUnfocusedInactiveBackground.flatten(adjustedTabDragBackground);
1484+
collector.addRule(makeTabBackgroundRule(adjustedColor, adjustedColorDrag, false, false));
14651485
}
14661486
}
14671487
});

0 commit comments

Comments
 (0)