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.background#F0EEEA
  • activityBar.border#CEC9C0
  • activityBar.foreground#384794
  • activityBarBadge.background#384794
  • activityBarBadge.foreground#FDFDFC
  • badge.background#384794
  • badge.foreground#FDFDFC
  • button.background#384794
  • button.foreground#FDFDFC
  • button.hoverBackground#384794
  • dropdown.background#FDFDFC
  • dropdown.border#CEC9C0
  • dropdown.foreground#000000
  • editor.background#FDFDFC
  • editor.foreground#000000
  • editor.lineHighlightBackground#F0EEEACC
  • editor.selectionBackground#F2EBD966
  • editorBracketMatch.background#F2EBD955
  • editorBracketMatch.border#384794
  • editorCursor.foreground#384794
  • editorGroupHeader.tabsBackground#F0EEEA
  • editorIndentGuide.activeBackground#CEC9C0
  • editorIndentGuide.background#CEC9C088
  • editorLineNumber.activeForeground#8A6128
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#CEC9C066
  • focusBorder#CEC9C0
  • foreground#000000
  • gitDecoration.deletedResourceForeground#AD2B1F
  • gitDecoration.modifiedResourceForeground#B88114
  • gitDecoration.untrackedResourceForeground#356E4D
  • input.background#FDFDFC
  • input.border#CEC9C0
  • input.foreground#000000
  • inputOption.activeBorder#384794
  • list.activeSelectionBackground#F2EBD9
  • list.activeSelectionForeground#000000
  • list.focusOutline#384794
  • list.hoverBackground#FDFDFC
  • list.inactiveSelectionBackground#F2EBD9
  • minimap.selectionHighlight#F2EBD9AA
  • panel.background#F0EEEA
  • panel.border#CEC9C0
  • peekView.border#CEC9C0
  • peekViewEditor.background#FDFDFC
  • peekViewTitle.background#F0EEEA
  • scrollbarSlider.activeBackground#384794AA
  • scrollbarSlider.background#CEC9C066
  • scrollbarSlider.hoverBackground#CEC9C099
  • sideBar.background#F8F6F2
  • sideBar.border#CEC9C0
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#F0EEEA
  • statusBar.border#CEC9C0
  • statusBar.foreground#000000
  • tab.activeBackground#FDFDFC
  • tab.activeForeground#000000
  • tab.border#CEC9C0
  • tab.inactiveBackground#F2EBD9
  • tab.inactiveForeground#8A6128
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#8A6128
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#8A6128
  • terminal.ansiMagenta#384794
  • terminal.ansiRed#384794
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#F2EBD9
  • terminal.background#FDFDFC
  • terminal.foreground#000000
  • titleBar.activeBackground#F0EEEA
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F8F6F2
  • titleBar.inactiveForeground#000000
  • widget.shadow#7E756755

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#7E7567italic
string, constant.other.symbol, string.regexp, string.template#8A6128
constant.character.escape#384794
constant.numeric#384794
constant.language.boolean, constant.language.null, constant.language.undefined#384794
constant, entity.name.constant, support.constant#384794
keyword, storage.type, storage.modifier, storage.type.function#384794
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#384794
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#7E7567
storage.type.class, storage.type.interface, storage.type.enum#384794
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#7E7567
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#8A6128
support.type.builtin, entity.name.type.primitive#8A6128
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#282C3E
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#384794
variable.parameter, variable.parameter.function#282C3E
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#8A6128
variable, meta.definition.variable, variable.other.readwrite#282C3E
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#384794
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#7E7567
entity.other.attribute-name, entity.other.attribute-name.html#8A6128
support.class.component, entity.name.tag.template.value#384794
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#356E4D
entity.other.attribute-name.class.css, entity.other.attribute-name.class#384794
entity.other.attribute-name.id.css, entity.other.attribute-name.id#384794
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#8A6128
markup.heading#384794bold
markup.boldbold
markup.italicitalic
markup.quote#282C3E
markup.inline.raw, markup.fenced_code#8A6128
invalid, invalid.illegal#C22929