VS Code preview
Full workbench mockup using this variant's colors and tokenColors.
Loading...
colors
Workbench UI color keys from the theme JSON colors map.
- activityBar.background#f8f9fd
- activityBar.border#e8e9ed
- activityBar.foreground#19b491
- activityBar.inactiveForeground#a7beca
- activityBarBadge.background#EA4224
- activityBarBadge.foreground#ffffff
- badge.background#CCD7DA30
- badge.foreground#90a4ae
- breadcrumb.activeSelectionForeground#80CBC4
- breadcrumb.background#ffffff
- breadcrumb.focusForeground#90a4ae
- breadcrumb.foreground#627883
- breadcrumbPicker.background#f8f9fd
- button.background#3fc2a7
- debugToolBar.background#ffffff
- diffEditor.insertedTextBackground#91B85915
- diffEditor.removedTextBackground#E5393520
- dropdown.background#ffffff
- dropdown.border#00000010
- editor.background#ffffff
- editor.findMatchBackground#fd800855
- editor.findMatchBorder#fd800800
- editor.findMatchHighlightBackground#B6D5E000
- editor.findMatchHighlightBorder#B6D5E0
- editor.foreground#546e7a
- editor.lineHighlightBackground#CCD7DA50
- editor.selectionBackground#80CBC440
- editor.selectionHighlightBackground#80CBC400
- editor.selectionHighlightBorder#B6D5E0
- editor.snippetTabstopHighlightBackground#80CBC400
- editorBracketMatch.background#ffffff
- editorBracketMatch.border#35373b50
- editorCursor.foreground#35373b
- editorError.foreground#E5393570
- editorGroup.border#f2f5fc
- editorGroupHeader.tabsBackground#ffffff
- editorGutter.addedBackground#91B85960
- editorGutter.deletedBackground#E5393560
- editorGutter.modifiedBackground#6182B860
- editorHoverWidget.background#ffffff
- editorHoverWidget.border#00000010
- editorIndentGuide.activeBackground#e8e9ed
- editorIndentGuide.background#f2f5fc
- editorLineNumber.activeForeground#627883
- editorLineNumber.foreground#CFD8DC
- editorLink.activeForeground#90a4ae
- editorMarkerNavigation.background#90A4AE05
- editorOverviewRuler.border#ffffff
- editorRuler.foreground#B0BEC5
- editorSuggestWidget.background#ffffff
- editorSuggestWidget.border#00000010
- editorSuggestWidget.foreground#90a4ae
- editorSuggestWidget.highlightForeground#546e7a
- editorSuggestWidget.selectedBackground#CCD7DA50
- editorWarning.foreground#91B85970
- editorWhitespace.foreground#f2f5fc
- editorWidget.background#f8f9fd
- editorWidget.border#e8e9ed
- editorWidget.resizeBorder#80CBC4
- extensionButton.prominentBackground#91B85990
- extensionButton.prominentHoverBackground#91B859
- focusBorder#ffffff00
- gitDecoration.conflictingResourceForeground#FFB62C90
- gitDecoration.deletedResourceForeground#E5393590
- gitDecoration.ignoredResourceForeground#62788390
- gitDecoration.modifiedResourceForeground#6182B890
- gitDecoration.untrackedResourceForeground#91B85990
- input.background#ffffff
- input.border#e8e9ed
- input.foreground#90a4ae
- input.placeholderForeground#90A4AE60
- inputOption.activeBackground#3fc2a725
- inputValidation.errorBorder#E5393550
- inputValidation.infoBorder#6182B850
- inputValidation.warningBorder#FFB62C50
- list.activeSelectionBackground#80CBC430
- list.activeSelectionForeground#19b491
- list.focusBackground#90A4AE20
- list.focusForeground#90a4ae
- list.highlightForeground#80CBC4
- list.hoverBackground#80CBC410
- list.hoverForeground#19b491
- list.inactiveSelectionBackground#ccd7da50
- list.inactiveSelectionForeground#80CBC4
- menu.background#ffffff
- menu.foreground#90a4ae
- menu.selectionBackground#CCD7DA50
- menu.selectionBorder#CCD7DA50
- menu.selectionForeground#35373b
- menu.separatorBackground#90a4ae
- menubar.selectionBackground#CCD7DA50
- menubar.selectionBorder#CCD7DA50
- menubar.selectionForeground#35373b
- notificationLink.foreground#80CBC4
- notifications.background#ffffff
- notifications.foreground#90a4ae
- panel.background#f8f9fd
- panel.border#e8e9ed
- panelSectionHeader.background#f2f5fc
- panelTitle.activeBorder#3fc2a7
- panelTitle.activeForeground#16967a
- panelTitle.inactiveForeground#90a4ae
- peekView.border#00000020
- peekViewEditor.background#90A4AE05
- peekViewEditor.matchHighlightBackground#80CBC440
- peekViewEditorGutter.background#90A4AE05
- peekViewResult.background#90A4AE05
- peekViewResult.matchHighlightBackground#80CBC440
- peekViewResult.selectionBackground#62788370
- peekViewTitle.background#90A4AE05
- peekViewTitleDescription.foreground#90A4AE60
- pickerGroup.foreground#80CBC4
- progressBar.background#80CBC4
- scrollbar.shadow#f2f5fc50
- scrollbarSlider.activeBackground#3fc2a7ee
- scrollbarSlider.background#3fc2a780
- scrollbarSlider.hoverBackground#3fc2a7aa
- selection.background#80CBC440
- settings.checkboxBackground#f8f9fd
- settings.checkboxForeground#90a4ae
- settings.dropdownBackground#f8f9fd
- settings.dropdownForeground#90a4ae
- settings.headerForeground#80CBC4
- settings.modifiedItemIndicator#80CBC4
- settings.numberInputBackground#f8f9fd
- settings.numberInputForeground#90a4ae
- settings.textInputBackground#f8f9fd
- settings.textInputForeground#90a4ae
- sideBar.background#f8f9fd
- sideBar.border#e8e9ed
- sideBar.foreground#627883
- sideBarSectionHeader.background#f2f5fc
- sideBarTitle.foreground#90a4ae
- statusBar.background#f8f9fd
- statusBar.border#e8e9ed
- statusBar.debuggingBackground#7C4DFF
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#7E939E
- statusBar.noFolderBackground#ffffff
- statusBarItem.hoverBackground#90A4AE20
- tab.activeBackground#f2f5fc
- tab.activeBorder#3fc2a7
- tab.activeForeground#000000
- tab.border#ffffff
- tab.inactiveBackground#ffffff
- tab.inactiveForeground#627883
- tab.unfocusedActiveBorder#90a4ae
- tab.unfocusedActiveForeground#90a4ae
- terminal.ansiBlack#000000
- terminal.ansiBlue#0096ff
- terminal.ansiBrightBlack#35373b
- terminal.ansiBrightBlue#70acf7
- terminal.ansiBrightCyan#3fc2a7
- terminal.ansiBrightGreen#2ecc71
- terminal.ansiBrightMagenta#be7ee7
- terminal.ansiBrightRed#ff4628
- terminal.ansiBrightWhite#c7c8cb
- terminal.ansiBrightYellow#ffb62c
- terminal.ansiCyan#19b491
- terminal.ansiGreen#27ae60
- terminal.ansiMagenta#9437ff
- terminal.ansiRed#ea4224
- terminal.ansiWhite#b3b5ab
- terminal.ansiYellow#e67e22
- textLink.activeForeground#90a4ae
- textLink.foreground#80CBC4
- titleBar.activeBackground#e8e9ed
- titleBar.activeForeground#75797b
- titleBar.border#e8e9ed
- titleBar.inactiveBackground#f8f9fd
- titleBar.inactiveForeground#627883
- widget.shadow#00000020
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #b6d5e0 | italic |
| variable, string constant.other.placeholder | #546e7a | — |
| invalid, invalid.illegal | #546e7a | — |
| invalid.deprecated | #FFB62C | italic |
| invalid.unimplemented | #546e7a | — |
| keyword, storage.type, storage.modifier | #FF5370 | — |
| storage.type, keyword.control | — | italic |
| keyword.control, meta.tag, punctuation.accessor.js, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution | #ff5370 | — |
| keyword.control | — | italic |
| entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter | #FF5370 | — |
| entity.name.function, meta.function-call, variable.function, support.function.js, keyword.other.special-method, meta.block-level | #0096ff | — |
| string.regexp | #90a4ae | |
| string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end | #9437ff | |
| constant.other.character-class.regexp, constant.other.character-class.escape.backslash.regexp, constant.character.escape.backslash.regexp | #0096ff | italic |
| source.cpp meta.block variable.other | #ff5370 | — |
| variable.other.constant | #0096ff | — |
| support.other.variable, string.other.link | #ff5370 | — |
| constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit | #7c4dff | italic |
| variable.parameter | #f5be09 | italic |
| variable.parameter.function.language.special | #E53935 | — |
| constant.character.entity.wxml | #546e7a | italic |
| string | #53c659 | — |
| punctuation | #90a4ae | — |
| constant.other.symbol, constant.other.key, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js | #546e7a | — |
| entity.name.class, entity.name.type.class, entity.other.inherited-class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types | #FFB62C | bold italic |
| support.type | #8796B0 | — |
| source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name | #8796B0 | — |
| entity.name.module.js, variable.import.parameter.js | #e53935 | — |
| variable.language | #e53935 | italic |
| entity.other.attribute-name | #7C4DFF | — |
| markup.inserted | #91B859 | — |
| markup.deleted | #E53935 | — |
| markup.changed | #7C4DFF | — |
| constant.character.escape | #39ADB5 | — |
| *url*, *link*, *uri* | — | underline |
| text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name, text.xhtml.basic entity.other.attribute-name.xhtml, text.xhtml.basic entity.other.attribute-name | #ffb62c | italic |
| entity.other.attribute-name.class, entity.other.attribute-name.id.css | #ffb62c | — |
| meta.property-value.scss variable.scss, meta.at-rule.mixin.scss variable.scss, meta.definition.variable.scss variable.scss | #ff4628cb | — |
| constant.other.color.rgb-value.hex.css | #be7ee7 | underline |
| meta.property-value.css variable.parameter.url.css, meta.property-value.scss variable.parameter.url.scss, meta.property-value.scss keyword.operator.css, meta.property-value.scss string.quoted.single.scss | #53c659 | — |
| text.html.derivative meta.attribute.unrecognized entity.other.attribute-name.html | #ffb62c | — |
| text.html.derivative meta.attribute.unrecognized string.quoted.double.html | #be7ee7 | — |
| constant.character.entity.named, constant.character.entity.named punctuation.definition.entity.html, constant.character.entity.numeric.hexadecimal.html, constant.character.entity.numeric.hexadecimal.html punctuation.definition.entity.html | #70acf7 | — |
| meta.import.js variable.other.readwrite.alias.js, meta.import.ts variable.other.readwrite.alias.ts | #0096ff | — |
| meta.import.js string.quoted.single.js, meta.import.js string.quoted.double.js, meta.import.ts string.quoted.single.ts, meta.import.ts string.quoted.double.ts | #90a4ae | underline |
| meta.import.js string.quoted.single.js punctuation.definition.string.begin.js, meta.import.js string.quoted.double.js punctuation.definition.string.begin.js, meta.import.js string.quoted.single.js punctuation.definition.string.end.js, meta.import.js string.quoted.double.js punctuation.definition.string.end.js, meta.import.ts string.quoted.single.ts punctuation.definition.string.begin.ts, meta.import.ts string.quoted.double.ts punctuation.definition.string.begin.ts, meta.import.ts string.quoted.single.ts punctuation.definition.string.end.ts, meta.import.ts string.quoted.double.ts punctuation.definition.string.end.ts | — | none |
| tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js | #6182B8 | italic |
| meta.class-method.js entity.name.function.js, variable.function.constructor | #6182B8 | — |
| entity.name.method.js | #6182B8 | italic |
| support.type.object.console.js, support.type.object.module.js, support.type.object.dom.js, support.constant.math, support.constant.json, meta.class.extends.js variable.other.readwrite.js, meta.function-call.static.without-arguments.js variable.other.class.js, meta.function-call.static.with-arguments.js variable.other.class.js, meta.property.class.js variable.other.class.js | #ffb62c | bold italic |
| new.expr entity.name.type | #ffb62c | bold |
| comment.block.documentation entity.name.type.instance.jsdoc, comment.block.documentation constant.other.email.link.underline.jsdoc | #b6d5e0 | italic |
| comment.block.documentation constant.other.email.link.underline.jsdoc | — | italic underline |
| punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js | #ff5370 | |
| meta.object.member.js meta.array.literal.js meta.brace.square.js, meta.object.member.js meta.arrow.js meta.brace.round.js, string.template.js meta.template.expression.js meta.array.literal.js meta.brace.square.js, string.template.js meta.template.expression.js meta.brace.round.js, string.template.ts meta.template.expression.ts meta.array.literal.ts meta.brace.square.ts, string.template.ts meta.template.expression.ts meta.brace.round.ts | #90a4ae | — |
| string.template.js meta.template.expression.js support.variable.property.js, string.template.ts meta.template.expression.ts support.variable.property.ts | #546e7a | — |
| source.js support.function.node.js, meta.group.braces.curly.js support.function, meta.function-call.ts support.function.ts, meta.function-call.js support.function.js, support.function.builtin.js | #be7ee7 | italic |
| entity.other.attribute-name.js, entity.other.attribute-name.ts, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx | — | italic |
| meta.group.braces.round variable.other.constant, support.type.object.module keyword.operator.accessor, support.constant.property.math.ts | #90a4ae | italic bold |
| support.type.primitive.ts, support.type.builtin.ts, support.type.primitive.tsx, support.type.builtin.tsx, entity.name.type.module, entity.name.type | #e5c07b | bold italic |
| constant.other.object.key.js string.unquoted.label.js, constant.other.object.key.js string.quoted.label.js, meta.object.member.js meta.object-literal.key.js string.quoted.double.js, meta.object.member.js meta.object-literal.key.js string.quoted.single.js, meta.object.member.js meta.object-literal.key.js constant.numeric.decimal.js, meta.objectliteral.js meta.object.member.js meta.object-literal.key.js | #90a4ae | italic bold |
| support.function.construct.php, variable.other.php, keyword.operator.logical.php, punctuation.definition.variable.php, string.quoted.single.php, constant.numeric.decimal.php, support.function.array.php, support.function.mbstring.php, variable.other.global.safer.php, support.function.datetime.php | #a7beca | italic |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, punctuation.terminator.statement.php, punctuation.definition.begin.bracket.round.php, punctuation.definition.end.bracket.round.php, punctuation.definition.arguments.begin.bracket.round.php, punctuation.definition.arguments.end.bracket.round.php, punctuation.terminator.expression.php, punctuation.section.array.begin.php, punctuation.section.array.end.php, punctuation.definition.string.begin.php, punctuation.definition.string.end.php, keyword.control.if.php, keyword.control.elseif.php, keyword.control.endif.php, keyword.control.foreach.php, keyword.control.endforeach.php, keyword.control.import.include.php | #c7c8cb | italic |
| keyword.operator.comparison.php, keyword.operator.ternary.php, keyword.operator.assignment.php, keyword.operator.string.php, keyword.operator.key.php | #e8e9ed | italic |
| text.html.markdown, punctuation.definition.list_item.markdown | #546e7a | — |
| markup.inline | #ff5370 | |
| markup.fenced_code.block.markdown, markup.raw.block | #90a4ae | — |
| markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown, punctuation.definition.heading.markdown | #ff4628 | bold |
| markup.quote | #90a4ae | italic |
| markup.underline.link.image.markdown, markup.underline.link.markdown | #b3b5ab | italic |
| string.other.link.title.markdown, string.other.link.description.markdown | #0096ff | |
| variable.language.fenced.markdown | #E7EAEC | — |
| meta.separator | #E7EAEC | bold |
| markup.italic | #b3b5ab | italic |
| markup.bold, markup.bold string | #75797b | bold |
| markup.bold markup.italic, markup.italic markup.bold | #75797b | bold italic |
| markup.inserted, markup.deleted, markup.underline | #90a4ae | underline |
| markup.underline | #ff4628 | — |
| markup.list | #75797b | bold |
| punctuation.definition.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.heading.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown | #c7c8cb | |
| source.json meta.structure.dictionary.json support.type.property-name.json | #90a4ae | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #FFB62C | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #F76D47 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #E53935 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #C17E70 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #6182B8 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #FF5370 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #7C4DFF | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #91B859 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...