Vihren Atlas

colorUtils.ts ×16

Code frontier

unlabeled · c_1b6566bb1494

875 tests · 10515 LOC · 53 files · introduces 0 tests · 1785 LOC · 15 files

Introduces — evidence that enters the hierarchy at this concept

Code
41 ranges1785 lines · 15 files
Tests
0 tests

Contains — complete concept membership

All code (extent)
1200 ranges10515 lines · 53 files · Browse complete extent
All tests (intent)
875 testsBrowse complete intent

Neighbourhood graph

The orange circle is the focus. Violet and green circles are every ancestor and descendant, broader and narrower, at any distance; blue squares and pink diamonds are the introduced files and exact introduced tests of every visible concept, not only the focus's. Arrows point from broader to narrower concepts and bridge only concepts omitted from this view. Undirected links show source or test introduction. Concept and file size follows LOC; exact test nodes use test-count units.

Introduced files, introduced tests, and structurally relevant concept specialization

In the embedded map, ordinary wheel input scrolls the page; use the visible controls to zoom and drag to pan. Open the full-screen map for canvas navigation: wheel pans, Ctrl/Command plus wheel zooms, and arrow keys pan when this region is focused. On touch screens, open the full-screen map to pan or pinch. If JavaScript or WebGL is unavailable, use the native relationship evidence on this page.

Graph controls are ready.

Interactive rendering requires JavaScript and WebGL. Use the native relationship evidence on this page while the interactive map is unavailable.

Native relationship evidence

Every exact file and test below is linked only from the concept that introduces it.

Introduced tests

Every collected test enters the hierarchy at exactly one concept.

No tests are introduced at this concept. Its intent tests are introduced by other concepts.

Introduced code

Every collected source range enters the hierarchy at exactly one concept.

15 files ranked by introduced lines: 1785 introduced LOC across 41 ranges. Expand a file to inspect source; the > gutter marks introduced lines.

src/vs/platform/theme/common/colors/editorColors.ts 457 introduced LOC · 1 range

Open complete file

1 > /*--------------------------------------------------------------------------------------------- editorColors.ts
2 > * Copyright (c) Microsoft Corporation. All rights reserved.
3 > * Licensed under the MIT License. See License.txt in the project root for license information.
4 > *--------------------------------------------------------------------------------------------*/
5 >
6 > import * as nls from '../../../../nls.js';
7 >
8 > // Import the effects we need
9 > import { Color, RGBA } from '../../../../base/common/color.js';
10 > import { registerColor, transparent, lessProminent, darken, lighten } from '../colorUtils.js';
11 >
12 > // Import the colors we need
13 > import { foreground, contrastBorder, activeContrastBorder } from './baseColors.js';
14 > import { scrollbarShadow, badgeBackground } from './miscColors.js';
15 >
16 >
17 > // ----- editor
18 >
19 > export const editorBackground = registerColor('editor.background',
20 > { light: '#ffffff', dark: '#1E1E1E', hcDark: Color.black, hcLight: Color.white },
21 > nls.localize('editorBackground', "Editor background color."));
22 >
23 > export const editorForeground = registerColor('editor.foreground',
24 > { light: '#333333', dark: '#BBBBBB', hcDark: Color.white, hcLight: foreground },
25 > nls.localize('editorForeground', "Editor default foreground color."));
26 >
27 >
28 > export const editorStickyScrollBackground = registerColor('editorStickyScroll.background',
29 > editorBackground,
30 > nls.localize('editorStickyScrollBackground', "Background color of sticky scroll in the editor"));
31 >
32 > export const editorStickyScrollGutterBackground = registerColor('editorStickyScrollGutter.background',
33 > editorBackground,
34 > nls.localize('editorStickyScrollGutterBackground', "Background color of the gutter part of sticky scroll in the editor"));
35 >
36 > export const editorStickyScrollHoverBackground = registerColor('editorStickyScrollHover.background',
37 > { dark: '#2A2D2E', light: '#F0F0F0', hcDark: null, hcLight: Color.fromHex('#0F4A85').transparent(0.1) },
38 > nls.localize('editorStickyScrollHoverBackground', "Background color of sticky scroll on hover in the editor"));
39 >
40 > export const editorStickyScrollBorder = registerColor('editorStickyScroll.border',
41 > { dark: null, light: null, hcDark: contrastBorder, hcLight: contrastBorder },
42 > nls.localize('editorStickyScrollBorder', "Border color of sticky scroll in the editor"));
43 >
44 > export const editorStickyScrollShadow = registerColor('editorStickyScroll.shadow',
45 > scrollbarShadow,
46 > nls.localize('editorStickyScrollShadow', " Shadow color of sticky scroll in the editor"));
47 >
48 >
49 > export const editorWidgetBackground = registerColor('editorWidget.background',
50 > { dark: '#252526', light: '#F3F3F3', hcDark: '#0C141F', hcLight: Color.white },
51 > nls.localize('editorWidgetBackground', 'Background color of editor widgets, such as find/replace.'));
52 >
53 > export const editorWidgetForeground = registerColor('editorWidget.foreground',
54 > foreground,
55 > nls.localize('editorWidgetForeground', 'Foreground color of editor widgets, such as find/replace.'));
56 >
57 > export const editorWidgetBorder = registerColor('editorWidget.border',
58 > { dark: transparent(editorWidgetForeground, 0.2), light: transparent(editorWidgetForeground, 0.2), hcDark: contrastBorder, hcLight: contrastBorder },
59 > nls.localize('editorWidgetBorder', 'Border color of editor widgets. The color is only used if the widget chooses to have a border and if the color is not overridden by a widget.'));
60 >
61 > export const editorWidgetResizeBorder = registerColor('editorWidget.resizeBorder',
62 > null,
63 > nls.localize('editorWidgetResizeBorder', "Border color of the resize bar of editor widgets. The color is only used if the widget chooses to have a resize border and if the color is not overridden by a widget."));
64 >
65 >
66 > export const editorErrorBackground = registerColor('editorError.background',
67 > null,
68 > nls.localize('editorError.background', 'Background color of error text in the editor. The color must not be opaque so as not to hide underlying decorations.'), true);
69 >
70 > export const editorErrorForeground = registerColor('editorError.foreground',
71 > { dark: '#F14C4C', light: '#E51400', hcDark: '#F48771', hcLight: '#B5200D' },
72 > nls.localize('editorError.foreground', 'Foreground color of error squigglies in the editor.'));
73 >
74 > export const editorErrorBorder = registerColor('editorError.border',
75 > { dark: null, light: null, hcDark: Color.fromHex('#E47777').transparent(0.8), hcLight: '#B5200D' },
76 > nls.localize('errorBorder', 'If set, color of double underlines for errors in the editor.'));
77 >
78 >
79 > export const editorWarningBackground = registerColor('editorWarning.background',
80 > null,
81 > nls.localize('editorWarning.background', 'Background color of warning text in the editor. The color must not be opaque so as not to hide underlying decorations.'), true);
82 >
83 > export const editorWarningForeground = registerColor('editorWarning.foreground',
84 > { dark: '#CCA700', light: '#BF8803', hcDark: '#FFD370', hcLight: '#895503' },
85 > nls.localize('editorWarning.foreground', 'Foreground color of warning squigglies in the editor.'));
86 >
87 > export const editorWarningBorder = registerColor('editorWarning.border',
88 > { dark: null, light: null, hcDark: Color.fromHex('#FFCC00').transparent(0.8), hcLight: Color.fromHex('#FFCC00').transparent(0.8) },
89 > nls.localize('warningBorder', 'If set, color of double underlines for warnings in the editor.'));
90 >
91 >
92 > export const editorInfoBackground = registerColor('editorInfo.background',
93 > null,
94 > nls.localize('editorInfo.background', 'Background color of info text in the editor. The color must not be opaque so as not to hide underlying decorations.'), true);
95 >
96 > export const editorInfoForeground = registerColor('editorInfo.foreground',
97 > { dark: '#59a4f9', light: '#0063d3', hcDark: '#59a4f9', hcLight: '#0063d3' },
98 > nls.localize('editorInfo.foreground', 'Foreground color of info squigglies in the editor.'));
99 >
100 > export const editorInfoBorder = registerColor('editorInfo.border',
101 > { dark: null, light: null, hcDark: Color.fromHex('#59a4f9').transparent(0.8), hcLight: '#292929' },
102 > nls.localize('infoBorder', 'If set, color of double underlines for infos in the editor.'));
103 >
104 >
105 > export const editorHintForeground = registerColor('editorHint.foreground',
106 > { dark: Color.fromHex('#eeeeee').transparent(0.7), light: '#6c6c6c', hcDark: null, hcLight: null },
107 > nls.localize('editorHint.foreground', 'Foreground color of hint squigglies in the editor.'));
108 >
109 > export const editorHintBorder = registerColor('editorHint.border',
110 > { dark: null, light: null, hcDark: Color.fromHex('#eeeeee').transparent(0.8), hcLight: '#292929' },
111 > nls.localize('hintBorder', 'If set, color of double underlines for hints in the editor.'));
112 >
113 >
114 > export const editorActiveLinkForeground = registerColor('editorLink.activeForeground',
115 > { dark: '#4E94CE', light: Color.blue, hcDark: Color.cyan, hcLight: '#292929' },
116 > nls.localize('activeLinkForeground', 'Color of active links.'));
117 >
118 >
119 > // ----- editor selection
120 >
121 > export const editorSelectionBackground = registerColor('editor.selectionBackground',
122 > { light: '#ADD6FF', dark: '#264F78', hcDark: '#f3f518', hcLight: '#0F4A85' },
123 > nls.localize('editorSelectionBackground', "Color of the editor selection."));
124 >
125 > export const editorSelectionForeground = registerColor('editor.selectionForeground',
126 > { light: null, dark: null, hcDark: '#000000', hcLight: Color.white },
127 > nls.localize('editorSelectionForeground', "Color of the selected text for high contrast."));
128 >
129 > export const editorInactiveSelection = registerColor('editor.inactiveSelectionBackground',
130 > { light: transparent(editorSelectionBackground, 0.5), dark: transparent(editorSelectionBackground, 0.5), hcDark: transparent(editorSelectionBackground, 0.7), hcLight: transparent(editorSelectionBackground, 0.5) },
131 > nls.localize('editorInactiveSelection', "Color of the selection in an inactive editor. The color must not be opaque so as not to hide underlying decorations."), true);
132 >
133 > export const editorSelectionHighlight = registerColor('editor.selectionHighlightBackground',
134 > { light: lessProminent(editorSelectionBackground, editorBackground, 0.3, 0.6), dark: lessProminent(editorSelectionBackground, editorBackground, 0.3, 0.6), hcDark: null, hcLight: null },
135 > nls.localize('editorSelectionHighlight', 'Color for regions with the same content as the selection. The color must not be opaque so as not to hide underlying decorations.'), true);
136 >
137 > export const editorSelectionHighlightBorder = registerColor('editor.selectionHighlightBorder',
138 > { light: null, dark: null, hcDark: activeContrastBorder, hcLight: activeContrastBorder },
139 > nls.localize('editorSelectionHighlightBorder', "Border color for regions with the same content as the selection."));
140 >
141 > export const editorCompositionBorder = registerColor('editor.compositionBorder',
142 > { light: '#000000', dark: '#ffffff', hcLight: '#000000', hcDark: '#ffffff' },
143 > nls.localize('editorCompositionBorder', "The border color for an IME composition."));
144 >
145 >
146 > // ----- editor find
147 >
148 > export const editorFindMatch = registerColor('editor.findMatchBackground',
149 > { light: '#A8AC94', dark: '#515C6A', hcDark: null, hcLight: null },
150 > nls.localize('editorFindMatch', "Color of the current search match."));
151 >
152 > export const editorFindMatchForeground = registerColor('editor.findMatchForeground',
153 > null,
154 > nls.localize('editorFindMatchForeground', "Text color of the current search match."));
155 >
156 > export const editorFindMatchHighlight = registerColor('editor.findMatchHighlightBackground',
157 > { light: '#EA5C0055', dark: '#EA5C0055', hcDark: null, hcLight: null },
158 > nls.localize('findMatchHighlight', "Color of the other search matches. The color must not be opaque so as not to hide underlying decorations."), true);
159 >
160 > export const editorFindMatchHighlightForeground = registerColor('editor.findMatchHighlightForeground',
161 > null,
162 > nls.localize('findMatchHighlightForeground', "Foreground color of the other search matches."), true);
163 >
164 > export const editorFindRangeHighlight = registerColor('editor.findRangeHighlightBackground',
165 > { dark: '#3a3d4166', light: '#b4b4b44d', hcDark: null, hcLight: null },
166 > nls.localize('findRangeHighlight', "Color of the range limiting the search. The color must not be opaque so as not to hide underlying decorations."), true);
167 >
168 > export const editorFindMatchBorder = registerColor('editor.findMatchBorder',
169 > { light: null, dark: null, hcDark: activeContrastBorder, hcLight: activeContrastBorder },
170 > nls.localize('editorFindMatchBorder', "Border color of the current search match."));
171 >
172 > export const editorFindMatchHighlightBorder = registerColor('editor.findMatchHighlightBorder',
173 > { light: null, dark: null, hcDark: activeContrastBorder, hcLight: activeContrastBorder },
174 > nls.localize('findMatchHighlightBorder', "Border color of the other search matches."));
175 >
176 > export const editorFindRangeHighlightBorder = registerColor('editor.findRangeHighlightBorder',
177 > { dark: null, light: null, hcDark: transparent(activeContrastBorder, 0.4), hcLight: transparent(activeContrastBorder, 0.4) },
178 > nls.localize('findRangeHighlightBorder', "Border color of the range limiting the search. The color must not be opaque so as not to hide underlying decorations."), true);
179 >
180 >
181 > // ----- editor hover
182 >
183 > export const editorHoverHighlight = registerColor('editor.hoverHighlightBackground',
184 > { light: '#ADD6FF26', dark: '#264f7840', hcDark: '#ADD6FF26', hcLight: null },
185 > nls.localize('hoverHighlight', 'Highlight below the word for which a hover is shown. The color must not be opaque so as not to hide underlying decorations.'), true);
186 >
187 > export const editorHoverBackground = registerColor('editorHoverWidget.background',
188 > editorWidgetBackground,
189 > nls.localize('hoverBackground', 'Background color of the editor hover.'));
190 >
191 > export const editorHoverForeground = registerColor('editorHoverWidget.foreground',
192 > editorWidgetForeground,
193 > nls.localize('hoverForeground', 'Foreground color of the editor hover.'));
194 >
195 > export const editorHoverBorder = registerColor('editorHoverWidget.border',
196 > editorWidgetBorder,
197 > nls.localize('hoverBorder', 'Border color of the editor hover.'));
198 >
199 > export const editorHoverStatusBarBackground = registerColor('editorHoverWidget.statusBarBackground',
200 > { dark: lighten(editorHoverBackground, 0.2), light: darken(editorHoverBackground, 0.05), hcDark: editorWidgetBackground, hcLight: editorWidgetBackground },
201 > nls.localize('statusBarBackground', "Background color of the editor hover status bar."));
202 >
203 >
204 > // ----- editor inlay hint
205 >
206 > export const editorInlayHintForeground = registerColor('editorInlayHint.foreground',
207 > { dark: '#969696', light: '#969696', hcDark: Color.white, hcLight: Color.black },
208 > nls.localize('editorInlayHintForeground', 'Foreground color of inline hints'));
209 >
210 > export const editorInlayHintBackground = registerColor('editorInlayHint.background',
211 > { dark: transparent(badgeBackground, .10), light: transparent(badgeBackground, .10), hcDark: transparent(Color.white, .10), hcLight: transparent(badgeBackground, .10) },
212 > nls.localize('editorInlayHintBackground', 'Background color of inline hints'));
213 >
214 > export const editorInlayHintTypeForeground = registerColor('editorInlayHint.typeForeground',
215 > editorInlayHintForeground,
216 > nls.localize('editorInlayHintForegroundTypes', 'Foreground color of inline hints for types'));
217 >
218 > export const editorInlayHintTypeBackground = registerColor('editorInlayHint.typeBackground',
219 > editorInlayHintBackground,
220 > nls.localize('editorInlayHintBackgroundTypes', 'Background color of inline hints for types'));
221 >
222 > export const editorInlayHintParameterForeground = registerColor('editorInlayHint.parameterForeground',
223 > editorInlayHintForeground,
224 > nls.localize('editorInlayHintForegroundParameter', 'Foreground color of inline hints for parameters'));
225 >
226 > export const editorInlayHintParameterBackground = registerColor('editorInlayHint.parameterBackground',
227 > editorInlayHintBackground,
228 > nls.localize('editorInlayHintBackgroundParameter', 'Background color of inline hints for parameters'));
229 >
230 >
231 > // ----- editor lightbulb
232 >
233 > export const editorLightBulbForeground = registerColor('editorLightBulb.foreground',
234 > { dark: '#FFCC00', light: '#DDB100', hcDark: '#FFCC00', hcLight: '#007ACC' },
235 > nls.localize('editorLightBulbForeground', "The color used for the lightbulb actions icon."));
236 >
237 > export const editorLightBulbAutoFixForeground = registerColor('editorLightBulbAutoFix.foreground',
238 > { dark: '#75BEFF', light: '#007ACC', hcDark: '#75BEFF', hcLight: '#007ACC' },
239 > nls.localize('editorLightBulbAutoFixForeground', "The color used for the lightbulb auto fix actions icon."));
240 >
241 > export const editorLightBulbAiForeground = registerColor('editorLightBulbAi.foreground',
242 > editorLightBulbForeground,
243 > nls.localize('editorLightBulbAiForeground', "The color used for the lightbulb AI icon."));
244 >
245 >
246 > // ----- editor snippet
247 >
248 > export const snippetTabstopHighlightBackground = registerColor('editor.snippetTabstopHighlightBackground',
249 > { dark: new Color(new RGBA(124, 124, 124, 0.3)), light: new Color(new RGBA(10, 50, 100, 0.2)), hcDark: new Color(new RGBA(124, 124, 124, 0.3)), hcLight: new Color(new RGBA(10, 50, 100, 0.2)) },
250 > nls.localize('snippetTabstopHighlightBackground', "Highlight background color of a snippet tabstop."));
251 >
252 > export const snippetTabstopHighlightBorder = registerColor('editor.snippetTabstopHighlightBorder',
253 > null,
254 > nls.localize('snippetTabstopHighlightBorder', "Highlight border color of a snippet tabstop."));
255 >
256 > export const snippetFinalTabstopHighlightBackground = registerColor('editor.snippetFinalTabstopHighlightBackground',
257 > null,
258 > nls.localize('snippetFinalTabstopHighlightBackground', "Highlight background color of the final tabstop of a snippet."));
259 >
260 > export const snippetFinalTabstopHighlightBorder = registerColor('editor.snippetFinalTabstopHighlightBorder',
261 > { dark: '#525252', light: new Color(new RGBA(10, 50, 100, 0.5)), hcDark: '#525252', hcLight: '#292929' },
262 > nls.localize('snippetFinalTabstopHighlightBorder', "Highlight border color of the final tabstop of a snippet."));
263 >
264 >
265 > // ----- diff editor
266 >
267 > export const defaultInsertColor = new Color(new RGBA(155, 185, 85, .2));
268 > export const defaultRemoveColor = new Color(new RGBA(255, 0, 0, .2));
269 >
270 > export const diffInserted = registerColor('diffEditor.insertedTextBackground',
271 > { dark: '#9ccc2c33', light: '#9ccc2c40', hcDark: null, hcLight: null },
272 > nls.localize('diffEditorInserted', 'Background color for text that got inserted. The color must not be opaque so as not to hide underlying decorations.'), true);
273 >
274 > export const diffRemoved = registerColor('diffEditor.removedTextBackground',
275 > { dark: '#ff000033', light: '#ff000033', hcDark: null, hcLight: null },
276 > nls.localize('diffEditorRemoved', 'Background color for text that got removed. The color must not be opaque so as not to hide underlying decorations.'), true);
277 >
278 >
279 > export const diffInsertedLine = registerColor('diffEditor.insertedLineBackground',
280 > { dark: defaultInsertColor, light: defaultInsertColor, hcDark: null, hcLight: null },
281 > nls.localize('diffEditorInsertedLines', 'Background color for lines that got inserted. The color must not be opaque so as not to hide underlying decorations.'), true);
282 >
283 > export const diffRemovedLine = registerColor('diffEditor.removedLineBackground',
284 > { dark: defaultRemoveColor, light: defaultRemoveColor, hcDark: null, hcLight: null },
285 > nls.localize('diffEditorRemovedLines', 'Background color for lines that got removed. The color must not be opaque so as not to hide underlying decorations.'), true);
286 >
287 >
288 > export const diffInsertedLineGutter = registerColor('diffEditorGutter.insertedLineBackground',
289 > null,
290 > nls.localize('diffEditorInsertedLineGutter', 'Background color for the margin where lines got inserted.'));
291 >
292 > export const diffRemovedLineGutter = registerColor('diffEditorGutter.removedLineBackground',
293 > null,
294 > nls.localize('diffEditorRemovedLineGutter', 'Background color for the margin where lines got removed.'));
295 >
296 >
297 > export const diffOverviewRulerInserted = registerColor('diffEditorOverview.insertedForeground',
298 > null,
299 > nls.localize('diffEditorOverviewInserted', 'Diff overview ruler foreground for inserted content.'));
300 >
301 > export const diffOverviewRulerRemoved = registerColor('diffEditorOverview.removedForeground',
302 > null,
303 > nls.localize('diffEditorOverviewRemoved', 'Diff overview ruler foreground for removed content.'));
304 >
305 >
306 > export const diffInsertedOutline = registerColor('diffEditor.insertedTextBorder',
307 > { dark: null, light: null, hcDark: '#33ff2eff', hcLight: '#374E06' },
308 > nls.localize('diffEditorInsertedOutline', 'Outline color for the text that got inserted.'));
309 >
310 > export const diffRemovedOutline = registerColor('diffEditor.removedTextBorder',
311 > { dark: null, light: null, hcDark: '#FF008F', hcLight: '#AD0707' },
312 > nls.localize('diffEditorRemovedOutline', 'Outline color for text that got removed.'));
313 >
314 >
315 > export const diffBorder = registerColor('diffEditor.border',
316 > { dark: null, light: null, hcDark: contrastBorder, hcLight: contrastBorder },
317 > nls.localize('diffEditorBorder', 'Border color between the two text editors.'));
318 >
319 > export const diffDiagonalFill = registerColor('diffEditor.diagonalFill',
320 > { dark: '#cccccc33', light: '#22222233', hcDark: null, hcLight: null },
321 > nls.localize('diffDiagonalFill', "Color of the diff editor's diagonal fill. The diagonal fill is used in side-by-side diff views."));
322 >
323 >
324 > export const diffUnchangedRegionBackground = registerColor('diffEditor.unchangedRegionBackground',
325 > 'sideBar.background',
326 > nls.localize('diffEditor.unchangedRegionBackground', "The background color of unchanged blocks in the diff editor."));
327 >
328 > export const diffUnchangedRegionForeground = registerColor('diffEditor.unchangedRegionForeground',
329 > 'foreground',
330 > nls.localize('diffEditor.unchangedRegionForeground', "The foreground color of unchanged blocks in the diff editor."));
331 >
332 > export const diffUnchangedTextBackground = registerColor('diffEditor.unchangedCodeBackground',
333 > { dark: '#74747429', light: '#b8b8b829', hcDark: null, hcLight: null },
334 > nls.localize('diffEditor.unchangedCodeBackground', "The background color of unchanged code in the diff editor."));
335 >
336 >
337 > // ----- widget
338 >
339 > export const widgetShadow = registerColor('widget.shadow',
340 > { dark: transparent(Color.black, .36), light: transparent(Color.black, .16), hcDark: null, hcLight: null },
341 > nls.localize('widgetShadow', 'Shadow color of widgets such as find/replace inside the editor.'));
342 >
343 > export const widgetBorder = registerColor('widget.border',
344 > { dark: null, light: null, hcDark: contrastBorder, hcLight: contrastBorder },
345 > nls.localize('widgetBorder', 'Border color of widgets such as find/replace inside the editor.'));
346 >
347 >
348 > // ----- toolbar
349 >
350 > export const toolbarHoverBackground = registerColor('toolbar.hoverBackground',
351 > { dark: '#5a5d5e50', light: '#b8b8b850', hcDark: null, hcLight: null },
352 > nls.localize('toolbarHoverBackground', "Toolbar background when hovering over actions using the mouse"));
353 >
354 > export const toolbarHoverOutline = registerColor('toolbar.hoverOutline',
355 > { dark: null, light: null, hcDark: activeContrastBorder, hcLight: activeContrastBorder },
356 > nls.localize('toolbarHoverOutline', "Toolbar outline when hovering over actions using the mouse"));
357 >
358 > export const toolbarActiveBackground = registerColor('toolbar.activeBackground',
359 > { dark: lighten(toolbarHoverBackground, 0.1), light: darken(toolbarHoverBackground, 0.1), hcDark: null, hcLight: null },
360 > nls.localize('toolbarActiveBackground', "Toolbar background when holding the mouse over actions"));
361 >
362 >
363 > // ----- breadcumbs
364 >
365 > export const breadcrumbsForeground = registerColor('breadcrumb.foreground',
366 > transparent(foreground, 0.8),
367 > nls.localize('breadcrumbsFocusForeground', "Color of focused breadcrumb items."));
368 >
369 > export const breadcrumbsBackground = registerColor('breadcrumb.background',
370 > editorBackground,
371 > nls.localize('breadcrumbsBackground', "Background color of breadcrumb items."));
372 >
373 > export const breadcrumbsFocusForeground = registerColor('breadcrumb.focusForeground',
374 > { light: darken(foreground, 0.2), dark: lighten(foreground, 0.1), hcDark: lighten(foreground, 0.1), hcLight: lighten(foreground, 0.1) },
375 > nls.localize('breadcrumbsFocusForeground', "Color of focused breadcrumb items."));
376 >
377 > export const breadcrumbsActiveSelectionForeground = registerColor('breadcrumb.activeSelectionForeground',
378 > { light: darken(foreground, 0.2), dark: lighten(foreground, 0.1), hcDark: lighten(foreground, 0.1), hcLight: lighten(foreground, 0.1) },
379 > nls.localize('breadcrumbsSelectedForeground', "Color of selected breadcrumb items."));
380 >
381 > export const breadcrumbsPickerBackground = registerColor('breadcrumbPicker.background',
382 > editorWidgetBackground,
383 > nls.localize('breadcrumbsSelectedBackground', "Background color of breadcrumb item picker."));
384 >
385 >
386 > // ----- merge
387 >
388 > const headerTransparency = 0.5;
389 > const currentBaseColor = Color.fromHex('#40C8AE').transparent(headerTransparency);
390 > const incomingBaseColor = Color.fromHex('#40A6FF').transparent(headerTransparency);
391 > const commonBaseColor = Color.fromHex('#606060').transparent(0.4);
392 > const contentTransparency = 0.4;
393 > const rulerTransparency = 1;
394 >
395 > export const mergeCurrentHeaderBackground = registerColor('merge.currentHeaderBackground',
396 > { dark: currentBaseColor, light: currentBaseColor, hcDark: null, hcLight: null },
397 > nls.localize('mergeCurrentHeaderBackground', 'Current header background in inline merge-conflicts. The color must not be opaque so as not to hide underlying decorations.'), true);
398 >
399 > export const mergeCurrentContentBackground = registerColor('merge.currentContentBackground',
400 > transparent(mergeCurrentHeaderBackground, contentTransparency),
401 > nls.localize('mergeCurrentContentBackground', 'Current content background in inline merge-conflicts. The color must not be opaque so as not to hide underlying decorations.'), true);
402 >
403 > export const mergeIncomingHeaderBackground = registerColor('merge.incomingHeaderBackground',
404 > { dark: incomingBaseColor, light: incomingBaseColor, hcDark: null, hcLight: null },
405 > nls.localize('mergeIncomingHeaderBackground', 'Incoming header background in inline merge-conflicts. The color must not be opaque so as not to hide underlying decorations.'), true);
406 >
407 > export const mergeIncomingContentBackground = registerColor('merge.incomingContentBackground',
408 > transparent(mergeIncomingHeaderBackground, contentTransparency),
409 > nls.localize('mergeIncomingContentBackground', 'Incoming content background in inline merge-conflicts. The color must not be opaque so as not to hide underlying decorations.'), true);
410 >
411 > export const mergeCommonHeaderBackground = registerColor('merge.commonHeaderBackground',
412 > { dark: commonBaseColor, light: commonBaseColor, hcDark: null, hcLight: null },
413 > nls.localize('mergeCommonHeaderBackground', 'Common ancestor header background in inline merge-conflicts. The color must not be opaque so as not to hide underlying decorations.'), true);
414 >
415 > export const mergeCommonContentBackground = registerColor('merge.commonContentBackground',
416 > transparent(mergeCommonHeaderBackground, contentTransparency),
417 > nls.localize('mergeCommonContentBackground', 'Common ancestor content background in inline merge-conflicts. The color must not be opaque so as not to hide underlying decorations.'), true);
418 >
419 > export const mergeBorder = registerColor('merge.border',
420 > { dark: null, light: null, hcDark: '#C3DF6F', hcLight: '#007ACC' },
421 > nls.localize('mergeBorder', 'Border color on headers and the splitter in inline merge-conflicts.'));
422 >
423 >
424 > export const overviewRulerCurrentContentForeground = registerColor('editorOverviewRuler.currentContentForeground',
425 > { dark: transparent(mergeCurrentHeaderBackground, rulerTransparency), light: transparent(mergeCurrentHeaderBackground, rulerTransparency), hcDark: mergeBorder, hcLight: mergeBorder },
426 > nls.localize('overviewRulerCurrentContentForeground', 'Current overview ruler foreground for inline merge-conflicts.'));
427 >
428 > export const overviewRulerIncomingContentForeground = registerColor('editorOverviewRuler.incomingContentForeground',
429 > { dark: transparent(mergeIncomingHeaderBackground, rulerTransparency), light: transparent(mergeIncomingHeaderBackground, rulerTransparency), hcDark: mergeBorder, hcLight: mergeBorder },
430 > nls.localize('overviewRulerIncomingContentForeground', 'Incoming overview ruler foreground for inline merge-conflicts.'));
431 >
432 > export const overviewRulerCommonContentForeground = registerColor('editorOverviewRuler.commonContentForeground',
433 > { dark: transparent(mergeCommonHeaderBackground, rulerTransparency), light: transparent(mergeCommonHeaderBackground, rulerTransparency), hcDark: mergeBorder, hcLight: mergeBorder },
434 > nls.localize('overviewRulerCommonContentForeground', 'Common ancestor overview ruler foreground for inline merge-conflicts.'));
435 >
436 > export const overviewRulerFindMatchForeground = registerColor('editorOverviewRuler.findMatchForeground',
437 > { dark: '#d186167e', light: '#d186167e', hcDark: '#AB5A00', hcLight: '#AB5A00' },
438 > nls.localize('overviewRulerFindMatchForeground', 'Overview ruler marker color for find matches. The color must not be opaque so as not to hide underlying decorations.'), true);
439 >
440 > export const overviewRulerSelectionHighlightForeground = registerColor('editorOverviewRuler.selectionHighlightForeground',
441 > '#A0A0A0CC',
442 > nls.localize('overviewRulerSelectionHighlightForeground', 'Overview ruler marker color for selection highlights. The color must not be opaque so as not to hide underlying decorations.'), true);
443 >
444 >
445 > // ----- problems
446 >
447 > export const problemsErrorIconForeground = registerColor('problemsErrorIcon.foreground',
448 > editorErrorForeground,
449 > nls.localize('problemsErrorIconForeground', "The color used for the problems error icon."));
450 >
451 > export const problemsWarningIconForeground = registerColor('problemsWarningIcon.foreground',
452 > editorWarningForeground,
453 > nls.localize('problemsWarningIconForeground', "The color used for the problems warning icon."));
454 >
455 > export const problemsInfoIconForeground = registerColor('problemsInfoIcon.foreground',
456 > editorInfoForeground,
457 > nls.localize('problemsInfoIconForeground', "The color used for the problems info icon."));
src/vs/platform/theme/common/colorUtils.ts 256 introduced LOC · 16 ranges

Open complete file

1 > /*--------------------------------------------------------------------------------------------- colorUtils.ts
2 > * Copyright (c) Microsoft Corporation. All rights reserved.
3 > * Licensed under the MIT License. See License.txt in the project root for license information.
4 > *--------------------------------------------------------------------------------------------*/
5 >
6 > import { assertNever } from '../../../base/common/assert.js';
7 > import { RunOnceScheduler } from '../../../base/common/async.js';
8 > import { Color } from '../../../base/common/color.js';
9 > import { Emitter, Event } from '../../../base/common/event.js';
10 > import { IJSONSchema, IJSONSchemaSnippet } from '../../../base/common/jsonSchema.js';
11 > import { IJSONContributionRegistry, Extensions as JSONExtensions } from '../../jsonschemas/common/jsonContributionRegistry.js';
12 > import * as platform from '../../registry/common/platform.js';
13 > import { IColorTheme } from './themeService.js';
14 > import * as nls from '../../../nls.js';
15 > import { Disposable } from '../../../base/common/lifecycle.js';
16 >
17 > // ------ API types
18 >
19 > export type ColorIdentifier = string;
20 >
21 > export interface ColorContribution {
22 > readonly id: ColorIdentifier;
23 > readonly description: string;
24 > readonly defaults: ColorDefaults | ColorValue | null;
25 > readonly needsTransparency: boolean;
26 > readonly deprecationMessage: string | undefined;
27 > }
28 >
29 > /**
30 > * Returns the css variable name for the given color identifier. Dots (`.`) are replaced with hyphens (`-`) and
31 > * everything is prefixed with `--vscode-`.
32 > *
33 > * @sample `editorSuggestWidget.background` is `--vscode-editorSuggestWidget-background`.
34 > */
35 > export function asCssVariableName(colorIdent: ColorIdentifier): string {
36 return `--vscode-${colorIdent.replace(/\./g, '-')}`;
37 }
38 > colorUtils.ts
39 > export function asCssVariable(color: ColorIdentifier): string {
40 return `var(${asCssVariableName(color)})`;
41 }
42 > colorUtils.ts
43 > export function asCssVariableWithDefault(color: ColorIdentifier, defaultCssValue: string): string {
44 return `var(${asCssVariableName(color)}, ${defaultCssValue})`;
45 }
46 > colorUtils.ts
47 > export const enum ColorTransformType {
48 > Darken,
49 > Lighten,
50 > Transparent,
51 > Opaque,
52 > OneOf,
53 > LessProminent,
54 > IfDefinedThenElse,
55 > Mix,
56 > }
57 >
58 > export type ColorTransform =
59 > | { op: ColorTransformType.Darken; value: ColorValue; factor: number }
60 > | { op: ColorTransformType.Lighten; value: ColorValue; factor: number }
61 > | { op: ColorTransformType.Transparent; value: ColorValue; factor: number }
62 > | { op: ColorTransformType.Opaque; value: ColorValue; background: ColorValue }
63 > | { op: ColorTransformType.OneOf; values: readonly ColorValue[] }
64 > | { op: ColorTransformType.LessProminent; value: ColorValue; background: ColorValue; factor: number; transparency: number }
65 > | { op: ColorTransformType.IfDefinedThenElse; if: ColorIdentifier; then: ColorValue; else: ColorValue }
66 > | { op: ColorTransformType.Mix; color: ColorValue; with: ColorValue; ratio?: number };
67 >
68 > export interface ColorDefaults {
69 > light: ColorValue | null;
70 > dark: ColorValue | null;
71 > hcDark: ColorValue | null;
72 > hcLight: ColorValue | null;
73 > }
74 >
75 > export function isColorDefaults(value: unknown): value is ColorDefaults {
76 return value !== null && typeof value === 'object' && 'light' in value && 'dark' in value;
77 }
78 > colorUtils.ts
79 > /**
80 > * A Color Value is either a color literal, a reference to an other color or a derived color
81 > */
82 > export type ColorValue = Color | string | ColorIdentifier | ColorTransform;
83 >
84 > // color registry
85 > export const Extensions = {
86 > ColorContribution: 'base.contributions.colors'
87 > };
88 >
89 > export const DEFAULT_COLOR_CONFIG_VALUE = 'default';
90 >
91 > export interface IColorRegistry {
92 >
93 > readonly onDidChangeSchema: Event<void>;
94 >
95 > /**
96 > * Register a color to the registry.
97 > * @param id The color id as used in theme description files
98 > * @param defaults The default values
99 > * @param needsTransparency Whether the color requires transparency
100 > * @description the description
101 > */
102 > registerColor(id: string, defaults: ColorDefaults, description: string, needsTransparency?: boolean): ColorIdentifier;
103 >
104 > /**
105 > * Register a color to the registry.
106 > */
107 > deregisterColor(id: string): void;
108 >
109 > /**
110 > * Get all color contributions
111 > */
112 > getColors(): ColorContribution[];
113 >
114 > /**
115 > * Gets the default color of the given id
116 > */
117 > resolveDefaultColor(id: ColorIdentifier, theme: IColorTheme): Color | undefined;
118 >
119 > /**
120 > * JSON schema for an object to assign color values to one of the color contributions.
121 > */
122 > getColorSchema(): IJSONSchema;
123 >
124 > /**
125 > * JSON schema to for a reference to a color contribution.
126 > */
127 > getColorReferenceSchema(): IJSONSchema;
128 >
129 > /**
130 > * Update the default color of a color identifier.
131 > */
132 > updateDefaultColor(id: string, defaults: ColorDefaults | ColorValue | null): void;
133 >
134 > /**
135 > * Notify when the color theme or settings change.
136 > */
137 > notifyThemeUpdate(theme: IColorTheme): void;
138 >
139 > }
140 >
141 > type IJSONSchemaForColors = IJSONSchema & { properties: { [name: string]: { oneOf: [IJSONSchemaWithSnippets, IJSONSchema] } } };
142 > type IJSONSchemaWithSnippets = IJSONSchema & { defaultSnippets: IJSONSchemaSnippet[] };
143 >
144 > class ColorRegistry extends Disposable implements IColorRegistry {
145 >
146 > private readonly _onDidChangeSchema = this._register(new Emitter<void>());
147 > readonly onDidChangeSchema: Event<void> = this._onDidChangeSchema.event;
148 >
149 > private colorsById: { [key: string]: ColorContribution };
150 > private colorSchema: IJSONSchemaForColors = { type: 'object', properties: {} };
151 > private colorReferenceSchema: IJSONSchema & { enum: string[]; enumDescriptions: string[] } = { type: 'string', enum: [], enumDescriptions: [] };
152 >
153 > constructor() {
154 > super();
155 > this.colorsById = {};
156 > }
157 >
158 > public notifyThemeUpdate(colorThemeData: IColorTheme) {
159 for (const key of Object.keys(this.colorsById)) {
160 const color = colorThemeData.getColor(key);
165 this._onDidChangeSchema.fire();
166 }
167 > colorUtils.ts
168 > public registerColor(id: string, defaults: ColorDefaults | ColorValue | null, description: string, needsTransparency = false, deprecationMessage?: string): ColorIdentifier {
169 > const colorContribution: ColorContribution = { id, description, defaults, needsTransparency, deprecationMessage };
170 > this.colorsById[id] = colorContribution;
171 > const propertySchema: IJSONSchemaWithSnippets = { type: 'string', format: 'color-hex', defaultSnippets: [{ body: '${1:#ff0000}' }] };
172 > if (deprecationMessage) {
173 > propertySchema.deprecationMessage = deprecationMessage;
174 > }
175 > if (needsTransparency) {
176 > propertySchema.pattern = '^#(?:(?<rgba>[0-9a-fA-f]{3}[0-9a-eA-E])|(?:[0-9a-fA-F]{6}(?:(?![fF]{2})(?:[0-9a-fA-F]{2}))))?$';
177 > propertySchema.patternErrorMessage = nls.localize('transparecyRequired', 'This color must be transparent or it will obscure content');
178 > }
179 > this.colorSchema.properties[id] = {
180 > description,
181 > oneOf: [
182 > propertySchema,
183 > { type: 'string', const: DEFAULT_COLOR_CONFIG_VALUE, description: nls.localize('useDefault', 'Use the default color.') }
184 > ]
185 > };
186 > this.colorReferenceSchema.enum.push(id);
187 > this.colorReferenceSchema.enumDescriptions.push(description);
188 >
189 > this._onDidChangeSchema.fire();
190 > return id;
191 > }
192 >
193 >
194 > public updateDefaultColor(id: string, defaults: ColorDefaults | ColorValue | null): void {
195 const existing = this.colorsById[id];
196 if (existing) {
198 }
199 }
200 > colorUtils.ts
201 > public deregisterColor(id: string): void {
202 delete this.colorsById[id];
203 delete this.colorSchema.properties[id];
209 this._onDidChangeSchema.fire();
210 }
211 > colorUtils.ts
212 > public getColors(): ColorContribution[] {
213 return Object.keys(this.colorsById).map(id => this.colorsById[id]);
214 }
215 > colorUtils.ts
216 > public resolveDefaultColor(id: ColorIdentifier, theme: IColorTheme): Color | undefined {
217 const colorDesc = this.colorsById[id];
218 if (colorDesc?.defaults) {
222 return undefined;
223 }
224 > colorUtils.ts
225 > public getColorSchema(): IJSONSchema {
226 > return this.colorSchema;
227 > }
228 >
229 > public getColorReferenceSchema(): IJSONSchema {
230 return this.colorReferenceSchema;
231 }
232 > colorUtils.ts
233 > public override toString() {
234 const sorter = (a: string, b: string) => {
235 const cat1 = a.indexOf('.') === -1 ? 0 : 1;
243 return Object.keys(this.colorsById).sort(sorter).map(k => `- \`${k}\`: ${this.colorsById[k].description}`).join('\n');
244 }
245 > colorUtils.ts
246 > }
247 >
248 > const colorRegistry = new ColorRegistry();
249 > platform.Registry.add(Extensions.ColorContribution, colorRegistry);
250 >
251 >
252 > export function registerColor(id: string, defaults: ColorDefaults | ColorValue | null, description: string, needsTransparency?: boolean, deprecationMessage?: string): ColorIdentifier {
253 > return colorRegistry.registerColor(id, defaults, description, needsTransparency, deprecationMessage);
254 > }
255 >
256 > export function getColorRegistry(): IColorRegistry {
257 return colorRegistry;
258 }
259 > colorUtils.ts
260 > // ----- color functions
261 >
262 > export function executeTransform(transform: ColorTransform, theme: IColorTheme): Color | undefined {
263 switch (transform.op) {
264 case ColorTransformType.Darken:
316 }
317 }
318 > colorUtils.ts
319 > export function darken(colorValue: ColorValue, factor: number): ColorTransform {
320 > return { op: ColorTransformType.Darken, value: colorValue, factor };
321 > }
322 >
323 > export function lighten(colorValue: ColorValue, factor: number): ColorTransform {
324 > return { op: ColorTransformType.Lighten, value: colorValue, factor };
325 > }
326 >
327 > export function transparent(colorValue: ColorValue, factor: number): ColorTransform {
328 > return { op: ColorTransformType.Transparent, value: colorValue, factor };
329 > }
330 >
331 > export function opaque(colorValue: ColorValue, background: ColorValue): ColorTransform {
332 return { op: ColorTransformType.Opaque, value: colorValue, background };
333 }
334 > colorUtils.ts
335 > export function oneOf(...colorValues: ColorValue[]): ColorTransform {
336 > return { op: ColorTransformType.OneOf, values: colorValues };
337 > }
338 >
339 > export function ifDefinedThenElse(ifArg: ColorIdentifier, thenArg: ColorValue, elseArg: ColorValue): ColorTransform {
340 > return { op: ColorTransformType.IfDefinedThenElse, if: ifArg, then: thenArg, else: elseArg };
341 > }
342 >
343 > export function lessProminent(colorValue: ColorValue, backgroundColorValue: ColorValue, factor: number, transparency: number): ColorTransform {
344 > return { op: ColorTransformType.LessProminent, value: colorValue, background: backgroundColorValue, factor, transparency };
345 > }
346 >
347 > // ----- implementation
348 >
349 > /**
350 > * @param colorValue Resolve a color value in the context of a theme
351 > */
352 > export function resolveColorValue(colorValue: ColorValue | null, theme: IColorTheme): Color | undefined {
353 if (colorValue === null) {
354 return undefined;
365 return undefined;
366 }
367 > colorUtils.ts
368 > export const workbenchColorsSchemaId = 'vscode://schemas/workbench-colors';
369 >
370 > const schemaRegistry = platform.Registry.as<IJSONContributionRegistry>(JSONExtensions.JSONContribution);
371 > schemaRegistry.registerSchema(workbenchColorsSchemaId, colorRegistry.getColorSchema());
372 >
373 > const delayer = new RunOnceScheduler(() => schemaRegistry.notifySchemaChanged(workbenchColorsSchemaId), 200);
374 >
375 > colorRegistry.onDidChangeSchema(() => {
376 > if (!delayer.isScheduled()) {
377 > delayer.schedule();
378 > }
379 > });
380 >
381 > // setTimeout(_ => console.log(colorRegistry.toString()), 5000);
src/vs/platform/theme/common/colors/inputColors.ts 226 introduced LOC · 1 range

Open complete file

1 > /*--------------------------------------------------------------------------------------------- inputColors.ts
2 > * Copyright (c) Microsoft Corporation. All rights reserved.
3 > * Licensed under the MIT License. See License.txt in the project root for license information.
4 > *--------------------------------------------------------------------------------------------*/
5 >
6 > import * as nls from '../../../../nls.js';
7 >
8 > // Import the effects we need
9 > import { Color, RGBA } from '../../../../base/common/color.js';
10 > import { registerColor, transparent, lighten, darken, ColorTransformType } from '../colorUtils.js';
11 >
12 > // Import the colors we need
13 > import { foreground, contrastBorder, focusBorder, iconForeground } from './baseColors.js';
14 > import { editorWidgetBackground } from './editorColors.js';
15 > import { listHoverBackground } from './listColors.js';
16 >
17 >
18 > // ----- input
19 >
20 > export const inputBackground = registerColor('input.background',
21 > { dark: '#3C3C3C', light: Color.white, hcDark: Color.black, hcLight: Color.white },
22 > nls.localize('inputBoxBackground', "Input box background."));
23 >
24 > export const inputForeground = registerColor('input.foreground',
25 > foreground,
26 > nls.localize('inputBoxForeground', "Input box foreground."));
27 >
28 > export const inputBorder = registerColor('input.border',
29 > { dark: null, light: null, hcDark: contrastBorder, hcLight: contrastBorder },
30 > nls.localize('inputBoxBorder', "Input box border."));
31 >
32 > export const inputActiveOptionBorder = registerColor('inputOption.activeBorder',
33 > { dark: '#007ACC', light: '#007ACC', hcDark: contrastBorder, hcLight: contrastBorder },
34 > nls.localize('inputBoxActiveOptionBorder', "Border color of activated options in input fields."));
35 >
36 > export const inputActiveOptionHoverBackground = registerColor('inputOption.hoverBackground',
37 > { dark: '#5a5d5e80', light: '#b8b8b850', hcDark: null, hcLight: null },
38 > nls.localize('inputOption.hoverBackground', "Background color of activated options in input fields."));
39 >
40 > export const inputActiveOptionBackground = registerColor('inputOption.activeBackground',
41 > { dark: transparent(focusBorder, 0.4), light: transparent(focusBorder, 0.2), hcDark: Color.transparent, hcLight: Color.transparent },
42 > nls.localize('inputOption.activeBackground', "Background hover color of options in input fields."));
43 >
44 > export const inputActiveOptionForeground = registerColor('inputOption.activeForeground',
45 > { dark: Color.white, light: Color.black, hcDark: foreground, hcLight: foreground },
46 > nls.localize('inputOption.activeForeground', "Foreground color of activated options in input fields."));
47 >
48 > export const inputPlaceholderForeground = registerColor('input.placeholderForeground',
49 > { light: transparent(foreground, 0.5), dark: transparent(foreground, 0.5), hcDark: transparent(foreground, 0.7), hcLight: transparent(foreground, 0.7) },
50 > nls.localize('inputPlaceholderForeground', "Input box foreground color for placeholder text."));
51 >
52 >
53 > // ----- input validation
54 >
55 > export const inputValidationInfoBackground = registerColor('inputValidation.infoBackground',
56 > { dark: '#063B49', light: '#D6ECF2', hcDark: Color.black, hcLight: Color.white },
57 > nls.localize('inputValidationInfoBackground', "Input validation background color for information severity."));
58 >
59 > export const inputValidationInfoForeground = registerColor('inputValidation.infoForeground',
60 > { dark: null, light: null, hcDark: null, hcLight: foreground },
61 > nls.localize('inputValidationInfoForeground', "Input validation foreground color for information severity."));
62 >
63 > export const inputValidationInfoBorder = registerColor('inputValidation.infoBorder',
64 > { dark: '#007acc', light: '#007acc', hcDark: contrastBorder, hcLight: contrastBorder },
65 > nls.localize('inputValidationInfoBorder', "Input validation border color for information severity."));
66 >
67 > export const inputValidationWarningBackground = registerColor('inputValidation.warningBackground',
68 > { dark: '#352A05', light: '#F6F5D2', hcDark: Color.black, hcLight: Color.white },
69 > nls.localize('inputValidationWarningBackground', "Input validation background color for warning severity."));
70 >
71 > export const inputValidationWarningForeground = registerColor('inputValidation.warningForeground',
72 > { dark: null, light: null, hcDark: null, hcLight: foreground },
73 > nls.localize('inputValidationWarningForeground', "Input validation foreground color for warning severity."));
74 >
75 > export const inputValidationWarningBorder = registerColor('inputValidation.warningBorder',
76 > { dark: '#B89500', light: '#B89500', hcDark: contrastBorder, hcLight: contrastBorder },
77 > nls.localize('inputValidationWarningBorder', "Input validation border color for warning severity."));
78 >
79 > export const inputValidationErrorBackground = registerColor('inputValidation.errorBackground',
80 > { dark: '#5A1D1D', light: '#F2DEDE', hcDark: Color.black, hcLight: Color.white },
81 > nls.localize('inputValidationErrorBackground', "Input validation background color for error severity."));
82 >
83 > export const inputValidationErrorForeground = registerColor('inputValidation.errorForeground',
84 > { dark: null, light: null, hcDark: null, hcLight: foreground },
85 > nls.localize('inputValidationErrorForeground', "Input validation foreground color for error severity."));
86 >
87 > export const inputValidationErrorBorder = registerColor('inputValidation.errorBorder',
88 > { dark: '#BE1100', light: '#BE1100', hcDark: contrastBorder, hcLight: contrastBorder },
89 > nls.localize('inputValidationErrorBorder', "Input validation border color for error severity."));
90 >
91 >
92 > // ----- select
93 >
94 > export const selectBackground = registerColor('dropdown.background',
95 > { dark: '#3C3C3C', light: Color.white, hcDark: Color.black, hcLight: Color.white },
96 > nls.localize('dropdownBackground', "Dropdown background."));
97 >
98 > export const selectListBackground = registerColor('dropdown.listBackground',
99 > { dark: null, light: null, hcDark: Color.black, hcLight: Color.white },
100 > nls.localize('dropdownListBackground', "Dropdown list background."));
101 >
102 > export const selectForeground = registerColor('dropdown.foreground',
103 > { dark: '#F0F0F0', light: foreground, hcDark: Color.white, hcLight: foreground },
104 > nls.localize('dropdownForeground', "Dropdown foreground."));
105 >
106 > export const selectBorder = registerColor('dropdown.border',
107 > { dark: selectBackground, light: '#CECECE', hcDark: contrastBorder, hcLight: contrastBorder },
108 > nls.localize('dropdownBorder', "Dropdown border."));
109 >
110 >
111 > // ------ button
112 >
113 > export const buttonForeground = registerColor('button.foreground',
114 > Color.white,
115 > nls.localize('buttonForeground', "Button foreground color."));
116 >
117 > export const buttonSeparator = registerColor('button.separator',
118 > transparent(buttonForeground, .4),
119 > nls.localize('buttonSeparator', "Button separator color."));
120 >
121 > export const buttonBackground = registerColor('button.background',
122 > { dark: '#0E639C', light: '#007ACC', hcDark: Color.black, hcLight: '#0F4A85' },
123 > nls.localize('buttonBackground', "Button background color."));
124 >
125 > export const buttonHoverBackground = registerColor('button.hoverBackground',
126 > { dark: lighten(buttonBackground, 0.2), light: darken(buttonBackground, 0.2), hcDark: buttonBackground, hcLight: buttonBackground },
127 > nls.localize('buttonHoverBackground', "Button background color when hovering."));
128 >
129 > export const buttonBorder = registerColor('button.border',
130 > contrastBorder,
131 > nls.localize('buttonBorder', "Button border color."));
132 >
133 > export const buttonSecondaryForeground = registerColor('button.secondaryForeground',
134 > { dark: foreground, light: foreground, hcDark: Color.white, hcLight: foreground },
135 > nls.localize('buttonSecondaryForeground', "Secondary button foreground color."));
136 >
137 > export const buttonSecondaryBackground = registerColor('button.secondaryBackground',
138 > { dark: listHoverBackground, light: listHoverBackground, hcDark: null, hcLight: Color.white },
139 > nls.localize('buttonSecondaryBackground', "Secondary button background color."));
140 >
141 > export const buttonSecondaryBorder = registerColor('button.secondaryBorder',
142 > { dark: transparent(foreground, 0.15), light: transparent(foreground, 0.15), hcDark: contrastBorder, hcLight: contrastBorder },
143 > nls.localize('buttonSecondaryBorder', "Secondary button border color."));
144 >
145 > export const buttonSecondaryHoverBackground = registerColor('button.secondaryHoverBackground',
146 > { dark: lighten(listHoverBackground, 0.2), light: lighten(listHoverBackground, 0.2), hcDark: null, hcLight: null },
147 > nls.localize('buttonSecondaryHoverBackground', "Secondary button background color when hovering."));
148 >
149 > // ------ radio
150 >
151 > export const radioActiveForeground = registerColor('radio.activeForeground',
152 > inputActiveOptionForeground,
153 > nls.localize('radioActiveForeground', "Foreground color of active radio option."));
154 >
155 > export const radioActiveBackground = registerColor('radio.activeBackground',
156 > inputActiveOptionBackground,
157 > nls.localize('radioBackground', "Background color of active radio option."));
158 >
159 > export const radioActiveBorder = registerColor('radio.activeBorder',
160 > inputActiveOptionBorder,
161 > nls.localize('radioActiveBorder', "Border color of the active radio option."));
162 >
163 > export const radioInactiveForeground = registerColor('radio.inactiveForeground',
164 > null,
165 > nls.localize('radioInactiveForeground', "Foreground color of inactive radio option."));
166 >
167 > export const radioInactiveBackground = registerColor('radio.inactiveBackground',
168 > null,
169 > nls.localize('radioInactiveBackground', "Background color of inactive radio option."));
170 >
171 > export const radioInactiveBorder = registerColor('radio.inactiveBorder',
172 > { light: transparent(radioActiveForeground, .2), dark: transparent(radioActiveForeground, .2), hcDark: transparent(radioActiveForeground, .4), hcLight: transparent(radioActiveForeground, .2) },
173 > nls.localize('radioInactiveBorder', "Border color of the inactive radio option."));
174 >
175 > export const radioInactiveHoverBackground = registerColor('radio.inactiveHoverBackground',
176 > inputActiveOptionHoverBackground,
177 > nls.localize('radioHoverBackground', "Background color of inactive active radio option when hovering."));
178 >
179 > // ------ checkbox
180 >
181 > export const checkboxBackground = registerColor('checkbox.background',
182 > selectBackground,
183 > nls.localize('checkbox.background', "Background color of checkbox widget."));
184 >
185 > export const checkboxSelectBackground = registerColor('checkbox.selectBackground',
186 > editorWidgetBackground,
187 > nls.localize('checkbox.select.background', "Background color of checkbox widget when the element it's in is selected."));
188 >
189 > export const checkboxForeground = registerColor('checkbox.foreground',
190 > selectForeground,
191 > nls.localize('checkbox.foreground', "Foreground color of checkbox widget."));
192 >
193 > export const checkboxBorder = registerColor('checkbox.border',
194 > selectBorder,
195 > nls.localize('checkbox.border', "Border color of checkbox widget."));
196 >
197 > export const checkboxSelectBorder = registerColor('checkbox.selectBorder',
198 > iconForeground,
199 > nls.localize('checkbox.select.border', "Border color of checkbox widget when the element it's in is selected."));
200 >
201 > export const checkboxDisabledBackground = registerColor('checkbox.disabled.background',
202 > { op: ColorTransformType.Mix, color: checkboxBackground, with: checkboxForeground, ratio: 0.33 },
203 > nls.localize('checkbox.disabled.background', "Background of a disabled checkbox."));
204 >
205 > export const checkboxDisabledForeground = registerColor('checkbox.disabled.foreground',
206 > { op: ColorTransformType.Mix, color: checkboxForeground, with: checkboxBackground, ratio: 0.33 },
207 > nls.localize('checkbox.disabled.foreground', "Foreground of a disabled checkbox."));
208 >
209 >
210 > // ------ keybinding label
211 >
212 > export const keybindingLabelBackground = registerColor('keybindingLabel.background',
213 > { dark: new Color(new RGBA(128, 128, 128, 0.17)), light: new Color(new RGBA(221, 221, 221, 0.4)), hcDark: Color.transparent, hcLight: Color.transparent },
214 > nls.localize('keybindingLabelBackground', "Keybinding label background color. The keybinding label is used to represent a keyboard shortcut."));
215 >
216 > export const keybindingLabelForeground = registerColor('keybindingLabel.foreground',
217 > { dark: Color.fromHex('#CCCCCC'), light: Color.fromHex('#555555'), hcDark: Color.white, hcLight: foreground },
218 > nls.localize('keybindingLabelForeground', "Keybinding label foreground color. The keybinding label is used to represent a keyboard shortcut."));
219 >
220 > export const keybindingLabelBorder = registerColor('keybindingLabel.border',
221 > { dark: new Color(new RGBA(51, 51, 51, 0.6)), light: new Color(new RGBA(204, 204, 204, 0.4)), hcDark: new Color(new RGBA(111, 195, 223)), hcLight: contrastBorder },
222 > nls.localize('keybindingLabelBorder', "Keybinding label border color. The keybinding label is used to represent a keyboard shortcut."));
223 >
224 > export const keybindingLabelBottomBorder = registerColor('keybindingLabel.bottomBorder',
225 > { dark: new Color(new RGBA(68, 68, 68, 0.6)), light: new Color(new RGBA(187, 187, 187, 0.4)), hcDark: new Color(new RGBA(111, 195, 223)), hcLight: foreground },
226 > nls.localize('keybindingLabelBottomBorder', "Keybinding label border bottom color. The keybinding label is used to represent a keyboard shortcut."));
src/vs/platform/theme/common/themeService.ts 216 introduced LOC · 11 ranges

Open complete file

1 > /*--------------------------------------------------------------------------------------------- themeService.ts
2 > * Copyright (c) Microsoft Corporation. All rights reserved.
3 > * Licensed under the MIT License. See License.txt in the project root for license information.
4 > *--------------------------------------------------------------------------------------------*/
5 >
6 > import { Codicon } from '../../../base/common/codicons.js';
7 > import { Color } from '../../../base/common/color.js';
8 > import { Emitter, Event } from '../../../base/common/event.js';
9 > import { Disposable, IDisposable, toDisposable } from '../../../base/common/lifecycle.js';
10 > import { IEnvironmentService } from '../../environment/common/environment.js';
11 > import { createDecorator } from '../../instantiation/common/instantiation.js';
12 > import * as platform from '../../registry/common/platform.js';
13 > import { ColorIdentifier } from './colorRegistry.js';
14 > import { IconContribution, IconDefinition } from './iconRegistry.js';
15 > import { ColorScheme, ThemeTypeSelector } from './theme.js';
16 >
17 > export const IThemeService = createDecorator<IThemeService>('themeService');
18 >
19 > export function themeColorFromId(id: ColorIdentifier) {
20 return { id };
21 }
22 > themeService.ts
23 > export const FileThemeIcon = Codicon.file;
24 > export const FolderThemeIcon = Codicon.folder;
25 >
26 > export function getThemeTypeSelector(type: ColorScheme): ThemeTypeSelector {
27 switch (type) {
28 case ColorScheme.DARK: return ThemeTypeSelector.VS_DARK;
32 }
33 }
34 > themeService.ts
35 > export interface ITokenStyle {
36 > readonly foreground: number | undefined;
37 > readonly bold: boolean | undefined;
38 > readonly underline: boolean | undefined;
39 > readonly strikethrough: boolean | undefined;
40 > readonly italic: boolean | undefined;
41 > }
42 >
43 > export interface IColorTheme {
44 >
45 > readonly type: ColorScheme;
46 >
47 > readonly label: string;
48 >
49 > /**
50 > * Resolves the color of the given color identifier. If the theme does not
51 > * specify the color, the default color is returned unless <code>useDefault</code> is set to false.
52 > * @param color the id of the color
53 > * @param useDefault specifies if the default color should be used. If not set, the default is used.
54 > */
55 > getColor(color: ColorIdentifier, useDefault?: boolean): Color | undefined;
56 >
57 > /**
58 > * Returns whether the theme defines a value for the color. If not, that means the
59 > * default color will be used.
60 > */
61 > defines(color: ColorIdentifier): boolean;
62 >
63 > /**
64 > * Returns the token style for a given classification. The result uses the <code>MetadataConsts</code> format
65 > */
66 > getTokenStyleMetadata(type: string, modifiers: string[], modelLanguage: string): ITokenStyle | undefined;
67 >
68 > /**
69 > * List of all colors used with tokens. <code>getTokenStyleMetadata</code> references the colors by index into this list.
70 > */
71 > readonly tokenColorMap: string[];
72 >
73 > /**
74 > * List of all the fonts used with tokens.
75 > */
76 > readonly tokenFontMap: IFontTokenOptions[];
77 >
78 > /**
79 > * Defines whether semantic highlighting should be enabled for the theme.
80 > */
81 > readonly semanticHighlighting: boolean;
82 > }
83 >
84 > export class IFontTokenOptions {
85 > fontFamily?: string;
86 > fontSizeMultiplier?: number;
87 > lineHeightMultiplier?: number;
88 > }
89 >
90 > export interface IFileIconTheme {
91 > readonly hasFileIcons: boolean;
92 > readonly hasFolderIcons: boolean;
93 > readonly hidesExplorerArrows: boolean;
94 > }
95 >
96 > export interface IProductIconTheme {
97 > /**
98 > * Resolves the definition for the given icon as defined by the theme.
99 > *
100 > * @param iconContribution The icon
101 > */
102 > getIcon(iconContribution: IconContribution): IconDefinition | undefined;
103 > }
104 >
105 >
106 > export interface ICssStyleCollector {
107 > addRule(rule: string): void;
108 > }
109 >
110 > export interface IThemingParticipant {
111 > (theme: IColorTheme, collector: ICssStyleCollector, environment: IEnvironmentService): void;
112 > }
113 >
114 > export interface IThemeService {
115 > readonly _serviceBrand: undefined;
116 >
117 > getColorTheme(): IColorTheme;
118 >
119 > readonly onDidColorThemeChange: Event<IColorTheme>;
120 >
121 > getFileIconTheme(): IFileIconTheme;
122 >
123 > readonly onDidFileIconThemeChange: Event<IFileIconTheme>;
124 >
125 > getProductIconTheme(): IProductIconTheme;
126 >
127 > readonly onDidProductIconThemeChange: Event<IProductIconTheme>;
128 >
129 > }
130 >
131 > // static theming participant
132 > export const Extensions = {
133 > ThemingContribution: 'base.contributions.theming'
134 > };
135 >
136 > export interface IThemingRegistry {
137 >
138 > /**
139 > * Register a theming participant that is invoked on every theme change.
140 > */
141 > onColorThemeChange(participant: IThemingParticipant): IDisposable;
142 >
143 > getThemingParticipants(): IThemingParticipant[];
144 >
145 > readonly onThemingParticipantAdded: Event<IThemingParticipant>;
146 > }
147 >
148 > class ThemingRegistry extends Disposable implements IThemingRegistry {
149 > private themingParticipants: IThemingParticipant[] = [];
150 > private readonly onThemingParticipantAddedEmitter: Emitter<IThemingParticipant>;
151 >
152 > constructor() {
153 > super();
154 > this.themingParticipants = [];
155 > this.onThemingParticipantAddedEmitter = this._register(new Emitter<IThemingParticipant>());
156 > }
157 >
158 > public onColorThemeChange(participant: IThemingParticipant): IDisposable {
159 this.themingParticipants.push(participant);
160 this.onThemingParticipantAddedEmitter.fire(participant);
164 });
165 }
166 > themeService.ts
167 > public get onThemingParticipantAdded(): Event<IThemingParticipant> {
168 return this.onThemingParticipantAddedEmitter.event;
169 }
170 > themeService.ts
171 > public getThemingParticipants(): IThemingParticipant[] {
172 return this.themingParticipants;
173 }
174 > } themeService.ts
175 >
176 > const themingRegistry = new ThemingRegistry();
177 > platform.Registry.add(Extensions.ThemingContribution, themingRegistry);
178 >
179 > export function registerThemingParticipant(participant: IThemingParticipant): IDisposable {
180 return themingRegistry.onColorThemeChange(participant);
181 }
182 > themeService.ts
183 > /**
184 > * Utility base class for all themable components.
185 > */
186 > export class Themable extends Disposable {
187 > protected theme: IColorTheme;
188 >
189 > constructor(
190 protected themeService: IThemeService
191 ) {
197 this._register(this.themeService.onDidColorThemeChange(theme => this.onThemeChange(theme)));
198 }
199 > themeService.ts
200 > protected onThemeChange(theme: IColorTheme): void {
201 this.theme = theme;
202
203 this.updateStyles();
204 }
205 > themeService.ts
206 > updateStyles(): void {
207 // Subclasses to override
208 }
209 > themeService.ts
210 > protected getColor(id: string, modify?: (color: Color, theme: IColorTheme) => Color): string | null {
211 let color = this.theme.getColor(id);
212
217 return color ? color.toString() : null;
218 }
219 > } themeService.ts
220 >
221 > export interface IPartsSplash {
222 > zoomLevel: number | undefined;
223 > baseTheme: ThemeTypeSelector;
224 > colorInfo: {
225 > background: string;
226 > foreground: string | undefined;
227 > editorBackground: string | undefined;
228 > titleBarBackground: string | undefined;
229 > titleBarBorder: string | undefined;
230 > activityBarBackground: string | undefined;
231 > activityBarBorder: string | undefined;
232 > sideBarBackground: string | undefined;
233 > sideBarBorder: string | undefined;
234 > panelBackground: string | undefined;
235 > editorGroupBorder: string | undefined;
236 > agentsPanelBackground: string | undefined;
237 > agentsPanelBorder: string | undefined;
238 > statusBarBackground: string | undefined;
239 > statusBarBorder: string | undefined;
240 > statusBarNoFolderBackground: string | undefined;
241 > windowBorder: string | undefined;
242 > };
243 > layoutInfo: {
244 > sideBarSide: string;
245 > editorPartMinWidth: number;
246 > titleBarHeight: number;
247 > activityBarWidth: number;
248 > sideBarWidth: number;
249 > auxiliaryBarWidth: number;
250 > statusBarHeight: number;
251 > windowBorder: boolean;
252 > windowBorderRadius: string | undefined;
253 > modernUI: boolean;
254 > partBounds: {
255 > sideBar: { top: number; left: number; width: number; height: number } | undefined;
256 > auxiliaryBar: { top: number; left: number; width: number; height: number } | undefined;
257 > panel: { top: number; left: number; width: number; height: number } | undefined;
258 > editor: { top: number; left: number; width: number; height: number } | undefined;
259 > } | undefined;
260 > } | undefined;
261 > }
src/vs/platform/theme/common/colors/listColors.ts 165 introduced LOC · 1 range

Open complete file

1 > /*--------------------------------------------------------------------------------------------- listColors.ts
2 > * Copyright (c) Microsoft Corporation. All rights reserved.
3 > * Licensed under the MIT License. See License.txt in the project root for license information.
4 > *--------------------------------------------------------------------------------------------*/
5 >
6 > import * as nls from '../../../../nls.js';
7 >
8 > // Import the effects we need
9 > import { Color } from '../../../../base/common/color.js';
10 > import { registerColor, darken, lighten, transparent, ifDefinedThenElse } from '../colorUtils.js';
11 >
12 > // Import the colors we need
13 > import { foreground, contrastBorder, activeContrastBorder, focusBorder, iconForeground } from './baseColors.js';
14 > import { editorWidgetBackground, editorFindMatchHighlightBorder, editorFindMatchHighlight, widgetShadow, editorWidgetForeground } from './editorColors.js';
15 >
16 >
17 > export const listFocusBackground = registerColor('list.focusBackground',
18 > null,
19 > nls.localize('listFocusBackground', "List/Tree background color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not."));
20 >
21 > export const listFocusForeground = registerColor('list.focusForeground',
22 > null,
23 > nls.localize('listFocusForeground', "List/Tree foreground color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not."));
24 >
25 > export const listFocusOutline = registerColor('list.focusOutline',
26 > { dark: focusBorder, light: focusBorder, hcDark: activeContrastBorder, hcLight: activeContrastBorder },
27 > nls.localize('listFocusOutline', "List/Tree outline color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not."));
28 >
29 > export const listFocusAndSelectionOutline = registerColor('list.focusAndSelectionOutline',
30 > null,
31 > nls.localize('listFocusAndSelectionOutline', "List/Tree outline color for the focused item when the list/tree is active and selected. An active list/tree has keyboard focus, an inactive does not."));
32 >
33 > export const listActiveSelectionBackground = registerColor('list.activeSelectionBackground',
34 > { dark: '#04395E', light: '#0060C0', hcDark: null, hcLight: Color.fromHex('#0F4A85').transparent(0.1) },
35 > nls.localize('listActiveSelectionBackground', "List/Tree background color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not."));
36 >
37 > export const listActiveSelectionForeground = registerColor('list.activeSelectionForeground',
38 > { dark: Color.white, light: Color.white, hcDark: null, hcLight: null },
39 > nls.localize('listActiveSelectionForeground', "List/Tree foreground color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not."));
40 >
41 > export const listActiveSelectionIconForeground = registerColor('list.activeSelectionIconForeground',
42 > null,
43 > nls.localize('listActiveSelectionIconForeground', "List/Tree icon foreground color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not."));
44 >
45 > export const listInactiveSelectionBackground = registerColor('list.inactiveSelectionBackground',
46 > { dark: '#37373D', light: '#E4E6F1', hcDark: null, hcLight: Color.fromHex('#0F4A85').transparent(0.1) },
47 > nls.localize('listInactiveSelectionBackground', "List/Tree background color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not."));
48 >
49 > export const listInactiveSelectionForeground = registerColor('list.inactiveSelectionForeground',
50 > null,
51 > nls.localize('listInactiveSelectionForeground', "List/Tree foreground color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not."));
52 >
53 > export const listInactiveSelectionIconForeground = registerColor('list.inactiveSelectionIconForeground',
54 > null,
55 > nls.localize('listInactiveSelectionIconForeground', "List/Tree icon foreground color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not."));
56 >
57 > export const listInactiveFocusBackground = registerColor('list.inactiveFocusBackground',
58 > null,
59 > nls.localize('listInactiveFocusBackground', "List/Tree background color for the focused item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not."));
60 >
61 > export const listInactiveFocusOutline = registerColor('list.inactiveFocusOutline',
62 > null,
63 > nls.localize('listInactiveFocusOutline', "List/Tree outline color for the focused item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not."));
64 >
65 > export const listHoverBackground = registerColor('list.hoverBackground',
66 > { dark: '#2A2D2E', light: '#F0F0F0', hcDark: Color.white.transparent(0.1), hcLight: Color.fromHex('#0F4A85').transparent(0.1) },
67 > nls.localize('listHoverBackground', "List/Tree background when hovering over items using the mouse."));
68 >
69 > export const listHoverForeground = registerColor('list.hoverForeground',
70 > null,
71 > nls.localize('listHoverForeground', "List/Tree foreground when hovering over items using the mouse."));
72 >
73 > export const listDropOverBackground = registerColor('list.dropBackground',
74 > { dark: '#062F4A', light: '#D6EBFF', hcDark: null, hcLight: null },
75 > nls.localize('listDropBackground', "List/Tree drag and drop background when moving items over other items when using the mouse."));
76 >
77 > export const listDropBetweenBackground = registerColor('list.dropBetweenBackground',
78 > { dark: iconForeground, light: iconForeground, hcDark: null, hcLight: null },
79 > nls.localize('listDropBetweenBackground', "List/Tree drag and drop border color when moving items between items when using the mouse."));
80 >
81 > export const listHighlightForeground = registerColor('list.highlightForeground',
82 > { dark: '#2AAAFF', light: '#0066BF', hcDark: focusBorder, hcLight: focusBorder },
83 > nls.localize('highlight', 'List/Tree foreground color of the match highlights when searching inside the list/tree.'));
84 >
85 > export const listFocusHighlightForeground = registerColor('list.focusHighlightForeground',
86 > { dark: listHighlightForeground, light: ifDefinedThenElse(listActiveSelectionBackground, listHighlightForeground, '#BBE7FF'), hcDark: listHighlightForeground, hcLight: listHighlightForeground },
87 > nls.localize('listFocusHighlightForeground', 'List/Tree foreground color of the match highlights on actively focused items when searching inside the list/tree.'));
88 >
89 > export const listInvalidItemForeground = registerColor('list.invalidItemForeground',
90 > { dark: '#B89500', light: '#B89500', hcDark: '#B89500', hcLight: '#B5200D' },
91 > nls.localize('invalidItemForeground', 'List/Tree foreground color for invalid items, for example an unresolved root in explorer.'));
92 >
93 > export const listErrorForeground = registerColor('list.errorForeground',
94 > { dark: '#F88070', light: '#B01011', hcDark: null, hcLight: null }, nls.localize('listErrorForeground', 'Foreground color of list items containing errors.'));
95 >
96 > export const listWarningForeground = registerColor('list.warningForeground',
97 > { dark: '#CCA700', light: '#855F00', hcDark: null, hcLight: null }, nls.localize('listWarningForeground', 'Foreground color of list items containing warnings.'));
98 >
99 > export const listFilterWidgetBackground = registerColor('listFilterWidget.background',
100 > { light: darken(editorWidgetBackground, 0), dark: lighten(editorWidgetBackground, 0), hcDark: editorWidgetBackground, hcLight: editorWidgetBackground },
101 > nls.localize('listFilterWidgetBackground', 'Background color of the type filter widget in lists and trees.'));
102 >
103 > export const listFilterWidgetOutline = registerColor('listFilterWidget.outline',
104 > { dark: Color.transparent, light: Color.transparent, hcDark: '#f38518', hcLight: '#007ACC' },
105 > nls.localize('listFilterWidgetOutline', 'Outline color of the type filter widget in lists and trees.'));
106 >
107 > export const listFilterWidgetNoMatchesOutline = registerColor('listFilterWidget.noMatchesOutline',
108 > { dark: '#BE1100', light: '#BE1100', hcDark: contrastBorder, hcLight: contrastBorder },
109 > nls.localize('listFilterWidgetNoMatchesOutline', 'Outline color of the type filter widget in lists and trees, when there are no matches.'));
110 >
111 > export const listFilterWidgetShadow = registerColor('listFilterWidget.shadow',
112 > widgetShadow,
113 > nls.localize('listFilterWidgetShadow', 'Shadow color of the type filter widget in lists and trees.'));
114 >
115 > export const listFilterMatchHighlight = registerColor('list.filterMatchBackground',
116 > { dark: editorFindMatchHighlight, light: editorFindMatchHighlight, hcDark: null, hcLight: null },
117 > nls.localize('listFilterMatchHighlight', 'Background color of the filtered match.'));
118 >
119 > export const listFilterMatchHighlightBorder = registerColor('list.filterMatchBorder',
120 > { dark: editorFindMatchHighlightBorder, light: editorFindMatchHighlightBorder, hcDark: contrastBorder, hcLight: activeContrastBorder },
121 > nls.localize('listFilterMatchHighlightBorder', 'Border color of the filtered match.'));
122 >
123 > export const listDeemphasizedForeground = registerColor('list.deemphasizedForeground',
124 > { dark: '#8C8C8C', light: '#8E8E90', hcDark: '#A7A8A9', hcLight: '#666666' },
125 > nls.localize('listDeemphasizedForeground', "List/Tree foreground color for items that are deemphasized."));
126 >
127 >
128 > // ------ tree
129 >
130 > export const treeIndentGuidesStroke = registerColor('tree.indentGuidesStroke',
131 > { dark: '#585858', light: '#a9a9a9', hcDark: '#a9a9a9', hcLight: '#a5a5a5' },
132 > nls.localize('treeIndentGuidesStroke', "Tree stroke color for the indentation guides."));
133 >
134 > export const treeInactiveIndentGuidesStroke = registerColor('tree.inactiveIndentGuidesStroke',
135 > transparent(treeIndentGuidesStroke, 0.4),
136 > nls.localize('treeInactiveIndentGuidesStroke', "Tree stroke color for the indentation guides that are not active."));
137 >
138 >
139 > // ------ table
140 >
141 > export const tableColumnsBorder = registerColor('tree.tableColumnsBorder',
142 > { dark: '#CCCCCC20', light: '#61616120', hcDark: null, hcLight: null },
143 > nls.localize('tableColumnsBorder', "Table border color between columns."));
144 >
145 > export const tableOddRowsBackgroundColor = registerColor('tree.tableOddRowsBackground',
146 > { dark: transparent(foreground, 0.04), light: transparent(foreground, 0.04), hcDark: null, hcLight: null },
147 > nls.localize('tableOddRowsBackgroundColor', "Background color for odd table rows."));
148 >
149 > // ------ action list
150 >
151 > export const editorActionListBackground = registerColor('editorActionList.background',
152 > editorWidgetBackground,
153 > nls.localize('editorActionListBackground', "Action List background color."));
154 >
155 > export const editorActionListForeground = registerColor('editorActionList.foreground',
156 > editorWidgetForeground,
157 > nls.localize('editorActionListForeground', "Action List foreground color."));
158 >
159 > export const editorActionListFocusForeground = registerColor('editorActionList.focusForeground',
160 > listActiveSelectionForeground,
161 > nls.localize('editorActionListFocusForeground', "Action List foreground color for the focused item."));
162 >
163 > export const editorActionListFocusBackground = registerColor('editorActionList.focusBackground',
164 > listActiveSelectionBackground,
165 > nls.localize('editorActionListFocusBackground', "Action List background color for the focused item."));
src/vs/platform/theme/common/colors/baseColors.ts 97 introduced LOC · 1 range

Open complete file

1 > /*--------------------------------------------------------------------------------------------- baseColors.ts
2 > * Copyright (c) Microsoft Corporation. All rights reserved.
3 > * Licensed under the MIT License. See License.txt in the project root for license information.
4 > *--------------------------------------------------------------------------------------------*/
5 >
6 > import * as nls from '../../../../nls.js';
7 >
8 > // Import the effects we need
9 > import { Color } from '../../../../base/common/color.js';
10 > import { registerColor, transparent } from '../colorUtils.js';
11 >
12 >
13 > export const foreground = registerColor('foreground',
14 > { dark: '#CCCCCC', light: '#616161', hcDark: '#FFFFFF', hcLight: '#292929' },
15 > nls.localize('foreground', "Overall foreground color. This color is only used if not overridden by a component."));
16 >
17 > export const strongForeground = registerColor('strongForeground',
18 > { dark: '#FFFFFF', light: '#000000', hcDark: '#FFFFFF', hcLight: '#000000' },
19 > nls.localize('strongForeground', "Highest-contrast foreground color, intended for text or icons that need maximum legibility across various backgrounds. This color is only used if not overridden by a component."));
20 >
21 > export const disabledForeground = registerColor('disabledForeground',
22 > { dark: '#CCCCCC80', light: '#61616180', hcDark: '#A5A5A5', hcLight: '#7F7F7F' },
23 > nls.localize('disabledForeground', "Overall foreground for disabled elements. This color is only used if not overridden by a component."));
24 >
25 > export const errorForeground = registerColor('errorForeground',
26 > { dark: '#F48771', light: '#A1260D', hcDark: '#F48771', hcLight: '#B5200D' },
27 > nls.localize('errorForeground', "Overall foreground color for error messages. This color is only used if not overridden by a component."));
28 >
29 > export const descriptionForeground = registerColor('descriptionForeground',
30 > { light: '#717171', dark: transparent(foreground, 0.7), hcDark: transparent(foreground, 0.7), hcLight: transparent(foreground, 0.7) },
31 > nls.localize('descriptionForeground', "Foreground color for description text providing additional information, for example for a label."));
32 >
33 > export const iconForeground = registerColor('icon.foreground',
34 > { dark: '#C5C5C5', light: '#424242', hcDark: '#FFFFFF', hcLight: '#292929' },
35 > nls.localize('iconForeground', "The default color for icons in the workbench."));
36 >
37 > export const focusBorder = registerColor('focusBorder',
38 > { dark: '#007FD4', light: '#0090F1', hcDark: '#F38518', hcLight: '#006BBD' },
39 > nls.localize('focusBorder', "Overall border color for focused elements. This color is only used if not overridden by a component."));
40 >
41 > export const contrastBorder = registerColor('contrastBorder',
42 > { light: null, dark: null, hcDark: '#6FC3DF', hcLight: '#0F4A85' },
43 > nls.localize('contrastBorder', "An extra border around elements to separate them from others for greater contrast."));
44 >
45 > export const activeContrastBorder = registerColor('contrastActiveBorder',
46 > { light: null, dark: null, hcDark: focusBorder, hcLight: focusBorder },
47 > nls.localize('activeContrastBorder', "An extra border around active elements to separate them from others for greater contrast."));
48 >
49 > export const selectionBackground = registerColor('selection.background',
50 > null,
51 > nls.localize('selectionBackground', "The background color of text selections in the workbench (e.g. for input fields or text areas). Note that this does not apply to selections within the editor."));
52 >
53 >
54 > // ------ text link
55 >
56 > export const textLinkForeground = registerColor('textLink.foreground',
57 > { light: '#006AB1', dark: '#3794FF', hcDark: '#21A6FF', hcLight: '#0F4A85' },
58 > nls.localize('textLinkForeground', "Foreground color for links in text."));
59 >
60 > export const textLinkActiveForeground = registerColor('textLink.activeForeground',
61 > { light: '#006AB1', dark: '#3794FF', hcDark: '#21A6FF', hcLight: '#0F4A85' },
62 > nls.localize('textLinkActiveForeground', "Foreground color for links in text when clicked on and on mouse hover."));
63 >
64 > export const textSeparatorForeground = registerColor('textSeparator.foreground',
65 > { light: '#0000002e', dark: '#ffffff2e', hcDark: Color.black, hcLight: '#292929' },
66 > nls.localize('textSeparatorForeground', "Color for text separators."));
67 >
68 >
69 > // ------ text preformat
70 >
71 > export const textPreformatForeground = registerColor('textPreformat.foreground',
72 > { light: '#A31515', dark: '#D7BA7D', hcDark: '#FFFFFF', hcLight: '#FFFFFF' },
73 > nls.localize('textPreformatForeground', "Foreground color for preformatted text segments."));
74 >
75 > export const textPreformatBackground = registerColor('textPreformat.background',
76 > { light: '#0000001A', dark: '#FFFFFF1A', hcDark: null, hcLight: '#09345f' },
77 > nls.localize('textPreformatBackground', "Background color for preformatted text segments."));
78 > export const textPreformatBorder = registerColor('textPreformat.border',
79 > { light: null, dark: null, hcDark: contrastBorder, hcLight: null },
80 > nls.localize('textPreformatBorder', "Border color for preformatted text segments."));
81 >
82 > // ------ text block quote
83 >
84 > export const textBlockQuoteBackground = registerColor('textBlockQuote.background',
85 > { light: '#f2f2f2', dark: '#222222', hcDark: null, hcLight: '#F2F2F2' },
86 > nls.localize('textBlockQuoteBackground', "Background color for block quotes in text."));
87 >
88 > export const textBlockQuoteBorder = registerColor('textBlockQuote.border',
89 > { light: '#007acc80', dark: '#007acc80', hcDark: Color.white, hcLight: '#292929' },
90 > nls.localize('textBlockQuoteBorder', "Border color for block quotes in text."));
91 >
92 >
93 > // ------ text code block
94 >
95 > export const textCodeBlockBackground = registerColor('textCodeBlock.background',
96 > { light: '#dcdcdc66', dark: '#0a0a0a66', hcDark: Color.black, hcLight: '#F2F2F2' },
97 > nls.localize('textCodeBlockBackground', "Background color for code blocks in text."));
src/vs/platform/theme/common/colors/miscColors.ts 91 introduced LOC · 1 range

Open complete file

1 > /*--------------------------------------------------------------------------------------------- miscColors.ts
2 > * Copyright (c) Microsoft Corporation. All rights reserved.
3 > * Licensed under the MIT License. See License.txt in the project root for license information.
4 > *--------------------------------------------------------------------------------------------*/
5 >
6 > import * as nls from '../../../../nls.js';
7 >
8 > // Import the effects we need
9 > import { Color } from '../../../../base/common/color.js';
10 > import { registerColor, transparent } from '../colorUtils.js';
11 >
12 > // Import the colors we need
13 > import { contrastBorder, focusBorder } from './baseColors.js';
14 >
15 >
16 > // ----- sash
17 >
18 > export const sashHoverBorder = registerColor('sash.hoverBorder',
19 > focusBorder,
20 > nls.localize('sashActiveBorder', "Border color of active sashes."));
21 >
22 >
23 > // ----- badge
24 >
25 > export const badgeBackground = registerColor('badge.background',
26 > { dark: '#4D4D4D', light: '#C4C4C4', hcDark: Color.black, hcLight: '#0F4A85' },
27 > nls.localize('badgeBackground', "Badge background color. Badges are small information labels, e.g. for search results count."));
28 >
29 > export const badgeForeground = registerColor('badge.foreground',
30 > { dark: Color.white, light: '#333', hcDark: Color.white, hcLight: Color.white },
31 > nls.localize('badgeForeground', "Badge foreground color. Badges are small information labels, e.g. for search results count."));
32 >
33 > export const activityWarningBadgeForeground = registerColor('activityWarningBadge.foreground',
34 > { dark: Color.white, light: Color.white, hcDark: Color.white, hcLight: Color.white },
35 > nls.localize('activityWarningBadge.foreground', 'Foreground color of the warning activity badge'));
36 >
37 > export const activityWarningBadgeBackground = registerColor('activityWarningBadge.background',
38 > { dark: '#B27C00', light: '#B27C00', hcDark: null, hcLight: '#B27C00' },
39 > nls.localize('activityWarningBadge.background', 'Background color of the warning activity badge'));
40 >
41 > export const activityErrorBadgeForeground = registerColor('activityErrorBadge.foreground',
42 > { dark: Color.black.lighten(0.2), light: Color.white, hcDark: null, hcLight: Color.black.lighten(0.2) },
43 > nls.localize('activityErrorBadge.foreground', 'Foreground color of the error activity badge'));
44 >
45 > export const activityErrorBadgeBackground = registerColor('activityErrorBadge.background',
46 > { dark: '#F14C4C', light: '#E51400', hcDark: null, hcLight: '#F14C4C' },
47 > nls.localize('activityErrorBadge.background', 'Background color of the error activity badge'));
48 >
49 >
50 > // ----- scrollbar
51 >
52 > export const scrollbarShadow = registerColor('scrollbar.shadow',
53 > { dark: '#000000', light: '#DDDDDD', hcDark: null, hcLight: null },
54 > nls.localize('scrollbarShadow', "Scrollbar shadow to indicate that the view is scrolled."));
55 >
56 > export const scrollbarSliderBackground = registerColor('scrollbarSlider.background',
57 > { dark: Color.fromHex('#797979').transparent(0.4), light: Color.fromHex('#646464').transparent(0.4), hcDark: transparent(contrastBorder, 0.6), hcLight: transparent(contrastBorder, 0.4) },
58 > nls.localize('scrollbarSliderBackground', "Scrollbar slider background color."));
59 >
60 > export const scrollbarSliderHoverBackground = registerColor('scrollbarSlider.hoverBackground',
61 > { dark: Color.fromHex('#646464').transparent(0.7), light: Color.fromHex('#646464').transparent(0.7), hcDark: transparent(contrastBorder, 0.8), hcLight: transparent(contrastBorder, 0.8) },
62 > nls.localize('scrollbarSliderHoverBackground', "Scrollbar slider background color when hovering."));
63 >
64 > export const scrollbarSliderActiveBackground = registerColor('scrollbarSlider.activeBackground',
65 > { dark: Color.fromHex('#BFBFBF').transparent(0.4), light: Color.fromHex('#000000').transparent(0.6), hcDark: contrastBorder, hcLight: contrastBorder },
66 > nls.localize('scrollbarSliderActiveBackground', "Scrollbar slider background color when clicked on."));
67 >
68 > export const scrollbarBackground = registerColor('scrollbar.background',
69 > null,
70 > nls.localize('scrollbarBackground', "Scrollbar track background color."));
71 >
72 >
73 > // ----- progress bar
74 >
75 > export const progressBarBackground = registerColor('progressBar.background',
76 > { dark: Color.fromHex('#0E70C0'), light: Color.fromHex('#0E70C0'), hcDark: contrastBorder, hcLight: contrastBorder },
77 > nls.localize('progressBarBackground', "Background color of the progress bar that can show for long running operations."));
78 >
79 > // ----- chart
80 >
81 > export const chartLine = registerColor('chart.line',
82 > { dark: '#236B8E', light: '#236B8E', hcDark: '#236B8E', hcLight: '#236B8E' },
83 > nls.localize('chartLine', "Line color for the chart."));
84 >
85 > export const chartAxis = registerColor('chart.axis',
86 > { dark: Color.fromHex('#BFBFBF').transparent(0.4), light: Color.fromHex('#000000').transparent(0.6), hcDark: contrastBorder, hcLight: contrastBorder },
87 > nls.localize('chartAxis', "Axis color for the chart."));
88 >
89 > export const chartGuide = registerColor('chart.guide',
90 > { dark: Color.fromHex('#BFBFBF').transparent(0.2), light: Color.fromHex('#000000').transparent(0.2), hcDark: contrastBorder, hcLight: contrastBorder },
91 > nls.localize('chartGuide', "Guide line for the chart."));
src/vs/platform/theme/common/colors/minimapColors.ts 59 introduced LOC · 1 range

Open complete file

1 > /*--------------------------------------------------------------------------------------------- minimapColors.ts
2 > * Copyright (c) Microsoft Corporation. All rights reserved.
3 > * Licensed under the MIT License. See License.txt in the project root for license information.
4 > *--------------------------------------------------------------------------------------------*/
5 >
6 > import * as nls from '../../../../nls.js';
7 >
8 > // Import the effects we need
9 > import { Color, RGBA } from '../../../../base/common/color.js';
10 > import { registerColor, transparent } from '../colorUtils.js';
11 >
12 > // Import the colors we need
13 > import { editorFindMatchHighlight, editorInfoBorder, editorInfoForeground, editorSelectionBackground, editorSelectionHighlight, editorWarningBorder, editorWarningForeground } from './editorColors.js';
14 > import { scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground } from './miscColors.js';
15 >
16 >
17 > export const minimapFindMatch = registerColor('minimap.findMatchHighlight',
18 > editorFindMatchHighlight,
19 > nls.localize('minimapFindMatchHighlight', 'Minimap marker color for find matches.'), true);
20 >
21 > export const minimapSelectionOccurrenceHighlight = registerColor('minimap.selectionOccurrenceHighlight',
22 > editorSelectionHighlight,
23 > nls.localize('minimapSelectionOccurrenceHighlight', 'Minimap marker color for repeating editor selections.'), true);
24 >
25 > export const minimapSelection = registerColor('minimap.selectionHighlight',
26 > editorSelectionBackground,
27 > nls.localize('minimapSelectionHighlight', 'Minimap marker color for the editor selection.'), true);
28 >
29 > export const minimapInfo = registerColor('minimap.infoHighlight',
30 > { dark: editorInfoForeground, light: editorInfoForeground, hcDark: editorInfoBorder, hcLight: editorInfoBorder },
31 > nls.localize('minimapInfo', 'Minimap marker color for infos.'));
32 >
33 > export const minimapWarning = registerColor('minimap.warningHighlight',
34 > { dark: editorWarningForeground, light: editorWarningForeground, hcDark: editorWarningBorder, hcLight: editorWarningBorder },
35 > nls.localize('overviewRuleWarning', 'Minimap marker color for warnings.'));
36 >
37 > export const minimapError = registerColor('minimap.errorHighlight',
38 > { dark: new Color(new RGBA(255, 18, 18, 0.7)), light: new Color(new RGBA(255, 18, 18, 0.7)), hcDark: new Color(new RGBA(255, 50, 50, 1)), hcLight: '#B5200D' },
39 > nls.localize('minimapError', 'Minimap marker color for errors.'));
40 >
41 > export const minimapBackground = registerColor('minimap.background',
42 > null,
43 > nls.localize('minimapBackground', "Minimap background color."));
44 >
45 > export const minimapForegroundOpacity = registerColor('minimap.foregroundOpacity',
46 > Color.fromHex('#000f'),
47 > nls.localize('minimapForegroundOpacity', 'Opacity of foreground elements rendered in the minimap. For example, "#000000c0" will render the elements with 75% opacity.'));
48 >
49 > export const minimapSliderBackground = registerColor('minimapSlider.background',
50 > transparent(scrollbarSliderBackground, 0.5),
51 > nls.localize('minimapSliderBackground', "Minimap slider background color."));
52 >
53 > export const minimapSliderHoverBackground = registerColor('minimapSlider.hoverBackground',
54 > transparent(scrollbarSliderHoverBackground, 0.5),
55 > nls.localize('minimapSliderHoverBackground', "Minimap slider background color when hovering."));
56 >
57 > export const minimapSliderActiveBackground = registerColor('minimapSlider.activeBackground',
58 > transparent(scrollbarSliderActiveBackground, 0.5),
59 > nls.localize('minimapSliderActiveBackground', "Minimap slider background color when clicked on."));
src/vs/platform/theme/common/colors/quickpickColors.ts 55 introduced LOC · 1 range

Open complete file

1 > /*--------------------------------------------------------------------------------------------- quickpickColors.ts
2 > * Copyright (c) Microsoft Corporation. All rights reserved.
3 > * Licensed under the MIT License. See License.txt in the project root for license information.
4 > *--------------------------------------------------------------------------------------------*/
5 >
6 > import * as nls from '../../../../nls.js';
7 >
8 > // Import the effects we need
9 > import { Color, RGBA } from '../../../../base/common/color.js';
10 > import { registerColor, oneOf } from '../colorUtils.js';
11 >
12 > // Import the colors we need
13 > import { editorWidgetBackground, editorWidgetForeground } from './editorColors.js';
14 > import { listActiveSelectionBackground, listActiveSelectionForeground, listActiveSelectionIconForeground, listFocusHighlightForeground } from './listColors.js';
15 >
16 >
17 > export const quickInputBackground = registerColor('quickInput.background',
18 > editorWidgetBackground,
19 > nls.localize('pickerBackground', "Quick picker background color. The quick picker widget is the container for pickers like the command palette."));
20 >
21 > export const quickInputForeground = registerColor('quickInput.foreground',
22 > editorWidgetForeground,
23 > nls.localize('pickerForeground', "Quick picker foreground color. The quick picker widget is the container for pickers like the command palette."));
24 >
25 > export const quickInputTitleBackground = registerColor('quickInputTitle.background',
26 > { dark: new Color(new RGBA(255, 255, 255, 0.105)), light: new Color(new RGBA(0, 0, 0, 0.06)), hcDark: '#000000', hcLight: Color.white },
27 > nls.localize('pickerTitleBackground', "Quick picker title background color. The quick picker widget is the container for pickers like the command palette."));
28 >
29 > export const pickerGroupForeground = registerColor('pickerGroup.foreground',
30 > { dark: '#3794FF', light: '#0066BF', hcDark: Color.white, hcLight: '#0F4A85' },
31 > nls.localize('pickerGroupForeground', "Quick picker color for grouping labels."));
32 >
33 > export const pickerGroupBorder = registerColor('pickerGroup.border',
34 > { dark: '#3F3F46', light: '#CCCEDB', hcDark: Color.white, hcLight: '#0F4A85' },
35 > nls.localize('pickerGroupBorder', "Quick picker color for grouping borders."));
36 >
37 > export const _deprecatedQuickInputListFocusBackground = registerColor('quickInput.list.focusBackground',
38 > null, '', undefined,
39 > nls.localize('quickInput.list.focusBackground deprecation', "Please use quickInputList.focusBackground instead"));
40 >
41 > export const quickInputListFocusForeground = registerColor('quickInputList.focusForeground',
42 > listActiveSelectionForeground,
43 > nls.localize('quickInput.listFocusForeground', "Quick picker foreground color for the focused item."));
44 >
45 > export const quickInputListFocusIconForeground = registerColor('quickInputList.focusIconForeground',
46 > listActiveSelectionIconForeground,
47 > nls.localize('quickInput.listFocusIconForeground', "Quick picker icon foreground color for the focused item."));
48 >
49 > export const quickInputListFocusBackground = registerColor('quickInputList.focusBackground',
50 > { dark: oneOf(_deprecatedQuickInputListFocusBackground, listActiveSelectionBackground), light: oneOf(_deprecatedQuickInputListFocusBackground, listActiveSelectionBackground), hcDark: null, hcLight: null },
51 > nls.localize('quickInput.listFocusBackground', "Quick picker background color for the focused item."));
52 >
53 > export const quickInputListFocusHighlightForeground = registerColor('quickInputList.focusHighlightForeground',
54 > listFocusHighlightForeground,
55 > nls.localize('quickInput.listFocusHighlightForeground', "Quick picker foreground color of the match highlights on the focused item."));
src/vs/platform/theme/common/colors/chartsColors.ts 44 introduced LOC · 1 range

Open complete file

1 > /*--------------------------------------------------------------------------------------------- chartsColors.ts
2 > * Copyright (c) Microsoft Corporation. All rights reserved.
3 > * Licensed under the MIT License. See License.txt in the project root for license information.
4 > *--------------------------------------------------------------------------------------------*/
5 >
6 > import * as nls from '../../../../nls.js';
7 > import { registerColor, transparent } from '../colorUtils.js';
8 >
9 > import { foreground } from './baseColors.js';
10 > import { editorErrorForeground, editorInfoForeground, editorWarningForeground } from './editorColors.js';
11 > import { minimapFindMatch } from './minimapColors.js';
12 >
13 >
14 > export const chartsForeground = registerColor('charts.foreground',
15 > foreground,
16 > nls.localize('chartsForeground', "The foreground color used in charts."));
17 >
18 > export const chartsLines = registerColor('charts.lines',
19 > transparent(foreground, .5),
20 > nls.localize('chartsLines', "The color used for horizontal lines in charts."));
21 >
22 > export const chartsRed = registerColor('charts.red',
23 > editorErrorForeground,
24 > nls.localize('chartsRed', "The red color used in chart visualizations."));
25 >
26 > export const chartsBlue = registerColor('charts.blue',
27 > editorInfoForeground,
28 > nls.localize('chartsBlue', "The blue color used in chart visualizations."));
29 >
30 > export const chartsYellow = registerColor('charts.yellow',
31 > editorWarningForeground,
32 > nls.localize('chartsYellow', "The yellow color used in chart visualizations."));
33 >
34 > export const chartsOrange = registerColor('charts.orange',
35 > minimapFindMatch,
36 > nls.localize('chartsOrange', "The orange color used in chart visualizations."));
37 >
38 > export const chartsGreen = registerColor('charts.green',
39 > { dark: '#89D185', light: '#388A34', hcDark: '#89D185', hcLight: '#374e06' },
40 > nls.localize('chartsGreen', "The green color used in chart visualizations."));
41 >
42 > export const chartsPurple = registerColor('charts.purple',
43 > { dark: '#B180D7', light: '#652D90', hcDark: '#B180D7', hcLight: '#652D90' },
44 > nls.localize('chartsPurple', "The purple color used in chart visualizations."));
src/vs/platform/theme/common/colors/menuColors.ts 43 introduced LOC · 1 range

Open complete file

1 > /*--------------------------------------------------------------------------------------------- menuColors.ts
2 > * Copyright (c) Microsoft Corporation. All rights reserved.
3 > * Licensed under the MIT License. See License.txt in the project root for license information.
4 > *--------------------------------------------------------------------------------------------*/
5 >
6 > import * as nls from '../../../../nls.js';
7 >
8 > // Import the effects we need
9 > import { registerColor, transparent } from '../colorUtils.js';
10 >
11 > // Import the colors we need
12 > import { contrastBorder, activeContrastBorder, foreground } from './baseColors.js';
13 > import { selectForeground, selectBackground } from './inputColors.js';
14 > import { listActiveSelectionBackground, listActiveSelectionForeground } from './listColors.js';
15 >
16 >
17 > export const menuBorder = registerColor('menu.border',
18 > { dark: null, light: null, hcDark: contrastBorder, hcLight: contrastBorder },
19 > nls.localize('menuBorder', "Border color of menus."));
20 >
21 > export const menuForeground = registerColor('menu.foreground',
22 > selectForeground,
23 > nls.localize('menuForeground', "Foreground color of menu items."));
24 >
25 > export const menuBackground = registerColor('menu.background',
26 > selectBackground,
27 > nls.localize('menuBackground', "Background color of menu items."));
28 >
29 > export const menuSelectionForeground = registerColor('menu.selectionForeground',
30 > listActiveSelectionForeground,
31 > nls.localize('menuSelectionForeground', "Foreground color of the selected menu item in menus."));
32 >
33 > export const menuSelectionBackground = registerColor('menu.selectionBackground',
34 > listActiveSelectionBackground,
35 > nls.localize('menuSelectionBackground', "Background color of the selected menu item in menus."));
36 >
37 > export const menuSelectionBorder = registerColor('menu.selectionBorder',
38 > { dark: null, light: null, hcDark: activeContrastBorder, hcLight: activeContrastBorder },
39 > nls.localize('menuSelectionBorder', "Border color of the selected menu item in menus."));
40 >
41 > export const menuSeparatorBackground = registerColor('menu.separatorBackground',
42 > { dark: transparent(foreground, 0.2), light: transparent(foreground, 0.2), hcDark: contrastBorder, hcLight: contrastBorder },
43 > nls.localize('menuSeparatorBackground', "Color of a separator menu item in menus."));
src/vs/platform/theme/common/colors/searchColors.ts 29 introduced LOC · 1 range

Open complete file

1 > /*--------------------------------------------------------------------------------------------- searchColors.ts
2 > * Copyright (c) Microsoft Corporation. All rights reserved.
3 > * Licensed under the MIT License. See License.txt in the project root for license information.
4 > *--------------------------------------------------------------------------------------------*/
5 >
6 > import * as nls from '../../../../nls.js';
7 >
8 > // Import the effects we need
9 > import { registerColor, transparent } from '../colorUtils.js';
10 >
11 > // Import the colors we need
12 > import { foreground } from './baseColors.js';
13 > import { editorFindMatchHighlight, editorFindMatchHighlightBorder } from './editorColors.js';
14 >
15 >
16 > export const searchResultsInfoForeground = registerColor('search.resultsInfoForeground',
17 > { light: foreground, dark: transparent(foreground, 0.65), hcDark: foreground, hcLight: foreground },
18 > nls.localize('search.resultsInfoForeground', "Color of the text in the search viewlet's completion message."));
19 >
20 >
21 > // ----- search editor (Distinct from normal editor find match to allow for better differentiation)
22 >
23 > export const searchEditorFindMatch = registerColor('searchEditor.findMatchBackground',
24 > { light: transparent(editorFindMatchHighlight, 0.66), dark: transparent(editorFindMatchHighlight, 0.66), hcDark: editorFindMatchHighlight, hcLight: editorFindMatchHighlight },
25 > nls.localize('searchEditor.queryMatch', "Color of the Search Editor query matches."));
26 >
27 > export const searchEditorFindMatchBorder = registerColor('searchEditor.findMatchBorder',
28 > { light: transparent(editorFindMatchHighlightBorder, 0.66), dark: transparent(editorFindMatchHighlightBorder, 0.66), hcDark: editorFindMatchHighlightBorder, hcLight: editorFindMatchHighlightBorder },
29 > nls.localize('searchEditor.editorFindMatchBorder', "Border color of the Search Editor query matches."));
src/vs/platform/theme/common/theme.ts 26 introduced LOC · 2 ranges

Open complete file

1 > /*--------------------------------------------------------------------------------------------- theme.ts
2 > * Copyright (c) Microsoft Corporation. All rights reserved.
3 > * Licensed under the MIT License. See License.txt in the project root for license information.
4 > *--------------------------------------------------------------------------------------------*/
5 >
6 > /**
7 > * Color scheme used by the OS and by color themes.
8 > */
9 > export enum ColorScheme {
10 > DARK = 'dark',
11 > LIGHT = 'light',
12 > HIGH_CONTRAST_DARK = 'hcDark',
13 > HIGH_CONTRAST_LIGHT = 'hcLight'
14 > }
15 >
16 > export enum ThemeTypeSelector {
17 > VS = 'vs',
18 > VS_DARK = 'vs-dark',
19 > HC_BLACK = 'hc-black',
20 > HC_LIGHT = 'hc-light'
21 > }
22 >
23 >
24 > export function isHighContrast(scheme: ColorScheme): boolean {
25 return scheme === ColorScheme.HIGH_CONTRAST_DARK || scheme === ColorScheme.HIGH_CONTRAST_LIGHT;
26 }
27 > theme.ts
28 > export function isDark(scheme: ColorScheme): boolean {
29 return scheme === ColorScheme.DARK || scheme === ColorScheme.HIGH_CONTRAST_DARK;
30 }
src/vs/platform/theme/common/colorRegistry.ts 18 introduced LOC · 1 range

Open complete file

1 > /*--------------------------------------------------------------------------------------------- colorRegistry.ts
2 > * Copyright (c) Microsoft Corporation. All rights reserved.
3 > * Licensed under the MIT License. See License.txt in the project root for license information.
4 > *--------------------------------------------------------------------------------------------*/
5 >
6 > export * from './colorUtils.js';
7 >
8 > // Make sure all color files are exported
9 > export * from './colors/baseColors.js';
10 > export * from './colors/chartsColors.js';
11 > export * from './colors/editorColors.js';
12 > export * from './colors/inputColors.js';
13 > export * from './colors/listColors.js';
14 > export * from './colors/menuColors.js';
15 > export * from './colors/minimapColors.js';
16 > export * from './colors/miscColors.js';
17 > export * from './colors/quickpickColors.js';
18 > export * from './colors/searchColors.js';
src/vs/base/common/color.ts 3 introduced LOC · 1 range

Open complete file

460
461 transparent(factor: number): Color {
462 > const { r, g, b, a } = this.rgba; color.ts
463 > return new Color(new RGBA(r, g, b, a * factor));
464 > }
465
466 isTransparent(): boolean {

Direct hierarchy

Parents

Children