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#EEEFEB
  • activityBar.border#D1CEC7
  • activityBar.foreground#336699
  • activityBarBadge.background#336699
  • activityBarBadge.foreground#FDFDFC
  • badge.background#336699
  • badge.foreground#FDFDFC
  • button.background#336699
  • button.foreground#FDFDFC
  • button.hoverBackground#336699
  • dropdown.background#FDFDFC
  • dropdown.border#D1CEC7
  • dropdown.foreground#000000
  • editor.background#FDFDFC
  • editor.foreground#000000
  • editor.lineHighlightBackground#EEEFEBCC
  • editor.selectionBackground#E7ECDF66
  • editorBracketMatch.background#E7ECDF55
  • editorBracketMatch.border#336699
  • editorCursor.foreground#336699
  • editorGroupHeader.tabsBackground#EEEFEB
  • editorIndentGuide.activeBackground#D1CEC7
  • editorIndentGuide.background#D1CEC788
  • editorLineNumber.activeForeground#526E35
  • editorLineNumber.foreground#000000AA
  • editorWhitespace.foreground#D1CEC766
  • focusBorder#D1CEC7
  • foreground#000000
  • gitDecoration.deletedResourceForeground#A82F24
  • gitDecoration.modifiedResourceForeground#AD7E1F
  • gitDecoration.untrackedResourceForeground#376C4D
  • input.background#FDFDFC
  • input.border#D1CEC7
  • input.foreground#000000
  • inputOption.activeBorder#336699
  • list.activeSelectionBackground#E7ECDF
  • list.activeSelectionForeground#000000
  • list.focusOutline#336699
  • list.hoverBackground#FDFDFC
  • list.inactiveSelectionBackground#E7ECDF
  • minimap.selectionHighlight#E7ECDFAA
  • panel.background#EEEFEB
  • panel.border#D1CEC7
  • peekView.border#D1CEC7
  • peekViewEditor.background#FDFDFC
  • peekViewTitle.background#EEEFEB
  • scrollbarSlider.activeBackground#336699AA
  • scrollbarSlider.background#D1CEC766
  • scrollbarSlider.hoverBackground#D1CEC799
  • sideBar.background#F7F6F3
  • sideBar.border#D1CEC7
  • sideBar.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#EEEFEB
  • statusBar.border#D1CEC7
  • statusBar.foreground#000000
  • tab.activeBackground#FDFDFC
  • tab.activeForeground#000000
  • tab.border#D1CEC7
  • tab.inactiveBackground#E7ECDF
  • tab.inactiveForeground#526E35
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#526E35
  • terminal.ansiCyan#000000
  • terminal.ansiGreen#526E35
  • terminal.ansiMagenta#336699
  • terminal.ansiRed#336699
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#E7ECDF
  • terminal.background#FDFDFC
  • terminal.foreground#000000
  • titleBar.activeBackground#EEEFEB
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#F7F6F3
  • titleBar.inactiveForeground#000000
  • widget.shadow#707C6A55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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