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#16191e
- activityBar.border#272c36
- activityBar.foreground#7b88a1
- activityBarBadge.background#dda2f6
- activityBarBadge.foreground#1d2128
- badge.background#dda2f6
- badge.foreground#1d2128
- breadcrumb.activeSelectionForeground#d8dee9
- breadcrumb.background#191c22
- breadcrumb.foreground#7b88a199
- breadcrumbPicker.background#191c22
- button.background#434c5e
- button.foreground#d8dee9
- button.hoverBackground#4c566a
- debugExceptionWidget.background#4c566a
- debugExceptionWidget.border#191c22
- debugToolBar.background#20242c
- diffEditor.insertedTextBackground#a3be8c22
- diffEditor.removedTextBackground#bf616a22
- dropdown.background#191c22
- dropdown.border#272c36
- dropdown.foreground#d8dee9
- editor.background#16191e
- editor.findMatchHighlightBackground#dda2f633
- editor.findRangeHighlightBackground#dda2f633
- editor.foreground#7b88a1
- editor.hoverHighlightBackground#20242ccf
- editor.inactiveSelectionBackground#7a22ff23
- editor.lineHighlightBackground#434c5e33
- editor.lineHighlightBorder#434c5e33
- editor.rangeHighlightBackground#434c5e52
- editor.selectionBackground#7a22ff50
- editor.selectionHighlightBackground#5e88943e
- editor.snippetFinalTabstopHighlightBorder#7b88a1
- editor.snippetTabstopHighlightBackground#7b88a155
- editor.wordHighlightBackground#5e889424
- editor.wordHighlightStrongBackground#5e889424
- editorBracketHighlight.foreground1#616f6e
- editorBracketHighlight.foreground2#616f6e
- editorBracketHighlight.foreground3#616f6e
- editorBracketHighlight.foreground4#616f6e
- editorBracketHighlight.foreground5#616f6e
- editorBracketHighlight.foreground6#616f6e
- editorBracketMatch.background#191c2200
- editorBracketMatch.border#dda2f655
- editorCodeLens.foreground#4c566a
- editorCursor.foreground#dda2f6
- editorError.border#bf616a00
- editorError.foreground#E365EF
- editorGroup.border#272c3600
- editorGroup.dropBackground#272c3699
- editorGroup.emptyBackground#191c22
- editorGroupHeader.noTabsBackground#191c22
- editorGroupHeader.tabsBackground#191c22
- editorGroupHeader.tabsBorder#272c3600
- editorGutter.addedBackground#9aefea
- editorGutter.background#191c22
- editorGutter.deletedBackground#E365EF
- editorGutter.modifiedBackground#ebcb8b
- editorHoverWidget.background#20242c
- editorHoverWidget.border#272c36
- editorIndentGuide.activeBackground1#4c566a
- editorIndentGuide.background1#434c5eb3
- editorInlayHint.background#00000000
- editorInlayHint.foreground#7E7EDD77
- editorInlayHint.parameterBackground#00000000
- editorInlayHint.parameterForeground#7E7EDD77
- editorInlayHint.typeBackground#00000000
- editorInlayHint.typeForeground#7E7EDD77
- editorLineNumber.activeForeground#687692
- editorLineNumber.foreground#4c566a
- editorLink.activeForeground#dda2f6
- editorMarkerNavigation.background#5e81acc0
- editorMarkerNavigationError.background#bf616ac0
- editorMarkerNavigationWarning.background#ebcb8bc0
- editorOverviewRuler.addedForeground#A3BE8C99
- editorOverviewRuler.border#00000000
- editorOverviewRuler.bracketMatchForeground#00000000
- editorOverviewRuler.commonContentForeground#E365EF
- editorOverviewRuler.currentContentForeground#E365EF
- editorOverviewRuler.deletedForeground#bf616a99
- editorOverviewRuler.errorForeground#E365EF
- editorOverviewRuler.findMatchForeground#00000000
- editorOverviewRuler.incomingContentForeground#E365EF
- editorOverviewRuler.infoForeground#00000000
- editorOverviewRuler.modifiedForeground#ebcb8b99
- editorOverviewRuler.rangeHighlightForeground#00000000
- editorOverviewRuler.selectionHighlightForeground#00000000
- editorOverviewRuler.warningForeground#ebcb8b
- editorOverviewRuler.wordHighlightForeground#00000000
- editorOverviewRuler.wordHighlightStrongForeground#00000000
- editorRuler.foreground#434c5e
- editorSuggestWidget.background#191c22
- editorSuggestWidget.border#272c36
- editorSuggestWidget.foreground#d8dee9
- editorSuggestWidget.highlightForeground#dda2f6
- editorSuggestWidget.selectedBackground#434c5e
- editorWarning.border#ebcb8b00
- editorWarning.foreground#ebcb8b
- editorWhitespace.foreground#4c566ab3
- editorWidget.background#191c22
- editorWidget.resizeBorder#dda2f6
- errorForeground#E365EF
- extensionButton.prominentBackground#434c5e
- extensionButton.prominentForeground#d8dee9
- extensionButton.prominentHoverBackground#4c566a
- focusBorder#00000000
- foreground#7b88a1
- gitDecoration.addedResourceForeground#9aefea
- gitDecoration.conflictingResourceForeground#dda2f6
- gitDecoration.deletedResourceForeground#dda2f6
- gitDecoration.ignoredResourceForeground#d8dee977
- gitDecoration.modifiedResourceForeground#ebcb8b
- gitDecoration.untrackedResourceForeground#8bf18c
- input.background#272c3655
- input.border#272c36
- input.foreground#d8dee9
- input.placeholderForeground#d8dee999
- inputOption.activeBorder#dda2f6
- inputValidation.errorBackground#E365EF
- inputValidation.errorBorder#E365EF
- inputValidation.infoBackground#81a1c1
- inputValidation.infoBorder#81a1c1
- inputValidation.warningBackground#EDB463
- inputValidation.warningBorder#EDB463
- list.activeSelectionBackground#20242c
- list.activeSelectionForeground#eceff4
- list.dropBackground#dda2f699
- list.errorForeground#E365EF
- list.focusBackground#434c5e
- list.focusForeground#d8dee9
- list.highlightForeground#dda2f6
- list.hoverBackground#272c3699
- list.hoverForeground#eceff4
- list.inactiveSelectionBackground#191c22
- list.inactiveSelectionForeground#d8dee9
- list.warningForeground#ebcb8b
- menu.background#191c22
- menu.foreground#7b88a1
- menu.separatorBackground#7b88a1
- menubar.selectionBackground#7b88a133
- merge.border#272c3600
- merge.currentContentBackground#81a1c14d
- merge.currentHeaderBackground#81a1c166
- merge.incomingContentBackground#8fbcbb4d
- merge.incomingHeaderBackground#8fbcbb66
- notificationLink.foreground#dda2f6
- notifications.background#191c22
- notifications.foreground#d8dee9
- panel.background#191c22
- panel.border#191c22
- panelTitle.activeBorder#dda2f600
- panelTitle.activeForeground#dda2f6
- panelTitle.inactiveForeground#7b88a1
- peekView.border#4c566a
- peekViewEditor.background#191c22
- peekViewEditor.matchHighlightBackground#dda2f6cc
- peekViewEditorGutter.background#191c22
- peekViewResult.background#191c22
- peekViewResult.fileForeground#dda2f6
- peekViewResult.lineForeground#d8dee966
- peekViewResult.matchHighlightBackground#dda2f6cc
- peekViewResult.selectionBackground#434c5e
- peekViewResult.selectionForeground#d8dee9
- peekViewTitle.background#272c36
- peekViewTitleDescription.foreground#d8dee9
- peekViewTitleLabel.foreground#dda2f6
- pickerGroup.border#272c3600
- pickerGroup.foreground#d8dee9
- progressBar.background#dda2f6
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#434c5e55
- scrollbarSlider.background#434c5e55
- scrollbarSlider.hoverBackground#434c5e55
- selection.background#dda2f633
- sideBar.background#191c22
- sideBar.border#272c36
- sideBar.foreground#7b88a1
- sideBarSectionHeader.background#191c22
- sideBarSectionHeader.foreground#7b88a1
- sideBarTitle.foreground#7b88a1
- statusBar.background#191c22
- statusBar.border#272c3600
- statusBar.debuggingBackground#7966E6
- statusBar.debuggingForeground#b8cdfe
- statusBar.debuggingHoverBackground#9889F2
- statusBar.debuggingHoverForeground#b8cdfe
- statusBar.foreground#7b88a1
- statusBar.noFolderBackground#191c22
- statusBar.noFolderForeground#d8dee9
- statusBarItem.activeBackground#242930
- statusBarItem.hoverBackground#7966E655
- statusBarItem.prominentBackground#16191e
- statusBarItem.prominentHoverBackground#191c22
- tab.activeBackground#191c22
- tab.activeBorderTop#dda2f6
- tab.activeForeground#d8dee9
- tab.border#272c3600
- tab.hoverBackground#dda2f600
- tab.inactiveBackground#191c22
- tab.inactiveForeground#7b88a1
- tab.unfocusedActiveBorder#dda2f600
- tab.unfocusedActiveForeground#d8dee999
- tab.unfocusedHoverBackground#272c36b3
- tab.unfocusedHoverBorder#dda2f600
- tab.unfocusedInactiveForeground#d8dee966
- terminal.ansiBlack#B8B8B8
- terminal.ansiBlue#9aefea
- terminal.ansiBrightBlack#E1E1E1
- terminal.ansiBrightBlue#9aefea
- terminal.ansiBrightCyan#9aefea
- terminal.ansiBrightGreen#A571F4
- terminal.ansiBrightMagenta#dda2f6
- terminal.ansiBrightRed#dda2f6
- terminal.ansiBrightWhite#E1E1E1
- terminal.ansiBrightYellow#B396F9
- terminal.ansiCyan#9aefea
- terminal.ansiGreen#A571F4
- terminal.ansiMagenta#dda2f6
- terminal.ansiRed#dda2f6
- terminal.ansiWhite#E1E1E1
- terminal.ansiYellow#B396F9
- terminal.background#16191e
- terminal.border#272c36
- terminal.foreground#d8dee9
- terminal.selectionBackground#7966E633
- terminalCursor.background#191c22
- terminalCursor.foreground#7966E6
- textLink.activeForeground#dda2f6
- textLink.foreground#8FBCBB
- textPreformat.foreground#8FBCBB
- textSeparator.foreground#8FBCBB
- titleBar.activeBackground#16191e
- titleBar.activeForeground#7b88a1
- titleBar.border#272c36
- titleBar.inactiveBackground#191c22
- titleBar.inactiveForeground#7b88a199
- tree.indentGuidesStroke#7b88a155
- walkThrough.embeddedEditorBackground#191c22
- widget.shadow#00000066
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| punctuation.quasi.element, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.quasi.begin, punctuation.definition.quasi.end, keyword.operator.assignment, punctuation.definition.tag.begin, punctuation.definition.tag.end, storage.type.function, punctuation.accessor | #5a6b77 | — |
| keyword.control | #63747f | bold |
| entity.other.attribute-name | #687d88 | |
| meta.jsx.children | #ffffff | italic |
| variable.other.property | #cadaea | — |
| support.class.component | #A571F4 | |
| comment | #555C77 | — |
| entity.name.type | #A571F4 | — |
| entity.other.inherited-class | #9AEFEA | — |
| keyword | #7E7EDD | — |
| keyword.control | #7E7EDD | — |
| keyword.operator | #B9BED5 | — |
| keyword.other.special-method | #F5FAFF | — |
| keyword.other.unit | #DDA2F6 | — |
| storage | #7B88A1 | — |
| storage.type.annotation | #7E7EDD | — |
| storage.type.primitive | #7E7EDD | — |
| storage.modifier.package | #B9BED5 | — |
| storage.modifier.import | #B9BED5 | — |
| constant | #DDA2F6 | — |
| constant.variable | #DDA2F6 | — |
| constant.character.escape | #93DDFB | — |
| constant.numeric | #DDA2F6 | — |
| constant.other.color | #93DDFB | — |
| constant.other.symbol | #93DDFB | — |
| variable | #85B1E0 | — |
| variable.interpolation | #4D8ACB | — |
| variable.parameter | #B9BED5 | — |
| string | #9AEFEA | — |
| string.regexp | #93DDFB | — |
| string.regexp source.ruby.embedded | #A571F4 | — |
| fenced_code.block.language.markdown | #A571F4 | — |
| punctuation.definition.comment | #555C77 | — |
| punctuation.definition | #7e7edd | — |
| punctuation.definition.method-parameters punctuation.definition.function-parameters punctuation.definition.parameters punctuation.definition.separator punctuation.definition.seperator punctuation.definition.array | #B9BED5 | — |
| punctuation.definition.heading, punctuation.definition.identity | #F5FAFF | — |
| punctuation.definition.bold | #A571F4 | bold |
| punctuation.definition.italic | #7E7EDD | italic |
| punctuation.section.embedded | #4D8ACB | — |
| punctuation.section.method, punctuation.section.class, punctuation.section.inner-class | #B9BED5 | — |
| support.class | #A571F4 | — |
| support.type | #93DDFB | — |
| support.function | #93DDFB | — |
| support.function.any-method | #F5FAFF | — |
| entity.name.function | #7E7EDD | — |
| entity.name.class, entity.name.type.class | #A571F4 | — |
| entity.name.section | #A571F4 | — |
| entity.name.tag | #85B1E0 | — |
| entity.other.attribute-name | #DDA2F6 | — |
| entity.other.attribute-name.id | #7e7edd | — |
| meta.class.body | #B9BED5 | — |
| meta.method-call, meta.method | #7B88A1 | — |
| meta.definition.variable | #85B1E0 | — |
| meta.link | #DDA2F6 | — |
| meta.require | #F5FAFF | — |
| meta.selector | #7E7EDD | — |
| meta.separator | #B9BED5 | — |
| meta.tag | #B9BED5 | — |
| underline | — | underline |
| none | #B9BED5 | — |
| invalid.deprecated | #523D14 | — |
| invalid.illegal | #FFFFFF | — |
| markup.bold | #DDA2F6 | bold |
| markup.changed | #7E7EDD | — |
| markup.deleted | #85B1E0 | — |
| markup.italic | #7E7EDD | italic |
| markup.heading | #85B1E0 | — |
| markup.heading punctuation.definition.heading | #A571F4 | — |
| markup.link | #7E7EDD | — |
| markup.inserted | #9AEFEA | — |
| markup.quote | #DDA2F6 | — |
| markup.raw | #9AEFEA | — |
| source.cs keyword.operator | #7E7EDD | — |
| source.css property-name, source.css property-value | #7D839B | — |
| source.css property-name.support, source.css property-value.support | #B9BED5 | — |
| source.gfm link entity | #F5FAFF | — |
| source.go storage.type.string | #7E7EDD | — |
| source.ini keyword.other.definition.ini | #85B1E0 | — |
| source.java storage.modifier.import | #A571F4 | — |
| source.java storage.type | #A571F4 | — |
| source.java keyword.operator.instanceof | #7E7EDD | — |
| source.java-properties meta.key-pair | #85B1E0 | — |
| source.js keyword.operator | #93DDFB | — |
| source.js keyword.operator.js, source.js keyword.operator.delete, source.js keyword.operator.in, source.js keyword.operator.of, source.js keyword.operator.instanceof, source.js keyword.operator.new, source.js keyword.operator.typeof, source.js keyword.operator.void | #7E7EDD | — |
| source.ruby constant.other.symbol punctuation | #93DDFB | — |
| source.python keyword.operator.logical.python | #7E7EDD | — |
| source.python variable.parameter | #DDA2F6 | — |
| source.java-properties meta.key-pair punctuation | #B9BED5 | — |
| source.json meta.structure.dictionary.json string.quoted.json | #85B1E0 | — |
| source.json meta.structure.dictionary.json string.quoted.json punctuation.string | #85B1E0 | — |
| source.json meta.structure.dictionary.json value.json string.quoted.json, source.json meta.structure.array.json value.json string.quoted.json, source.json meta.structure.dictionary.json value.json string.quoted.json punctuation, source.json meta.structure.array.json value.json string.quoted.json punctuation | #9AEFEA | — |
| source.json meta.structure.dictionary.json constant.language.json, source.json meta.structure.array.json constant.language.json | #93DDFB | — |
| token.info-token | #6796E6 | — |
| token.warn-token | #CD9731 | — |
| token.error-token | #F44747 | — |
| token.debug-token | #B267E6 | — |
| punctuation.definition.list.begin.markdown | #9889F2 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...