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#2c2c2c
  • activityBar.border#2c2c2c
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#ffffff66
  • activityBarBadge.background#007acc
  • activityBarBadge.foreground#ffffff
  • badge.background#c4c4c4
  • badge.foreground#333333
  • button.background#007acc
  • button.foreground#ffffff
  • button.hoverBackground#0062a3
  • editor.background#ffffff
  • editor.foreground#333333
  • editor.hoverHighlightBackground#add6ff26
  • editor.inactiveSelectionBackground#e5ebf1
  • editor.lineHighlightBackground#f2f8fc
  • editor.selectionBackground#add6ff
  • editor.selectionHighlightBackground#add6ff26
  • editor.wordHighlightBackground#57606a26
  • editor.wordHighlightStrongBackground#57606a4d
  • editorBracketMatch.background#34d05840
  • editorBracketMatch.border#34d058
  • editorCursor.foreground#044289
  • editorError.foreground#cf222e
  • editorGroup.border#f6f8fa
  • editorGroupHeader.tabsBackground#f6f8fa
  • editorGutter.addedBackground#28a745
  • editorGutter.background#ffffff
  • editorGutter.deletedBackground#d73a49
  • editorGutter.modifiedBackground#1b81a8
  • editorHoverWidget.background#f6f8fa
  • editorHoverWidget.border#d1d9e0
  • editorIndentGuide.activeBackground#959da5
  • editorIndentGuide.background#d7dbe0
  • editorLineNumber.activeForeground#24292f
  • editorLineNumber.foreground#959da5
  • editorLink.activeForeground#0969da
  • editorMarkerNavigation.background#f6f8fa
  • editorOverviewRuler.border#ffffff
  • editorRuler.foreground#d7dbe0
  • editorSuggestWidget.background#f6f8fa
  • editorSuggestWidget.border#d1d9e0
  • editorSuggestWidget.foreground#24292f
  • editorSuggestWidget.highlightForeground#0969da
  • editorSuggestWidget.selectedBackground#0969da26
  • editorWarning.foreground#9a6700
  • editorWhitespace.foreground#afb8c1
  • editorWidget.background#f6f8fa
  • editorWidget.border#d1d9e0
  • editorWidget.resizeBorder#0969da
  • extensionButton.prominentBackground#1f883d
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#1a7f37
  • focusBorder#0969da
  • foreground#24292f
  • gitDecoration.addedResourceForeground#1a7f37
  • gitDecoration.conflictingResourceForeground#cf222e
  • gitDecoration.deletedResourceForeground#cf222e
  • gitDecoration.ignoredResourceForeground#656d76
  • gitDecoration.modifiedResourceForeground#9a6700
  • gitDecoration.submoduleResourceForeground#656d76
  • gitDecoration.untrackedResourceForeground#1a7f37
  • input.background#ffffff
  • input.border#d1d9e0
  • input.foreground#24292f
  • input.placeholderForeground#656d76
  • inputOption.activeBackground#0969da1a
  • inputOption.activeBorder#0969da
  • inputValidation.errorBackground#ffffff
  • inputValidation.errorBorder#cf222e
  • inputValidation.infoBackground#ffffff
  • inputValidation.infoBorder#0969da
  • inputValidation.warningBackground#ffffff
  • inputValidation.warningBorder#9a6700
  • list.activeSelectionBackground#0969da
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#afb8c133
  • list.focusBackground#0969da26
  • list.focusForeground#24292f
  • list.highlightForeground#0969da
  • list.hoverBackground#f6f8fa
  • list.hoverForeground#24292f
  • list.inactiveSelectionBackground#e5ebf1
  • list.inactiveSelectionForeground#24292f
  • menu.background#ffffff
  • menu.border#d1d9e0
  • menu.foreground#24292f
  • menu.selectionBackground#0969da26
  • menu.selectionForeground#24292f
  • menu.separatorBackground#d1d9e0
  • menubar.selectionBackground#0000001a
  • menubar.selectionForeground#24292f
  • panel.background#f6f8fa
  • panel.border#d1d9e0
  • panel.dropBorder#0969da
  • panelTitle.activeBorder#fd8c73
  • panelTitle.activeForeground#24292f
  • panelTitle.inactiveForeground#656d76
  • peekView.border#0969da
  • peekViewEditor.background#f6f8faf2
  • peekViewEditor.matchHighlightBackground#ffdf5d66
  • peekViewResult.background#f6f8fa
  • peekViewResult.fileForeground#0969da
  • peekViewResult.lineForeground#656d76
  • peekViewResult.matchHighlightBackground#ffdf5d66
  • peekViewResult.selectionBackground#0969da26
  • peekViewResult.selectionForeground#24292f
  • peekViewTitle.background#f6f8fa
  • peekViewTitleDescription.foreground#656d76
  • peekViewTitleLabel.foreground#24292f
  • progressBar.background#0969da
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#959da566
  • scrollbarSlider.background#959da533
  • scrollbarSlider.hoverBackground#959da544
  • selection.background#0969da40
  • settings.headerForeground#24292f
  • settings.modifiedItemIndicator#0969da
  • sideBar.background#f6f8fa
  • sideBar.border#d1d9e0
  • sideBar.foreground#24292f
  • sideBarSectionHeader.background#f6f8fa
  • sideBarSectionHeader.border#d1d9e0
  • sideBarSectionHeader.foreground#24292f
  • sideBarTitle.foreground#24292f
  • statusBar.background#24292f
  • statusBar.border#24292f
  • statusBar.debuggingBackground#f85149
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#24292f
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#ffffff1f
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.prominentBackground#6f42c1
  • statusBarItem.prominentHoverBackground#8a63d2
  • tab.activeBackground#ffffff
  • tab.activeBorder#ffffff
  • tab.activeBorderTop#fd8c73
  • tab.activeForeground#24292f
  • tab.activeModifiedBorder#c69026
  • tab.border#d1d9e0
  • tab.hoverBackground#ffffff
  • tab.hoverForeground#24292f
  • tab.inactiveBackground#f6f8fa
  • tab.inactiveForeground#656d76
  • tab.inactiveModifiedBorder#c6902680
  • tab.unfocusedActiveBorder#ffffff
  • tab.unfocusedActiveBorderTop#fd8c7380
  • tab.unfocusedActiveForeground#24292f80
  • tab.unfocusedActiveModifiedBorder#c6902680
  • tab.unfocusedHoverBackground#ffffff80
  • tab.unfocusedHoverForeground#24292f80
  • tab.unfocusedInactiveBackground#f6f8fa80
  • tab.unfocusedInactiveForeground#656d7680
  • tab.unfocusedInactiveModifiedBorder#c6902640
  • terminal.ansiBlack#24292f
  • terminal.ansiBlue#0969da
  • terminal.ansiBrightBlack#656d76
  • terminal.ansiBrightBlue#218bff
  • terminal.ansiBrightCyan#3192aa
  • terminal.ansiBrightGreen#1a7f37
  • terminal.ansiBrightMagenta#a475f9
  • terminal.ansiBrightRed#da3633
  • terminal.ansiBrightWhite#f6f8fa
  • terminal.ansiBrightYellow#d1242f
  • terminal.ansiCyan#1b7c83
  • terminal.ansiGreen#28a745
  • terminal.ansiMagenta#5a32a3
  • terminal.ansiRed#cf222e
  • terminal.ansiWhite#6e7781
  • terminal.ansiYellow#bf8700
  • terminal.background#ffffff
  • terminal.foreground#24292f
  • titleBar.activeBackground#f6f8fa
  • titleBar.activeForeground#24292f
  • titleBar.inactiveBackground#f6f8fa99
  • titleBar.inactiveForeground#24292f99
  • tree.indentGuidesStroke#d7dbe0
  • widget.shadow#8c959f29

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8b949eitalic
constant, entity.name.constant, variable.other.constant, variable.language#0969da
entity, entity.name#6f42c1
variable.parameter.function#24292f
entity.name.tag#116329
keyword#cf222e
storage, storage.type#cf222e
storage.modifier.package, storage.modifier.import, storage.type.java#24292f
string, punctuation.definition.string, string punctuation.section.embedded source#032f62
support#0969da
meta.property-name#0969da
variable#e36209
variable.other#24292f
invalid.broken#82071eitalic
invalid.deprecated#82071eitalic
invalid.illegal#82071eitalic
invalid.unimplemented#82071eitalic
carriage-return#f6f8faitalic underline
message.error#82071e
string variable#0550ae
source.regexp, string.regexp#116329
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#116329
string.regexp constant.character.escape#116329bold
support.constant#0969da
support.variable#0969da
meta.module-reference#0969da
punctuation.definition.list.begin.markdown#953800
markup.heading, markup.heading entity.name#0969dabold
markup.quote#24292f
markup.italic#24292fitalic
markup.bold#24292fbold
markup.raw#0969da
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#82071e
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#116329
markup.changed, punctuation.definition.changed#953800
markup.ignored, markup.untracked#eaeef2
meta.diff.range#8250dfbold
meta.diff.header#0969da
meta.separator#0969dabold
meta.output#0969da
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#57606a
brackethighlighter.unmatched#82071e
constant.other.reference.link, string.other.link#032f62underline