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#C66A5B
  • activityBar.background#D7A95C
  • activityBar.foreground#2B2B2B
  • activityBarBadge.background#C66A5B
  • activityBarBadge.foreground#FAF4E6
  • badge.background#8A9A5B
  • badge.foreground#FAF4E6
  • button.background#C66A5B
  • button.foreground#FAF4E6
  • button.hoverBackground#B3413F
  • dropdown.background#FFF8E1
  • dropdown.border#D7A95C
  • dropdown.foreground#2B2B2B
  • editor.background#FAF4E6
  • editor.findMatchBackground#C66A5B80
  • editor.findMatchHighlightBackground#C66A5B40
  • editor.foreground#2B2B2B
  • editor.lineHighlightBackground#FFF8E1
  • editor.lineHighlightBorder#D7A95C
  • editor.selectionBackground#F2C94C80
  • editor.selectionHighlightBackground#F2C94C40
  • editorBracketMatch.background#F2C94C30
  • editorBracketMatch.border#F2C94C
  • editorCursor.foreground#3B4F6D
  • editorGroupHeader.tabsBackground#E5E5E5
  • editorIndentGuide.activeBackground#8A9A5B
  • editorIndentGuide.background#D0D0D0
  • editorLineNumber.activeForeground#2B2B2B
  • editorLineNumber.foreground#5A5A5A
  • editorWhitespace.foreground#B0B0B0
  • focusBorder#F2C94C
  • gitDecoration.conflictingResourceForeground#F2C94C
  • gitDecoration.deletedResourceForeground#B3413F
  • gitDecoration.modifiedResourceForeground#8A9A5B
  • gitDecoration.untrackedResourceForeground#C66A5B
  • input.background#FFFFFF
  • input.border#D7A95C
  • input.foreground#2B2B2B
  • input.placeholderForeground#A0A0A0
  • inputOption.activeBorder#C66A5B
  • list.activeSelectionBackground#F2C94C30
  • list.activeSelectionForeground#2B2B2B
  • list.focusBackground#FFF8E1
  • list.highlightForeground#C66A5B
  • list.hoverBackground#FFF8E1
  • minimap.background#FAF4E6
  • minimapSlider.activeBackground#8A9A5BAA
  • minimapSlider.background#D0D0D0AA
  • minimapSlider.hoverBackground#B0B0B0AA
  • panel.background#FFF8E1
  • panel.border#D7A95C
  • panelTitle.activeBorder#C66A5B
  • panelTitle.activeForeground#2B2B2B
  • panelTitle.inactiveForeground#5A5A5A
  • scrollbar.shadow#B0B0B0
  • scrollbarSlider.activeBackground#8A9A5BAA
  • scrollbarSlider.background#D0D0D0AA
  • scrollbarSlider.hoverBackground#B0B0B0AA
  • sideBar.background#FFF8E1
  • sideBar.foreground#2B2B2B
  • sideBarSectionHeader.background#FFF8E1
  • sideBarSectionHeader.foreground#2B2B2B
  • sideBarTitle.foreground#2B2B2B
  • statusBar.background#C66A5B
  • statusBar.debuggingBackground#8A9A5B
  • statusBar.foreground#FAF4E6
  • statusBar.noFolderBackground#E5E5E5
  • statusBarItem.hoverBackground#F2C94C
  • tab.activeBackground#FAF4E6
  • tab.activeBorder#C66A5B
  • tab.activeForeground#2B2B2B
  • tab.border#D7A95C
  • tab.inactiveBackground#E5E5E5
  • tab.inactiveForeground#5A5A5A
  • terminal.ansiBlue#3B4F6D
  • terminal.ansiBrightBlue#5A7FA6
  • terminal.ansiBrightCyan#8DD9D9
  • terminal.ansiBrightGreen#A7BF6A
  • terminal.ansiBrightMagenta#D07A78
  • terminal.ansiBrightRed#C96553
  • terminal.ansiBrightYellow#F5D76E
  • terminal.ansiCyan#6CB4B4
  • terminal.ansiGreen#8A9A5B
  • terminal.ansiMagenta#C66A5B
  • terminal.ansiRed#B3413F
  • terminal.ansiYellow#F2C94C
  • terminal.background#FAF4E6
  • terminal.foreground#2B2B2B
  • titleBar.activeBackground#D7A95C
  • titleBar.activeForeground#2B2B2B
  • titleBar.inactiveBackground#E5E5E5
  • titleBar.inactiveForeground#5A5A5A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A6A6Aitalic
string, string.quoted, string.template#8A9A5B
keyword, storage.type, storage.modifier#C66A5Bbold
keyword.operator, punctuation.accessor#3B4F6D
variable, variable.other#2B2B2B
variable.parameter#5A5A5Aitalic
entity.name.function, support.function#D7A95C
meta.function-call#D7A95C
entity.name.class, entity.name.type.class, support.class#B3413Fbold
entity.name.type, support.type#3B4F6D
entity.name.type.interface#5A7FA6italic
constant.numeric#B3413F
constant, constant.language, constant.character#C66A5B
constant.language.boolean#C66A5Bbold
variable.other.property, support.variable.property#8A9A5B
meta.object-literal.key#8A9A5B
entity.name.tag, punctuation.definition.tag#C66A5B
entity.other.attribute-name#8A9A5Bitalic
punctuation, meta.brace#5A5A5A
string.regexp#6CB4B4
constant.character.escape#B3413F
meta.decorator, punctuation.decorator#5A7FA6
invalid, invalid.illegal#FF0000strikethrough
markup.heading, entity.name.section#C66A5Bbold
markup.bold#C66A5Bbold
markup.italic#5A5A5Aitalic
markup.underline.link#3B4F6D
markup.inline.raw, markup.fenced_code#8A9A5B
support.type.property-name.json#3B4F6D
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#8A9A5B
support.type.property-name.css#C66A5B
support.constant.property-value.css#B3413F