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#CEC8C0
  • activityBar.foreground#A32933
  • activityBarBadge.background#A32933
  • activityBarBadge.foreground#FDFDFC
  • badge.background#A32933
  • badge.foreground#FDFDFC
  • button.background#A32933
  • button.foreground#FDFDFC
  • button.hoverBackground#A32933
  • dropdown.background#FDFDFC
  • dropdown.border#CEC8C0
  • dropdown.foreground#000000
  • editor.background#FDFDFC
  • editor.foreground#000000
  • editor.lineHighlightBackground#F0EEEACC
  • editor.selectionBackground#DDEAEE66
  • editorBracketMatch.background#DDEAEE55
  • editorBracketMatch.border#A32933
  • editorCursor.foreground#A32933
  • editorGroupHeader.tabsBackground#F0EEEA
  • editorIndentGuide.activeBackground#CEC8C0
  • editorIndentGuide.background#CEC8C088
  • editorLineNumber.activeForeground#30647E
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#CEC8C066
  • focusBorder#CEC8C0
  • foreground#000000
  • gitDecoration.deletedResourceForeground#A0222C
  • gitDecoration.modifiedResourceForeground#AD7E1F
  • gitDecoration.untrackedResourceForeground#356E52
  • input.background#FDFDFC
  • input.border#CEC8C0
  • input.foreground#000000
  • inputOption.activeBorder#A32933
  • list.activeSelectionBackground#DDEAEE
  • list.activeSelectionForeground#000000
  • list.focusOutline#A32933
  • list.hoverBackground#FDFDFC
  • list.inactiveSelectionBackground#DDEAEE
  • minimap.selectionHighlight#DDEAEEAA
  • panel.background#F0EEEA
  • panel.border#CEC8C0
  • peekView.border#CEC8C0
  • peekViewEditor.background#FDFDFC
  • peekViewTitle.background#F0EEEA
  • scrollbarSlider.activeBackground#A32933AA
  • scrollbarSlider.background#CEC8C066
  • scrollbarSlider.hoverBackground#CEC8C099
  • sideBar.background#F7F6F3
  • sideBar.border#CEC8C0
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#F0EEEA
  • statusBar.border#CEC8C0
  • statusBar.foreground#000000
  • tab.activeBackground#FDFDFC
  • tab.activeForeground#000000
  • tab.border#CEC8C0
  • tab.inactiveBackground#DDEAEE
  • tab.inactiveForeground#30647E
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#30647E
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#30647E
  • terminal.ansiMagenta#A32933
  • terminal.ansiRed#A32933
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#DDEAEE
  • terminal.background#FDFDFC
  • terminal.foreground#000000
  • titleBar.activeBackground#F0EEEA
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F7F6F3
  • titleBar.inactiveForeground#000000
  • widget.shadow#67777E55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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