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.

  • diffEditor.insertedTextBackground#59886722
  • diffEditor.removedTextBackground#c4626c22
  • editor.background#fefef5
  • editor.findMatchBackground#ffcdff88
  • editor.findMatchHighlightBackground#b4eacf88
  • editor.findRangeHighlightBackground#bf360c88
  • editor.foreground#828282
  • editor.lineHighlightBackground#f0f0e3
  • editor.rangeHighlightBackground#edfced88
  • editor.selectionBackground#82828255
  • editor.wordHighlightBackground#e6ebf188
  • editor.wordHighlightStrongBackground#d5dfe888
  • editorCursor.foreground#bf360c
  • editorIndentGuide.background#82828255
  • editorLineNumber.activeForeground#828282
  • editorLineNumber.foreground#82828288
  • editorMarkerNavigationWarning.background#c99e00
  • editorOverviewRuler.warningForeground#c99e00
  • editorRuler.foreground#82828255
  • editorUnnecessary.foreground#b1b1b1
  • editorWarning.foreground#c99e00
  • editorWhitespace.foreground#82828255
  • peekView.border#828282
  • peekViewEditor.background#fefef5
  • peekViewEditor.matchHighlightBackground#b4eacf88
  • peekViewResult.matchHighlightBackground#b4eacf88
  • statusBar.background#828282

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.block.comment#90a4ae
storage.type.class.jsdoc, variable.other.jsdoc, punctuation.definition.block.tag.jsdoc#90a4aebold
string#598867
constant.numeric#aa9a3a
constant.language, variable.language#57749bbold
constant.character, constant.other#5f5f5f
variable, variable.other.property, support.variable.property#5f5f5f
keyword#57749b
keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python#57749bbold
keyword.operator, punctuation.definition.block, meta.template.expression#828282
storage, storage.type#57749bbold
entity.name.type, entity.other.inherited-class, support.type, support.class#c4626c
entity.name.function, punctuation.decorator#4a8f8f
variable.parameter#c99e00
entity.name.tag#57749b
entity.other.attribute-name#8d9baa
support.function#4a8f8f
support.constant#5f5f5f
support.other.variable
invalid.illegal#828282
invalid.deprecated#828282
meta.object-literal.key, support.type.property-name.json, entity.name.tag.yaml#84769b
constant.character.entity.html#84769b
string.quoted.double.html#598867
entity.name.tag.css, meta.property-name.css, support.type.property-name, support.type.vendored.property-name#455a64
meta.selector.css, source.css entity.other.attribute-name#84769b
support.constant.property-value.css, support.constant.property-value.scss#598867
entity.name.tag.css#57749b
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css#c4626c
source.css keyword.other.unit#598867
support.constant.media.css#598867
variable.language.special.self.python#c99e00
markup.heading.markdown, markup.bold.markdownbold
markup.italic.markdownitalic
meta.link.inline.markdown, string.other.link.title.markdown#57749bunderline
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#8d9baa

Shiki preview

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

Loading...

Sunrise by finico - VS Code Theme