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#0055A4
  • activityBar.background#121212
  • activityBar.foreground#E0E0E0
  • activityBarBadge.background#EF4135
  • activityBarBadge.foreground#FFFFFF
  • badge.background#EF4135
  • badge.foreground#FFFFFF
  • button.background#0055A4
  • button.foreground#FFFFFF
  • button.hoverBackground#2A8FFF
  • dropdown.background#121212
  • dropdown.border#333333
  • dropdown.foreground#E0E0E0
  • editor.background#0D0D0D
  • editor.findMatchBackground#EF4135
  • editor.findMatchHighlightBackground#FF7F7F
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#222222
  • editor.lineHighlightBorder#333333
  • editor.selectionBackground#00408080
  • editor.selectionHighlightBackground#555555
  • editorBracketMatch.background#00408040
  • editorBracketMatch.border#0055A4
  • editorCursor.foreground#FFFFFF
  • editorGroupHeader.tabsBackground#121212
  • editorIndentGuide.activeBackground#777777
  • editorIndentGuide.background#444444
  • editorLineNumber.activeForeground#E0E0E0
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#555555
  • focusBorder#0055A4
  • gitDecoration.conflictingResourceForeground#FF66FF
  • gitDecoration.deletedResourceForeground#EF4135
  • gitDecoration.modifiedResourceForeground#00A7A7
  • gitDecoration.untrackedResourceForeground#6DFF6D
  • input.background#121212
  • input.border#333333
  • input.foreground#E0E0E0
  • input.placeholderForeground#777777
  • inputOption.activeBorder#EF4135
  • list.activeSelectionBackground#0055A4
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#004080
  • list.highlightForeground#EF4135
  • list.hoverBackground#333333
  • minimap.background#0D0D0D
  • minimapSlider.activeBackground#999999
  • minimapSlider.background#555555
  • minimapSlider.hoverBackground#777777
  • panel.background#0D0D0D
  • panel.border#333333
  • panelTitle.activeBorder#0055A4
  • panelTitle.activeForeground#E0E0E0
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#777777
  • scrollbarSlider.background#444444
  • scrollbarSlider.hoverBackground#555555
  • sideBar.background#121212
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#0D0D0D
  • sideBarSectionHeader.foreground#FFFFFF
  • sideBarTitle.foreground#E0E0E0
  • statusBar.background#1A1A1A
  • statusBar.debuggingBackground#0055A4
  • statusBar.foreground#E0E0E0
  • statusBar.noFolderBackground#121212
  • statusBarItem.hoverBackground#333333
  • tab.activeBackground#0D0D0D
  • tab.activeBorder#EF4135
  • tab.activeForeground#E0E0E0
  • tab.border#333333
  • tab.inactiveBackground#121212
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#0055A4
  • terminal.ansiBrightBlue#2A8FFF
  • terminal.ansiBrightCyan#5CE0E0
  • terminal.ansiBrightGreen#6DFF6D
  • terminal.ansiBrightMagenta#FF66FF
  • terminal.ansiBrightRed#FF6666
  • terminal.ansiBrightYellow#FFFF66
  • terminal.ansiCyan#00A7A7
  • terminal.ansiGreen#3FA34D
  • terminal.ansiMagenta#B800B8
  • terminal.ansiRed#EF4135
  • terminal.ansiYellow#FFB800
  • terminal.background#0D0D0D
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#1A1A1A
  • titleBar.activeForeground#E0E0E0
  • titleBar.inactiveBackground#0D0D0D
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#6DFF6D
keyword, storage.type, storage.modifier#0055A4bold
keyword.operator, punctuation.accessor#0055A4
variable, variable.other#E0E0E0
variable.parameter#77A8FFitalic
entity.name.function, support.function#FFB800
meta.function-call#FFB800
entity.name.class, entity.name.type.class, support.class#B800B8bold
entity.name.type, support.type#00A7A7
entity.name.type.interface#5CE0E0italic
constant.numeric#FF8C00
constant, constant.language, constant.character#FF8C00
constant.language.boolean#FF8C00bold
variable.other.property, support.variable.property#6DFF6D
meta.object-literal.key#B800B8
entity.name.tag, punctuation.definition.tag#0055A4
entity.other.attribute-name#77A8FFitalic
punctuation, meta.brace#CCCCCC
string.regexp#FFB800
constant.character.escape#FF8C00
meta.decorator, punctuation.decorator#5CE0E0
invalid, invalid.illegal#FF6666strikethrough
markup.heading, entity.name.section#EF4135bold
markup.bold#EF4135bold
markup.italic#77A8FFitalic
markup.underline.link#0055A4
markup.inline.raw, markup.fenced_code#6DFF6D
support.type.property-name.json#B800B8
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#0055A4
support.type.property-name.css#00A7A7
support.constant.property-value.css#FFB800