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#C1272D
  • activityBar.background#2C2A2F
  • activityBar.foreground#EDEAE0
  • activityBarBadge.background#C1272D
  • activityBarBadge.foreground#1B1A1E
  • badge.background#C1272D
  • badge.foreground#1B1A1E
  • button.background#1B1A1E
  • button.foreground#EDEAE0
  • button.hoverBackground#2C2A2F
  • dropdown.background#2C2A2F
  • dropdown.border#1B1A1E
  • dropdown.foreground#EDEAE0
  • editor.background#1B1A1E
  • editor.findMatchBackground#6A8F39
  • editor.findMatchHighlightBackground#6A8F3980
  • editor.foreground#EDEAE0
  • editor.lineHighlightBackground#1B1A1E88
  • editor.lineHighlightBorder#C1272D
  • editor.selectionBackground#C1272D60
  • editor.selectionHighlightBackground#C1272D40
  • editorBracketMatch.background#6A8F3933
  • editorBracketMatch.border#6A8F39
  • editorCursor.foreground#C1272D
  • editorGroupHeader.tabsBackground#2C2A2F
  • editorIndentGuide.activeBackground#C1272D
  • editorIndentGuide.background#8A7F7F44
  • editorLineNumber.activeForeground#C1272D
  • editorLineNumber.foreground#8A7F7F
  • editorWhitespace.foreground#8A7F7F
  • focusBorder#C1272D
  • gitDecoration.conflictingResourceForeground#C1272D
  • gitDecoration.deletedResourceForeground#B03030
  • gitDecoration.modifiedResourceForeground#6A8F39
  • gitDecoration.untrackedResourceForeground#6A8F39
  • input.background#2C2A2F
  • input.border#1B1A1E
  • input.foreground#EDEAE0
  • input.placeholderForeground#8A7F7F
  • inputOption.activeBorder#C1272D
  • list.activeSelectionBackground#1B1A1E
  • list.activeSelectionForeground#EDEAE0
  • list.focusBackground#2C2A2F
  • list.highlightForeground#C1272D
  • list.hoverBackground#2C2A2FAA
  • minimap.background#1B1A1E
  • minimapSlider.activeBackground#C1272D
  • minimapSlider.background#2C2A2FAA
  • minimapSlider.hoverBackground#2C2A2FCC
  • panel.background#1B1A1E
  • panel.border#2C2A2F
  • panelTitle.activeBorder#C1272D
  • panelTitle.activeForeground#EDEAE0
  • panelTitle.inactiveForeground#8A7F7F
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#C1272D88
  • scrollbarSlider.background#8A7F7F44
  • scrollbarSlider.hoverBackground#8A7F7F88
  • sideBar.background#2C2A2F
  • sideBar.foreground#EDEAE0
  • sideBarSectionHeader.background#2C2A2F
  • sideBarSectionHeader.foreground#C1272D
  • sideBarTitle.foreground#C1272D
  • statusBar.background#1B1A1E
  • statusBar.debuggingBackground#C1272D
  • statusBar.foreground#EDEAE0
  • statusBar.noFolderBackground#2C2A2F
  • statusBarItem.hoverBackground#C1272D66
  • tab.activeBackground#1B1A1E
  • tab.activeBorder#C1272D
  • tab.activeForeground#EDEAE0
  • tab.border#1B1A1E
  • tab.inactiveBackground#2C2A2F
  • tab.inactiveForeground#8A7F7F
  • terminal.ansiBlue#6A8F39
  • terminal.ansiBrightBlue#6A8F39
  • terminal.ansiBrightCyan#2C2A2F
  • terminal.ansiBrightGreen#6A8F39
  • terminal.ansiBrightMagenta#C1272D
  • terminal.ansiBrightRed#B03030
  • terminal.ansiBrightYellow#CDA434
  • terminal.ansiCyan#2C2A2F
  • terminal.ansiGreen#6A8F39
  • terminal.ansiMagenta#C1272D
  • terminal.ansiRed#B03030
  • terminal.ansiYellow#CDA434
  • terminal.background#1B1A1E
  • terminal.foreground#EDEAE0
  • titleBar.activeBackground#2C2A2F
  • titleBar.activeForeground#EDEAE0
  • titleBar.inactiveBackground#1B1A1E
  • titleBar.inactiveForeground#8A7F7F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8B7E7Eitalic
string, string.quoted, string.template#2E8B57
keyword, storage.type, storage.modifier#D4AF37bold
keyword.operator, punctuation.accessor#D4AF37
variable, variable.other#F5E9DC
variable.parameter#2E8B57italic
entity.name.function, support.function#D4AF37
meta.function-call#F5E9DC
entity.name.class, entity.name.type.class, support.class#D4AF37bold
entity.name.type, support.type#D4AF37
entity.name.type.interface#2E8B57italic
constant.numeric#D4AF37
constant, constant.language, constant.character#D4AF37
constant.language.boolean#D4AF37bold
variable.other.property, support.variable.property#F5E9DC
meta.object-literal.key#D4AF37
entity.name.tag, punctuation.definition.tag#D4AF37
entity.other.attribute-name#2E8B57italic
punctuation, meta.brace#F5E9DC
string.regexp#2E8B57
constant.character.escape#D4AF37
meta.decorator, punctuation.decorator#D4AF37
invalid, invalid.illegal#B03030strikethrough
markup.heading, entity.name.section#D4AF37bold
markup.bold#D4AF37bold
markup.italic#2E8B57italic
markup.underline.link#2E8B57
markup.inline.raw, markup.fenced_code#2E8B57
support.type.property-name.json#D4AF37
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#2E8B57
support.type.property-name.css#D4AF37
support.constant.property-value.css#2E8B57