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.activeBackground#222229
  • activityBar.activeBorder#77777c
  • activityBar.background#101014
  • activityBar.border#22222c
  • activityBar.dropBorder#222229
  • activityBar.foreground#aaaaac
  • activityBarBadge.background#007acc
  • breadcrumb.background#0c0c0e
  • breadcrumb.foreground#77777c
  • contrastBorder#222229
  • dropdown.background#222229
  • dropdown.foreground#88888c
  • editor.background#0b0b0e
  • editor.foreground#88888c
  • editor.inactiveSelectionBackground#3a3d41
  • editor.selectionHighlightBackground#add6ff26
  • editor.snippetFinalTabstopHighlightBackground#7a7a7c
  • editor.snippetTabstopHighlightBackground#2f2f30
  • editorCursor.foreground#88888c
  • editorGroupHeader.tabsBackground#0c0c0f
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • editorWidget.background#0b0b0e
  • editorWidget.border#222229
  • errorForeground#aaaacc
  • foreground#88888c
  • icon.foreground#88888c
  • input.background#101014
  • input.foreground#88888c
  • input.placeholderForeground#55555c
  • list.dropBackground#383b3d
  • menu.background#0d0d0f
  • menu.border#39396c
  • menu.foreground#88888c
  • notifications.background#222229
  • panel.border#222229
  • panelTitle.activeBorder#aaaaac
  • panelTitle.activeForeground#aaaaac
  • quickInput.background#141418
  • quickInput.foreground#a9a9ac
  • settings.headerForeground#88888c
  • sideBar.background#0b0b0e
  • sideBar.border#222229
  • sideBar.foreground#88888c
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#222229
  • sideBarSectionHeader.foreground#88888c
  • sideBarTitle.foreground#88888c
  • statusBar.background#222229
  • statusBar.debuggingBackground#1a5979
  • statusBar.foreground#88888c
  • statusBar.noFolderBackground#0b0b0e
  • statusBarItem.remoteBackground#449999
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#0c0c0e
  • tab.activeForeground#88888c
  • tab.border#0b0b0f
  • tab.hoverBackground#19191f
  • tab.hoverForeground#aaaaae
  • tab.inactiveBackground#101014
  • tab.inactiveForeground#55555c
  • tab.lastPinnedBorder#cccccc33
  • terminal.foreground#88888c
  • titleBar.activeBackground#0b0b0e
  • titleBar.activeForeground#88888c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#88888c
meta#8ac2e0
emphasisitalic
strongbold
header#000080
comment#6A9955
constant.language#569CD6
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#98be83
constant.regexp#646695
entity.name.tag#569CD6
entity.name.tag.css#D7BA7D
entity.other.attribute-name#8ac2e0
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, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#D7BA7D
invalid#F44747
markup.underlineunderline
markup.bold#569CD6bold
markup.heading#569CD6bold
markup.italicitalic
markup.inserted#98be83
markup.deleted#CE9178
markup.changed#569CD6
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796E6
markup.inline.raw#CE9178
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#569CD6
meta.preprocessor.string#CE9178
meta.preprocessor.numeric#98be83
meta.structure.dictionary.key.python#8ac2e0
meta.diff.header#569CD6
storage#569CD6
storage.type#569CD6
storage.modifier, keyword.operator.noexcept#569CD6
string, meta.embedded.assembly#b97559
string.tag#CE9178
string.value#CE9178
string.regexp#D16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#569CD6
meta.template.expression#88888c
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#7CbCdE
keyword#569CD6
keyword.control#569CD6
keyword.operator#88888c
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#569CD6
keyword.other.unit#98be83
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#569CD6
support.function.git-rebase#8ac2e0
constant.sha.git-rebase#98be83
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#88888c
variable.language#569CD6
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#c4c48a
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
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#C586C0
variable, meta.definition.variable.name, support.variable, entity.name.variable#8ac2e0
variable.other.constant, variable.other.enummember#4FC1FF
meta.object-literal.key#8ac2e0
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#CE9178
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
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#D16969
keyword.operator.or.regexp, keyword.control.anchor.regexp#DCDCAA
keyword.operator.quantifier.regexp#D7BA7D
constant.character#569CD6
constant.character.escape#D7BA7D
entity.name.label#C8C8C8
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
NJDark by GonnaDoStuff - VS Code Theme