Color themes
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#263238
- activityBar.foreground#97a7c8ff
- activityBarBadge.background#4AB3E4
- activityBarBadge.foreground#000000
- button.hoverBackground#4AB3E4
- debugToolBar.background#263238
- dropdown.background#263238
- dropdown.border#97a7c8ff
- editor.background#263238
- editor.findMatchBackground#4B5D66ff
- editor.foreground#f5f5f5
- editor.lineHighlightBackground#14344B
- editor.lineHighlightBorder#14344B
- editor.selectionBackground#4B5D66ff
- editorBracketMatch.border#97a7c8ff
- editorCursor.foreground#4AB3E4
- editorError.border#FB467B
- editorGroup.background#263238
- editorGroup.border#263238
- editorGroupHeader.noTabsBackground#263238
- editorGroupHeader.tabsBackground#263238
- editorGutter.addedBackground#56D6D6
- editorGutter.deletedBackground#FB467B
- editorGutter.modifiedBackground#FFCC00
- editorHoverWidget.background#263238
- editorIndentGuide.background#4B5D66ff
- editorLineNumber.foreground#5C6370
- editorOverviewRuler.border#263238
- editorRuler.foreground#4B5D66ff
- editorSuggestWidget.background#263238
- editorSuggestWidget.selectedBackground#4B5D66ff
- editorWarning.border#FFCC00
- editorWhitespace.foreground#4B5D66ff
- editorWidget.background#263238
- focusBorder#97a7c8ff
- input.background#263238
- input.border#4AB3E4
- list.activeSelectionBackground#263238
- list.activeSelectionForeground#4AB3E4
- list.focusBackground#4B5D66ff
- list.focusForeground#4AB3E4
- list.foreground#97a7c8ff
- list.highlightForeground#4AB3E4
- list.hoverBackground#4B5D66ff
- list.inactiveSelectionBackground#263238
- list.inactiveSelectionForeground#4AB3E4
- notification.background#263238
- panel.background#263238
- panel.border#263238
- panelTitle.activeForeground#4AB3E4
- panelTitle.inactiveForeground#97a7c8ff
- scrollbar.shadow#263238
- scrollbarSlider.background#4B5D66ff
- scrollbarSlider.hoverBackground#22303Eff
- sideBar.background#263238
- sideBarSectionHeader.background#263238
- statusBar.background#263238
- statusBar.debuggingBackground#263238
- statusBar.foreground#97a7c8ff
- tab.activeBackground#263238
- tab.activeBorder#4AB3E4
- tab.activeForeground#4AB3E4
- tab.border#263238
- tab.inactiveBackground#263238
- tab.inactiveForeground#97a7c8ff
- tab.unfocusedActiveBorder#97a7c8ff
- titleBar.activeBackground#263238
- titleBar.inactiveForeground#263238
- widget.shadow#000000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| — | #f5f5f5 | — |
| comment, punctuation.definition.comment | #5C6370 | italic |
| string.quoted.docstring.multi.python, string.quoted.docstring.multi.python keyword.control.flow.python | #5C6370 | italic |
| meta.brace.round.begin, meta.brace.round.end, meta.brace.square.begin, meta.brace.square.end, meta.brace.curly.begin, meta.brace.curly.end, meta.group.braces.round.function.arguments | #97a7c8ff | — |
| string | #C3E88D | italic |
| Boolean | #CB6CFE | italic |
| string.regexp | #C3E88D | — |
| string.detected-link | #CB6CFE | — |
| constant.numeric, constant.language, markdown.python.constant.numeric | #F78C6C | — |
| constant.character | #56D6D6 | — |
| constant.character.escape.backslash.regexp | #C3E88D | — |
| constant.character.format.placeholder.other.python | #F78C6C | — |
| constant.other.key, meta.group.braces.curly constant.other.object.key string.unquoted.label | #56D6D6 | — |
| variable.other.object | #FB467B | — |
| meta.property.object | #F78C6C | — |
| variable.other.class, meta.class.property variable.other.property | #FB467B | — |
| variable.other, meta.class.object.property, meta.property.class variable.other.property.static | #F78C6C | — |
| variable.other.readwrite | #FB467B | — |
| meta.group.braces variable.other.readwrite | #FB467B | — |
| variable.language, meta.class variable.other.readwrite | #97a7c8ff | — |
| variable.language.prototype | #f5f5f5 | — |
| python.support.magic.variable | #FB467B | — |
| meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level | #61AFEF | — |
| entity.name.function | #FFCC00 | — |
| meta.function-call.generic.python | #61AFEF | — |
| meta.function.decorator.python | #56D6D6 | — |
| variable.function.constructor | #FFCC00 | — |
| keyword.control, keyword.operator.new, keyword.operator.module, variable.language.super | #CB6CFE | — |
| meta.preprocessor, entity.name.function.preprocessor | #CB6CFE | — |
| entity.name.function.preprocessor | #FFCC00 | — |
| meta.namespace.identifier entity.name.type, entity.name.variable | #FFCC00 | — |
| cs.meta.namespace.function.identifier.body.class.method | #61AFEF | — |
| storage.type.cs, storage.type.variable.cs | #56D6D6 | — |
| keyword, keyword.other.namespace, storage.modifier | #CB6CFE | — |
| keyword.operator.logical.python | #CB6CFE | — |
| keyword.other.substitution.begin, keyword.other.substitution.end | #56D6D6 | — |
| keyword.operator.accessor | #97a7c8ff | — |
| keyword.operator, constant.other.color, punctuation.separator.key-value | #56D6D6 | — |
| keyword.regexp, keyword.operator.quantifier.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp | #C3E88D | — |
| python.keyword.operator | #56D6D6 | — |
| entity.name.class, meta.class.extends variable.other.readwrite | #FFCC00 | |
| entity.other.inherited-class | #FFCC00 | italic underline |
| variable.parameter,token.variable.parameter,variable.other.jsdoc,variable.language.arguments,function.parameter | #FB467B | italic |
| variable.parameter.function.language.python | #FB467B | |
| entity.name.tag | #FB467B | — |
| entity.other.attribute-name | #AE81FF | — |
| text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name | #FFCB6B | italic |
| selector.css.entity.other.attribute-name | #FFCC00 | — |
| source.sass keyword.control | #61AFEF | — |
| entity.other.attribute-name.class | #FFCB6B | — |
| source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type | #56D6D6 | — |
| support.function, support.class support.function | #56D6D6 | — |
| python.builtin.support.function | #CB6CFE | |
| python.meta.function-call.builtin.support.function, python.meta.type.support.function-call, python.meta.variable.function-call.legacy.builtin | #FFCC00 | |
| meta.type.support.inheritance.python | #56D6D6 | |
| entity.name.type.class.python | #FFCC00 | — |
| support.constant | #F78C6C | |
| support.type, support.class | #FFCC00 | |
| support.other.variable | — | |
| css.property-list.property-name | #56D6D6 | |
| invalid | #FFFFFF | — |
| invalid.deprecated | #523D14 | — |
| meta.structure.dictionaryon support.type.property-name | #FB467B | — |
| meta.structure.dictionaryon string.quoted.doubleon | #C3E88D | — |
| meta.structure.dictionaryon string.quoted.double.detected-link | #CB6CFE | — |
| markup.heading | #FB467B | — |
| string.other.link.title.markdown, string.other.link.description.markdown, meta.paragraph.markdown entity.name.tag.inline.any | #61AFEF | — |
| markup.underline.link.markdown, markup.underline.link.image.markdown | #CB6CFE | — |
| markup.bold.markdown | — | bold |
| markup.fenced_code.block.markdown, markup.fenced.code.block.markdown, markup.raw.inline.markdown, markdown.block.raw | #56D6D6 | — |
| markup.fenced_code.block.markdown fenced_code.block.language, markup.fenced.code.block.markdown fenced.code.block.language | #F78C6C | — |
| punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown, punctuation.definition.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.raw.markdown, meta.paragraph.markdown punctuation.definition.tag | #56D6D6 | — |
| markdown.fenced_code.block.markdown constant.numeric, markdown.fenced.code.block.markdown constant.numeric, markdown.fenced_code.block.markdown constant.language, markdown.fenced.code.block.markdown constant.language | #F78C6C | — |
| markdown.block.fenced.code.string, markdown.block.fenced.code.string.quote | #C3E88D | — |
| markup.fenced_code.block.markdown keyword.operator, markup.fenced_code.block.markdown keyword.operator.logical.python, markup.fenced.code.block.markdown keyword.operator, markup.fenced_code.block.markdown keyword.control, markup.fenced.code.block.markdown keyword.control, markup.fenced_code.block.markdown storage.type, markup.fenced_code.block.markdown storage.type.function.lambda, markdown.block.fenced.code.lambda.storage.type | #61AFEF | — |
| markdown.block.fenced.code.operator.assignment | #97a7c8ff | — |
| markdown.block.variable.parameter | #F78C6C | — |
| meta.diff, meta.diff.header | #f5f5f5 | — |
| markup.deleted | #FB467B | — |
| markup.inserted | #A6E22E | — |
| markup.changed | #E6DB74 | — |
| constant.numeric.line-number.find-in-files - match | #AE81FFA0 | — |
| entity.name.filename.find-in-files | #E6DB74 | — |
| keyword, storage.type, storage.modifier | #AE81FF | — |
| token.info-token | #6796e6 | — |
| token.warn-token | #cd9731 | — |
| token.error-token | #f44747 | — |
| token.debug-token | #b267e6 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...