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.activeBorder#FFFFFF
  • activityBar.background#111111
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#00B14F
  • activityBarBadge.foreground#FFFFFF
  • badge.background#004C99
  • badge.foreground#FFFFFF
  • button.background#00B14F
  • button.foreground#FFFFFF
  • button.hoverBackground#009944
  • dropdown.background#1A1A1A
  • dropdown.border#333333
  • dropdown.foreground#E0E0E0
  • editor.background#0D0D0D
  • editor.findMatchBackground#0066CC
  • editor.findMatchHighlightBackground#004C99
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#222222
  • editor.lineHighlightBorder#00B14F
  • editor.selectionBackground#004C99
  • editor.selectionHighlightBackground#003366
  • editorBracketMatch.background#004C99
  • editorBracketMatch.border#00B14F
  • editorCursor.foreground#00B14F
  • editorGroupHeader.tabsBackground#111111
  • editorIndentGuide.activeBackground#555555
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#555555
  • focusBorder#00B14F
  • gitDecoration.conflictingResourceForeground#FF3B8E
  • gitDecoration.deletedResourceForeground#FF3B30
  • gitDecoration.modifiedResourceForeground#00B14F
  • gitDecoration.untrackedResourceForeground#68A2FF
  • input.background#1A1A1A
  • input.border#333333
  • input.foreground#E0E0E0
  • input.placeholderForeground#777777
  • inputOption.activeBorder#00B14F
  • list.activeSelectionBackground#004C99
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#004C99
  • list.highlightForeground#00B14F
  • list.hoverBackground#222222
  • minimap.background#111111
  • minimapSlider.activeBackground#555555
  • minimapSlider.background#333333
  • minimapSlider.hoverBackground#444444
  • panel.background#111111
  • panel.border#00B14F
  • panelTitle.activeBorder#00B14F
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#555555
  • scrollbarSlider.background#333333
  • scrollbarSlider.hoverBackground#444444
  • sideBar.background#0F0F0F
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#111111
  • sideBarSectionHeader.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#111111
  • statusBar.debuggingBackground#0052CC
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#111111
  • statusBarItem.hoverBackground#222222
  • tab.activeBackground#1A1A1A
  • tab.activeBorder#00B14F
  • tab.activeForeground#FFFFFF
  • tab.border#2A2A2A
  • tab.inactiveBackground#111111
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#3B78FF
  • terminal.ansiBrightBlue#68A2FF
  • terminal.ansiBrightCyan#5FF0FF
  • terminal.ansiBrightGreen#5EFF8F
  • terminal.ansiBrightMagenta#FF79B0
  • terminal.ansiBrightRed#FF6F66
  • terminal.ansiBrightYellow#FFE066
  • terminal.ansiCyan#00E5FF
  • terminal.ansiGreen#00B14F
  • terminal.ansiMagenta#FF3B8E
  • terminal.ansiRed#FF3B30
  • terminal.ansiYellow#FFC400
  • terminal.background#0D0D0D
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#111111
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#0A0A0A
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#00B14F
keyword, storage.type, storage.modifier#FF3B30bold
keyword.operator, punctuation.accessor#FFC400
variable, variable.other#E0E0E0
variable.parameter#68A2FFitalic
entity.name.function, support.function#3B78FF
meta.function-call#5FF0FF
entity.name.class, entity.name.type.class, support.class#FF3B8Ebold
entity.name.type, support.type#FF79B0
entity.name.type.interface#FF3B8Eitalic
constant.numeric#FFC400
constant, constant.language, constant.character#FF79B0
constant.language.boolean#FF3B30bold
variable.other.property, support.variable.property#00E5FF
meta.object-literal.key#5EFF8F
entity.name.tag, punctuation.definition.tag#FF3B8E
entity.other.attribute-name#68A2FFitalic
punctuation, meta.brace#CCCCCC
string.regexp#5FF0FF
constant.character.escape#FF79B0
meta.decorator, punctuation.decorator#68A2FF
invalid, invalid.illegal#FF3B30strikethrough
markup.heading, entity.name.section#00B14Fbold
markup.bold#00B14Fbold
markup.italic#68A2FFitalic
markup.underline.link#3B78FF
markup.inline.raw, markup.fenced_code#FFC400
support.type.property-name.json#5EFF8F
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF3B8E
support.type.property-name.css#00B14F
support.constant.property-value.css#FFC400