Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-07-13 23:44:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Implement indent guide colorization options.

Browse Source
This commit is contained in:
Malte Werschy
2023-03-23 08:19:21 +01:00
parent 4b9463abbe
commit 439f7e5bcc
6 changed files with 76 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
build/lib/stylelint/vscode-known-variables.json
+12 -2
View File
@@ -203,8 +203,18 @@
"--vscode-editorHoverWidget-foreground",
"--vscode-editorHoverWidget-highlightForeground",
"--vscode-editorHoverWidget-statusBarBackground",
"--vscode-editorIndentGuide-activeBackground",
"--vscode-editorIndentGuide-background",
"--vscode-editorIndentGuide-activeBackground1",
"--vscode-editorIndentGuide-activeBackground2",
"--vscode-editorIndentGuide-activeBackground3",
"--vscode-editorIndentGuide-activeBackground4",
"--vscode-editorIndentGuide-activeBackground5",
"--vscode-editorIndentGuide-activeBackground6",
"--vscode-editorIndentGuide-background1",
"--vscode-editorIndentGuide-background2",
"--vscode-editorIndentGuide-background3",
"--vscode-editorIndentGuide-background4",
"--vscode-editorIndentGuide-background5",
"--vscode-editorIndentGuide-background6",
"--vscode-editorInfo-background",
"--vscode-editorInfo-border",
"--vscode-editorInfo-foreground",
src/vs/editor/browser/viewParts/indentGuides/indentGuides.css
-8
View File
@@ -7,11 +7,3 @@
position: absolute;
box-sizing: border-box;
}
.monaco-editor .lines-content .core-guide-indent {
box-shadow: 1px 0 0 0 var(--vscode-editorIndentGuide-background) inset;
}
.monaco-editor .lines-content .core-guide-indent-active {
box-shadow: 1px 0 0 0 var(--vscode-editorIndentGuide-activeBackground, --vscode-editorIndentGuide-background) inset;
}
src/vs/editor/browser/viewParts/indentGuides/indentGuides.ts
+39 -2
View File
@@ -5,7 +5,7 @@
import 'vs/css!./indentGuides';
import { DynamicViewOverlay } from 'vs/editor/browser/view/dynamicViewOverlay';
import { editorBracketHighlightingForeground1, editorBracketHighlightingForeground2, editorBracketHighlightingForeground3, editorBracketHighlightingForeground4, editorBracketHighlightingForeground5, editorBracketHighlightingForeground6, editorBracketPairGuideActiveBackground1, editorBracketPairGuideActiveBackground2, editorBracketPairGuideActiveBackground3, editorBracketPairGuideActiveBackground4, editorBracketPairGuideActiveBackground5, editorBracketPairGuideActiveBackground6, editorBracketPairGuideBackground1, editorBracketPairGuideBackground2, editorBracketPairGuideBackground3, editorBracketPairGuideBackground4, editorBracketPairGuideBackground5, editorBracketPairGuideBackground6 } from 'vs/editor/common/core/editorColorRegistry';
import { editorBracketHighlightingForeground1, editorBracketHighlightingForeground2, editorBracketHighlightingForeground3, editorBracketHighlightingForeground4, editorBracketHighlightingForeground5, editorBracketHighlightingForeground6, editorBracketPairGuideActiveBackground1, editorBracketPairGuideActiveBackground2, editorBracketPairGuideActiveBackground3, editorBracketPairGuideActiveBackground4, editorBracketPairGuideActiveBackground5, editorBracketPairGuideActiveBackground6, editorBracketPairGuideBackground1, editorBracketPairGuideBackground2, editorBracketPairGuideBackground3, editorBracketPairGuideBackground4, editorBracketPairGuideBackground5, editorBracketPairGuideBackground6, editorIndentGuide1, editorIndentGuide2, editorIndentGuide3, editorIndentGuide4, editorIndentGuide5, editorIndentGuide6, editorActiveIndentGuide1, editorActiveIndentGuide2, editorActiveIndentGuide3, editorActiveIndentGuide4, editorActiveIndentGuide5, editorActiveIndentGuide6 } from 'vs/editor/common/core/editorColorRegistry';
import { RenderingContext } from 'vs/editor/browser/view/renderingContext';
import { ViewContext } from 'vs/editor/common/viewModel/viewContext';
import * as viewEvents from 'vs/editor/common/viewEvents';
@@ -224,7 +224,7 @@ export class IndentGuidesOverlay extends DynamicViewOverlay {
new IndentGuide(
indentGuide,
-1,
isActive ? 'core-guide-indent-active' : 'core-guide-indent',
`core-guide-indent lvl-${(indentLvl - 1) % 30}` + (isActive ? ' indent-active' : ''),
null,
-1,
-1,
@@ -270,6 +270,14 @@ registerThemingParticipant((theme, collector) => {
];
const colorProvider = new BracketPairGuidesClassNames();
const indentColors = [
{ indentColor: editorIndentGuide1, indentColorActive: editorActiveIndentGuide1 },
{ indentColor: editorIndentGuide2, indentColorActive: editorActiveIndentGuide2 },
{ indentColor: editorIndentGuide3, indentColorActive: editorActiveIndentGuide3 },
{ indentColor: editorIndentGuide4, indentColorActive: editorActiveIndentGuide4 },
{ indentColor: editorIndentGuide5, indentColorActive: editorActiveIndentGuide5 },
{ indentColor: editorIndentGuide6, indentColorActive: editorActiveIndentGuide6 },
];
const colorValues = colors
.map(c => {
@@ -291,6 +299,25 @@ registerThemingParticipant((theme, collector) => {
})
.filter(isDefined);
const indentColorValues = indentColors
.map(c => {
const indentColor = theme.getColor(c.indentColor);
const indentColorActive = theme.getColor(c.indentColorActive);
const effectiveIndentColor = transparentToUndefined(indentColor);
const effectiveIndentColorActive = transparentToUndefined(indentColorActive);
if (!effectiveIndentColor || !effectiveIndentColorActive) {
return undefined;
}
return {
indentColor: effectiveIndentColor,
indentColorActive: effectiveIndentColorActive,
};
})
.filter(isDefined);
if (colorValues.length > 0) {
for (let level = 0; level < 30; level++) {
const colors = colorValues[level % colorValues.length];
@@ -305,4 +332,14 @@ registerThemingParticipant((theme, collector) => {
collector.addRule(`.monaco-editor .horizontal-top.${colorProvider.activeClassName} { border-top: 1px solid var(--guide-color-active); }`);
collector.addRule(`.monaco-editor .horizontal-bottom.${colorProvider.activeClassName} { border-bottom: 1px solid var(--guide-color-active); }`);
}
if (indentColorValues.length > 0) {
for (let level = 0; level < 30; level++) {
const colors = indentColorValues[level % indentColorValues.length];
collector.addRule(`.monaco-editor .lines-content .core-guide-indent.lvl-${level} { --indent-color: ${colors.indentColor}; --indent-color-active: ${colors.indentColorActive}; }`);
}
collector.addRule(`.monaco-editor .lines-content .core-guide-indent { box-shadow: 1px 0 0 0 var(--indent-color) inset; }`);
collector.addRule(`.monaco-editor .lines-content .core-guide-indent.indent-active { box-shadow: 1px 0 0 0 var(--indent-color-active) inset; }`);
}
});
src/vs/editor/common/core/editorColorRegistry.ts
+14 -2
View File
@@ -21,10 +21,22 @@ export const editorSymbolHighlightBorder = registerColor('editor.symbolHighlight
export const editorCursorForeground = registerColor('editorCursor.foreground', { dark: '#AEAFAD', light: Color.black, hcDark: Color.white, hcLight: '#0F4A85' }, nls.localize('caret', 'Color of the editor cursor.'));
export const editorCursorBackground = registerColor('editorCursor.background', null, nls.localize('editorCursorBackground', 'The background color of the editor cursor. Allows customizing the color of a character overlapped by a block cursor.'));
export const editorWhitespaces = registerColor('editorWhitespace.foreground', { dark: '#e3e4e229', light: '#33333333', hcDark: '#e3e4e229', hcLight: '#CCCCCC' }, nls.localize('editorWhitespaces', 'Color of whitespace characters in the editor.'));
export const editorIndentGuides = registerColor('editorIndentGuide.background', { dark: editorWhitespaces, light: editorWhitespaces, hcDark: editorWhitespaces, hcLight: editorWhitespaces }, nls.localize('editorIndentGuides', 'Color of the editor indentation guides.'));
export const editorActiveIndentGuides = registerColor('editorIndentGuide.activeBackground', { dark: editorWhitespaces, light: editorWhitespaces, hcDark: editorWhitespaces, hcLight: editorWhitespaces }, nls.localize('editorActiveIndentGuide', 'Color of the active editor indentation guides.'));
export const editorLineNumbers = registerColor('editorLineNumber.foreground', { dark: '#858585', light: '#237893', hcDark: Color.white, hcLight: '#292929' }, nls.localize('editorLineNumbers', 'Color of editor line numbers.'));
export const editorIndentGuide1 = registerColor('editorIndentGuide.background1', { dark: editorWhitespaces, light: editorWhitespaces, hcDark: editorWhitespaces, hcLight: editorWhitespaces }, nls.localize('editorIndentGuides1', 'Color of the editor indentation guides (1).'));
export const editorIndentGuide2 = registerColor('editorIndentGuide.background2', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorIndentGuides2', 'Color of the editor indentation guides (2).'));
export const editorIndentGuide3 = registerColor('editorIndentGuide.background3', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorIndentGuides3', 'Color of the editor indentation guides (3).'));
export const editorIndentGuide4 = registerColor('editorIndentGuide.background4', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorIndentGuides4', 'Color of the editor indentation guides (4).'));
export const editorIndentGuide5 = registerColor('editorIndentGuide.background5', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorIndentGuides5', 'Color of the editor indentation guides (5).'));
export const editorIndentGuide6 = registerColor('editorIndentGuide.background6', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorIndentGuides6', 'Color of the editor indentation guides (6).'));
export const editorActiveIndentGuide1 = registerColor('editorIndentGuide.activeBackground1', { dark: editorWhitespaces, light: editorWhitespaces, hcDark: editorWhitespaces, hcLight: editorWhitespaces }, nls.localize('editorActiveIndentGuide1', 'Color of the active editor indentation guides (1).'));
export const editorActiveIndentGuide2 = registerColor('editorIndentGuide.activeBackground2', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorActiveIndentGuide2', 'Color of the active editor indentation guides (2).'));
export const editorActiveIndentGuide3 = registerColor('editorIndentGuide.activeBackground3', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorActiveIndentGuide3', 'Color of the active editor indentation guides (3).'));
export const editorActiveIndentGuide4 = registerColor('editorIndentGuide.activeBackground4', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorActiveIndentGuide4', 'Color of the active editor indentation guides (4).'));
export const editorActiveIndentGuide5 = registerColor('editorIndentGuide.activeBackground5', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorActiveIndentGuide5', 'Color of the active editor indentation guides (5).'));
export const editorActiveIndentGuide6 = registerColor('editorIndentGuide.activeBackground6', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorActiveIndentGuide6', 'Color of the active editor indentation guides (6).'));
const deprecatedEditorActiveLineNumber = registerColor('editorActiveLineNumber.foreground', { dark: '#c6c6c6', light: '#0B216F', hcDark: activeContrastBorder, hcLight: activeContrastBorder }, nls.localize('editorActiveLineNumber', 'Color of editor active line number'), false, nls.localize('deprecatedEditorActiveLineNumber', 'Id is deprecated. Use \'editorLineNumber.activeForeground\' instead.'));
export const editorActiveLineNumber = registerColor('editorLineNumber.activeForeground', { dark: deprecatedEditorActiveLineNumber, light: deprecatedEditorActiveLineNumber, hcDark: deprecatedEditorActiveLineNumber, hcLight: deprecatedEditorActiveLineNumber }, nls.localize('editorActiveLineNumber', 'Color of editor active line number'));
export const editorDimmedLineNumber = registerColor('editorLineNumber.dimmedForeground', { dark: null, light: null, hcDark: null, hcLight: null }, nls.localize('editorDimmedLineNumber', 'Color of the final editor line when editor.renderFinalNewline is set to dimmed.'));
src/vs/editor/standalone/common/themes.ts
+9 -9
View File
@@ -3,7 +3,7 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { editorActiveIndentGuides, editorIndentGuides } from 'vs/editor/common/core/editorColorRegistry';
import { editorActiveIndentGuide1, editorIndentGuide1 } from 'vs/editor/common/core/editorColorRegistry';
import { IStandaloneThemeData } from 'vs/editor/standalone/common/standaloneTheme';
import { editorBackground, editorForeground, editorInactiveSelection, editorSelectionHighlight } from 'vs/platform/theme/common/colorRegistry';
@@ -71,8 +71,8 @@ export const vs: IStandaloneThemeData = {
[editorBackground]: '#FFFFFE',
[editorForeground]: '#000000',
[editorInactiveSelection]: '#E5EBF1',
[editorIndentGuides]: '#D3D3D3',
[editorActiveIndentGuides]: '#939393',
[editorIndentGuide1]: '#D3D3D3',
[editorActiveIndentGuide1]: '#939393',
[editorSelectionHighlight]: '#ADD6FF4D'
}
};
@@ -142,8 +142,8 @@ export const vs_dark: IStandaloneThemeData = {
[editorBackground]: '#1E1E1E',
[editorForeground]: '#D4D4D4',
[editorInactiveSelection]: '#3A3D41',
[editorIndentGuides]: '#404040',
[editorActiveIndentGuides]: '#707070',
[editorIndentGuide1]: '#404040',
[editorActiveIndentGuide1]: '#707070',
[editorSelectionHighlight]: '#ADD6FF26'
}
};
@@ -204,8 +204,8 @@ export const hc_black: IStandaloneThemeData = {
colors: {
[editorBackground]: '#000000',
[editorForeground]: '#FFFFFF',
[editorIndentGuides]: '#FFFFFF',
[editorActiveIndentGuides]: '#FFFFFF',
[editorIndentGuide1]: '#FFFFFF',
[editorActiveIndentGuide1]: '#FFFFFF',
}
};
/* -------------------------------- End hc-black theme -------------------------------- */
@@ -263,8 +263,8 @@ export const hc_light: IStandaloneThemeData = {
colors: {
[editorBackground]: '#FFFFFF',
[editorForeground]: '#292929',
[editorIndentGuides]: '#292929',
[editorActiveIndentGuides]: '#292929',
[editorIndentGuide1]: '#292929',
[editorActiveIndentGuide1]: '#292929',
}
};
/* -------------------------------- End hc-light theme -------------------------------- */
src/vs/workbench/services/themes/common/themeCompatibility.ts
+2 -2
View File
@@ -64,8 +64,8 @@ addSettingMapping('lineHighlight', editorColorRegistry.editorLineHighlight);
addSettingMapping('rangeHighlight', editorColorRegistry.editorRangeHighlight);
addSettingMapping('caret', editorColorRegistry.editorCursorForeground);
addSettingMapping('invisibles', editorColorRegistry.editorWhitespaces);
addSettingMapping('guide', editorColorRegistry.editorIndentGuides);
addSettingMapping('activeGuide', editorColorRegistry.editorActiveIndentGuides);
addSettingMapping('guide', editorColorRegistry.editorIndentGuide1);
addSettingMapping('activeGuide', editorColorRegistry.editorActiveIndentGuide1);
const ansiColorMap = ['ansiBlack', 'ansiRed', 'ansiGreen', 'ansiYellow', 'ansiBlue', 'ansiMagenta', 'ansiCyan', 'ansiWhite',
'ansiBrightBlack', 'ansiBrightRed', 'ansiBrightGreen', 'ansiBrightYellow', 'ansiBrightBlue', 'ansiBrightMagenta', 'ansiBrightCyan', 'ansiBrightWhite'