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#06102a
  • activityBarBadge.background#007acc
  • auxiliaryBar.background#091c38
  • auxiliaryBar.border#cccccc22
  • auxiliaryBar.foreground#7a8a9a
  • badge.background#437c90cc
  • badge.foreground#06102a
  • debugToolBar.background#091c38
  • dropdown.background#0d2654
  • editor.background#0f2440
  • editor.foreground#e8eaf0
  • editor.inactiveSelectionBackground#2a2d31
  • editor.lineHighlightBackground#001d4a
  • editor.selectionBackground#002870
  • editor.selectionHighlightBackground#add6ff20
  • editorCursor.foreground#e8eaf0
  • editorGroup.border#2a3a60
  • editorGroup.dropBackground#152040aa
  • editorGroupHeader.tabsBackground#06102a
  • editorHoverWidget.background#091c38
  • editorHoverWidget.border#e8eaf040
  • editorIndentGuide.activeBackground#606060
  • editorIndentGuide.background#404040
  • editorLineNumber.activeForeground#909090
  • editorWhitespace.foreground#2a3a60
  • editorWidget.background#091c38
  • errorForeground#773d48
  • focusBorder#5fb0ce
  • input.background#0f2848
  • input.placeholderForeground#9a9a9a
  • list.activeSelectionBackground#163d70
  • list.dropBackground#282b2d
  • list.focusBackground#163d70
  • list.highlightForeground#5fb0ce
  • list.hoverBackground#e8eaf020
  • list.inactiveSelectionBackground#e8eaf030
  • menu.background#040c1f
  • menu.foreground#c29532
  • minimap.selectionHighlight#002870
  • panel.background#091c38
  • panel.border#cccccc22
  • peekViewResult.background#091c38
  • pickerGroup.foreground#5fb0ce
  • progressBar.background#5fb0cecc
  • settings.numberInputBackground#1a1a1a
  • settings.textInputBackground#1a1a1a
  • sideBar.background#091c38
  • sideBar.foreground#7a8a9a
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#cccccc33
  • sideBarTitle.foreground#58687a
  • statusBar.background#040c1f
  • statusBar.debuggingBackground#040c1f
  • statusBar.foreground#7a8a9a
  • statusBar.noFolderBackground#040c1f
  • statusBarItem.remoteBackground#0e639c
  • statusBarItem.remoteForeground#ffffff
  • tab.activeForeground#b0c4d8
  • tab.inactiveBackground#091c38
  • tab.inactiveForeground#5a6a7a
  • tab.unfocusedActiveForeground#8aa4bc
  • tab.unfocusedInactiveForeground#485868
  • terminal.ansiBlack#111111
  • terminal.ansiBlue#437c90
  • terminal.ansiBrightBlack#888888
  • terminal.ansiBrightBlue#80baff
  • terminal.ansiBrightCyan#78ffff
  • terminal.ansiBrightGreen#b8f171
  • terminal.ansiBrightMagenta#d778ff
  • terminal.ansiBrightRed#ff7882
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffe580
  • terminal.ansiCyan#99ffff
  • terminal.ansiGreen#97d8c4
  • terminal.ansiMagenta#30638e
  • terminal.ansiRed#c29532
  • terminal.ansiWhite#cccccc
  • terminal.ansiYellow#ffeead
  • titleBar.activeBackground#040c1f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#E4E4E4
emphasisitalic
strongbold
header#000080
comment#80B36A
constant.language#70B0E8
constant.numeric, entity.name.operator.custom-literal.number, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#C8DEBC
constant.regexp#646695
entity.name.tag#70B0E8
entity.name.tag.css#E8CC8E
entity.other.attribute-name#B4E6FF
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.attribute.scss, entity.other.attribute-name.scss#E8CC8E
invalid#F44747
markup.underlineunderline
markup.bold#70B0E8bold
markup.heading#70B0E8bold
markup.italicitalic
markup.inserted#C8DEBC
markup.deleted#E0A888
markup.changed#70B0E8
punctuation.definition.quote.begin.markdown#80B36A
punctuation.definition.list.begin.markdown#80AAEE
markup.inline.raw#E0A888
punctuation.definition.tag#A0A0A0
meta.preprocessor, entity.name.function.preprocessor#70B0E8
meta.preprocessor.string#E0A888
meta.preprocessor.numeric#C8DEBC
meta.structure.dictionary.key.python#B4E6FF
meta.diff.header#70B0E8
storage#70B0E8
storage.type#70B0E8
storage.modifier, keyword.operator.noexcept#70B0E8
string, entity.name.operator.custom-literal.string, meta.embedded.assembly#E0A888
string.tag#E0A888
string.value#E0A888
string.regexp#E07878
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#70B0E8
meta.template.expression#E4E4E4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#B4E6FF
keyword#70B0E8
keyword.control#70B0E8
keyword.operator#E4E4E4
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#70B0E8
keyword.other.unit#C8DEBC
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#70B0E8
support.function.git-rebase#B4E6FF
constant.sha.git-rebase#C8DEBC
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#E4E4E4
variable.language#70B0E8
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#EEEEBB
meta.return-type, support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class#6ADBC0
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#D898D2
variable, meta.definition.variable.name, support.variable, entity.name.variable#B4E6FF
variable.other.constant, variable.other.enummember#68C8D6
meta.object-literal.key#B4E6FF
comment#8ABFAD
keyword.control#7FC4DE
keyword.operator.class, keyword.operator, constant.other, source.php.embedded.line#e8eaf0
variable, support.other.variable, string.other.link, string.regexp, entity.name.tag, entity.other.attribute-name, meta.tag, declaration.tag, markup.deleted.git_gutter#D4A840
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, punctuation.section.embedded, keyword.other.unit#E1C663
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution, support.type, support.class#FFEEAD
string, constant.other.symbol, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter#AEE6D4
keyword.operator, constant.other.color#99FFFF
entity.name.function, meta.function-call, support.function, keyword.other.special-method, meta.block-level, markup.changed.git_gutter#7FC4DE
keyword, storage, storage.type, entity.name.tag.css#8ABCCC
invalid#e8eaf0
meta.separator#e8eaf0
invalid.deprecated#e8eaf0
token.info-token#80AAEE
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#C480F0