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#a5c9ed10
  • activityBar.activeBorder#86b9ecff
  • activityBar.activeFocusBorder#86b9ecff
  • activityBar.background#171e23ff
  • activityBar.border#030a0fff
  • activityBar.foreground#6699ccff
  • activityBar.inactiveForeground#84a8cc60
  • activityBarBadge.background#f5cea8c0
  • activityBarBadge.foreground#000000
  • badge.background#f5cea8c0
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#6699cca0
  • breadcrumb.background#1b2227ff
  • breadcrumb.focusForeground#6699CC
  • breadcrumb.foreground#6699cca0
  • button.background#171e23ff
  • button.foreground#ece5e0ff
  • button.hoverBackground#1b2227ff
  • descriptionForeground#ece5e0ff
  • dropdown.background#31383dff
  • dropdown.border#131A1F
  • dropdown.foreground#b3babfff
  • dropdown.listBackground#31383dff
  • editor.background#131A1F
  • editor.findMatchBackground#fff5c21e
  • editor.findMatchHighlightBackground#fff5c23c
  • editor.findRangeHighlightBackground#9a9cff23
  • editor.foreground#a5c9ed60
  • editor.lineHighlightBackground#85a9cd20
  • editor.selectionBackground#6699cc40
  • editor.selectionHighlightBackground#6699cc49
  • editor.selectionHighlightBorder#6699cc40
  • editor.wordHighlightStrongBackground#6699cc49
  • editor.wordHighlightStrongBorder#6699cca0
  • editorBracketMatch.background#ff336660
  • editorBracketMatch.border#ff336660
  • editorError.foreground#ff0033
  • editorGroup.border#030a0fff
  • editorGroupHeader.border#030a0fff
  • editorGroupHeader.noTabsBackground#171e23ff
  • editorGroupHeader.tabsBackground#171e23ff
  • editorGroupHeader.tabsBorder#84a8cc60
  • editorGutter.background#131A1F
  • editorGutter.modifiedBackground#6699CC
  • editorHoverWidget.border#6589ad60
  • editorIndentGuide.activeBackground#6699cc49
  • editorIndentGuide.background#1b2227ff
  • editorLineNumber.activeForeground#a9c2dca0
  • editorLineNumber.foreground#99b2cc40
  • editorOverviewRuler.errorForeground#ff0033
  • editorOverviewRuler.findMatchForeground#6699cc40
  • editorOverviewRuler.warningForeground#cc884478
  • editorOverviewRuler.wordHighlightForeground#6699cc49
  • editorPane.background#0b1217ff
  • editorSuggestWidget.background#131A1F
  • editorSuggestWidget.border#6589ad60
  • editorSuggestWidget.selectedBackground#232a2fff
  • editorUnnecessaryCode.border#131a1f80
  • editorUnnecessaryCode.opacity#131a1f80
  • editorWidget.background#171e23ff
  • editorWidget.border#6699CC
  • editorWidget.foreground#6699ccff
  • errorForeground#6699CC
  • focusBorder#6589ad60
  • foreground#a5c9ed60
  • gitDecoration.untrackedResourceForeground#99bb33
  • icon.foreground#6699ccff
  • input.background#232a2fff
  • input.border#131A1F
  • input.foreground#a9c2dca0
  • input.placeholderForeground#7992ac40
  • inputOption.activeBackground#5e91c43c
  • inputOption.activeBorder#5e91c44b
  • list.activeSelectionBackground#6699cc2a
  • list.activeSelectionForeground#fbc37bff
  • list.dropBackground#31383dff
  • list.errorForeground#ff4b7eff
  • list.focusBackground#6699cc2a
  • list.focusForeground#a9cdf1f0
  • list.highlightForeground#5e91c480
  • list.hoverBackground#4679ac2a
  • list.hoverForeground#a9cdf1f0
  • list.inactiveSelectionBackground#4679ac2a
  • list.inactiveSelectionForeground#d5a669ff
  • list.invalidItemForeground#f58fffff
  • list.warningForeground#feba76ff
  • listFilterWidget.outline#030a0fff
  • menu.background#0b1217ff
  • menu.border#0b1217ff
  • menu.foreground#a5c9ed80
  • menu.selectionBackground#6699cc40
  • menu.selectionBorder#6699cc40
  • menu.selectionForeground#a9cdf1f0
  • menu.separatorBackground#6699cc80
  • menubar.selectionBackground#6699cc40
  • menubar.selectionBorder#6699cc40
  • menubar.selectionForeground#a5c9ed80
  • minimap.background#131A1F
  • minimap.errorHighlight#ff003378
  • minimap.selectionHighlight#6699cc40
  • minimap.warningHighlight#cc884478
  • notificationCenter.border#131A1F
  • notificationCenterHeader.background#1b2227ff
  • notificationCenterHeader.foreground#a5c9ed60
  • notificationLink.foreground#5e91c4ff
  • notifications.background#1b2227f0
  • notifications.border#6699ccf0
  • notifications.foreground#a5c9ed60
  • notificationsErrorIcon.foreground#ff003378
  • notificationsInfoIcon.foreground#6699ccff
  • notificationsWarningIcon.foreground#cc884478
  • notificationToast.border#6699ccf0
  • panel.background#131A1F
  • panel.border#a5c9ed20
  • panelTitle.activeBorder#c9e2fc40
  • panelTitle.activeForeground#c9e2fc40
  • panelTitle.inactiveForeground#99b2cc40
  • pickerGroup.foreground#fbc37bff
  • progressBar.background#1b2227ff
  • quickInput.foreground#a5c9ed60
  • scrollbar.shadow#030a0fff
  • scrollbarSlider.activeBackground#6699cc80
  • scrollbarSlider.background#6699cc40
  • scrollbarSlider.hoverBackground#6699cc40
  • selection.background#6699cc40
  • settings.checkboxBackground#232a2fff
  • settings.checkboxBorder#131A1F
  • settings.dropdownBorder#131A1F
  • settings.dropdownListBorder#131A1F
  • settings.headerForeground#6699CC
  • settings.modifiedItemIndicator#84a8cc60
  • settings.numberInputBorder#131A1F
  • settings.textInputBorder#131A1F
  • sideBar.background#171e23ff
  • sideBar.border#0f161bff
  • sideBar.dropBackground#84a8cc60
  • sideBar.foreground#a5c9ed60
  • sideBarSectionHeader.background#171e23ff
  • sideBarSectionHeader.border#a5c9ed20
  • sideBarSectionHeader.foreground#95b5d560
  • sideBarTitle.foreground#84a8cc60
  • statusBar.background#171e23ff
  • statusBar.border#a5c9ed20
  • statusBar.debuggingBackground#7eb1e4ff
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#a5c9ed60
  • statusBar.noFolderBackground#6699cc80
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#6699cc80
  • statusBarItem.hoverBackground#6699cc40
  • statusBarItem.prominentBackground#6699cc80
  • statusBarItem.prominentHoverBackground#6699cc40
  • statusBarItem.remoteBackground#171e23ff
  • statusBarItem.remoteForeground#6699CC
  • tab.activeBackground#1b2227ff
  • tab.activeBorder#1b2227ff
  • tab.activeBorderTop#6699CC
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#6699CC
  • tab.border#030a0fff
  • tab.hoverBackground#6699cc10
  • tab.hoverBorder#f5cea8c0
  • tab.hoverForeground#6699cca0
  • tab.inactiveBackground#171e23ff
  • tab.inactiveForeground#ffffff80
  • tab.inactiveModifiedBorder#f5cea8ff
  • tab.lastPinnedBorder#84a8cc40
  • tab.unfocusedActiveBorder#1b2227ff
  • tab.unfocusedActiveBorderTop#6699cca0
  • tab.unfocusedActiveForeground#ffffffa0
  • tab.unfocusedActiveModifiedBorder#6699cca0
  • tab.unfocusedHoverForeground#6699cc60
  • tab.unfocusedInactiveBackground#171e23ff
  • tab.unfocusedInactiveForeground#ffffff40
  • tab.unfocusedInactiveModifiedBorder#f5cea8a0
  • terminal.ansiBlack#3F3F3F
  • terminal.ansiBlue#7CB8BB
  • terminal.ansiBrightBlack#4F4F4F
  • terminal.ansiBrightBlue#7CB8BB
  • terminal.ansiBrightCyan#93E0E3
  • terminal.ansiBrightGreen#5F7F5F
  • terminal.ansiBrightMagenta#DC8CC3
  • terminal.ansiBrightRed#DCA3A3
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#E0CF9F
  • terminal.ansiCyan#93E0E3
  • terminal.ansiGreen#5F7F5F
  • terminal.ansiMagenta#DC8CC3
  • terminal.ansiRed#DCA3A3
  • terminal.ansiWhite#DCDCCC
  • terminal.ansiYellow#E0CF9F
  • terminal.background#171e23ff
  • terminal.border#030a0fff
  • terminal.foreground#4c5e6f
  • terminal.selectionBackground#6699cc40
  • terminalCursor.foreground#4c5e6f
  • textBlockQuote.border#6699cc80
  • textCodeBlock.background#6699cc80
  • textLink.activeForeground#7eb1e4ff
  • textLink.foreground#5e91c4ff
  • textSeparator.foreground#6699cc80
  • titleBar.activeBackground#0b1217ff
  • titleBar.activeForeground#a5c9ed60
  • titleBar.border#030a0fff
  • titleBar.inactiveBackground#131a1fff
  • titleBar.inactiveForeground#6589ad60
  • welcomePage.background#131A1F
  • welcomePage.buttonBackground#171e23ff
  • welcomePage.buttonHoverBackground#1b2227ff
  • welcomePage.progress.foreground#6699CC
  • window.activeBorder#84a8cc60
  • window.inactiveBorder#6589ad60

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6c906bee—
meta.preprocessor, punctuation.definition.preprocessor#c59d76ee—
keyword.other.phpdoc#3f7337ee—
punctuation.definition.comment, punctuation.whitespace.comment#83ae84ee—
punctuation.section.embedded#6e6e6eee—
source.ruby.embedded#ac7879ee—
keyword.other.directive#bcbcbcee—
keyword.other.directive.line-number——
string, string.unquoted#b56b6bee—
string.unquoted.heredoc#b5b5b5ee—
support.constant.numeric, constant.numeric#6cb5b4ee—
constant, support.constant#b5b590ee—
constant.character, constant.other#ac7879ee—
variable.other.constant#b5b590ee—
keyword, keyword.control, meta.selector.css, entity.other.attribute-name#dab591ee—
variable.other.readwrite.instance#dab591ee—
entity.name.module, support.other.module#db6600ee—
keyword.operator#c9c9c9ee—
keyword.operator.symbol.infix.floating-point——
source.ocaml, keyword.operator.symbol.prefix.floating-point——
storage.type, storage.modifier, support.type#dbd780ee—
entity.name.class.variant#2b6683ee—
entity.other#b5b5b5ee—
entity.other.inherited-class#b67209ee—
storage.type.user-defined, meta.property-list#dbbe00ee—
entity.name.type, entity.name.type.class, entity.other.attribute-name.class.css, support.class, entity.name.class#d0830dee—
invalid#dbaccbee—
entity.other.attribute-name.html#b5b691ee—
entity.name.tag#b5b691ee—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#6e6e6eee—
support.function.construct#dab591ee—
punctuation.definition.variable#dab591ee—
meta.function-name, entity.name.function#dbd96cee—
support.function#a79b06ee—
meta.brace#5eaeacee—
punctuation.definition.string.begin, punctuation.definition.string.end#b5b5b5ee—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html#dab490ee—
entity.name.tag.yaml#dab591ee—
punctuation.definition.entry#b5b5b5ee—
keyword.other.DML.sql, keyword.other.data-integrity.sql#989898ee—
source.sql, constant.other.database-name.sql, constant.other.table-name.sql, keyword.operator.star#79a0d0ee—
source.diff, meta.diff.comment, meta.toc-list.comment.diff#dbdbdbee—
meta.diff.header.from-file#aa5859ee—
meta.diff.header.to-file#48956fee—
meta.diff.range.unified#71afb2ee—
markup.inserted.diff#48956fee—
markup.deleted.diff#aa5859ee—
string.regexp#a7562cee—
string.regexp.arbitrary-repitition#815247ee—
punctuation.definition.arbitrary-repitition#dbdbdbee—
string.regexp.character-class#ab7367ee—
punctuation.definition.character-class#dbdbdbee—
markup.raw.inline.markdown#dab591ee—
markup.heading.markdown, punctuation.definition.heading#dbdbdbee—
markup.list#bcbcbcee—
sublimelinter.mark.warning#bb9800ee—
sublimelinter.gutter-mark#dbdbdbee—
sublimelinter.mark.error#af0d00ee—
doctype#a8aeacee—
entity#a8aeacee—
hyperlink#3d7483ee—
invisibles#dbdbdbee—
level0#102f10ee—
level1#10102fee—
level10#2c4b4bee—
level2#2f2f10ee—
level3#2f102fee—
level4#102f2fee—
level5#4b2c2cee—
level6#2c4b2cee—
level7#2c2c4bee—
level8#4b4b2cee—
level9#4b2c4bee—
markup#b2b2b2ee—
match#dbac4eee—
meta#9d9083ee—
none#624e54ee—
property#6c7e97ee—
punctuation#dbb152ee—
source#bababaee—
storage#632c4bee—
support#c788ccee—
text#bababaee—
variable#9d8d7eee—
wordhighlight#5ddb00ee—