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#F9F9FA
  • activityBar.dropBackground#E0E0E1
  • activityBar.foreground#939393
  • activityBarBadge.background#8000D7
  • activityBarBadge.foreground#FFFFFF
  • button.background#EDEDF0
  • button.foreground#4A4A4F
  • button.hoverBackground#D9DBDF
  • contrastBorder#E0E0E1
  • dropdown.background#EDEDF0
  • dropdown.border#0A84FF
  • dropdown.foreground#D9DBDF
  • editor.background#FFFFFF
  • editor.findMatchBackground#6B89FFCC
  • editor.findMatchBorder#6B89FF
  • editor.findMatchHighlightBackground#B9D7FD55
  • editor.findMatchHighlightBorder#B9D7FD
  • editor.findMatchHighlightForeground#FFFFFFEE
  • editor.foreground#4A4A4F
  • editor.lineHighlightBackground#E7F1FE
  • editor.lineHighlightBorder#E7F1FE
  • editor.selectionBackground#B9D7FD
  • editor.selectionForeground#FFFFFF
  • editorBracketMatch.background#B9D7FD
  • editorBracketMatch.border#4A4A4F
  • editorCursor.background#fff
  • editorCursor.foreground#0060df
  • editorError.foreground#A4000F
  • editorGroupHeader.noTabsBackground#F9F9FA
  • editorHint.foreground#058B00
  • editorHoverWidget.background#F9F9FA
  • editorHoverWidget.border#2C2E31
  • editorInfo.foreground#0A84FF
  • editorLineNumber.activeForeground#4A4A4F
  • editorLineNumber.foreground#667380
  • editorSuggestWidget.background#F9F9FA
  • editorSuggestWidget.border#2C2E31
  • editorSuggestWidget.foreground#4A4A4F
  • editorSuggestWidget.selectedBackground#B9D7FD
  • editorWarning.foreground#FFBF00
  • editorWhitespace.foreground#D9DBDF
  • editorWidget.background#F9F9FA
  • editorWidget.border#2C2E31
  • errorForeground#a4000f
  • focusBorder#0A84FF
  • foreground#939393
  • gitDecoration.conflictingResourceForeground#8103d7
  • gitDecoration.deletedResourceForeground#a4000f
  • gitDecoration.ignoredResourceForeground#939393
  • gitDecoration.modifiedResourceForeground#003eaa
  • gitDecoration.untrackedResourceForeground#715100
  • input.background#FFFFFF
  • input.border#E0E0E1
  • input.foreground#000000
  • input.placeholderForeground#767676
  • inputOption.activeBorder#0A84FF
  • inputValidation.errorBackground#fdf2f5
  • inputValidation.errorBorder#a4000f
  • inputValidation.infoBackground#0A84FFCC
  • inputValidation.infoBorder#0A84FF
  • inputValidation.warningBackground#FFF89E
  • inputValidation.warningBorder#FFBF00
  • list.activeSelectionBackground#B9D7FD
  • list.activeSelectionForeground#4A4A4F
  • list.dropBackground#B9D7FD
  • list.focusBackground#B9D7FD
  • list.hoverBackground#D9DBDF
  • list.inactiveSelectionBackground#D9DBDF
  • list.invalidItemForeground#E52E2E
  • panel.background#F9F9FA
  • panel.border#4A4A4F
  • panel.dropBackground#EDEDF0
  • panelTitle.activeBorder#0A84FF
  • panelTitle.activeForeground#0A84FF
  • panelTitle.inactiveForeground#4A4A4F
  • peekView.border#E0E0E1
  • scrollbarSlider.activeBackground#2A76C6
  • scrollbarSlider.background#767676
  • scrollbarSlider.hoverBackground#4A4A4F
  • selection.background#B9D7FD
  • sideBar.background#F9F9FA
  • sideBar.foreground#3c3c3c
  • sideBarSectionHeader.background#EDEDF0
  • sideBarTitle.foreground#939393
  • statusBar.background#F9F9FA
  • statusBar.border#F9F9FA
  • statusBar.debuggingBackground#6B89FF
  • statusBar.debuggingBorder#6B89FF
  • statusBar.debuggingForeground#F9F9FA
  • statusBar.foreground#4A4A4F
  • statusBar.noFolderBackground#4A4A4F
  • statusBar.noFolderBorder#4A4A4F
  • statusBar.noFolderForeground#F9F9FA
  • statusBarItem.activeBackground#B9D7FD
  • statusBarItem.hoverBackground#B9D7FD
  • tab.activeBackground#F9F9FA
  • tab.activeBorder#0060df
  • tab.activeForeground#0060df
  • tab.hoverBorder#0060df
  • tab.inactiveBackground#F9F9FA
  • tab.inactiveForeground#4A4A4F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#939393
comment#939393
string#4A4A4F
string.regexp#003EAA
constant.numeric#003EAA
variable.language#8000D7
variable.other.constant#0074E8
keyword#DD00A9
storage#003EAA
entity.name.class, entity.name.type#0074E8
meta.function-call#8000D7
meta.definition.function#8000D7
variable.object.property#058B00
punctuation.section.embedded.begin, punctuation.section.embedded.end#4A4A4F
constant.language, meta.preprocessor#4A4A4F
constant.character, constant.other#8000D7
entity.other.inherited-class#0074E8underline
variable.parameter#0074E8
punctuation.accessor#4A4A4F
keyword.type#003EAA
entity.name.variable.property.cs, entity.name.function.cs#4A4A4F
storage.modifier.cs#058B00
keyword.other.new.cs#8000D7
meta.tag.sgml.doctype.html#D9DBDFitalic
entity.name.tag#8000D7
punctuation.definition.tag#767676
meta.tag.structure.any.html#8000D7
entity.other.attribute.name, entity.other.attribute-name.html, entity.other.attribute-name.id.html#DD00A9
support.function#058B00
punctuation.separator.continuation#4A4A4F
support.constant#8000D7
support.type, support.class#8000D7
support.other.variable#A7A6C5
string.quoted.single, string.quoted.double#003EAA
comment.block.html#058B00AA
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#D9DBDF
storage.type#DD00A9
variable.language.this#DD00A9italic
constant.language.boolean.true, constant.language.boolean.false#DD00A9
constant.language.undefined, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment, keyword.operator.arithmetic#4A4A4F
variable.other.property, variable.other.object.property, meta.object-literal.key, meta.object.member, entity.name.function#058B00
entity.name.functionitalic
meta.object.member#8000D7
variable.other.readwrite#0074E8
keyword.control.flow#DD00A9
variable.other.object, entity.name.type.module#8000D7
meta.brace.square, meta.brace.round, punctuation.definition.block, punctuation.definition.parameters.begin, punctuation.definition.parameters.end#4A4A4F
string.template#003EAA
meta.template.expression#003EAA
variable.other.constant.property#058B00
support.type.property-nameon, meta.structure.arrayon#0074E8
string.quoted.doubleon#E437BB
constant.languageon, constant.numericon#1F971B
meta.selector.css, entity.name.tag.css, keyword.control.at-rule.media.css#8000D7
meta.function.url.css, meta.property-value.css, support.constant.property-value.css, support.function.url.css, support.function.misc.css, keyword.other.unit.px.css, keyword.other.unit.pt.css, keyword.other.unit.percentage.css, keyword.other.unit.em.css, keyword.other.unit.rem.css, keyword.other.unit.ch.css, keyword.other.unit.vh.css, keyword.other.unit.vw.css, keyword.other.unit.s.css, keyword.other.unit.deg.css, keyword.other.unit.scss, keyword.other.unit.dppx.css, support.constant.media.css, constant.numeric.css, string.quoted.single.css, string.quoted.double.css#003EAA
constant.other.color.rgb-value.hex.css, variable.parameter.url.css, support.function.transform.css, support.function.calc.css, entity.other.attribute-name.pseudo-class.css, meta.function.gradient.css, support.function.gradient.css, variable.parameter.url.scss, entity.name.tag.scss#4A4A4F
punctuation.terminator.rule.css, punctuation.separator.key-value.css, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.definition.entity.begin.bracket.square.css, punctuation.definition.entity.end.bracket.square.css, punctuation.separator.list.comma.css, keyword.operator.pattern.css#4A4A4F
support.type.property-name.css, support.type.property-name.media.css, support.type.vendored.property-name.media.css#058B00
support.type.vendored.property-name.css, entity.other.attribute-name.pseudo-element.css#939393
keyword.operator.combinator.css#D9DBDF
support.type.property-name.css#058B00
markup.heading#8000D7bold
markup.underline#75BFFFunderline
markup.boldbold
markup.italicitalic
markup.inserted#86DE74
markup.deleted#CC3D3D
markup.changed#0A84FF
punctuation.definition.quote.begin.markdown#FF7DE9
punctuation.definition.list.begin.markdown#75BFFF
markup.inline.raw#058B00
meta.paragraph.markdown#4A4A4F
punctuation.definition.list.begin.markdown#B1B1B3
string.other.link.title.markdown, string.other.link.description.markdown#003EAA
markup.underline.link.markdown, markup.underline.link.image.markdown#0A84FFitalic

Shiki preview

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

Loading...

Firefox Theme - Coding Theme