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#0e2131
  • activityBar.inactiveForeground#d0d8e966
  • editor.background#101D2A
  • editor.findMatchBackground#1B5227
  • editor.lineHighlightBackground#14344b
  • editorBracketMatch.background#036128
  • editorBracketMatch.border#00ff0000
  • editorCursor.foreground#e78c1c
  • editorGroup.border#27537c8f
  • editorGroupHeader.tabsBackground#19232b
  • editorGroupHeader.tabsBorder#3333338c
  • editorGutter.foldingControlForeground#db8d33
  • editorHoverWidget.background#14344b
  • editorLineNumber.activeForeground#FE8100
  • editorWidget.background#0e2131
  • editorWidget.resizeBorder#21d42ace
  • input.background#303235
  • input.border#3c8ec5
  • list.activeSelectionBackground#33475f
  • list.hoverBackground#2c455f
  • list.inactiveSelectionBackground#424c58
  • panel.border#329adf
  • sideBar.background#29333f
  • sideBarSectionHeader.background#212c3b
  • statusBar.background#213E5E
  • statusBar.foreground#97a7c8
  • tab.activeBackground#273c5c
  • tab.activeBorder#ff8d03
  • tab.border#2c343b
  • tab.hoverBackground#293238
  • tab.inactiveBackground#161f27
  • tab.unfocusedActiveBackground#18273d
  • tab.unfocusedActiveBorder#97a7c8
  • titleBar.activeBackground#23344e
  • titleBar.border#93a7cb33
  • titleBar.inactiveBackground#303640
  • widget.shadow#000000

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#328edaa4
comment#9fa59f
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#72B7DB
support.constant#72B7DB
variable.other.constant, variable.other.enummember#30c5f7e1
meta.object-literal.key#65aac7
entity.other.attribute-name#E0BC78
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#569cd6
markup.bold#3688ccbold
markup.heading#3688ccbold
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#B67FFF
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#D97A70
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#CEB24E
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
string.quoted.single, string.quoted.double#87c578
string.template.js, string.quoted.single.js, string.quoted.double.js#87c578

Shiki preview

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

Loading...

night eyes Theme - Coding Theme