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#580933
  • activityBar.foreground#FEFEFE
  • activityBarBadge.background#FF5722
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF5722
  • badge.foreground#FFFFFF
  • button.background#C2185B
  • button.foreground#FFFFFF
  • button.hoverBackground#EC407A
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#FFFFFF
  • dropdown.border#FFAB91
  • editor.background#FFFEF8
  • editor.lineHighlightBackground#FFF4f1
  • editor.selectionBackground#FFECB3
  • editorCursor.foreground#BF360C
  • editorGroup.background#FFFDE7
  • editorGroup.border#FFAB91
  • editorGroupHeader.tabsBackground#FFFef8
  • editorHoverWidget.background#FFF8E1
  • editorHoverWidget.border#FFAB91
  • editorIndentGuide.background#CFD8DC
  • editorLineNumber.foreground#78909C
  • editorSuggestWidget.background#FFF8E1
  • editorSuggestWidget.border#FFAB91
  • editorSuggestWidget.selectedBackground#FFFFFF
  • editorWhitespace.foreground#D3D4D5
  • editorWidget.background#FFFDE7
  • extensionButton.prominentBackground#3BBA54
  • extensionButton.prominentHoverBackground#4CC263
  • focusBorder#D81B60
  • input.background#FFFef8
  • input.border#FFAB91
  • list.activeSelectionBackground#FF8A6566
  • list.activeSelectionForeground#424243
  • list.focusBackground#FFAB91
  • list.highlightForeground#121417
  • list.hoverBackground#FFAB9166
  • list.inactiveSelectionBackground#FFCCBC66
  • list.inactiveSelectionForeground#424243
  • peekView.border#D81B60
  • peekViewEditor.background#FFFFFF
  • peekViewResult.background#FFF8E1
  • peekViewResult.selectionBackground#FFECB3
  • peekViewTitle.background#FFFFFF
  • pickerGroup.border#D81B60
  • scrollbarSlider.activeBackground#FFFDE780
  • scrollbarSlider.background#FFFDE780
  • scrollbarSlider.hoverBackground#FF572280
  • sideBar.background#FFF9f2
  • sideBarSectionHeader.background#f8bbd0
  • sideBarSectionHeader.foreground#FFffff
  • statusBar.background#FF8A65
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#fefefe
  • statusBar.noFolderBackground#FFB74D
  • statusBarItem.hoverBackground#FF7043
  • tab.activeBackground#FF8B7633
  • tab.border#B0BEC5
  • tab.inactiveBackground#FFFEF8
  • terminal.ansiBlack#303030
  • terminal.ansiBlue#0d47a1
  • terminal.ansiBrightBlack#808080
  • terminal.ansiBrightBlue#1976d2
  • terminal.ansiBrightCyan#009688
  • terminal.ansiBrightGreen#689f38
  • terminal.ansiBrightMagenta#e91e63
  • terminal.ansiBrightRed#f44336
  • terminal.ansiBrightWhite#DDDDDD
  • terminal.ansiBrightYellow#fdd835
  • terminal.ansiCyan#00695c
  • terminal.ansiGreen#33691e
  • terminal.ansiMagenta#880e4f
  • terminal.ansiRed#d50000
  • terminal.ansiWhite#BBBBBB
  • terminal.ansiYellow#f57f17
  • textLink.activeForeground#C2185B
  • textLink.foreground#880E4F
  • titleBar.activeBackground#580933
  • titleBar.activeForeground#fefefe
  • titleBar.inactiveBackground#EC407A
  • titleBar.inactiveForeground#fefefe

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.class, entity.name.type.class, keyword.control.class, support.class, support.type#880E4F
comment, punctuation.definition.comment#4db6acitalic
constant.language, meta.preprocessor, support.constant.media.css#F57F17
meta.documentation#5D4037italic
constant.character.escape#311B92
entity.name.function, support.function, variable.function#000000
keyword.control.at-rule.import, keyword.control.at-rule.include, keyword.control.import.from, keyword.control.import, keyword.other.import, keyword, meta.import keyword, storage.type, storage, variable.language.super, variable.language.this#E91E63italic
constant.numeric, constant.numeric.css, keyword.other.unit#33691E
keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.bitwise, keyword.operator.comparison, keyword.operator.decrement, keyword.operator.increment, keyword.operator.logical, keyword.operator.ternary, keyword.other.new, support.function.construct#B71C1C
meta.brace.curly, meta.brace.round, meta.brace.square, meta.class punctuation, punctuation.definition.binding-pattern.object, punctuation.definition.block, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.section.block.begin.bracket.curly, punctuation.section.block.end.bracket.curly, punctuation.section.braces.begin, punctuation.section.braces.end, punctuation.section.embedded, punctuation.section.method.begin.bracket.curly, punctuation.section.method.end.bracket.curly, punctuation.section.method, punctuation.section.property-list.begin.bracket.curly, punctuation.section.property-list.end.bracket.curly, punctuation.separator.comma, punctuation.separator.dot, punctuation.separator, punctuation.terminator.statement#E57373
keyword.control.anchor.regexp, string.regexp keyword, string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end, string.regexp#2962ff
punctuation.definition.string.begin, punctuation.definition.string.end, string.quoted.double, string.quoted.single, string#0d47a1
variable.other.constant, variable.other.object, variable.other.readwrite, variable#455A64
punctuation.definition.variable#263238
storage.type.cs#880E4F
comment.block.documentation.cs#5D4037italic
comment.block.documentation.cs meta.tag.cs entity.name.tag.cs entity.name.tag.localname.cs entity.name.tag#BF360Citalic
keyword.operator.relational.cs#B71C1C
meta.preprocessor.cs#AFB42B
punctuation.accessor.cs, punctuation.curlybrace.close.cs, punctuation.curlybrace.open.cs, punctuation.definition.typeparameters.begin.cs, punctuation.definition.typeparameters.end.cs, punctuation.parenthesis.close.cs, punctuation.parenthesis.open.cs, punctuation.squarebracket.close.cs, punctuation.squarebracket.open.cs#E57373
source.css entity.other.attribute-name.id, source.less entity.other.attribute-name.id, source.sass entity.other.attribute-name.id, source.scss entity.other.attribute-name.id#8E24AA
entity.other.attribute-name.class.css, entity.other.attribute-name.class.sass#880E4F
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.tag.pseudo-class#8D6E63
entity.other.attribute-name.css, meta.property-list.scss entity.name.tag.css, meta.property-name.scss, support.type.property-name.css, support.type.vendored.property-name.css#ff5252
support.constant.property-value.css#455A64
entity.name.tag.reference.scss, keyword.operator.css, keyword.operator.pattern.css#B71C1C
punctuation.definition.attribute-selector.begin.bracket.square.scss, punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.entity.begin.bracket.square.css, punctuation.definition.entity.end.bracket.square.css, punctuation.definition.interpolation.begin.bracket.curly.scss, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.map.begin.bracket.round.scss, punctuation.definition.map.end.bracket.round.scss, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.section.function.scss, punctuation.section.function.scss, punctuation.section.media.begin.bracket.curly.css, punctuation.section.media.end.bracket.curly.css, punctuation.separator.key-value.css, punctuation.terminator.rule.css, punctuation.terminator.rule.scss#E57373
constant.other.color.rgb-value.hex.css#455A64
meta.selector.css#E57373
entity.name.tag.css, entity.name.tag.scss, source.less keyword.control.html.elements, source.sass keyword.control.untitled, entity.name.tag.custom.scss#BF360C
variable.parameter.url.css#ff5252underline
variable.scss#BF360C
entity.other.attribute-name.placeholder.css#BF360Citalic
entity.other.attribute-name.html, meta.tag.block.any.html, meta.tag.inline.any.html, meta.tag.xml entity.other.attribute-name, punctuation.separator.key-value.html, text.html.basic entity.other.attribute-name.html, text.html.basic meta.tag.any.html, text.html.basic meta.tag.block.any, text.html.basic meta.tag.inline.any, text.html.basic meta.tag.other.html, text.html.basic meta.tag.structure.any.html, text.html.basic source.js.embedded.html, entity.other.attribute-name.xml, meta.tag.preprocessor.xml text.xml#F4511E
meta.tag.sgml.doctype.html, meta.tag.sgml.doctype.xml, keyword.other.doctype.xml, variable.language.documentroot.xml#F4511E
entity.name.tag#BF360C
meta.tag.sgml.doctype.html, meta.tag.sgml.html, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag.html, punctuation.definition.tag.xml#F4511E
text.html.basic, text.xml#455A64
punctuation.definition.annotation.java, storage.type.annotation.java#9E9D24
storage.modifier.import.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, variable.language.this.java#880E4F
comment.block.javadoc.java punctuation.definition.comment.java, comment.block.javadoc.java#5D4037italic
comment.block.javadoc.java variable.parameter.java, keyword.other.documentation.javadoc.java#BF360Citalic
keyword.control.new.java, keyword.operator.increment-decrement.java#B71C1C
variable.other.object.property.java, variable.other.property.java#8E24AA
punctuation.terminator.java#E57373
source.java#455A64
storage.type.js, variable.other.readwrite.alias.ts, entity.name.type.ts, variable.language.this.ts, support.constant.math.js, variable.other.object.ts, variable.other.object.tsx#880E4F
comment.block.documentation.js, comment.block.documentation.ts#4db6acitalic
comment.block.documentation.js punctuation.definition.block.tag.jsdoc, comment.block.documentation.js storage.type.class.jsdoc, comment.block.documentation.ts punctuation.definition.block.tag.jsdoc, comment.block.documentation.ts storage.type.class.jsdoc, entity.name.type.instance.jsdoc#BF360Citalic
meta.object-literal.key.js punctuation.definition.string.begin.js, meta.object-literal.key.js punctuation.definition.string.end.js, meta.object-literal.key.js string.quoted.single.js, meta.object.member.js meta.object-literal.key.js, meta.object.member.ts meta.object-literal.key.ts, meta.object.member.tsx meta.object-literal.key.tsx, source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string, source.json meta.structure.dictionary.json > string.quoted.json, support.type.property-name.json#ff5252
variable.object.property.js, variable.object.property.ts, variable.other.object.property.ts, variable.other.property.ts, support.variable.property.dom.ts, variable.object.property.tsx, variable.other.property.js, variable.other.object.property.js#ff5252
keyword.operator, keyword.operator.expression.instanceof.js, keyword.operator.expression.void.js, keyword.operator.new.js, keyword.operator.optional.js, keyword.operator.optional.ts, keyword.operator.relational.js, keyword.operator.rest.js, keyword.operator.rest.ts, keyword.operator.type.annotation.js, keyword.operator.type.annotation.ts, keyword.operator.type.js, keyword.operator.type.ts, keyword.operator.type.tsx, storage.type.function.arrow.js, storage.type.function.arrow.ts#B71C1C
punctuation.accessor.js, punctuation.accessor.ts, punctuation.decorator.ts, punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.definition.section.case-statement.js, punctuation.definition.section.case-statement.ts, punctuation.separator.comma.js, punctuation.separator.key-value.js, punctuation.separator.key-value.ts, punctuation.separator.key-value.tsx, source.ts punctuation.separator.comma, source.tsx punctuation.separator.comma#E57373
support.variable.property.js, support.variable.property.ts, support.variable.property.tsx#ff5252
punctuation.definition.string.template.begin.js, punctuation.definition.string.template.begin.ts, punctuation.definition.string.template.begin.tsx, punctuation.definition.string.template.end.js, punctuation.definition.string.template.end.ts, punctuation.definition.string.template.end.tsx, string.template.js, string.template.ts, string.template.tsx#2962ff
meta.template.expression.js, meta.template.expression.ts, meta.template.expression.tsx, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.begin.tsx, punctuation.definition.template-expression.end.js, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.tsx#64b5f6
markup.italicitalic
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, markup.raw.block.markdown#F4511E
markup.underline.link.image.markdown, markup.underline.link.markdown, meta.link.reference constant.other.reference.link.markdown#ff5252underline
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, string.other.link.title.markdown#8E24AA
meta.paragraph.markdown#455A64
beginning.punctuation.definition.list.markdown, punctuation.definition.constant.markdown, punctuation.definition.metadata.markdown#E57373
beginning.punctuation.definition.quote.markdown, markup.quote.markdown meta.paragraph.markdown#8E24AAitalic
entity.name.section.markdown, markup.heading.setext.1.markdown, punctuation.definition.heading.markdown#880E4F
markup.boldbold
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#7e57c2
entity.other.inherited-class.php, meta.class.body.php constant.other.php, meta.class.php, constant.other.php, meta.other.inherited-class.php#880E4F
constant.other.class.php, support.constant.std.php, meta.class.body.php constant.other.php#F57F17
comment.block.documentation.phpdoc.php punctuation.definition.comment.php, comment.block.documentation.phpdoc.php#5D4037italic
keyword.other.phpdoc.php, meta.other.type.phpdoc.php keyword.other.array.phpdoc.php, meta.other.type.phpdoc.php keyword.other.type.php, meta.other.type.phpdoc.php punctuation.separator.delimiter.php, meta.other.type.phpdoc.php punctuation.separator.inheritance.php, meta.other.type.phpdoc.php support.class.builtin.php, meta.other.type.phpdoc.php support.class.php, meta.other.type.phpdoc.php support.other.namespace.php#BF360Citalic
source.sql.embedded.php keyword#ff5252
string.regexp.single-quoted.php#ff5252
keyword.operator.key.php, support.other.namespace.php#455A64
keyword.operator.class.php, keyword.operator.key.php#B71C1C
punctuation.definition.begin.bracket.round.php, punctuation.definition.end.bracket.round.php, punctuation.definition.begin.bracket.curly.php, punctuation.definition.end.bracket.curly.php, punctuation.definition.arguments.begin.bracket.round.php, punctuation.definition.arguments.end.bracket.round.php, punctuation.section.array.begin.php, punctuation.section.array.end.php, punctuation.terminator.expression.php#E57373
variable.language.this.php, variable.language.this.php punctuation.definition.variable.php, storage.type.php#880E4F
punctuation.definition.variable.php, variable.other.class.php, variable.other.php#FF7043
string.quoted.binary.single.python punctuation.definition.string.begin.python, string.quoted.binary.single.python punctuation.definition.string.end.python, string.quoted.binary.single.python, string.quoted.binary.double.python punctuation.definition.string.begin.python, string.quoted.binary.double.python punctuation.definition.string.end.python, string.quoted.binary.double.python, storage.type.string.python#1A237E
constant.other.caps.python#F57F17
string.quoted.docstring.multi.python keyword.control.flow.python, string.quoted.docstring.multi.python punctuation.definition.string.begin.python, string.quoted.docstring.multi.python punctuation.definition.string.end.python, string.quoted.docstring.multi.python, string.quoted.docstring.single.python punctuation.definition.string.begin.python, string.quoted.docstring.single.python punctuation.definition.string.end.python, string.quoted.docstring.single.python#5D4037italic
keyword.codetag.notation.python#BF360Citalic
entity.name.function.decorator.python, meta.function.decorator.python support.type.python, meta.function.decorator.python punctuation.definition.arguments.begin.python, meta.function.decorator.python punctuation.definition.arguments.end.python, meta.function.decorator.python#9E9D24
support.function.magic.python, support.variable.magic.python#FF8A65
storage.type.number.python#33691E
keyword.operator.unpacking.arguments.python, keyword.operator.unpacking.parameter.python#B71C1C
source.python#455A64
punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, punctuation.definition.dict.begin.python, punctuation.definition.dict.end.python, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, punctuation.parenthesis.begin.python, punctuation.parenthesis.end.python, punctuation.section.function.begin.python, punctuation.section.function.end.python#E57373
string.regexp.quoted.double.python storage.type.string.python, string.regexp.quoted.single.python storage.type.string.python#2962ff
variable.language.special.self.python, variable.parameter.function.language.special.self.python#880E4F
entity.other.inherited-class.ruby, variable.language.self.ruby#880E4F
variable.other.constant.ruby#F57F17
meta.embedded.line.ruby punctuation.separator.method.ruby, punctuation.section.embedded.begin.ruby, punctuation.section.embedded.end.ruby#311B92
meta.embedded.line.ruby#455A64
constant.other.symbol.hashkey.parameter.function.ruby, constant.other.symbol.hashkey.ruby#8E24AA
variable.other.readwrite.class.ruby punctuation.definition.variable.ruby, variable.other.readwrite.class.ruby#6A1B9Aitalic
variable.other.readwrite.global.pre-defined.ruby punctuation.definition.variable.ruby, variable.other.readwrite.global.pre-defined.ruby, variable.other.readwrite.global.ruby punctuation.definition.variable.ruby, variable.other.readwrite.global.ruby#8E24AA
variable.other.readwrite.instance.ruby punctuation.definition.variable.ruby, variable.other.readwrite.instance.ruby#7E57C2
keyword.operator.other.ruby#B71C1C
source.ruby#455A64
keyword.other.special-method.ruby#B71C1C
punctuation.definition.parameters.ruby, punctuation.section.array.begin.ruby, punctuation.section.array.end.ruby, punctuation.section.function.ruby, punctuation.section.scope.begin.ruby, punctuation.section.scope.end.ruby#E57373
constant.other.symbol.ruby#9E9D24

Shiki preview

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

Loading...

Longsight Light Theme by Fausto G. Cintra - VS Code Theme