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.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
emphasisitalic
strongbold
markup.underlineunderline
markup.italicitalic
header#000080
constant.regexp#646695
invalid#f44747
punctuation.definition.list.begin.markdown#6796e6
punctuation.definition.tag#808080
comment#6A9955
punctuation.definition.quote.begin.markdown#6A9955
entity.name.label#C0A649
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#d79e7d
entity.other.attribute-name.class.css#DDB974
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#B67FFF
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#d67797
text.html.derivative#A6B8C8
keyword.operator#df7e73
keyword.operator.assignment#b3b3b3
source.js, source.cs#b3b3b3
meta.embedded, source.groovy.embedded#b3b3b3
meta.template.expression#b3b3b3
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#b3b3b3
variable, meta.definition.variable.name, support.variable, entity.name.variable#65aac7
support.constant#65aac7
variable.other.constant, variable.other.enummember#47A2E2
meta.object-literal.key#65aac7
entity.other.attribute-name#65aac7
meta.structure.dictionary.key.python#65aac7
support.type.vendored.property-name, support.type.property-name, source.coffee.embedded#7bbdda
variable.css, variable.scss, variable.argument.css, variable.other.less#47b8dde1
support.function.git-rebase#65aac7
constant.language#3688cc
constant.character#3688cc
entity.name.tag#3595bbf1
markup.bold#3688ccbold
markup.heading#3688ccbold
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#3688cc
keyword#3688cc
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#3688cc
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#3688cc
variable.language#3688cc
markup.changed#3688cc
meta.preprocessor, entity.name.function.preprocessor#3688cc
meta.diff.header#3688cc
storage#3688cc
storage.type#B67FFF
storage.modifier, keyword.operator.noexcept#3688cc
constant.numeric, keyword.operator.plus.exponent, keyword.operator.minus.exponent#84BB7C
markup.inserted#b5cea8
meta.preprocessor.numeric#b5cea8
keyword.other.unit#C389CB
constant.sha.git-rebase#b5cea8
markup.deleted#ce9178
markup.inline.raw#ce9178
meta.preprocessor.string#ce9178
string, meta.embedded.assembly#ce9178
string.tag#ce9178
string.value#ce9178
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, support.constant.color#df7e73
constant.other.color.rgb-value, constant.other.rgb-value#5ea79e
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#CE9178
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#c0a649
keyword.operator.or.regexp, keyword.control.anchor.regexp#c0a649
meta.return-type, support.class, support.type, 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#4EC9B0
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#4EC9B0
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#d16969
string.regexp#d16969
entity.name.tag.css#d7ba7d
keyword.operator.quantifier.regexp#d7ba7d
constant.character.escape#d7ba7d

Shiki preview

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

Loading...