Skip to main content
CodingTheme

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#F5DEBa
  • 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#fff
  • dropdown.border#0A84FF
  • dropdown.foreground#000
  • editor.background#FAFAD2
  • editor.foreground#4A4A4F
  • editor.lineHighlightBackground#fafad2
  • editor.lineHighlightBorder#E7F1FE
  • editor.selectionBackground#B9D7FD
  • editor.selectionForeground#FFFFFF
  • editorBracketMatch.background#B9D7FD
  • editorBracketMatch.border#4A4A4F
  • editorCursor.background#4A4A4F
  • editorCursor.foreground#000000
  • editorError.foreground#A4000F
  • editorGroupHeader.noTabsBackground#F5DEBa
  • editorHint.foreground#058B00
  • editorHoverWidget.background#F5DEBa
  • editorHoverWidget.border#2C2E31
  • editorInfo.foreground#0A84FF
  • editorLineNumber.activeForeground#4A4A4F
  • editorLineNumber.foreground#667380
  • editorSuggestWidget.background#F5DEBa
  • editorSuggestWidget.border#2C2E31
  • editorSuggestWidget.foreground#4A4A4F
  • editorSuggestWidget.highlightForeground#0A84FF
  • editorSuggestWidget.selectedBackground#B9D7FD
  • editorWarning.foreground#FFBF00
  • editorWhitespace.foreground#D9DBDF
  • editorWidget.background#F5DEBa
  • 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#000000
  • 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#ffffff
  • list.invalidItemForeground#fafafa
  • panel.background#F5DEBa
  • 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#7FFFAA
  • sideBar.foreground#3c3c3c
  • sideBarSectionHeader.background#EDEDF0
  • sideBarTitle.foreground#939393
  • statusBar.background#F5DEBa
  • statusBar.border#F5DEBa
  • statusBar.debuggingBackground#0A84FF
  • statusBar.debuggingBorder#0A84FF
  • statusBar.debuggingForeground#F5DEBa
  • statusBar.foreground#4A4A4F
  • statusBar.noFolderBackground#4A4A4F
  • statusBar.noFolderBorder#4A4A4F
  • statusBar.noFolderForeground#F5DEBa
  • statusBarItem.activeBackground#B9D7FD
  • statusBarItem.hoverBackground#B9D7FD
  • tab.activeBackground#ffffff
  • tab.activeBorder#0060df
  • tab.activeForeground#0060df
  • tab.hoverBorder#0060df
  • tab.inactiveBackground#F5DEBa
  • 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...

zmito light by zmito - VS Code Theme