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#FF0000
  • activityBar.background#1E1E1E
  • activityBar.foreground#FF4F4F
  • activityBarBadge.background#FF0000
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF4F4F
  • badge.foreground#FFFFFF
  • button.background#FF0000
  • button.foreground#FFFFFF
  • button.hoverBackground#E60000
  • dropdown.background#1E1E1E
  • dropdown.border#333333
  • dropdown.foreground#E0E0E0
  • editor.background#121212
  • editor.findMatchBackground#FF000080
  • editor.findMatchHighlightBackground#FF4444AA
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#262626
  • editor.lineHighlightBorder#333333
  • editor.selectionBackground#66000080
  • editor.selectionHighlightBackground#44000040
  • editorBracketMatch.background#331111
  • editorBracketMatch.border#FF0000
  • editorCursor.foreground#FFCCCC
  • editorGroupHeader.tabsBackground#1E1E1E
  • editorIndentGuide.activeBackground#555555
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#FFCCCC
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#444444
  • focusBorder#FF4F4F
  • gitDecoration.conflictingResourceForeground#BD10E0
  • gitDecoration.deletedResourceForeground#FF4F4F
  • gitDecoration.modifiedResourceForeground#5AC8FA
  • gitDecoration.untrackedResourceForeground#7ED321
  • input.background#1E1E1E
  • input.border#333333
  • input.foreground#E0E0E0
  • input.placeholderForeground#777777
  • inputOption.activeBorder#FF0000
  • list.activeSelectionBackground#2A2A2A
  • list.activeSelectionForeground#FFCCCC
  • list.focusBackground#292929
  • list.highlightForeground#FF4F4F
  • list.hoverBackground#262626
  • minimap.background#1E1E1E
  • minimapSlider.activeBackground#77777780
  • minimapSlider.background#55555580
  • minimapSlider.hoverBackground#66666680
  • panel.background#121212
  • panel.border#333333
  • panelTitle.activeBorder#FF0000
  • panelTitle.activeForeground#FFCCCC
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#55555580
  • scrollbarSlider.background#33333380
  • scrollbarSlider.hoverBackground#44444480
  • sideBar.background#1E1E1E
  • sideBar.foreground#E0E0E0
  • sideBarSectionHeader.background#1A1A1A
  • sideBarSectionHeader.foreground#FFCCCC
  • sideBarTitle.foreground#FF4F4F
  • statusBar.background#1E1E1E
  • statusBar.debuggingBackground#FF6600
  • statusBar.foreground#FFCCCC
  • statusBar.noFolderBackground#1E1E1E
  • statusBarItem.hoverBackground#2D2D2D
  • tab.activeBackground#1E1E1E
  • tab.activeBorder#FF0000
  • tab.activeForeground#FFCCCC
  • tab.border#333333
  • tab.inactiveBackground#121212
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#4A90E2
  • terminal.ansiBrightBlue#80B2FF
  • terminal.ansiBrightCyan#A0E4FF
  • terminal.ansiBrightGreen#B6E89B
  • terminal.ansiBrightMagenta#E080FF
  • terminal.ansiBrightRed#FF7777
  • terminal.ansiBrightYellow#FFD27F
  • terminal.ansiCyan#5AC8FA
  • terminal.ansiGreen#7ED321
  • terminal.ansiMagenta#BD10E0
  • terminal.ansiRed#FF4F4F
  • terminal.ansiYellow#F5A623
  • terminal.background#0D0D0D
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#0D0D0D
  • titleBar.activeForeground#FFCCCC
  • 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#7ED321
keyword, storage.type, storage.modifier#FF4F4Fbold
keyword.operator, punctuation.accessor#FFCCCC
variable, variable.other#E0E0E0
variable.parameter#FFCCCCitalic
entity.name.function, support.function#4A90E2
meta.function-call#5AC8FA
entity.name.class, entity.name.type.class, support.class#FFCCCCbold
entity.name.type, support.type#BD10E0
entity.name.type.interface#FFCCCCitalic
constant.numeric#F5A623
constant, constant.language, constant.character#BD10E0
constant.language.boolean#FF4F4Fbold
variable.other.property, support.variable.property#5AC8FA
meta.object-literal.key#FFCCCC
entity.name.tag, punctuation.definition.tag#FF4F4F
entity.other.attribute-name#FFCCCCitalic
punctuation, meta.brace#C0C0C0
string.regexp#E089FF
constant.character.escape#FFCCCC
meta.decorator, punctuation.decorator#BD10E0
invalid, invalid.illegal#FF0000strikethrough
markup.heading, entity.name.section#FF4F4Fbold
markup.bold#FFCCCCbold
markup.italic#FFCCCCitalic
markup.underline.link#4A90E2
markup.inline.raw, markup.fenced_code#FFCCCC
support.type.property-name.json#FFCCCC
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFCCCC
support.type.property-name.css#FFCCCC
support.constant.property-value.css#FFCCCC