Skip to content

Commit 09f6753

Browse files
authored
Move some keybinding editor colours to CSS (microsoft#165537)
Ref microsoft#165169
1 parent ed71512 commit 09f6753

File tree

2 files changed

+28
-37
lines changed

2 files changed

+28
-37
lines changed

src/vs/workbench/contrib/preferences/browser/keybindingsEditor.ts

Lines changed: 3 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import { IListContextMenuEvent } from 'vs/base/browser/ui/list/list';
2929
import { IThemeService, registerThemingParticipant, IColorTheme, ICssStyleCollector, ThemeIcon } from 'vs/platform/theme/common/themeService';
3030
import { IContextKeyService, IContextKey, ContextKeyExpr } from 'vs/platform/contextkey/common/contextkey';
3131
import { KeyCode } from 'vs/base/common/keyCodes';
32-
import { listHighlightForeground, badgeBackground, contrastBorder, badgeForeground, listActiveSelectionForeground, listInactiveSelectionForeground, listHoverForeground, listFocusForeground, editorBackground, foreground, listActiveSelectionBackground, listInactiveSelectionBackground, listFocusBackground, listHoverBackground, registerColor, tableOddRowsBackgroundColor } from 'vs/platform/theme/common/colorRegistry';
32+
import { badgeBackground, contrastBorder, badgeForeground, listActiveSelectionForeground, listInactiveSelectionForeground, listHoverForeground, listFocusForeground, editorBackground, foreground, listActiveSelectionBackground, listInactiveSelectionBackground, listFocusBackground, listHoverBackground, registerColor, tableOddRowsBackgroundColor } from 'vs/platform/theme/common/colorRegistry';
3333
import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
3434
import { EditorExtensionsRegistry } from 'vs/editor/browser/editorExtensions';
3535
import { WorkbenchTable } from 'vs/platform/list/browser/listService';
@@ -1140,26 +1140,12 @@ class AccessibilityProvider implements IListAccessibilityProvider<IKeybindingIte
11401140
ariaLabel += ', ' + keybindingItemEntry.keybindingItem.when ? keybindingItemEntry.keybindingItem.when : localize('noWhen', "No when context.");
11411141
return ariaLabel;
11421142
}
1143-
11441143
}
11451144

1146-
const keybindingTableHeader = registerColor('keybindingTable.headerBackground', { dark: tableOddRowsBackgroundColor, light: tableOddRowsBackgroundColor, hcDark: tableOddRowsBackgroundColor, hcLight: tableOddRowsBackgroundColor }, 'Background color for the keyboard shortcuts table header.');
1147-
const keybindingTableRows = registerColor('keybindingTable.rowsBackground', { light: tableOddRowsBackgroundColor, dark: tableOddRowsBackgroundColor, hcDark: tableOddRowsBackgroundColor, hcLight: tableOddRowsBackgroundColor }, 'Background color for the keyboard shortcuts table alternating rows.');
1145+
registerColor('keybindingTable.headerBackground', { dark: tableOddRowsBackgroundColor, light: tableOddRowsBackgroundColor, hcDark: tableOddRowsBackgroundColor, hcLight: tableOddRowsBackgroundColor }, 'Background color for the keyboard shortcuts table header.');
1146+
registerColor('keybindingTable.rowsBackground', { light: tableOddRowsBackgroundColor, dark: tableOddRowsBackgroundColor, hcDark: tableOddRowsBackgroundColor, hcLight: tableOddRowsBackgroundColor }, 'Background color for the keyboard shortcuts table alternating rows.');
11481147

11491148
registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
1150-
1151-
const tableHeader = theme.getColor(keybindingTableHeader);
1152-
if (tableHeader) {
1153-
collector.addRule(`.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table .monaco-table-th { background-color: ${tableHeader}; }`);
1154-
}
1155-
1156-
const tableRows = theme.getColor(keybindingTableRows);
1157-
if (tableRows) {
1158-
collector.addRule(`.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table .monaco-list-row[data-parity=odd]:not(.focused):not(.selected):not(:hover) .monaco-table-tr { background-color: ${tableRows}; }`);
1159-
collector.addRule(`.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table .monaco-list:not(:focus) .monaco-list-row[data-parity=odd].focused:not(.selected):not(:hover) .monaco-table-tr { background-color: ${tableRows}; }`);
1160-
collector.addRule(`.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table .monaco-list:not(.focused) .monaco-list-row[data-parity=odd].focused:not(.selected):not(:hover) .monaco-table-tr { background-color: ${tableRows}; }`);
1161-
}
1162-
11631149
const foregroundColor = theme.getColor(foreground);
11641150
if (foregroundColor) {
11651151
const whenForegroundColor = foregroundColor.transparent(.8).makeOpaque(WORKBENCH_BACKGROUND(theme));
@@ -1193,24 +1179,4 @@ registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) =
11931179
const whenForegroundColor = listHoverForegroundColor.transparent(.8).makeOpaque(listHoverBackgroundColor);
11941180
collector.addRule(`.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table.focused .monaco-list-row:hover:not(.focused):not(.selected) .monaco-table-tr .monaco-table-td .code { color: ${whenForegroundColor}; }`);
11951181
}
1196-
1197-
const listHighlightForegroundColor = theme.getColor(listHighlightForeground);
1198-
if (listHighlightForegroundColor) {
1199-
collector.addRule(`.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table .monaco-table-tr .monaco-table-td .highlight { color: ${listHighlightForegroundColor}; }`);
1200-
}
1201-
1202-
if (listActiveSelectionForegroundColor) {
1203-
collector.addRule(`.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table.focused .monaco-list-row.selected.focused .monaco-table-tr .monaco-table-td .monaco-keybinding-key { color: ${listActiveSelectionForegroundColor}; }`);
1204-
collector.addRule(`.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table.focused .monaco-list-row.selected .monaco-table-tr .monaco-table-td .monaco-keybinding-key { color: ${listActiveSelectionForegroundColor}; }`);
1205-
}
1206-
const listInactiveFocusAndSelectionForegroundColor = theme.getColor(listInactiveSelectionForeground);
1207-
if (listInactiveFocusAndSelectionForegroundColor) {
1208-
collector.addRule(`.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table .monaco-list-row.selected .monaco-table-tr .monaco-table-td .monaco-keybinding-key { color: ${listInactiveFocusAndSelectionForegroundColor}; }`);
1209-
}
1210-
if (listHoverForegroundColor) {
1211-
collector.addRule(`.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table .monaco-list-row:hover:not(.selected):not(.focused) .monaco-table-tr .monaco-table-td .monaco-keybinding-key { color: ${listHoverForegroundColor}; }`);
1212-
}
1213-
if (listFocusForegroundColor) {
1214-
collector.addRule(`.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table .monaco-list-row.focused .monaco-table-tr .monaco-table-td .monaco-keybinding-key { color: ${listFocusForegroundColor}; }`);
1215-
}
12161182
});

src/vs/workbench/contrib/preferences/browser/media/keybindingsEditor.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,13 +192,38 @@
192192

193193
.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table-tr .monaco-table-td .highlight {
194194
font-weight: bold;
195+
color: var(--vscode-list-highlightForeground);
195196
}
196197

197198
.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table.focused .monaco-list-row.selected .monaco-table-td .highlight,
198199
.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table.focused .monaco-list-row.selected.focused .monaco-table-td .highlight {
199200
color: inherit;
200201
}
201202

203+
.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table .monaco-list-row.selected .monaco-table-tr .monaco-table-td .monaco-keybinding-key,
204+
.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table .monaco-list-row.selected.focused .monaco-table-tr .monaco-table-td .monaco-keybinding-key {
205+
color: var(--vscode-list-inactiveSelectionForeground);
206+
}
207+
.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table .monaco-list-row.focused .monaco-table-tr .monaco-table-td .monaco-keybinding-key {
208+
color: var(--vscode-list-focusForeground);
209+
}
210+
.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table.focused .monaco-list-row.selected .monaco-table-tr .monaco-table-td .monaco-keybinding-key {
211+
color: var(--vscode-list-activeSelectionForeground);
212+
}
213+
.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table .monaco-list-row:hover:not(.selected):not(.focused) .monaco-table-tr .monaco-table-td .monaco-keybinding-key {
214+
color: var(--vscode-list-hoverForeground);
215+
}
216+
217+
.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table .monaco-list-row[data-parity=odd]:not(.focused):not(.selected):not(:hover) .monaco-table-tr,
218+
.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table .monaco-list:not(:focus) .monaco-list-row[data-parity=odd].focused:not(.selected):not(:hover) .monaco-table-tr,
219+
.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table .monaco-list:not(.focused) .monaco-list-row[data-parity=odd].focused:not(.selected):not(:hover) .monaco-table-tr {
220+
background-color: var(--vscode-keybindingTable-rowsBackground);
221+
}
222+
223+
.keybindings-editor > .keybindings-body > .keybindings-table-container .monaco-table-th {
224+
background-color: var(--vscode-keybindingTable-headerBackground);
225+
}
226+
202227
.keybindings-editor .monaco-table-th,
203228
.keybindings-editor .monaco-table-td {
204229
padding-left: 10px;

0 commit comments

Comments
 (0)