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#CFCBBF
  • activityBar.foreground#B63420
  • activityBarBadge.background#B63420
  • activityBarBadge.foreground#FDFDFC
  • badge.background#B63420
  • badge.foreground#FDFDFC
  • button.background#B63420
  • button.foreground#FDFDFC
  • button.hoverBackground#B63420
  • dropdown.background#FDFDFC
  • dropdown.border#CFCBBF
  • dropdown.foreground#000000
  • editor.background#FDFDFC
  • editor.foreground#000000
  • editor.lineHighlightBackground#EAF0EECC
  • editor.selectionBackground#DDEAEE66
  • editorBracketMatch.background#DDEAEE55
  • editorBracketMatch.border#B63420
  • editorCursor.foreground#B63420
  • editorGroupHeader.tabsBackground#EAF0EE
  • editorIndentGuide.activeBackground#CFCBBF
  • editorIndentGuide.background#CFCBBF88
  • editorLineNumber.activeForeground#30647E
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#CFCBBF66
  • focusBorder#CFCBBF
  • foreground#000000
  • gitDecoration.deletedResourceForeground#AD2B1F
  • gitDecoration.modifiedResourceForeground#B88714
  • gitDecoration.untrackedResourceForeground#317252
  • input.background#FDFDFC
  • input.border#CFCBBF
  • input.foreground#000000
  • inputOption.activeBorder#B63420
  • list.activeSelectionBackground#DDEAEE
  • list.activeSelectionForeground#000000
  • list.focusOutline#B63420
  • list.hoverBackground#FDFDFC
  • list.inactiveSelectionBackground#DDEAEE
  • minimap.selectionHighlight#DDEAEEAA
  • panel.background#EAF0EE
  • panel.border#CFCBBF
  • peekView.border#CFCBBF
  • peekViewEditor.background#FDFDFC
  • peekViewTitle.background#EAF0EE
  • scrollbarSlider.activeBackground#B63420AA
  • scrollbarSlider.background#CFCBBF66
  • scrollbarSlider.hoverBackground#CFCBBF99
  • sideBar.background#F8F7F1
  • sideBar.border#CFCBBF
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#EAF0EE
  • statusBar.border#CFCBBF
  • statusBar.foreground#000000
  • tab.activeBackground#FDFDFC
  • tab.activeForeground#000000
  • tab.border#CFCBBF
  • tab.inactiveBackground#DDEAEE
  • tab.inactiveForeground#30647E
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#30647E
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#30647E
  • terminal.ansiMagenta#B63420
  • terminal.ansiRed#B63420
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#DDEAEE
  • terminal.background#FDFDFC
  • terminal.foreground#000000
  • titleBar.activeBackground#EAF0EE
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F8F7F1
  • titleBar.inactiveForeground#000000
  • widget.shadow#677E7755

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#677E77italic
string, constant.other.symbol, string.regexp, string.template#30647E
constant.character.escape#B63420
constant.numeric#B63420
constant.language.boolean, constant.language.null, constant.language.undefined#B63420
constant, entity.name.constant, support.constant#B63420
keyword, storage.type, storage.modifier, storage.type.function#B63420
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#B63420
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#677E77
storage.type.class, storage.type.interface, storage.type.enum#B63420
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#677E77
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#B63420
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#B63420
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#677E77
entity.other.attribute-name, entity.other.attribute-name.html#30647E
support.class.component, entity.name.tag.template.value#B63420
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#B63420
entity.other.attribute-name.id.css, entity.other.attribute-name.id#B63420
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#30647E
markup.heading#B63420bold
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