Skip to main content
Coding Theme

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#323336
  • activityBar.inactiveForeground#cfcfcf9c
  • activityBarBadge.background#007ACC
  • editor.background#1E1E1E
  • editor.findMatchBackground#1B5227
  • editor.findMatchHighlightBackground#501f36
  • editor.foreground#D4D4D4
  • editor.inactiveSelectionBackground#3A3D41
  • editor.lineHighlightBackground#2e2e2e
  • editor.selectionBackground#3362b3c2
  • editor.selectionHighlightBackground#ADD6FF26
  • editorBracketMatch.background#036128
  • editorBracketMatch.border#00ff0000
  • editorCursor.foreground#ff8d03
  • editorGroup.border#27537c8f
  • editorGutter.background#1E1E1E
  • editorGutter.foldingControlForeground#db8d33
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • editorLineNumber.activeForeground#FE8100
  • editorWidget.resizeBorder#21d42ace
  • input.border#3c8ec5
  • input.placeholderForeground#A6A6A6
  • list.activeSelectionBackground#195094
  • list.dropBackground#383B3D
  • list.focusBackground#243a53
  • list.hoverBackground#2c455f
  • menu.background#252526
  • menu.foreground#CCCCCC
  • panel.border#ff8d03
  • ports.iconRunningProcessForeground#369432
  • sideBarSectionHeader.background#383a3d
  • sideBarSectionHeader.border#ccc3
  • sideBarTitle.foreground#BBBBBB
  • statusBar.background#404040
  • statusBar.foreground#ecebeb
  • statusBarItem.remoteBackground#16825D
  • statusBarItem.remoteForeground#FFF
  • tab.activeBackground#313e52
  • tab.activeBorder#ff8d03
  • tab.border#3a3d3f
  • tab.hoverBackground#293238
  • tab.inactiveBackground#272829
  • tab.lastPinnedBorder#ccc3
  • tab.unfocusedActiveBackground#2b323b
  • tab.unfocusedActiveBorder#97a7c8
  • titleBar.border#93a7cb33
  • titleBar.inactiveBackground#303640

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#D4D4D4
meta.embedded, source.groovy.embedded#D4D4D4
comment#88846f
string#e0d77b
punctuation.definition.template-expression, punctuation.section.embedded#df5077
meta.template.expression#D4D4D4
constant.numeric#7d72c8
constant.language#7d72c8
constant.character, constant.other#7d72c8
keyword#df5077
storage#df5077
storage.type#66D9EFitalic
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#ADCF3Funderline
entity.other.inherited-class#ADCF3Fitalic underline
entity.name.function#99C265
variable.parameter#F8A670italic
entity.name.tag#df5077
entity.other.attribute-name#ADCF3F
support.type, support.class#74c5d9
support.other.variable
invalid#F44747
invalid.deprecated#F44747
meta.structure.dictionary.json string.quoted.double.json#CFCFC2
meta.diff, meta.diff.header#75715E
markup.deleted#df5077
markup.inserted#ADCF3F
markup.changed#e0d77b
constant.numeric.line-number.find-in-files - match#7d72c8A0
entity.name.filename.find-in-files#e0d77b
markup.quote#df5077
markup.list#e0d77b
markup.bold, markup.italic#74c5d9
markup.inline.raw#ea9b40
markup.heading#ADCF3F
markup.heading.setext#ADCF3Fbold
markup.heading.markdownbold
markup.quote.markdown#75715Eitalic
markup.bold.markdownbold
string.other.link.title.markdown,string.other.link.description.markdown#AE81FF
markup.underline.link.markdown,markup.underline.link.image.markdown#E6DB74
markup.italic.markdownitalic
markup.list.unnumbered.markdown, markup.list.numbered.markdown#D3D3D4
punctuation.definition.list.begin.markdown#A6E22E
token.info-token#74c5d9
token.warn-token#ea9b40
token.error-token#d13b2e
token.debug-token#7d72c8
variable.language#DA9FE5
numeric-suffix#74c5d9italic
punctuation.tilde#ADCF3F
punctuation.squarebracket-attribute#df5077
keyword.type#74c5d9italic
keyword.other.class#74c5d9italic
meta.function-call#74c5d9
storage.type, entity.name.type.type-parameter#74c5d9italic
storage.type.numeric#74c5d9italic
entity.name.variable.parameter, keyword.other.this, keyword.other.base#ea9b40italic
meta.preprocessor, entity.name.function.preprocessor#3688cc
meta.preprocessor.numeric#b5cea8
meta.preprocessor.string#ce9178
meta.preprocessor, entity.name.function.preprocessor#3688cc
meta.definition.variable.name, support.variable, entity.name.variable#99CDEA
support.constant#99CDEA
variable.other.constant, variable.other.enummember#77ABFF
support.type.vendored.property-name, support.type.property-name, source.coffee.embedded#81C6E5
variable.css, variable.scss, variable.argument.css, variable.other.less#29B6E5
storage.type#B67FFF
variable.other.property#81C6E5
support.function#CDC10F
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#FF6CAB
meta.return-type, support.class, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, 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#4ABEA6
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#4ABEA6
constant.language#F3626Fitalic
keyword.operator#CD90D5
keyword.operator.assignment#b3b3b3
source.js, source.cs#d4d4d4
constant.numeric, keyword.operator.plus.exponent, keyword.operator.minus.exponent#94D18B
constant.other.color.rgb-value, constant.other.rgb-value#DDB974
keyword.other.unit#B67FFF
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#B67FFF
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, support.constant.color#E47FA1
entity.other.attribute-name#74c5d9italic
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, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#ADCF3F
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#FF6CAB
text.html.derivative#A6B8C8
entity.name.tag#569cd6
punctuation.definition.tag#808080
string#ce9178
comment#6A9955
meta.paragraph.markdown, text.html.markdown#D3D3D4
variable.other.object, variable.other.readwrite, variable.other.object.property, variable.other.readwrite.alias, variable.other, variable.other.global#81C6E5
entity.name.type.namespace#4EC9B0

Shiki preview

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

Loading...