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#141416
  • activityBar.foreground#CACACE
  • activityBar.inactiveForeground#3A3A42
  • activityBarBadge.background#5BA0D6
  • activityBarBadge.foreground#FFFFFF
  • badge.background#5BA0D6
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#CACACE
  • breadcrumb.focusForeground#CACACE
  • breadcrumb.foreground#555560
  • button.background#5BA0D6
  • button.foreground#FFFFFF
  • button.hoverBackground#6DB0E6
  • dropdown.background#141416
  • dropdown.border#3A3A42
  • dropdown.foreground#CACACE
  • editor.background#18181B
  • editor.findMatchBackground#5BA0D644
  • editor.findMatchHighlightBackground#5BA0D622
  • editor.foreground#CACACE
  • editor.lineHighlightBackground#1E1E22
  • editor.selectionBackground#5BA0D635
  • editor.selectionHighlightBackground#5BA0D620
  • editor.wordHighlightBackground#5BA0D620
  • editor.wordHighlightStrongBackground#5BA0D635
  • editorBracketHighlight.foreground1#7A8B9E
  • editorBracketHighlight.foreground2#A0A0A8
  • editorBracketHighlight.foreground3#5BA0D6
  • editorBracketHighlight.foreground4#8090A0
  • editorBracketHighlight.foreground5#CACACE
  • editorBracketHighlight.foreground6#6090B0
  • editorBracketMatch.background#5BA0D620
  • editorBracketMatch.border#5BA0D6
  • editorCursor.foreground#5BA0D6
  • editorError.foreground#D07070
  • editorGroupHeader.tabsBackground#141416
  • editorGutter.addedBackground#5BA0D6
  • editorGutter.deletedBackground#A08080
  • editorGutter.modifiedBackground#7A8B9E
  • editorIndentGuide.activeBackground#3A3A42
  • editorIndentGuide.background#2E2E34
  • editorLineNumber.activeForeground#7A7A85
  • editorLineNumber.foreground#3A3A42
  • editorOverviewRuler.addedForeground#5BA0D6
  • editorOverviewRuler.deletedForeground#A08080
  • editorOverviewRuler.modifiedForeground#7A8B9E
  • editorWarning.foreground#D0A050
  • editorWhitespace.foreground#2E2E34
  • gitDecoration.addedResourceForeground#70A070
  • gitDecoration.conflictingResourceForeground#D0A050
  • gitDecoration.deletedResourceForeground#D07070
  • gitDecoration.ignoredResourceForeground#2E2E34
  • gitDecoration.modifiedResourceForeground#5BA0D6
  • gitDecoration.untrackedResourceForeground#70A070
  • input.background#141416
  • input.border#3A3A42
  • input.foreground#CACACE
  • input.placeholderForeground#3A3A42
  • inputOption.activeBorder#5BA0D6
  • list.activeSelectionBackground#26262B
  • list.activeSelectionForeground#CACACE
  • list.focusBackground#26262B
  • list.focusForeground#CACACE
  • list.highlightForeground#5BA0D6
  • list.hoverBackground#1E1E22
  • list.hoverForeground#CACACE
  • list.inactiveSelectionBackground#1E1E22
  • list.inactiveSelectionForeground#A0A0A8
  • minimap.selectionHighlight#5BA0D640
  • notificationCenter.border#3A3A42
  • notifications.background#1E1E22
  • notifications.foreground#CACACE
  • panel.background#141416
  • panel.border#1E1E22
  • panelTitle.activeBorder#5BA0D6
  • panelTitle.activeForeground#CACACE
  • panelTitle.inactiveForeground#555560
  • peekView.border#5BA0D6
  • peekViewEditor.background#141416
  • peekViewResult.background#141416
  • peekViewTitle.background#141416
  • peekViewTitleLabel.foreground#CACACE
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#3A3A42C0
  • scrollbarSlider.background#3A3A4260
  • scrollbarSlider.hoverBackground#3A3A4290
  • sideBar.background#141416
  • sideBar.border#1E1E22
  • sideBar.foreground#7A7A85
  • sideBarSectionHeader.background#18181B
  • sideBarSectionHeader.foreground#A0A0A8
  • sideBarTitle.foreground#CACACE
  • statusBar.background#141416
  • statusBar.debuggingBackground#5BA0D6
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#7A7A85
  • statusBar.noFolderBackground#18181B
  • tab.activeBackground#18181B
  • tab.activeBorderTop#5BA0D6
  • tab.activeForeground#CACACE
  • tab.border#141416
  • tab.inactiveBackground#141416
  • tab.inactiveForeground#555560
  • terminal.ansiBlack#141416
  • terminal.ansiBlue#5BA0D6
  • terminal.ansiBrightBlack#555560
  • terminal.ansiBrightBlue#77B8E8
  • terminal.ansiBrightCyan#78B8B8
  • terminal.ansiBrightGreen#88B888
  • terminal.ansiBrightMagenta#B888B8
  • terminal.ansiBrightRed#E08888
  • terminal.ansiBrightWhite#EAEAEE
  • terminal.ansiBrightYellow#E0B868
  • terminal.ansiCyan#60A0A0
  • terminal.ansiGreen#70A070
  • terminal.ansiMagenta#A070A0
  • terminal.ansiRed#D07070
  • terminal.ansiWhite#CACACE
  • terminal.ansiYellow#D0A050
  • terminal.background#141416
  • terminal.foreground#CACACE
  • titleBar.activeBackground#141416
  • titleBar.activeForeground#CACACE
  • titleBar.inactiveBackground#141416
  • titleBar.inactiveForeground#3A3A42

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#CACACE
comment, punctuation.definition.comment#555560italic
string, string.quoted, string.template, punctuation.definition.string#A0A0A8
constant.numeric#5BA0D6
constant.language#5BA0D6italic
constant.character, constant.other#5BA0D6
keyword, keyword.control, keyword.operator.new#7A8B9Ebold
keyword.operator#8A8A95
storage, storage.type#7A8B9Eitalic
storage.modifier#7A8B9Eitalic
entity.name.type, entity.name.class, support.class, entity.other.inherited-class#CACACEunderline
entity.name.function, support.function, meta.function-call#B0B0B8
variable.parameter#9090A0italic
variable, variable.other#CACACE
variable.language#7A8B9Eitalic
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#B0B0B8
entity.name.tag#7A8B9E
entity.other.attribute-name#A0A0A8italic
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#CACACE
support.type.property-name.css#7A8B9E
support.constant.property-value.css#A0A0A8
keyword.other.unit.css#5BA0D6
punctuation.separator, punctuation.terminator, punctuation.accessor#7A7A85
punctuation.section, punctuation.definition.block, meta.brace#7A7A85
markup.heading, entity.name.section.markdown#CACACEbold
markup.bold#CACACEbold
markup.italic#A0A0A8italic
markup.underline.link#5BA0D6
markup.inline.raw, markup.fenced_code#8A8A95
support.type.property-name.json#7A8B9E
string.quoted.double.json#A0A0A8
entity.name.tag.yaml#7A8B9E
meta.decorator, punctuation.decorator#5BA0D6italic
string.regexp#5BA0D6
constant.character.escape#5BA0D6
support.type, support.class#CACACE
support.constant#5BA0D6
invalid#FFFFFF
invalid.deprecated#FFFFFF