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#A35C00
  • activityBar.background#F2E6C8
  • activityBar.foreground#C47100
  • activityBarBadge.background#A35C00
  • activityBarBadge.foreground#FFF8E1
  • badge.background#C47100
  • badge.foreground#FFF8E1
  • button.background#A35C00
  • button.foreground#FFF8E1
  • button.hoverBackground#C47100
  • dropdown.background#F7EFE0
  • dropdown.border#F2E6C8
  • dropdown.foreground#4B3E2F
  • editor.background#FFF8E1
  • editor.findMatchBackground#E5B04C44
  • editor.findMatchHighlightBackground#E5B04C22
  • editor.foreground#4B3E2F
  • editor.lineHighlightBackground#FFF8E140
  • editor.lineHighlightBorder#C4710080
  • editor.selectionBackground#C4710033
  • editor.selectionHighlightBackground#C4710022
  • editorBracketMatch.background#C4710033
  • editorBracketMatch.border#C47100
  • editorCursor.foreground#A35C00
  • editorGroupHeader.tabsBackground#FFF8E1
  • editorIndentGuide.activeBackground#8A7A6C88
  • editorIndentGuide.background#8A7A6C44
  • editorLineNumber.activeForeground#C47100
  • editorLineNumber.foreground#8A7A6C
  • editorWhitespace.foreground#8A7A6C66
  • focusBorder#C47100
  • gitDecoration.conflictingResourceForeground#E5B04C
  • gitDecoration.deletedResourceForeground#B03020
  • gitDecoration.modifiedResourceForeground#C47100
  • gitDecoration.untrackedResourceForeground#6B8E23
  • input.background#F7EFE0
  • input.border#F2E6C8
  • input.foreground#4B3E2F
  • input.placeholderForeground#8A7A6C
  • inputOption.activeBorder#C47100
  • list.activeSelectionBackground#C4710055
  • list.activeSelectionForeground#FFF8E1
  • list.focusBackground#C4710044
  • list.highlightForeground#C47100
  • list.hoverBackground#C4710033
  • minimap.background#FFF8E1
  • minimapSlider.activeBackground#C4710066
  • minimapSlider.background#C4710022
  • minimapSlider.hoverBackground#C4710044
  • panel.background#FFF8E1
  • panel.border#F2E6C8
  • panelTitle.activeBorder#C47100
  • panelTitle.activeForeground#4B3E2F
  • panelTitle.inactiveForeground#8A7A6C
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#8A7A6C88
  • scrollbarSlider.background#8A7A6C44
  • scrollbarSlider.hoverBackground#8A7A6C66
  • sideBar.background#F7EFE0
  • sideBar.foreground#4B3E2F
  • sideBarSectionHeader.background#F2E6C8
  • sideBarSectionHeader.foreground#4B3E2F
  • sideBarTitle.foreground#C47100
  • statusBar.background#A35C00
  • statusBar.debuggingBackground#C47100
  • statusBar.foreground#FFF8E1
  • statusBar.noFolderBackground#F2E6C8
  • statusBarItem.hoverBackground#C4710055
  • tab.activeBackground#FFF8E1
  • tab.activeBorder#C47100
  • tab.activeForeground#4B3E2F
  • tab.border#F2E6C8
  • tab.inactiveBackground#F7EFE0
  • tab.inactiveForeground#8A7A6C
  • terminal.ansiBlue#5A8ABF
  • terminal.ansiBrightBlue#7A9FFF
  • terminal.ansiBrightCyan#7ABFCF
  • terminal.ansiBrightGreen#8CC23A
  • terminal.ansiBrightMagenta#D48F2A
  • terminal.ansiBrightRed#D04A33
  • terminal.ansiBrightYellow#E0B840
  • terminal.ansiCyan#5AA0A9
  • terminal.ansiGreen#6B8E23
  • terminal.ansiMagenta#C47100
  • terminal.ansiRed#B03020
  • terminal.ansiYellow#C47100
  • terminal.background#FFF8E1
  • terminal.foreground#4B3E2F
  • titleBar.activeBackground#F2E6C8
  • titleBar.activeForeground#4B3E2F
  • titleBar.inactiveBackground#F7EFE0
  • titleBar.inactiveForeground#8A7A6C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A7A6Citalic
string, string.quoted, string.template#6B8E23
keyword, storage.type, storage.modifier#C47100bold
keyword.operator, punctuation.accessor#C47100
variable, variable.other#4B3E2F
variable.parameter#C47100italic
entity.name.function, support.function#5AA0A9
meta.function-call#5AA0A9
entity.name.class, entity.name.type.class, support.class#5A8ABFbold
entity.name.type, support.type#5A8ABF
entity.name.type.interface#C47100italic
constant.numeric#C47100
constant, constant.language, constant.character#A35C00
constant.language.boolean#C47100bold
variable.other.property, support.variable.property#4B3E2F
meta.object-literal.key#C47100
entity.name.tag, punctuation.definition.tag#A35C00
entity.other.attribute-name#C47100italic
punctuation, meta.brace#4B3E2F
string.regexp#6B8E23
constant.character.escape#C47100
meta.decorator, punctuation.decorator#5A8ABF
invalid, invalid.illegal#B03020strikethrough
markup.heading, entity.name.section#C47100bold
markup.bold#C47100bold
markup.italic#A35C00italic
markup.underline.link#5A8ABF
markup.inline.raw, markup.fenced_code#6B8E23
support.type.property-name.json#C47100
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#A35C00
support.type.property-name.css#5A8ABF
support.constant.property-value.css#6B8E23