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#C41E3A
  • activityBar.background#EDE5D5
  • activityBar.foreground#2B2B2B
  • activityBarBadge.background#C41E3A
  • activityBarBadge.foreground#FFFFFF
  • badge.background#C41E3A
  • badge.foreground#FFFFFF
  • button.background#CFA654
  • button.foreground#FFFFFF
  • button.hoverBackground#B59258
  • dropdown.background#FFFFFF
  • dropdown.border#D4C9B5
  • dropdown.foreground#2B2B2B
  • editor.background#FAF3E0
  • editor.findMatchBackground#FFD54F
  • editor.findMatchHighlightBackground#FFE082
  • editor.foreground#2B2B2B
  • editor.lineHighlightBackground#F0E9D8
  • editor.lineHighlightBorder#D4C9B5
  • editor.selectionBackground#A7C7E7
  • editor.selectionHighlightBackground#CDE5F9
  • editorBracketMatch.background#CDE5F9
  • editorBracketMatch.border#A7C7E7
  • editorCursor.foreground#C41E3A
  • editorGroupHeader.tabsBackground#EFE8DA
  • editorIndentGuide.activeBackground#CFA654
  • editorIndentGuide.background#DAD8D5
  • editorLineNumber.activeForeground#2B2B2B
  • editorLineNumber.foreground#7A7A7A
  • editorWhitespace.foreground#C9C9C9
  • focusBorder#C41E3A
  • gitDecoration.conflictingResourceForeground#FF9800
  • gitDecoration.deletedResourceForeground#C41E3A
  • gitDecoration.modifiedResourceForeground#3B8EEA
  • gitDecoration.untrackedResourceForeground#4CAF50
  • input.background#FFFFFF
  • input.border#D4C9B5
  • input.foreground#2B2B2B
  • input.placeholderForeground#A0A0A0
  • inputOption.activeBorder#C41E3A
  • list.activeSelectionBackground#A7C7E7
  • list.activeSelectionForeground#2B2B2B
  • list.focusBackground#E0D8C9
  • list.highlightForeground#C41E3A
  • list.hoverBackground#F0E9D8
  • minimap.background#EFE8DA
  • minimapSlider.activeBackground#9A9A9A
  • minimapSlider.background#C9C9C9
  • minimapSlider.hoverBackground#B0B0B0
  • panel.background#EFE8DA
  • panel.border#D4C9B5
  • panelTitle.activeBorder#C41E3A
  • panelTitle.activeForeground#2B2B2B
  • panelTitle.inactiveForeground#7A7A7A
  • scrollbar.shadow#A0A0A0
  • scrollbarSlider.activeBackground#9A9A9A
  • scrollbarSlider.background#C9C9C9
  • scrollbarSlider.hoverBackground#B0B0B0
  • sideBar.background#EFE8DA
  • sideBar.foreground#2B2B2B
  • sideBarSectionHeader.background#EFE8DA
  • sideBarSectionHeader.foreground#2B2B2B
  • sideBarTitle.foreground#2B2B2B
  • statusBar.background#CFA654
  • statusBar.debuggingBackground#C41E3A
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#A8A8A8
  • statusBarItem.hoverBackground#B59258
  • tab.activeBackground#FAF3E0
  • tab.activeBorder#C41E3A
  • tab.activeForeground#2B2B2B
  • tab.border#D4C9B5
  • tab.inactiveBackground#EFE8DA
  • tab.inactiveForeground#6F6F6F
  • terminal.ansiBlue#3B8EEA
  • terminal.ansiBrightBlue#5C9EF8
  • terminal.ansiBrightCyan#1DE9B6
  • terminal.ansiBrightGreen#69F0AE
  • terminal.ansiBrightMagenta#FF4081
  • terminal.ansiBrightRed#FF5252
  • terminal.ansiBrightYellow#FFFF00
  • terminal.ansiCyan#00BFA5
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#E91E63
  • terminal.ansiRed#C41E3A
  • terminal.ansiYellow#FFC107
  • terminal.background#FAF3E0
  • terminal.foreground#2B2B2B
  • titleBar.activeBackground#EDE5D5
  • titleBar.activeForeground#2B2B2B
  • titleBar.inactiveBackground#EFE8DA
  • titleBar.inactiveForeground#6F6F6F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7A7Aitalic
string, string.quoted, string.template#4CAF50
keyword, storage.type, storage.modifier#C41E3Abold
keyword.operator, punctuation.accessor#CFA654
variable, variable.other#00BFA5
variable.parameter#00BFA5italic
entity.name.function, support.function#3B8EEA
meta.function-call#5C9EF8
entity.name.class, entity.name.type.class, support.class#CFA654bold
entity.name.type, support.type#E91E63
entity.name.type.interface#E91E63italic
constant.numeric#FF9800
constant, constant.language, constant.character#FF9800
constant.language.boolean#C41E3Abold
variable.other.property, support.variable.property#00BFA5
meta.object-literal.key#3B8EEA
entity.name.tag, punctuation.definition.tag#C41E3A
entity.other.attribute-name#E91E63italic
punctuation, meta.brace#6F6F6F
string.regexp#4CAF50
constant.character.escape#E91E63
meta.decorator, punctuation.decorator#CFA654
invalid, invalid.illegal#FF5252strikethrough
markup.heading, entity.name.section#CFA654bold
markup.bold#CFA654bold
markup.italic#C41E3Aitalic
markup.underline.link#3B8EEA
markup.inline.raw, markup.fenced_code#00BFA5
support.type.property-name.json#3B8EEA
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#E91E63
support.type.property-name.css#C41E3A
support.constant.property-value.css#FF9800