Skip to main content
Coding Theme

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#01242f
  • activityBar.dropBackground#01242f
  • activityBar.foreground#b7d9e4
  • activityBarBadge.background#458588
  • activityBarBadge.foreground#b7d9e4
  • badge.background#d3869b
  • badge.foreground#01242f
  • button.background#45858880
  • button.foreground#b7d9e4
  • button.hoverBackground#45858860
  • debugToolBar.background#01242f
  • diffEditor.insertedTextBackground#b8bb2630
  • diffEditor.removedTextBackground#fb493430
  • dropdown.background#01242f
  • dropdown.border#3c3836
  • dropdown.foreground#b7d9e4
  • editor.background#01242f
  • editor.findMatchBackground#83a59870
  • editor.findMatchHighlightBackground#fe801930
  • editor.findRangeHighlightBackground#83a59870
  • editor.foreground#C1CFC0
  • editor.hoverHighlightBackground#689d6a50
  • editor.lineHighlightBackground#033544
  • editor.lineHighlightBorder#3c383600
  • editor.selectionBackground#033544
  • editor.selectionHighlightBackground#033544d4
  • editorBracketMatch.background#92837480
  • editorBracketMatch.border#1d202100
  • editorCodeLens.foreground#a8998490
  • editorCursor.foreground#b7d9e4
  • editorError.foreground#cc241d
  • editorGroup.background#3c3836
  • editorGroup.border#3c3836
  • editorGroup.dropBackground#3c383660
  • editorGroupHeader.noTabsBackground#01242f
  • editorGroupHeader.tabsBackground#01242f
  • editorGroupHeader.tabsBorder#3c3836
  • editorGutter.addedBackground#b8bb26
  • editorGutter.background#1d202100
  • editorGutter.deletedBackground#fb4934
  • editorGutter.modifiedBackground#83a598
  • editorHoverWidget.background#01242f
  • editorHoverWidget.border#033544
  • editorIndentGuide.activeBackground#a8998450
  • editorIndentGuide.background#a8998420
  • editorInfo.foreground#458588
  • editorLineNumber.foreground#665c54
  • editorLink.activeForeground#b7d9e4
  • editorOverviewRuler.addedForeground#83a598
  • editorOverviewRuler.border#1d202100
  • editorOverviewRuler.commonContentForeground#928374
  • editorOverviewRuler.currentContentForeground#458588
  • editorOverviewRuler.deletedForeground#83a598
  • editorOverviewRuler.errorForeground#fb4934
  • editorOverviewRuler.findMatchForeground#bdae93
  • editorOverviewRuler.incomingContentForeground#689d6a
  • editorOverviewRuler.infoForeground#d3869b
  • editorOverviewRuler.modifiedForeground#83a598
  • editorOverviewRuler.rangeHighlightForeground#bdae93
  • editorOverviewRuler.selectionHighlightForeground#665c54
  • editorOverviewRuler.warningForeground#d79921
  • editorOverviewRuler.wordHighlightForeground#665c54
  • editorOverviewRuler.wordHighlightStrongForeground#665c54
  • editorRuler.foreground#a8998440
  • editorSuggestWidget.background#01242f
  • editorSuggestWidget.border#3c3836
  • editorSuggestWidget.foreground#b7d9e4
  • editorSuggestWidget.highlightForeground#689d6a
  • editorSuggestWidget.selectedBackground#3c383660
  • editorWarning.foreground#d79921
  • editorWhitespace.foreground#a8998420
  • editorWidget.background#01242f
  • editorWidget.border#3c3836
  • errorForeground#fb4934
  • extensionButton.prominentBackground#b8bb2680
  • extensionButton.prominentHoverBackground#b8bb2630
  • focusBorder#3c3836
  • foreground#b7d9e4
  • gitDecoration.conflictingResourceForeground#b16286
  • gitDecoration.deletedResourceForeground#cc241d
  • gitDecoration.ignoredResourceForeground#7c6f64
  • gitDecoration.modifiedResourceForeground#2AA198
  • gitDecoration.untrackedResourceForeground#B58900
  • input.background#b7d9e405
  • input.border#3c3836
  • input.foreground#b7d9e4
  • input.placeholderForeground#b7d9e460
  • inputOption.activeBorder#b7d9e460
  • inputValidation.errorBackground#cc241d80
  • inputValidation.errorBorder#fb4934
  • inputValidation.infoBackground#45858880
  • inputValidation.infoBorder#83a598
  • inputValidation.warningBackground#d7992180
  • inputValidation.warningBorder#fabd2f
  • list.activeSelectionBackground#3c383680
  • list.activeSelectionForeground#8ec07c
  • list.dropBackground#3c3836
  • list.focusBackground#3c3836
  • list.focusForeground#b7d9e4
  • list.highlightForeground#689d6a
  • list.hoverBackground#3c383680
  • list.hoverForeground#C1CFC0
  • list.inactiveSelectionBackground#3c383680
  • list.inactiveSelectionForeground#689d6a
  • merge.border#1d202100
  • merge.currentContentBackground#45858820
  • merge.currentHeaderBackground#45858840
  • merge.incomingContentBackground#689d6a20
  • merge.incomingHeaderBackground#689d6a40
  • notification.background#01242f
  • notification.buttonBackground#665c54
  • notification.buttonForeground#b7d9e4
  • notification.buttonHoverBackground#665c5450
  • notification.errorBackground#fb4934
  • notification.errorForeground#01242f
  • notification.foreground#b7d9e4
  • notification.infoBackground#83a598
  • notification.infoForeground#01242f
  • notification.warningBackground#fabd2f
  • notification.warningForeground#01242f
  • panel.border#01242f
  • panelTitle.activeForeground#b7d9e4
  • peekView.border#3c3836
  • peekViewEditor.background#3c383650
  • peekViewEditorGutter.background#3c383650
  • peekViewResult.background#3c383650
  • peekViewResult.fileForeground#b7d9e4
  • peekViewResult.matchHighlightBackground#8ec07c30
  • peekViewResult.selectionBackground#8ec07c30
  • peekViewResult.selectionForeground#8ec07c30
  • peekViewTitle.background#3c383650
  • peekViewTitleDescription.foreground#bdae93
  • peekViewTitleLabel.foreground#b7d9e4
  • progressBar.background#689d6a
  • scrollbar.shadow#01242f
  • scrollbarSlider.activeBackground#689d6a
  • scrollbarSlider.background#50494599
  • scrollbarSlider.hoverBackground#665c54
  • selection.background#689d6a80
  • sideBar.background#01242f
  • sideBar.foreground#C1CFC0
  • sideBarSectionHeader.background#1d202100
  • sideBarSectionHeader.foreground#b7d9e4
  • sideBarTitle.foreground#b7d9e4
  • statusBar.background#01242f
  • statusBar.debuggingBackground#c6702a
  • statusBar.debuggingBorder#1d202100
  • statusBar.debuggingForeground#01242f
  • statusBar.foreground#b7d9e4
  • statusBar.noFolderBackground#01242f
  • statusBar.noFolderBorder#1d202100
  • statusBar.prominentBackground#689d6a
  • statusBar.prominentHoverBackground#689d6a70
  • tab.activeBackground#32302f
  • tab.activeBorder#689d6a
  • tab.activeForeground#b7d9e4
  • tab.border#1d202100
  • tab.inactiveBackground#01242f
  • tab.inactiveForeground#a89984
  • tab.unfocusedActiveBorder#1d202100
  • tab.unfocusedActiveForeground#a89984
  • tab.unfocusedInactiveForeground#928374
  • terminal.ansiBlack#3c3836
  • terminal.ansiBlue#458588
  • terminal.ansiBrightBlack#928374
  • terminal.ansiBrightBlue#83a598
  • terminal.ansiBrightCyan#8ec07c
  • terminal.ansiBrightGreen#b8bb26
  • terminal.ansiBrightMagenta#d3869b
  • terminal.ansiBrightRed#fb4934
  • terminal.ansiBrightWhite#b7d9e4
  • terminal.ansiBrightYellow#fabd2f
  • terminal.ansiCyan#689d6a
  • terminal.ansiGreen#98971a
  • terminal.ansiMagenta#b16286
  • terminal.ansiRed#cc241d
  • terminal.ansiWhite#a89984
  • terminal.ansiYellow#d79921
  • terminal.background#01242f
  • terminal.foreground#b7d9e4
  • textLink.activeForeground#458588
  • textLink.foreground#83a598
  • titleBar.activeBackground#01242f
  • titleBar.activeForeground#b7d9e4
  • titleBar.inactiveBackground#01242f
  • widget.shadow#1d202130

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#839496
comment#586E75italic
string#83A598
meta.parameter.type.variable, string.constant.other.placeholder, keyword.operator, string.regexp#fdbb74
keyword#1c7e9c
storage#8EC07Cbold
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#2AA198
entity.name.function, entity.name.tag, support.function#2AA198
punctuation.definition.variable#859900
punctuation.section.embedded.begin, punctuation.section.embedded.end#D30102
constant.language, constant.numeric, meta.preprocessor#8EC07C
support.function.construct, keyword.other.new#CB4B16
constant.character, constant.other#8EC07C
entity.other.inherited-class#6C71C4
variable.parameter
punctuation.definition.tag#586E75
entity.other.attribute-name#93A1A1
punctuation.separator.continuation#D30102
support.constant
support.type, support.class#859900
support.type.exception#CB4B16
support.other.variable
invalid#D30102
meta.diff, meta.diff.header#E0EDDDitalic
markup.deleted#DC322F
markup.changed#CB4B16
markup.inserted#219186
markup.quote#859900
markup.list#B58900
markup.bold, markup.italic#D33682
markup.boldbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inline.raw#2AA198
markup.heading#268BD2bold
markup.heading.setext#268BD2
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6