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#282828
  • activityBar.inactiveForeground#cfcfcf9c
  • activityBarBadge.background#007ACC
  • editor.background#1E1E1E
  • editor.findMatchBackground#1B5227
  • editor.findMatchHighlightBackground#501f36
  • editor.foreground#e6e6e6
  • 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#303030
  • editorGutter.foldingControlForeground#db8d33
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • editorLineNumber.activeForeground#FE8100
  • editorLineNumber.foreground#9a9a9a
  • editorWidget.resizeBorder#21d42ace
  • foreground#CCCCCC
  • 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
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#383a3d
  • sideBarSectionHeader.border#ccc3
  • sideBarTitle.foreground#BBBBBB
  • statusBar.background#3b3b3b
  • statusBar.border#181818
  • 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.activeBackground#282828
  • titleBar.activeForeground#f8f8f8
  • titleBar.border#93a7cb33
  • titleBar.inactiveBackground#303640

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#D4D4D4
meta.embedded, source.groovy.embedded#D4D4D4
comment#9fa59fitalic
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#e5c07b
variable.parameter#EF7D5Ditalic
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#ACC01A
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#E8656E
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#E8656E
support.constant#E8656E
variable.other.constant, variable.other.enummember#68B0EB
support.type.vendored.property-name, support.type.property-name, source.coffee.embedded#77ABFF
variable.css, variable.scss, variable.argument.css, variable.other.less#60beca
support.type.property-name.json#E8656E
storage.type, storage.modifier#c678dd
variable.other.property#CD8DD6
support.function#60beca
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#F1983A
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#00A8A8
keyword.operator#c678dd
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#CC86D5
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#e06c75
entity.other.attribute-name#E0BC78
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#e5c07b
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#FF6CAB
text.html.derivative#abbbc9
entity.name.tag#5ba1db
punctuation.definition.tag#808080
string#ACC01A
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#7B93FF
entity.name.type.namespace#4EC9B0

Shiki preview

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

Loading...