Skip to main content
Coding Theme

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.

  • editor.background#040403
  • editor.foreground#A5A8A9
  • editor.inactiveSelectionBackground#16666F78
  • editor.lineHighlightBackground#474747
  • editor.selectionBackground#16666F78
  • editorBracketHighlight.foreground1#A5A8A9
  • editorBracketHighlight.foreground2#A5A8A9
  • editorBracketHighlight.foreground3#A5A8A9
  • editorBracketHighlight.foreground4#A5A8A9
  • editorBracketHighlight.foreground5#A5A8A9
  • editorBracketHighlight.foreground6#A5A8A9
  • editorBracketHighlight.unexpectedBracket.foreground#6B2020
  • editorCursor.foreground#A5A8A9
  • editorIndentGuide.background#181818
  • editorWhitespace.foreground#AAB27F1A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#A5A8A9
comment#B2B2B2italic
constant#4C4F89
entity#208F4F bold
keyword#A2352Abold
storage#246A99
string#A9890A
support#246A99bold
variable#A15818
invalid#B2B2B2
text source
text.html.ruby source
entity.other.inherited-class#208F4Fitalic
string.quoted source#A9890A
string constant#4C4F89
string.regexp#246A99
string variable#B2B2B2
support.function#246A99
support.constant#208F4F
other.preprocessor.c#246A99
other.preprocessor.c entity#208F4F
declaration.tag, declaration.tag entity, meta.tag, meta.tag entity#A2352A
meta.selector.css entity.name.tag, entity.name.tag.css.sass.symbol#12846D
meta.selector.css entity.other.attribute-name.id#208F4F
meta.selector.css entity.other.attribute-name.class#208F4F
support.type.property-name.css#246A99
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#208F4Fitalic
meta.preprocessor.at-rule keyword.control.at-rule#A9890Abold
meta.property-value support.constant.named-color.css, meta.property-value constant#A2352A
meta.constructor.argument.css#A2352A
meta.diff, meta.diff.header#AEAEAEitalic
markup.deleted#AEAEAE
markup.changed#AEAEAE
markup.inserted#AEAEAE
sublimelinter.outline.notes
sublimelinter.outline.illegal
sublimelinter.underline.illegal
sublimelinter.outline.warning#B2B2B2
sublimelinter.underline.warning
sublimelinter.outline.violation
sublimelinter.underline.violation
entity.other.attribute-name.id.html#208F4F
entity.other.attribute-name.html#208F4F
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#B2B2B2
keyword.control.at-rule.import.css#A9890Abold
variable.other.less#B2B2B2
entity.other.less.mixin#6C3E7F
source.css.less keyword.unit.css#246A99
entity.other.attribute-name.angular.html, source.angular.embedded.html#A2352A
constant.character.entity.html#246A99
variable.other.readwrite.instance.coffee#A15818
meta.brace.round.coffee, meta.brace.square.coffee#A9890A
punctuation.section.embedded.coffee#42A481
variable.assignment.coffee variable.assignment.coffee#B2B2B2
meta.delimiter.method.period.coffee#2A7996
meta.brace.curly.coffee#12846D
meta.tag.sgml.doctype.xml, declaration.sgml.html declaration.doctype, declaration.sgml.html declaration.doctype entity, declaration.sgml.html declaration.doctype string, declaration.xml-processing, declaration.xml-processing entity, declaration.xml-processing string, doctype#2A3036
sublimelinter.gutter-mark#B2B2B2
sublimelinter.mark.warning#9B8000
sublimelinter.mark.error#921600
markup.deleted.git_gutter#AE1B50
markup.inserted.git_gutter#749E20
markup.changed.git_gutter#6958B0
markup.ignored.git_gutter#3C3C3C
markup.untracked.git_gutter#3C3C3C
variable.function#B2B2B2
brogrammer-evo-weak by guoking - VS Code Theme