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#C1440E
  • activityBar.background#F0EDE9
  • activityBar.foreground#C1440E
  • activityBarBadge.background#C1440E
  • activityBarBadge.foreground#FAF8F5
  • badge.background#C1440E
  • badge.foreground#FAF8F5
  • button.background#C1440E
  • button.foreground#FAF8F5
  • button.hoverBackground#D1400E
  • dropdown.background#F2F0ED
  • dropdown.border#DADADA
  • dropdown.foreground#2E2E2E
  • editor.background#FAF8F5
  • editor.findMatchBackground#FFB30080
  • editor.findMatchHighlightBackground#FFB30040
  • editor.foreground#2E2E2E
  • editor.lineHighlightBackground#FFE5D0
  • editor.lineHighlightBorder#FFC29E
  • editor.selectionBackground#FFC29E80
  • editor.selectionHighlightBackground#FFC29E40
  • editorBracketMatch.background#FFE0B2
  • editorBracketMatch.border#C1440E
  • editorCursor.foreground#C1440E
  • editorGroupHeader.tabsBackground#F0F0F0
  • editorIndentGuide.activeBackground#C1440E
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#C1440E
  • editorLineNumber.foreground#BBBBBB
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#C1440E
  • gitDecoration.conflictingResourceForeground#FFB300
  • gitDecoration.deletedResourceForeground#E57373
  • gitDecoration.modifiedResourceForeground#C1440E
  • gitDecoration.untrackedResourceForeground#008000
  • input.background#F2F0ED
  • input.border#DADADA
  • input.foreground#2E2E2E
  • input.placeholderForeground#A89F9F
  • inputOption.activeBorder#C1440E
  • list.activeSelectionBackground#FFC29E
  • list.activeSelectionForeground#2E2E2E
  • list.focusBackground#FFB30030
  • list.highlightForeground#C1440E
  • list.hoverBackground#FFE5D0
  • minimap.background#FAF8F5
  • minimapSlider.activeBackground#C1440E66
  • minimapSlider.background#C1440E22
  • minimapSlider.hoverBackground#C1440E44
  • panel.background#FAF8F5
  • panel.border#D0CFCF
  • panelTitle.activeBorder#C1440E
  • panelTitle.activeForeground#2E2E2E
  • panelTitle.inactiveForeground#A89F9F
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#C1440E
  • scrollbarSlider.background#CCCCCC44
  • scrollbarSlider.hoverBackground#CCCCCC66
  • sideBar.background#F5F2EE
  • sideBar.foreground#2E2E2E
  • sideBarSectionHeader.background#F0EDED
  • sideBarSectionHeader.foreground#C1440E
  • sideBarTitle.foreground#C1440E
  • statusBar.background#EEE9E5
  • statusBar.debuggingBackground#C1440E
  • statusBar.foreground#2E2E2E
  • statusBar.noFolderBackground#E8E5E1
  • statusBarItem.hoverBackground#C1440E33
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#C1440E
  • tab.activeForeground#2E2E2E
  • tab.border#DADADA
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#8A8A8A
  • terminal.ansiBlue#4078F2
  • terminal.ansiBrightBlue#5c9eff
  • terminal.ansiBrightCyan#35fff0
  • terminal.ansiBrightGreen#4caf50
  • terminal.ansiBrightMagenta#ff79c6
  • terminal.ansiBrightRed#ff6b68
  • terminal.ansiBrightYellow#ffd700
  • terminal.ansiCyan#00A7A7
  • terminal.ansiGreen#008000
  • terminal.ansiMagenta#800080
  • terminal.ansiRed#C1440E
  • terminal.ansiYellow#B8860B
  • terminal.background#FAF8F5
  • terminal.foreground#2E2E2E
  • titleBar.activeBackground#EEE9E5
  • titleBar.activeForeground#2E2E2E
  • titleBar.inactiveBackground#E8E5E1
  • titleBar.inactiveForeground#A89F9F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A8A8Aitalic
string, string.quoted, string.template#D2691E
keyword, storage.type, storage.modifier#C1440Ebold
keyword.operator, punctuation.accessor#A6703D
variable, variable.other#2E2E2E
variable.parameter#A6703Ditalic
entity.name.function, support.function#C1440E
meta.function-call#FF8C00
entity.name.class, entity.name.type.class, support.class#C1440Ebold
entity.name.type, support.type#6B4F4F
entity.name.type.interface#6B4F4Fitalic
constant.numeric#FF8C00
constant, constant.language, constant.character#FF8C00
constant.language.boolean#FF8C00bold
variable.other.property, support.variable.property#6B4F4F
meta.object-literal.key#6B4F4F
entity.name.tag, punctuation.definition.tag#C1440E
entity.other.attribute-name#A6703Ditalic
punctuation, meta.brace#6B4F4F
string.regexp#FF8C00
constant.character.escape#FF8C00
meta.decorator, punctuation.decorator#A6703D
invalid, invalid.illegal#E57373strikethrough
markup.heading, entity.name.section#C1440Ebold
markup.bold#FF8C00bold
markup.italic#A6703Ditalic
markup.underline.link#C1440E
markup.inline.raw, markup.fenced_code#D2691E
support.type.property-name.json#C1440E
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#A6703D
support.type.property-name.css#C1440E
support.constant.property-value.css#FF8C00