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#4E6E33
  • activityBar.background#F0E6D3
  • activityBar.foreground#4B4339
  • activityBar.inactiveForeground#B8AC93
  • activityBarBadge.background#4E6E33
  • activityBarBadge.foreground#FBF6EC
  • badge.background#2E7A6E
  • badge.foreground#FBF6EC
  • button.background#4E6E33
  • button.foreground#FBF6EC
  • button.hoverBackground#5E8140
  • debugToolBar.background#F5EDDC
  • dropdown.background#F5EDDC
  • dropdown.border#E0D3B8
  • dropdown.foreground#4B4339
  • editor.background#FBF6EC
  • editor.findMatchBackground#8C6A1B35
  • editor.findMatchBorder#8C6A1B80
  • editor.findMatchHighlightBackground#4E6E3330
  • editor.foreground#4B4339
  • editor.inactiveSelectionBackground#D8BE8C30
  • editor.lineHighlightBackground#F3EAD9
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#D8BE8C60
  • editor.selectionHighlightBackground#D8BE8C40
  • editor.wordHighlightBackground#D8BE8C35
  • editor.wordHighlightStrongBackground#D8BE8C55
  • editorBracketHighlight.foreground1#4E6E33
  • editorBracketHighlight.foreground2#3F6E8C
  • editorBracketHighlight.foreground3#8C6A1B
  • editorBracketHighlight.foreground4#2E7A6E
  • editorBracketHighlight.foreground5#9A5A26
  • editorBracketHighlight.foreground6#A8483F
  • editorBracketHighlight.unexpectedBracket.foreground#C1443C
  • editorBracketMatch.background#EEE3CC
  • editorBracketMatch.border#2E7A6E80
  • editorCursor.foreground#278066
  • editorError.foreground#C1443C
  • editorGroup.border#E0D3B8
  • editorGroupHeader.tabsBackground#F0E6D3
  • editorGutter.addedBackground#4E6E3380
  • editorGutter.deletedBackground#C1443C80
  • editorGutter.modifiedBackground#3F6E8C80
  • editorHoverWidget.background#F5EDDC
  • editorHoverWidget.border#E0D3B8
  • editorIndentGuide.activeBackground1#D0C09B
  • editorIndentGuide.background1#E6DAC0
  • editorInfo.foreground#3F6E8C
  • editorLineNumber.activeForeground#332C24
  • editorLineNumber.foreground#B8AC93
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.errorForeground#C1443C80
  • editorOverviewRuler.findMatchForeground#8C6A1B80
  • editorOverviewRuler.infoForeground#3F6E8C80
  • editorOverviewRuler.warningForeground#8C6A1B80
  • editorSuggestWidget.background#F5EDDC
  • editorSuggestWidget.border#E0D3B8
  • editorSuggestWidget.foreground#4B4339
  • editorSuggestWidget.highlightForeground#4E6E33
  • editorSuggestWidget.selectedBackground#EEE3CC
  • editorWarning.foreground#8C6A1B
  • editorWhitespace.foreground#DDD0B4
  • editorWidget.background#F5EDDC
  • editorWidget.border#E0D3B8
  • focusBorder#4E6E3370
  • foreground#4B4339
  • gitDecoration.addedResourceForeground#4E6E33
  • gitDecoration.conflictingResourceForeground#7D5A8C
  • gitDecoration.deletedResourceForeground#C1443C
  • gitDecoration.ignoredResourceForeground#B8AC93
  • gitDecoration.modifiedResourceForeground#3F6E8C
  • gitDecoration.untrackedResourceForeground#8C6A1B
  • input.background#F5EDDC
  • input.border#E0D3B8
  • input.foreground#4B4339
  • input.placeholderForeground#B8AC93
  • list.activeSelectionBackground#E6D8BA
  • list.activeSelectionForeground#332C24
  • list.focusBackground#E6D8BA
  • list.highlightForeground#4E6E33
  • list.hoverBackground#EEE3CC
  • list.hoverForeground#4B4339
  • list.inactiveSelectionBackground#EEE3CC
  • list.inactiveSelectionForeground#5C5344
  • menu.background#F5EDDC
  • menu.border#E0D3B8
  • menu.foreground#4B4339
  • menu.selectionBackground#E6D8BA
  • menu.selectionForeground#332C24
  • minimap.background#F0E6D3
  • minimapSlider.activeBackground#4E6E3370
  • minimapSlider.background#D8BE8C50
  • minimapSlider.hoverBackground#D8BE8C70
  • notificationCenterHeader.background#F5EDDC
  • notificationCenterHeader.foreground#4B4339
  • notifications.background#F5EDDC
  • notifications.foreground#4B4339
  • notificationsErrorIcon.foreground#C1443C
  • notificationsInfoIcon.foreground#3F6E8C
  • notificationsWarningIcon.foreground#8C6A1B
  • panel.background#F0E6D3
  • panel.border#E0D3B8
  • panelTitle.activeBorder#4E6E33
  • panelTitle.activeForeground#332C24
  • panelTitle.inactiveForeground#B8AC93
  • progressBar.background#2E7A6E
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#4E6E3370
  • scrollbarSlider.background#D8BE8C40
  • scrollbarSlider.hoverBackground#D8BE8C70
  • sideBar.background#F0E6D3
  • sideBar.border#E0D3B8
  • sideBar.foreground#5C5344
  • sideBarSectionHeader.background#EBE0CB
  • sideBarSectionHeader.border#E0D3B8
  • sideBarSectionHeader.foreground#5C5344
  • sideBarTitle.foreground#332C24
  • statusBar.background#F0E6D3
  • statusBar.border#E0D3B8
  • statusBar.debuggingBackground#3F6E8C
  • statusBar.debuggingForeground#FBF6EC
  • statusBar.foreground#5C5344
  • tab.activeBackground#FBF6EC
  • tab.activeBorder#4E6E33
  • tab.activeForeground#332C24
  • tab.border#F0E6D3
  • tab.hoverBackground#EEE3CC
  • tab.hoverForeground#4B4339
  • tab.inactiveBackground#F0E6D3
  • tab.inactiveForeground#B8AC93
  • terminal.ansiBlack#4B4339
  • terminal.ansiBlue#3F6E8C
  • terminal.ansiBrightBlack#B8AC93
  • terminal.ansiBrightBlue#5A8FB2
  • terminal.ansiBrightCyan#3B9C8C
  • terminal.ansiBrightGreen#6B9147
  • terminal.ansiBrightMagenta#8F6BA3
  • terminal.ansiBrightRed#C1443C
  • terminal.ansiBrightWhite#332C24
  • terminal.ansiBrightYellow#B5862A
  • terminal.ansiCyan#2E7A6E
  • terminal.ansiGreen#4E6E33
  • terminal.ansiMagenta#6B4E7A
  • terminal.ansiRed#A8483F
  • terminal.ansiWhite#E0D3B8
  • terminal.ansiYellow#8C6A1B
  • terminal.background#F0E6D3
  • terminal.foreground#4B4339
  • terminalCursor.foreground#278066
  • textLink.activeForeground#256459
  • textLink.foreground#2E7A6E
  • titleBar.activeBackground#F0E6D3
  • titleBar.activeForeground#5C5344
  • titleBar.border#E0D3B8
  • titleBar.inactiveBackground#F0E6D3
  • titleBar.inactiveForeground#B8AC93
  • tree.indentGuidesStroke#E6DAC0
  • widget.shadow#00000020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#897C64italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.delete, storage.type, storage.modifier, storage.type.function, storage.type.class, storage.type.enum, storage.type.interface#6B4E7A
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical#7C7160
entity.name.tag, entity.name.tag.html, entity.name.tag.xml, entity.name.tag.localname.xml, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#A8483F
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.xml, entity.other.attribute-name.class, entity.other.attribute-name.id#9A5A26
string, string.quoted, string.quoted.double, string.quoted.single, string.quoted.double.html, string.quoted.single.html, string.quoted.double.js, string.quoted.single.js#4E6E33
constant.character.escape, constant.other.placeholder, variable.interpolation#2E7A6E
entity.name.function, support.function, variable.function, meta.function, meta.function-call, meta.definition.method, entity.name.method#3F6E8C
variable, variable.other, variable.other.readwrite, variable.parameter, variable.parameter.function#A8483F
variable.other.property, variable.other.object.property, variable.object.property, meta.object-literal.key#B5534B
constant.numeric, constant.numeric.integer, constant.numeric.float#9A5A26
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, support.constant#9A5A26
storage.type, support.type, entity.name.type, entity.name.class, support.class, entity.other.inherited-class#8C6A1B
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#2E7A6E
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, meta.selector.css#9A5A26
support.constant.property-value.css, meta.property-value.css, constant.numeric.css, keyword.other.unit#8C6A1B
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace, meta.bracket, meta.delimiter#8F7A93
markup.heading, markup.bold, markup.italic#A8483F
string.other.link, string.other.link.title.markdown, constant.other.reference.link.markdown#4E6E33underline
string.regexp#5F7080
invalid, invalid.illegal#C1443C
punctuation.decorator, meta.decorator, entity.name.function.decorator#2E7A6E