Skip to main content
CodingTheme

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.

  • actionBar.toggledBackground#dddddd
  • activityBarBadge.background#007acc
  • checkbox.border#919191
  • editor.background#ffffff
  • editor.findMatchBackground#a8ac94
  • editor.findMatchHighlightBackground#ea5c0055
  • editor.findRangeHighlightBackground#b4b4b44d
  • editor.focusedStackFrameHighlightBackground#cee7ce73
  • editor.foreground#000000
  • editor.hoverHighlightBackground#add6ff26
  • editor.inactiveSelectionBackground#e5ebf1
  • editor.lineHighlightBackground#0881e416
  • editor.lineHighlightBorder#fff
  • editor.selectionBackground#ffadfb82
  • editor.selectionHighlightBackground#007efca0
  • editor.wordHighlightBackground#5a5d4e35
  • editorBracketHighlight.foreground1#7d008e
  • editorBracketHighlight.foreground3#7b3814
  • editorBracketHighlight.foreground4#00000020
  • editorBracketMatch.border#b9b9b9
  • editorIndentGuide.activeBackground1#0000ff54
  • editorIndentGuide.background1#d3d3d3
  • editorLineNumber.foreground#cc330088
  • editorLink.activeForeground#0000ff
  • editorSuggestWidget.background#f3f3f3
  • input.placeholderForeground#767676
  • list.activeSelectionIconForeground#ffffff
  • list.focusAndSelectionOutline#90c2f9
  • list.hoverBackground#e8e8e8
  • menu.border#d4d4d4
  • notebook.cellBorderColor#e8e8e8
  • notebook.selectedCellBackground#c8ddf150
  • ports.iconRunningProcessForeground#369432
  • searchEditor.textInputBorder#cecece
  • settings.numberInputBorder#cecece
  • settings.textInputBorder#cecece
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#61616130
  • sideBarTitle.foreground#6f6f6f
  • statusBarItem.errorBackground#c72e0f
  • statusBarItem.remoteBackground#16825d
  • statusBarItem.remoteForeground#ffffff
  • symbolIcon.arrayForeground#0000FF
  • symbolIcon.interfaceForeground#569CD6
  • symbolIcon.nullForeground#0000FF
  • symbolIcon.numberForeground#7676e7
  • symbolIcon.variableForeground#0000FF
  • tab.activeForeground#333333
  • tab.inactiveForeground#939393b3
  • tab.inactiveModifiedBorder#66aa7780
  • tab.lastPinnedBorder#61616130
  • terminal.inactiveSelectionBackground#e5ebf1
  • widget.border#d4d4d4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string, string.quoted.single, string.quoted.double#b2224e
comment, comment.block#2e8b56c9italic
esl.reserved#e76305
esl.function#800097
esl.class#744afc
esl.control.keyword#0000ff
esl.control.section#7676e7italic bold
esl.pricedata#0190b1bold
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#fb00ffbold
constant.operator#006e6a
esl.skipwords#ff9e9eitalic
variable.type#0000ff
variable.esl#978000
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#000000
emphasisitalic
strongbold
meta.diff.header#000080
constant.regexp#811F3F
entity.name.tag#800000
entity.name.selector#800000
entity.other.attribute-name#E50000
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#800000
markup.underlineunderline
markup.bold#000080bold
markup.heading#800000bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#098658
markup.deleted#A31515
markup.changed#0451A5
punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown#0451A5
markup.inline.raw#800000
punctuation.definition.tag#800000
meta.preprocessor, entity.name.function.preprocessor#0000FF
meta.preprocessor.string#A31515
meta.preprocessor.numeric#098658
meta.structure.dictionary.key.python#0451A5
storage#0000FF
storage.type#0000FF
storage.modifier, keyword.operator.noexcept#0000FF
string.comment.buffered.block.pug, string.quoted.pug, string.interpolated.pug, string.unquoted.plain.in.yaml, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, string.quoted.single.yaml, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.cdata.xml, string.quoted.double.html, string.quoted.single.html, string.unquoted.html, string.quoted.single.handlebars, string.quoted.double.handlebars#0000FF
string.regexp#811F3F
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#0000FF
meta.template.expression#000000
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#0451A5
support.type.property-name.json#0451A5
keyword#0000FF
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#0000FF
keyword.other.unit#098658
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#800000
support.function.git-rebase#0451A5
constant.sha.git-rebase#098658
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#000000
keyword.operator#000000
variable.language#0000FF
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#CD3131
token.debug-token#800080

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...