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.

  • activityBarBadge.background#37972b
  • editor.background#2B2B2B
  • editor.foreground#A9B7C6
  • editor.inactiveSelectionBackground#3a3d41
  • editor.lineHighlightBackground#323232
  • editor.selectionHighlightBackground#add6ff26
  • editorError.foreground#90343288
  • editorGutter.background#272727
  • editorIndentGuide.background#404040
  • editorInfo.foreground#53975a88
  • editorWarning.foreground#79723488
  • extensionBadge.remoteBackground#37972b
  • list.dropBackground#474B4D
  • statusBar.background#272727
  • statusBar.noFolderBackground#696969
  • statusBarItem.remoteBackground#38972b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#000080
comment#808080
constant.language#CC7832bold
constant.numeric#6897BB
constant.regexp#646695
entity.name.tag#FFC66D
entity.name.tag.css#d7ba7d
entity.other.attribute-name#BABABA
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#d7ba7d
invalid#f44747
markup.underlineunderline
markup.bold#A9B7C6
markup.heading#A9B7C6
markup.italicitalic
markup.inserted#b5cea8
markup.deleted#ce9178
markup.changed#A9B7C6
beginning.punctuation.definition.quote.markdown#608b4e
beginning.punctuation.definition.list.markdown#6796e6
markup.inline.raw#ce9178
meta.selector#d7ba7d
punctuation.definition.tag#FFC66D
meta.preprocessor#CC7832
meta.preprocessor.string#ce9178
meta.preprocessor.numeric#b5cea8
source.python#bdbdbd
meta.structure.dictionary.key.python#8f5aac
meta.item-access.arguments.python#cc86c9
meta.function-call.generic.python#6eb398
meta.function-call.arguments.python#999999
support.type.python#eba117
string.quoted.single.python#8ab141
support.type.exception.python#109c79
entity.name.function.python#c9a767
comment.line.number-sign.python#665757italic
entity.name.type.class.python#e97f5f
entity.other.inherited-class.python#e9b1a0
entity.name.function.decorator, entity.name.function.decorator support.type.python#BBB529
variable.parameter.function-call.python#ad5d1b
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python#CC7832bold
meta.diff.header#CC7832
meta.class.inheritance#d4d4d4ff
storagered
storage.type#CC7832bold
storage.modifier#CC7832bold
string, string storage.type.string#00795E
string.quoted.docstring.multi, string.quoted.docstring.multi storage.type.string#6A8759italic bold
constant.character.escape#CC682E
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js#A9B7C6
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less#8f5aac
variable.other.property, support.variable.property.dom#8f5aac
variable.other.object, variable.other.object.property, support.class.dom, meta.function-call, entity.name.type.module#A9B7C6
variable.other.readwrite, variable.parameter, variable.other.readwrite.alias#A9B7C6
variable.parameter.function.language.special#8f5aac
keyword#CC7832
keyword.control#CC7832bold
keyword.operator#A9B7C6
keyword.other.unit#b5cea8
punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php#CC7832
support.function.git-rebase#8f5aac
support.function.magic#B200B2
support.function.builtin#8888C6
constant.sha.git-rebase#b5cea8
storage.modifier.import.java, storage.modifier.package.java#d4d4d4
variable.language.special#a152a8
variable.language#CC7832bold
entity.name.function, support.function, support.constant.handlebarsbold
entity.name.typebold
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.groovy#A9B7C6
support.class, entity.name.class, support.type, entity.name.type#A9B7C6bold
storage.type.function.arrow#A9B7C6
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json#4EC9B0
keyword.control#CC7832bold
meta.definition.variable.name, support.variable#A9B7C6
variable#8f5aac
meta.object-literal.key, meta.object-literal.key entity.name.function#8f5aac
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#CE9178
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6

Shiki preview

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

Loading...

Full Monty by peaknik - VS Code Theme