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#060931
  • activityBar.border#F1EFF830
  • activityBar.foreground#9999E6
  • activityBarBadge.background#FFE26F
  • activityBarBadge.foreground#060931
  • badge.background#06093130
  • badge.foreground#2DE0A7
  • breadcrumb.activeSelectionForeground#2DE0A7
  • breadcrumb.background#060931
  • breadcrumb.focusForeground#9999E6
  • breadcrumb.foreground#4FC1FF
  • breadcrumbPicker.background#060931
  • button.background#2DE0A750
  • contrastBorder#2DE0A740
  • debugToolBar.background#060931
  • diffEditor.insertedTextBackground#7AA5FF15
  • diffEditor.removedTextBackground#8EAEE020
  • dropdown.background#060931
  • dropdown.border#F1EFF830
  • editor.background#060931
  • editor.findMatchBackground#060931
  • editor.findMatchBorder#F1EFF830
  • editor.findMatchHighlightBackground#2de0a71a
  • editor.findMatchHighlightBorder#F1EFF830
  • editor.foreground#9999E6
  • editor.lineHighlightBackground#06093150
  • editor.selectionBackground#2bf0b23c
  • editor.selectionHighlightBackground#2de0a71a
  • editor.selectionHighlightBorder#FFE26Ff0
  • editorBracketMatch.background#060931
  • editorBracketMatch.border#4FC1FF7f
  • editorCursor.foreground#2DE0A7
  • editorError.foreground#8EAEE070
  • editorGroup.border#06093130
  • editorGroup.dropBackground#25375daa
  • editorGroupHeader.tabsBackground#060931
  • editorGutter.addedBackground#7AA5FF60
  • editorGutter.deletedBackground#8EAEE060
  • editorGutter.modifiedBackground#FFE26F60
  • editorHoverWidget.background#060931
  • editorHoverWidget.border#F1EFF810
  • editorIndentGuide.activeBackground#353658
  • editorIndentGuide.background#35365870
  • editorInfo.foreground#FFE26F70
  • editorLineNumber.activeForeground#FFE26F
  • editorLineNumber.foreground#84f7d380
  • editorLink.activeForeground#9999E6
  • editorMarkerNavigation.background#9999E605
  • editorOverviewRuler.border#F1EFF830
  • editorOverviewRuler.errorForeground#8EAEE040
  • editorOverviewRuler.findMatchForeground#2de0a73a
  • editorOverviewRuler.infoForeground#FFE26F40
  • editorOverviewRuler.warningForeground#4FC1FF70
  • editorRuler.foreground#353658
  • editorSuggestWidget.background#060931
  • editorSuggestWidget.border#F1EFF810
  • editorSuggestWidget.foreground#9999E6
  • editorSuggestWidget.highlightForeground#4FC1FF
  • editorSuggestWidget.selectedBackground#2DE0A720
  • editorWarning.foreground#7AA5FF
  • editorWhitespace.foreground#404f7d
  • editorWidget.background#060931
  • editorWidget.border#F1EFF830
  • editorWidget.resizeBorder#2DE0A7
  • errorForeground#8EAEE070
  • extensionButton.prominentBackground#7AA5FF90
  • extensionButton.prominentHoverBackground#8EAEE0
  • focusBorder#F1EFF830
  • gitDecoration.conflictingResourceForeground#2DE0A7
  • gitDecoration.deletedResourceForeground#8EAEE0
  • gitDecoration.modifiedResourceForeground#2DE0A7
  • gitDecoration.untrackedResourceForeground#FFE26F
  • input.background#292A44
  • input.border#F1EFF830
  • input.foreground#9999E6
  • input.placeholderForeground#9999E660
  • inputOption.activeBackground#9999E630
  • inputOption.activeBorder#9999E630
  • inputValidation.errorBorder#8EAEE050
  • inputValidation.infoBorder#FFE26F50
  • inputValidation.warningBorder#4FC1FF50
  • list.activeSelectionBackground#060931
  • list.activeSelectionForeground#2DE0A7
  • list.focusBackground#292A44
  • list.focusForeground#FFE26F
  • list.highlightForeground#2DE0A7
  • list.hoverBackground#353658
  • list.hoverForeground#F1EFF8
  • list.inactiveSelectionBackground#06093130
  • list.inactiveSelectionForeground#2DE0A7
  • list.warningForeground#4FC1FF
  • listFilterWidget.background#06093130
  • listFilterWidget.noMatchesOutline#06093130
  • listFilterWidget.outline#06093130
  • menu.background#060931f8
  • menu.border#2DE0A750
  • menu.foreground#9999E6
  • menu.selectionBackground#292A44
  • menu.selectionBorder#06093130
  • menu.selectionForeground#9999E6
  • menu.separatorBackground#9999E6
  • menubar.selectionBackground#292A44
  • menubar.selectionBorder#2DE0A750
  • menubar.selectionForeground#9999E6
  • minimap.background#060931
  • minimap.selectionHighlight#003f8e
  • minimapGutter.addedBackground#8EAEE0
  • minimapGutter.deletedBackground#4FC1FF
  • minimapGutter.modifiedBackground#7AA5FF
  • minimapSlider.activeBackground#7AA5FFb0
  • minimapSlider.background#7AA5FF80
  • minimapSlider.hoverBackground#7AA5FFa0
  • notificationLink.foreground#2DE0A7
  • notifications.background#060931
  • notifications.foreground#9999E6
  • panel.background#060931
  • panel.border#2DE0A7
  • panelTitle.activeBorder#2DE0A7
  • panelTitle.activeForeground#F1EFF8
  • panelTitle.inactiveForeground#9999E6
  • peekView.border#F1EFF830
  • peekViewEditor.background#9999E605
  • peekViewEditor.matchHighlightBackground#2de0a71a
  • peekViewEditorGutter.background#9999E605
  • peekViewResult.background#9999E605
  • peekViewResult.matchHighlightBackground#2de0a71a
  • peekViewResult.selectionBackground#2DE0A770
  • peekViewTitle.background#9999E605
  • peekViewTitleDescription.foreground#9999E660
  • pickerGroup.foreground#2DE0A7
  • progressBar.background#2DE0A7
  • scrollbar.shadow#06093100
  • scrollbarSlider.activeBackground#ad81ffaa
  • scrollbarSlider.background#ad81ffaa
  • scrollbarSlider.hoverBackground#ad81ffaa
  • selection.background#2DE0A770
  • settings.checkboxBackground#060931
  • settings.checkboxForeground#9999E6
  • settings.dropdownBackground#060931
  • settings.dropdownForeground#9999E6
  • settings.headerForeground#2DE0A7
  • settings.modifiedItemIndicator#2DE0A7
  • settings.numberInputBackground#060931
  • settings.numberInputForeground#9999E6
  • settings.textInputBackground#060931
  • settings.textInputForeground#9999E6
  • sideBar.background#060931d1
  • sideBar.border#2DE0A750
  • sideBar.foreground#F1EFF8
  • sideBarSectionHeader.background#060931
  • sideBarSectionHeader.border#f1eff829
  • sideBarSectionHeader.foreground#FFE26F
  • sideBarTitle.foreground#9999E6
  • statusBar.background#37385B
  • statusBar.border#F1EFF830
  • statusBar.debuggingBackground#4FC1FF
  • statusBar.debuggingForeground#F1EFF8
  • statusBar.foreground#AE81FF
  • statusBar.noFolderBackground#1B1C2D
  • statusBarItem.hoverBackground#2DE0A720
  • statusBarItem.remoteBackground#2DE0A7
  • statusBarItem.remoteForeground#1B1C2D
  • tab.activeBackground#2DE0A750
  • tab.activeBorder#2DE0A7
  • tab.activeForeground#F1EFF8
  • tab.activeModifiedBorder#2DE0A7
  • tab.border#F1EFF830
  • tab.inactiveBackground#2DE0A720
  • tab.inactiveForeground#9999E6af
  • tab.modifiedBorder#FFEEAD
  • tab.unfocusedActiveBackground#2DE0A740
  • tab.unfocusedActiveBorder#2DE0A7
  • tab.unfocusedActiveForeground#9999E6
  • tab.unfocusedInactiveBackground#2DE0A710
  • tab.unfocusedInactiveForeground#9999E67f
  • terminal.ansiBlack#0B1C2C
  • terminal.ansiBlue#8B56BF
  • terminal.ansiBrightBlack#627E99
  • terminal.ansiBrightBlue#8B56BF
  • terminal.ansiBrightCyan#568BBF
  • terminal.ansiBrightGreen#56BF8B
  • terminal.ansiBrightMagenta#BF568B
  • terminal.ansiBrightRed#BF8B56
  • terminal.ansiBrightWhite#F7F9FB
  • terminal.ansiBrightYellow#8BBF56
  • terminal.ansiCyan#568BBF
  • terminal.ansiGreen#56BF8B
  • terminal.ansiMagenta#4FC1FF
  • terminal.ansiRed#BF8B56
  • terminal.ansiWhite#CBD6E2
  • terminal.ansiYellow#8BBF56
  • terminal.background#0c0e2f
  • terminal.foreground#CBD6E2
  • terminalCursor.background#CBD6E2
  • terminalCursor.foreground#CBD6E2
  • textLink.activeForeground#9999E6
  • textLink.foreground#4FC1FF
  • titleBar.activeBackground#1B1C2D
  • titleBar.activeForeground#9999E6
  • titleBar.border#1B1C2D60
  • titleBar.inactiveBackground#1B1C2D
  • titleBar.inactiveForeground#2DE0A7
  • tree.indentGuidesStroke#353658
  • widget.shadow#1B1C2D30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source.groovy.embedded#9DC1E0
meta.embedded#9DC1E0
meta.embedded.block.graphql, meta.selections, meta.var.expr.ts#2DE0A7
comment, punctuation.definition.comment#7285B7italic
keyword.operator.class, keyword.operator, constant.other, source.php.embedded.line#8BE9FD
keyword.operator.accessor#FBE8B3
variable, string.other.link, string.regexp#9dc1e0
variable.other.constant.js, source.js.jsx#FFE26F
constant.language.boolean.true.js, constant.language.boolean.false.js#1DD6FF
meta.tag#FFF8DB
constant.other.color#ECE9DD
entity.other.attribute-name#99FFFF
invalid, invalid.illegal#FFFFFFitalic bold
keyword, storage.type, storage.modifier#17F1DF
storage.type#F7BB4C
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#8BE9FD
meta.tag.jsx, meta.group.braces.round, meta.class.body.js, source.js.jsx#FFF8DB
punctuation.definition.tag#8EAEE0
entity.name.tag, meta.tag.sgml#AE81FF
variable.other.property.ts#e7e2a9
text.html.derivative#FFF8DB
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#BDD5EA
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, punctuation.section.embedded, keyword.other.unit#D6DA21
meta.function-call, support.function, keyword.other.special-method, meta.block-level, markup.changed.git_gutter#BBDAFF
entity.name.function#FFE26F
support.other.variable, string.other.link#DCDCAA
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#BDD5EA
constant.numeric#E7EE98
variable.parameter#66c5ccitalic
constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, string.unquoted.label.js#D1F1A9
string, string.quoted.double.js#fbe8b3
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FFD484
support.type#B2CCD6
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#FFD78C
keyword.control.at-rule.media.css#AE81FFitalic bold
variable.css#2de0a7da
entity.other.attribute-name.class.css#4FC1FF
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#92EAE3
keyword.control.module.js#4FC1FF
variable.language#92EAE3italic
entity.name.method.js#82AAFFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#82AAFF
entity.other.attribute-name#17F1DF
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFD484italic
entity.other.attribute-name.class#FFD484
source.sass keyword.control#82AAFF
markup.inserted#C3E88D
markup.deleted#FF5370
markup.changed#17F1DF
string.regexp#89DDFF
constant.character.escape#89DDFF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFFitalic
source.js constant.other.object.key.js string.unquoted.label.js#f1b036italic
source.json meta.structure.dictionary.json support.type.property-name.json#17F1DF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFD484
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f7bb4c
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffc456
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#dda235
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#82AAFF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8982eb
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#17F1DF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C3E88D
text.html.markdown, punctuation.definition.list_item.markdown#FFF8DB
markup.deleted.diff, meta.diff.header.from-file#c82829
text.html.markdown markup.inline.raw.markdown#17F1DF
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#D1F1A9
markup.italic#f07178italic
markup.bold, markup.bold string#BDD5EAbold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#BDD5EAbold
markup.underline#BDD5EAunderline
markup.quote punctuation.definition.blockquote.markdown#7285B7
markup.quoteitalic
string.other.link.title.markdown#BDD5EA
string.other.link.description.title.markdown#305ec2
constant.other.reference.link.markdown#FFD484
markup.raw.block#BDD5EA
markup.raw.block.fenced.markdown#030c16
punctuation.definition.fenced.markdown#030c16
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#FFF8DB
variable.language.fenced.markdown#65737E
meta.separator#7285B7bold
markup.table#1dfcfc
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
constant.other.object.key.js, variable.other.property.js#2DE0A7