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#313435
  • activityBar.activeBorder#fffd7b
  • activityBar.background#000000
  • activityBar.foreground#f7ff88
  • activityBar.inactiveForeground#9affe1
  • activityBarBadge.background#4d84a8
  • activityBarBadge.foreground#f4ff8d
  • badge.background#67d5f7
  • badge.foreground#f1f082
  • button.background#4d5558
  • button.foreground#fff679
  • commandCenter.activeBackground#000000
  • commandCenter.activeBorder#97ffff
  • commandCenter.activeForeground#fff89a
  • commandCenter.background#000000
  • commandCenter.border#ecfc90
  • commandCenter.foreground#ecfc90
  • commandCenter.inactiveForeground#b3fcff
  • debugExceptionWidget.background#00212B
  • debugExceptionWidget.border#88f6fa
  • debugIcon.startForeground#79fbff
  • debugToolBar.background#00212B
  • descriptionForeground#fdff8a
  • diffEditor.insertedLineBackground#6ceeee2d
  • diffEditor.insertedTextBackground#81d4c13f
  • diffEditor.removedLineBackground#0e0849a1
  • diffEditor.removedTextBackground#56e0bd3f
  • diffEditorOverview.insertedForeground#0e0f55
  • diffEditorOverview.removedForeground#ff0000
  • dropdown.background#3a3a3a
  • dropdown.border#b4f4ff
  • dropdown.foreground#f3fd92
  • editor.background#191e20
  • editor.findMatchBackground#f6f892
  • editor.findMatchForeground#80d5f7
  • editor.findMatchHighlightBackground#546263
  • editor.findMatchHighlightForeground#00e1ff
  • editor.foreground#fdfb89
  • editor.lineHighlightBackground#282b2c
  • editor.lineHighlightBorder#eaf17f
  • editor.selectionBackground#35c2e9
  • editor.selectionForeground#fff200
  • editor.selectionHighlightBackground#005A6FAA
  • editor.wordHighlightBackground#004454AA
  • editor.wordHighlightStrongBackground#005A6FAA
  • editorBracketHighlight.foreground1#ffffff
  • editorBracketHighlight.foreground2#84e0ec
  • editorBracketHighlight.foreground3#72898b
  • editorCursor.foreground#ebf37e
  • editorGroup.border#00212B
  • editorGroup.dropBackground#2AA19844
  • editorGroupHeader.tabsBackground#181818
  • editorHoverWidget.background#4d727c
  • editorHoverWidget.foreground#000000
  • editorIndentGuide.activeBackground#C3E1E180
  • editorIndentGuide.background#93A1A180
  • editorLineNumber.activeForeground#49d6e9
  • editorLineNumber.dimmedForeground#777577
  • editorLineNumber.foreground#9e9e9e
  • editorWhitespace.foreground#93A1A180
  • editorWidget.background#18191a
  • editorWidget.border#fdfb89
  • errorForeground#ffeaea
  • extensionButton.background#2e96a8d3
  • extensionButton.foreground#fff679
  • extensionButton.prominentBackground#000000
  • extensionButton.prominentForeground#fff679
  • extensionIcon.starForeground#fafc81
  • extensionIcon.verifiedForeground#a1fff2
  • focusBorder#96f3eb
  • gitDecoration.modifiedResourceForeground#fff344
  • gitDecoration.stageModifiedResourceForeground#f2ffab
  • icon.foreground#fff788
  • input.background#18191a
  • input.border#f7f8a5
  • input.foreground#9deafd
  • input.placeholderForeground#fdff9f
  • inputOption.activeBackground#000000
  • inputOption.activeBorder#f7f8a5
  • inputOption.activeForeground#ffffff
  • inputValidation.errorBackground#571b26
  • inputValidation.errorBorder#a92049
  • inputValidation.infoBackground#052730
  • inputValidation.infoBorder#363b5f
  • inputValidation.warningBackground#f1df39
  • inputValidation.warningBorder#f1e640
  • list.activeSelectionBackground#000000
  • list.dropBackground#798b8f88
  • list.focusForeground#ffea00
  • list.highlightForeground#fdff8a
  • list.hoverBackground#0091abd3
  • list.hoverForeground#f7ffab
  • list.inactiveSelectionBackground#00000088
  • menu.background#5a82b1
  • menu.foreground#e9f865
  • menu.selectionBackground#5bacc0
  • menu.selectionBorder#a4fcff
  • menu.selectionForeground#f8ff95
  • minimap.selectionHighlight#8ac4eb
  • notificationCenter.border#aafffb
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#f0ff9b
  • notifications.background#000000
  • notifications.border#fffd9b
  • notifications.foreground#98ffff
  • notificationsErrorIcon.foreground#ff0000
  • notificationsInfoIcon.foreground#f8ff90
  • notificationsWarningIcon.foreground#f7f593
  • notificationToast.border#fffda1
  • panel.background#5a82b1
  • panel.border#f6ffa4
  • panelSection.dropBackground#ffffff
  • panelSectionHeader.background#ffffff
  • panelTitle.activeBorder#fffeaa
  • panelTitle.activeForeground#7bd4fd
  • panelTitle.inactiveForeground#fdff7f
  • peekView.border#2b2b4a
  • peekViewEditor.background#10192c
  • peekViewEditor.matchHighlightBackground#7744AA40
  • peekViewResult.background#000000
  • peekViewTitle.background#00212B
  • pickerGroup.border#2AA19899
  • pickerGroup.foreground#2AA19899
  • ports.iconRunningProcessForeground#85f7ff
  • progressBar.background#6c7a83
  • quickInputList.focusBackground#67b1c7
  • scmGraph.historyItemBaseRefColor#75c8ff
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#5dc8f3
  • scrollbarSlider.background#f8fa8d
  • scrollbarSlider.hoverBackground#9df0ff
  • selection.background#00000099
  • sideBar.background#1a1919
  • sideBar.border#f0ff9d
  • sideBar.foreground#acf3ff
  • sideBarSectionHeader.background#039689
  • sideBarSectionHeader.foreground#f8ff97
  • sideBarStickyScroll.border#ffffff
  • sideBarTitle.background#070707
  • sideBarTitle.foreground#96f1f1
  • statusBar.background#fdff90
  • statusBar.debuggingBackground#00212B
  • statusBar.foreground#14abda
  • statusBar.noFolderBackground#00212B
  • statusBarItem.prominentBackground#11c6e6
  • statusBarItem.prominentHoverBackground#1298bd
  • statusBarItem.remoteBackground#197da5
  • statusBarItem.remoteForeground#f8ff96
  • statusBarItem.remoteHoverForeground#9fe9ff
  • tab.activeBackground#5c93a8
  • tab.activeBorderTop#e9fa8b
  • tab.activeForeground#f3ff85
  • tab.activeModifiedBorder#f1ff9f
  • tab.border#eeff91
  • tab.inactiveBackground#141414
  • tab.inactiveForeground#31d4fd
  • tab.inactiveModifiedBorder#003847
  • tab.lastPinnedBorder#4de8f344
  • tab.unfocusedActiveBackground#7c7c7c
  • tab.unfocusedActiveForeground#ffffff
  • tab.unfocusedActiveModifiedBorder#eeff91
  • tab.unfocusedInactiveBackground#0d022c
  • tab.unfocusedInactiveForeground#ffffff
  • terminal.ansiBlue#c1e6ff
  • terminal.ansiBrightBlue#fcf481
  • terminal.ansiBrightCyan#95e2f5
  • terminal.ansiBrightGreen#1dcaff
  • terminal.ansiBrightRed#00ccff
  • terminal.ansiBrightYellow#dfdfdf
  • terminal.ansiCyan#fff23f
  • terminal.ansiGreen#ffffff
  • terminal.ansiMagenta#24deff
  • terminal.ansiRed#ffffff
  • terminal.ansiYellow#6fd5ee
  • terminal.background#2b2f30
  • terminal.foreground#fff178
  • textLink.activeForeground#b1fff8
  • textLink.foreground#ffffff
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#fdf7a1
  • titleBar.border#c2f1ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#839496
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#839496
comment#586E75italic
string#ffffff
string.regexp#b9b5b5
constant.numeric#d1d1d1
variable.language, variable.other#f2fdff
keyword#f6ffa3bold
storage#f8ff96bold
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#ffffff
entity.name.function#6fddff
punctuation.definition.variable#ffffff
punctuation.section.embedded.begin, punctuation.section.embedded.end#DC322F
constant.language, meta.preprocessor#ffffff
support.function.construct, keyword.other.new#c2c2c2
constant.character, constant.other#fffc57
entity.other.inherited-class#85d8ff
entity.name.tag#b8b8b8
punctuation.definition.tag#586E75
entity.other.attribute-name#93A1A1
support.function#8bcbff
punctuation.separator.continuation#fdff90
support.type, support.class#edf7ae
support.type.exception#a2b3af
invalid#DC322F
meta.diff, meta.diff.header#2ddab4italic
markup.deleted#DC322F
markup.changed#CB4B16
markup.inserted#2fa57d
markup.quote#eefd8f
markup.list#68e6f7
markup.bold, markup.italic#83faf4
markup.boldbold
markup.italicitalic
markup.strikethrough#ff0000strikethrough
markup.inline.raw#b0f1fa
markup.heading#e0f38dbold
markup.heading.setext#1c97bd
source.json meta.structure.dictionary.json support.type.property-name.json#f3fd95
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#95edfd
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#c7e2de
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#f3fd95
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#94dcf1
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#3bd2e6
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#48dbbb
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#eeff8d
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#0a0946
entity.name.function, support.function, support.constant.handlebars#c5eaf3
entity.name.function.python#83d8ffbold
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other, meta.item-access.arguments.python, #9ce8ff
keyword.control#e8fc8f
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, keyword.operator.new.ts, meta.object-literal.key.ts#ddf0ff
comment.line.double-slash.cs, comment.block.cs, punctuation.definition.comment.json.comments, comment.line.double-slash.js, meta.structure.array.json.comments, meta.structure.dictionary.value.json.comments, meta.structure.dictionary.json.comments, source.json.comments, comment.block.css, comment.block.html, meta.property-list.css, comment.line.number-sign.python, punctuation.definition.comment.cs, comment.block.documentation.cs, punctuation.definition.comment.ts, comment.line.double-slash.ts, comment.line.scss, comment.block.ts, comment.block.scss, comment.block.documentation.ts, comment.line.double-slash.tsx, comment.block.tsx#626a79
support.variable, constant.numeric, support.constant#ffffffbold
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, source.cs storage.type#f7ffae
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, variable.object.property.ts#97fceb
meta.function-call.generic.python#b9efff
support.type#d4d4d4
storage.type#a2fad8
constant.character.escape#54fff6
variable.language#f7f89aitalic
string.quoted.single, string.quoted.triple, string.quoted.other#f9ffa1
variable, meta.definition.variable.name, support.variable#acf5ff
meta.structure.dictionary.key.python#8efff6
*url*, *link*, *uri*#ffffffitalic underline