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—