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#070E13
- activityBar.border#070E13
- activityBar.foreground#5A5F62
- activityBarBadge.background#DDCB0A
- activityBarBadge.foreground#070E13
- badge.background#DDCB0A
- badge.foreground#070E13
- button.background#250e48
- button.foreground#5A5F62
- button.hoverBackground#070E13
- debugExceptionWidget.background#250e48
- debugExceptionWidget.border#070E13
- debugToolBar.background#250e48
- descriptionForeground#5A5F62
- diffEditor.insertedTextBackground#46D0280c
- diffEditor.insertedTextBorder#00000000
- diffEditor.removedTextBackground#F7005B0c
- diffEditor.removedTextBorder#00000000
- dropdown.background#070E13
- dropdown.border#070E13
- dropdown.foreground#5A5F62
- dropdown.listBackground#250e48
- editor.background#070E13
- editor.findMatchBackground#ffffff26
- editor.findMatchBorder#DDCB0A
- editor.findMatchHighlightBackground#ffffff26
- editor.findMatchHighlightBorder#00000000
- editor.findRangeHighlightBackground#ffffff0c
- editor.findRangeHighlightBorder#00000000
- editor.foreground#ffffff
- editor.hoverHighlightBackground#ffffff0c
- editor.inactiveSelectionBackground#ffffff0c
- editor.lineHighlightBackground#ffffff0c
- editor.lineHighlightBorder#00000000
- editor.rangeHighlightBackground#250e48
- editor.rangeHighlightBorder#250e48
- editor.selectionBackground#6a2194
- editor.selectionHighlightBackground#ffffff26
- editor.selectionHighlightBorder#00000000
- editor.wordHighlightBackground#ffffff26
- editor.wordHighlightBorder#00000000
- editor.wordHighlightStrongBackground#ffffff26
- editor.wordHighlightStrongBorder#00000000
- editorBracketMatch.background#070E13
- editorBracketMatch.border#4a4f53
- editorCodeLens.foreground#4a4f53
- editorCursor.background#00000000
- editorCursor.foreground#ffffff
- editorError.border#00000000
- editorError.foreground#F7005B
- editorGroup.border#060c10
- editorGroup.dropBackground#161821bf
- editorGroupHeader.noTabsBackground#070E13
- editorGroupHeader.tabsBackground#070E13
- editorGroupHeader.tabsBorder#070E13
- editorGutter.addedBackground#46D028
- editorGutter.background#070E13
- editorGutter.deletedBackground#F7005B
- editorGutter.modifiedBackground#EF8354
- editorHint.border#070E13
- editorHint.foreground#A100DF
- editorHoverWidget.background#060c10
- editorHoverWidget.border#070E13
- editorIndentGuide.background#250e48
- editorInfo.border#070E13
- editorInfo.foreground#40B4BB
- editorLineNumber.activeForeground#75C3A8
- editorLineNumber.foreground#592b9f
- editorLink.activeForeground#40B4BB
- editorMarkerNavigation.background#250e48
- editorMarkerNavigationError.background#F7005B
- editorMarkerNavigationInfo.background#40B4BB
- editorMarkerNavigationWarning.background#EF8354
- editorOverviewRuler.addedForeground#46D028
- editorOverviewRuler.border#070E13
- editorOverviewRuler.currentContentForeground#250e48
- editorOverviewRuler.deletedForeground#F7005B
- editorOverviewRuler.errorForeground#F7005B
- editorOverviewRuler.findMatchForeground#ffffff26
- editorOverviewRuler.incomingContentForeground#250e48
- editorOverviewRuler.infoForeground#40B4BB
- editorOverviewRuler.modifiedForeground#EF8354
- editorOverviewRuler.rangeHighlightForeground#ffffff26
- editorOverviewRuler.selectionHighlightForeground#ffffff26
- editorOverviewRuler.warningForeground#EF8354
- editorOverviewRuler.wordHighlightForeground#ffffff26
- editorOverviewRuler.wordHighlightStrongForeground#ffffff26
- editorRuler.foreground#34393d
- editorSuggestWidget.background#060c10
- editorSuggestWidget.border#250e48
- editorSuggestWidget.foreground#75C3A8
- editorSuggestWidget.highlightForeground#ffffff
- editorSuggestWidget.selectedBackground#250e48
- editorWarning.border#00000000
- editorWarning.foreground#EF8354
- editorWhitespace.foreground#34393d
- editorWidget.background#060c10
- editorWidget.border#250e48
- errorForeground#F7005B
- extensionButton.prominentBackground#EF8354
- extensionButton.prominentForeground#070E13
- extensionButton.prominentHoverBackground#F19973
- focusBorder#4a4f53
- foreground#ffffff
- gitDecoration.conflictingResourceForeground#EF8354
- gitDecoration.deletedResourceForeground#F7005B
- gitDecoration.ignoredResourceForeground#34393d
- gitDecoration.modifiedResourceForeground#3887fe
- gitDecoration.untrackedResourceForeground#EF8354
- input.background#231d28
- input.border#250e48
- input.foreground#ffffff
- input.placeholderForeground#34393d
- inputOption.activeBorder#34393d
- inputValidation.errorBackground#250e48
- inputValidation.errorBorder#F7005B
- inputValidation.infoBackground#250e48
- inputValidation.infoBorder#40B4BB
- inputValidation.warningBackground#250e48
- inputValidation.warningBorder#EF8354
- list.activeSelectionBackground#0c151b
- list.activeSelectionForeground#DDCB0A
- list.dropBackground#161821bf
- list.errorForeground#F7005B
- list.focusBackground#250e48
- list.focusForeground#ffffff
- list.highlightForeground#ffffff
- list.hoverBackground#070E13
- list.hoverForeground#ffffff
- list.inactiveFocusBackground#060b0e
- list.inactiveSelectionBackground#070E13
- list.inactiveSelectionForeground#DDCB0A
- list.invalidItemForeground#F7005B
- list.warningForeground#EF8354
- merge.border#070E13
- merge.commonContentBackground#ffffff0c
- merge.commonHeaderBackground#ffffff26
- merge.currentContentBackground#F7005B0c
- merge.currentHeaderBackground#F7005B26
- merge.incomingContentBackground#46D0280c
- merge.incomingHeaderBackground#46D02826
- notificationCenter.border#250e48
- notificationCenterHeader.background#250e48
- notificationCenterHeader.foreground#5A5F62
- notificationLink.foreground#DDCB0A
- notifications.background#070E13
- notifications.border#250e48
- notifications.foreground#75C3A8
- notificationToast.border#250e48
- panel.background#070E13
- panel.border#070E13
- panelTitle.activeBorder#DDCB0A
- panelTitle.activeForeground#DDCB0A
- panelTitle.inactiveForeground#5A5F62
- peekView.border#070E13
- peekViewEditor.background#250e48
- peekViewEditor.matchHighlightBackground#34393d
- peekViewEditorGutter.background#250e48
- peekViewResult.background#250e48
- peekViewResult.fileForeground#adadad
- peekViewResult.lineForeground#5A5F62
- peekViewResult.matchHighlightBackground#34393d
- peekViewResult.selectionBackground#250e48
- peekViewResult.selectionForeground#ffffff
- peekViewTitle.background#250e48
- peekViewTitleDescription.foreground#5A5F62
- peekViewTitleLabel.foreground#ffffff
- pickerGroup.border#070E13
- pickerGroup.foreground#34393d
- progressBar.background#250e48
- scrollbar.shadow#070E13
- scrollbarSlider.activeBackground#ffffff12
- scrollbarSlider.background#ffffff12
- scrollbarSlider.hoverBackground#ffffff12
- selection.background#6a2194
- sideBar.background#070E13
- sideBar.border#070E13
- sideBar.dropBackground#161821bf
- sideBar.foreground#a6a9aa
- sideBarSectionHeader.background#070E13
- sideBarSectionHeader.foreground#4a4f53
- sideBarTitle.foreground#75C3A8
- statusBar.background#070E13
- statusBar.border#060b0e
- statusBar.debuggingBackground#4a4f53
- statusBar.debuggingBorder#060c10
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#4a4f53
- statusBar.noFolderBackground#060c10
- statusBar.noFolderBorder#060b0e
- statusBar.noFolderForeground#4a4f53
- statusBarItem.activeBackground#060b0e
- statusBarItem.hoverBackground#060b0e
- statusBarItem.prominentBackground#250e48
- statusBarItem.prominentHoverBackground#250e48
- tab.activeBackground#070E13
- tab.activeBorder#DDCB0A
- tab.activeForeground#DDCB0A
- tab.border#070E13
- tab.hoverBackground#070E13
- tab.hoverBorder#34393d
- tab.inactiveBackground#070E13
- tab.inactiveForeground#5A5F62
- tab.unfocusedActiveBorder#5A5F62
- tab.unfocusedActiveForeground#75C3A8
- tab.unfocusedHoverBackground#070E13
- tab.unfocusedHoverBorder#070E13
- tab.unfocusedInactiveForeground#5A5F62
- terminal.ansiBlack#250e48
- terminal.ansiBlue#EF8354
- terminal.ansiBrightBlack#4a4f53
- terminal.ansiBrightBlue#EF8354
- terminal.ansiBrightCyan#40B4BB
- terminal.ansiBrightGreen#46D028
- terminal.ansiBrightMagenta#A100DF
- terminal.ansiBrightRed#F7005B
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#DDCB0A
- terminal.ansiCyan#40B4BB
- terminal.ansiGreen#46D028
- terminal.ansiMagenta#A100DF
- terminal.ansiRed#F7005B
- terminal.ansiWhite#ffffff
- terminal.ansiYellow#DDCB0A
- terminal.background#070E13
- terminal.selectionBackground#ffffff26
- terminalCursor.background#00000000
- terminalCursor.foreground#ffffff
- textBlockQuote.background#250e48
- textBlockQuote.border#250e48
- textCodeBlock.background#250e48
- textLink.activeForeground#ffffff
- textLink.foreground#DDCB0A
- textPreformat.foreground#ffffff
- textSeparator.foreground#4a4f53
- titleBar.activeBackground#060c10
- titleBar.activeForeground#5A5F62
- titleBar.border#060b0e
- titleBar.inactiveBackground#060c10
- titleBar.inactiveForeground#34393d
- walkThrough.embeddedEditorBackground#060c10
- widget.shadow#060b0e
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| — | #D5CED9 | — |
| comment, markup.quote.markdown, meta.diff, meta.diff.header | #5f6167 | — |
| meta.template.expression.js, constant.name.attribute.tag.jade, punctuation.definition.metadata.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown | #D5CED9 | — |
| variable, support.variable, entity.name.tag.yaml, constant.character.entity.html, source.css entity.name.tag.reference, beginning.punctuation.definition.list.markdown, source.css entity.other.attribute-name.parent-selector, meta.structure.dictionary.json support.type.property-name | #00e8c6 | — |
| markup.bold, constant.numeric, meta.group.regexp, constant.other.php, support.constant.ext.php, constant.other.class.php, support.constant.core.php, fenced_code.block.language, constant.other.caps.python, entity.other.attribute-name, support.type.exception.python, source.css keyword.other.unit, variable.other.object.property.js.jsx, variable.other.object.js | #f3ca12 | — |
| markup.list, text.xml string, entity.name.type, support.function, entity.other.attribute-name, meta.at-rule.extend, entity.name.function, entity.other.inherited-class, entity.other.keyframe-offset.css, text.html.markdown string.quoted, meta.function-call.generic.python, meta.at-rule.extend support.constant, entity.other.attribute-name.class.jade, source.css entity.other.attribute-name, text.xml punctuation.definition.string | #fbd82a | — |
| markup.heading, variable.language.this.js, variable.language.special.self.python | #ff00aa | — |
| punctuation.definition.interpolation, punctuation.section.embedded.end.php, punctuation.section.embedded.end.ruby, punctuation.section.embedded.begin.php, punctuation.section.embedded.begin.ruby, punctuation.definition.template-expression, entity.name.tag | #ff2e46 | — |
| storage, keyword, meta.link, meta.image, markup.italic, source.js support.type | #bb5cff | — |
| string.regexp, markup.changed | #7cb7ff | — |
| constant, support.class, keyword.operator, support.constant, text.html.markdown string, source.css support.function, source.php support.function, support.function.magic.python, entity.other.attribute-name.id, markup.deleted | #ed4426 | — |
| string, text.html.php string, markup.inline.raw, markup.inserted, punctuation.definition.string, punctuation.definition.markdown, text.html meta.embedded source.js string, text.html.php punctuation.definition.string, text.html meta.embedded source.js punctuation.definition.string, text.html punctuation.definition.string, text.html string | #79e543 | — |
| entity.other.inherited-class | — | underline |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...