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.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#E0C255
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#D4D4D4
keyword.operator#d4d4d4
keyword.operator.assignment
source.js, source.cs#d4d4d4
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#89E1FF
variable.other.constant, variable.other.enummember#2ecbffe1
meta.object-literal.key#65aac7
entity.other.attribute-name#81C6E5
meta.structure.dictionary.key.python#65aac7
support.type.vendored.property-name, support.type.property-name, source.coffee.embedded#89E1FF
variable.css, variable.scss, variable.argument.css, variable.other.less#2ecbffe1
support.function.git-rebase#65aac7
constant.language#3DA7FF
constant.character#3688cc
entity.name.tag#569cd6
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#5cdbcc
markup.inserted#b5cea8
meta.preprocessor.numeric#b5cea8
keyword.other.unit#DD9BE7
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#7DDFD3
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#E0C255
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...

night eyes Theme - Coding Theme