Skip to main content
CodingTheme

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#414861
  • activityBarBadge.background#614151
  • badge.background#715141
  • badge.foreground#FEF6F0
  • button.background#715141
  • button.foreground#FEF6F0
  • button.hoverBackground#D08030
  • descriptionForeground#D08030
  • editor.background#FAF4F0
  • editor.foreground#100800
  • editor.inactiveSelectionBackground#EBF0F8
  • editor.lineHighlightBackground#FFFDFA
  • editor.lineHighlightBorder#FFF
  • editor.selectionBackground#BDC7E3
  • editor.selectionHighlightBackground#EBF0F8
  • editorCursor.background#ffeedd
  • editorCursor.foreground#D08030
  • editorIndentGuide.background#D3D3D3
  • editorSuggestWidget.background#F3F3F3
  • foreground#715141
  • input.background#FFFFFF
  • input.foreground#715141
  • list.focusBackground#FFD0D0
  • list.highlightForeground#FF6060
  • list.hoverBackground#FFF0F0
  • panel.background#e9d7d1
  • panel.border#715141
  • sideBar.background#e9d7d1
  • sideBar.border#715141
  • sideBar.foreground#100800
  • sideBarTitle.foreground#6F6F6F
  • statusBar.background#414861
  • statusBar.debuggingBackground#813131
  • statusBar.foreground#FFFDF8
  • statusBar.noFolderBackground#614151
  • terminal.ansiBlack#040800
  • terminal.ansiBlue#004080
  • terminal.ansiBrightBlack#809070
  • terminal.ansiBrightBlue#2040E0
  • terminal.ansiBrightCyan#20E0D0
  • terminal.ansiBrightGreen#20E010
  • terminal.ansiBrightMagenta#E040E0
  • terminal.ansiBrightRed#E04800
  • terminal.ansiBrightWhite#D8E8E0
  • terminal.ansiBrightYellow#D0E000
  • terminal.ansiCyan#009080
  • terminal.ansiGreen#209000
  • terminal.ansiMagenta#804080
  • terminal.ansiRed#804000
  • terminal.ansiWhite#C8D0C0
  • terminal.ansiYellow#809000
  • terminal.background#040800
  • terminal.foreground#C8E0C0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
meta.diff.header#100800
comment#948686
constant.language#53628d
constant.numeric#6d345f
constant.regexp#94431b
entity.name.tagbold
entity.name.selector#100800
entity.other.attribute-name#100800
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#324375
entity.other.attribute-name.id.css, source.css.less entity.other.attribute-name.id#6d345f
invalid#100800
markup.underlineunderline
markup.boldbold
markup.heading#53628dbold
markup.italicitalic
markup.list#6d345f
markup.list.numbered#6d345f
markup.list.numbered#6d345f
markup.quote#347454
markup.raw#347454
markup.inline.raw#347454
markup.inserted#00D080
markup.deleted#D00000
markup.changed#0080F0
beginning.punctuation.definition.quote.markdown, beginning.punctuation.definition.list.markdown#100800
markup.inline.raw#100800
meta.selector#100800
punctuation.definition.tag#706050
meta.preprocessor#100800
meta.preprocessor.string#862121
meta.preprocessor.numeric#6d345f
meta.structure.dictionary.key.python#100800
storagebold
storage.typebold
storage.modifierbold
string#862121
string.comment.buffered.block.jade, string.quoted.jade, string.interpolated.jade, string.unquoted.plain.in.yaml, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, string.quoted.single.yaml, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.cdata.xml, string.quoted.double.html, string.quoted.single.html, string.unquoted.html, string.quoted.single.handlebars, string.quoted.double.handlebars#862121
string.regexp#94431b
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js#94431b
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less
support.type.property-name.json#100800
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php
support.function.git-rebase#0080F0
constant.sha.git-rebase#00C080
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.javaitalic
variable.language#347454
keyword, keyword.controlbold
keyword.operator
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python#347454
keyword.other.unit#347454
entity.name.function, support.function, support.constant.handlebars#53628d
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovybold
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json#6d345f
entity.other.inherited-classbold
variable, meta.definition.variable.name, support.variable
meta.object-literal.key, meta.object-literal.key entity.name.functionitalic
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#53628d
text.html.markdown.journal.task.open.bullet, text.html.markdown.journal.task.open.marker#FFFF00
text.html.markdown.journal.task.open.keyword, text.html.markdown.journal.task.completed.keyword, text.html.markdown.journal.memo.keyword, text.html.markdown.journal.link.keyworditalic
text.html.markdown.journal.task.open.text
text.html.markdown.journal.task.completed.marker, text.html.markdown.journal.task.completed.text#AAAAAA
text.html.markdown.journal.task.completed.bullet, text.html.markdown.journal.memo.bullet, text.html.markdown.journal.scope, text.html.markdown.journal.link.bullet#CCCC00

Shiki preview

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

Loading...