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#EAF0EE
  • activityBar.border#CEC9C0
  • activityBar.foreground#A84524
  • activityBarBadge.background#A84524
  • activityBarBadge.foreground#FDFDFC
  • badge.background#A84524
  • badge.foreground#FDFDFC
  • button.background#A84524
  • button.foreground#FDFDFC
  • button.hoverBackground#A84524
  • dropdown.background#FDFDFC
  • dropdown.border#CEC9C0
  • dropdown.foreground#000000
  • editor.background#FDFDFC
  • editor.foreground#000000
  • editor.lineHighlightBackground#EAF0EECC
  • editor.selectionBackground#DDEBEE66
  • editorBracketMatch.background#DDEBEE55
  • editorBracketMatch.border#A84524
  • editorCursor.foreground#A84524
  • editorGroupHeader.tabsBackground#EAF0EE
  • editorIndentGuide.activeBackground#CEC9C0
  • editorIndentGuide.background#CEC9C088
  • editorLineNumber.activeForeground#306A7E
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#CEC9C066
  • focusBorder#CEC9C0
  • foreground#000000
  • gitDecoration.deletedResourceForeground#AD2B1F
  • gitDecoration.modifiedResourceForeground#B38019
  • gitDecoration.untrackedResourceForeground#317252
  • input.background#FDFDFC
  • input.border#CEC9C0
  • input.foreground#000000
  • inputOption.activeBorder#A84524
  • list.activeSelectionBackground#DDEBEE
  • list.activeSelectionForeground#000000
  • list.focusOutline#A84524
  • list.hoverBackground#FDFDFC
  • list.inactiveSelectionBackground#DDEBEE
  • minimap.selectionHighlight#DDEBEEAA
  • panel.background#EAF0EE
  • panel.border#CEC9C0
  • peekView.border#CEC9C0
  • peekViewEditor.background#FDFDFC
  • peekViewTitle.background#EAF0EE
  • scrollbarSlider.activeBackground#A84524AA
  • scrollbarSlider.background#CEC9C066
  • scrollbarSlider.hoverBackground#CEC9C099
  • sideBar.background#F8F6F2
  • sideBar.border#CEC9C0
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#EAF0EE
  • statusBar.border#CEC9C0
  • statusBar.foreground#000000
  • tab.activeBackground#FDFDFC
  • tab.activeForeground#000000
  • tab.border#CEC9C0
  • tab.inactiveBackground#DDEBEE
  • tab.inactiveForeground#306A7E
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#306A7E
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#306A7E
  • terminal.ansiMagenta#A84524
  • terminal.ansiRed#A84524
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#DDEBEE
  • terminal.background#FDFDFC
  • terminal.foreground#000000
  • titleBar.activeBackground#EAF0EE
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F8F6F2
  • titleBar.inactiveForeground#000000
  • widget.shadow#7E736755

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#7E7367italic
string, constant.other.symbol, string.regexp, string.template#306A7E
constant.character.escape#A84524
constant.numeric#A84524
constant.language.boolean, constant.language.null, constant.language.undefined#A84524
constant, entity.name.constant, support.constant#A84524
keyword, storage.type, storage.modifier, storage.type.function#A84524
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#A84524
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#7E7367
storage.type.class, storage.type.interface, storage.type.enum#A84524
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#7E7367
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#306A7E
support.type.builtin, entity.name.type.primitive#306A7E
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#3B2C21
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#A84524
variable.parameter, variable.parameter.function#3B2C21
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#306A7E
variable, meta.definition.variable, variable.other.readwrite#3B2C21
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#A84524
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#7E7367
entity.other.attribute-name, entity.other.attribute-name.html#306A7E
support.class.component, entity.name.tag.template.value#A84524
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#317252
entity.other.attribute-name.class.css, entity.other.attribute-name.class#A84524
entity.other.attribute-name.id.css, entity.other.attribute-name.id#A84524
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#306A7E
markup.heading#A84524bold
markup.boldbold
markup.italicitalic
markup.quote#3B2C21
markup.inline.raw, markup.fenced_code#306A7E
invalid, invalid.illegal#C22929
Minor Themes by Lenik - VS Code Theme