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#16275736
  • activityBar.activeBorder#50A7FF
  • activityBar.activeFocusBorder#ffffff
  • activityBar.background#080808
  • activityBar.border#000000
  • activityBar.dropBorder#50A7FF
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#8f8f8f
  • activityBarBadge.background#1e5686
  • activityBarBadge.foreground#ffffff
  • badge.background#1e5686
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#eeeeee
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#eeeeee
  • breadcrumb.foreground#999999
  • breadcrumbPicker.background#050505
  • button.background#35709b
  • button.border#00000000
  • button.foreground#ffffff
  • button.hoverBackground#259aff
  • button.secondaryBackground#222222
  • button.secondaryForeground#eeeeee
  • button.secondaryHoverBackground#333333
  • checkbox.background#000000
  • checkbox.border#00000000
  • checkbox.foreground#cccccc
  • debugConsole.errorForeground#df4545
  • debugConsole.infoForeground#ffffff
  • debugConsole.sourceForeground#1cc0f1
  • debugConsole.warningForeground#ffff00
  • debugConsoleInputIcon.foreground#eb15ff
  • debugExceptionWidget.background#080808
  • debugExceptionWidget.border#00000000
  • debugIcon.breakpointForeground#ee2a10
  • debugToolBar.background#1a1a1a
  • debugToolBar.border#00000000
  • diffEditor.border#00000000
  • diffEditor.insertedTextBackground#6ea33838
  • diffEditor.insertedTextBorder#75ab5712
  • diffEditor.removedTextBackground#d33b3b3e
  • diffEditor.removedTextBorder#8a414122
  • diffEditorGutter.insertedLineBackground#287a1d28
  • diffEditorGutter.removedLineBackground#ff000028
  • dropdown.background#111111
  • dropdown.border#111111
  • dropdown.foreground#ffffff
  • dropdown.listBackground#181818
  • editor.background#000000
  • editor.findMatchBackground#113c74
  • editor.findMatchBorder#00000000
  • editor.findMatchHighlightBackground#eca7114f
  • editor.findMatchHighlightBorder#00000000
  • editor.findRangeHighlightBackground#51515130
  • editor.findRangeHighlightBorder#00000000
  • editor.foldBackground#1b25514d
  • editor.foreground#ffffff
  • editor.hoverHighlightBackground#65b2ff25
  • editor.inactiveSelectionBackground#1b1b1b
  • editor.lineHighlightBackground#42424242
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#5c5c5c0b
  • editor.rangeHighlightBorder#00000000
  • editor.selectionBackground#2c2c2c
  • editor.selectionHighlightBackground#38c1ea2a
  • editor.selectionHighlightBorder#00000000
  • editor.wordHighlightBackground#57575775
  • editor.wordHighlightBorder#00000000
  • editor.wordHighlightStrongBackground#0a4464b8
  • editor.wordHighlightStrongBorder#00000000
  • editorBracketMatch.background#7c2b2b98
  • editorBracketMatch.border#ff814f
  • editorCodeLens.foreground#aaaaaa
  • editorCursor.background#000000
  • editorCursor.foreground#e4e4e4
  • editorError.background#00000000
  • editorError.border#00000000
  • editorError.foreground#ff3520
  • editorGroup.border#2b2b2b
  • editorGroup.dropBackground#55555560
  • editorGroup.emptyBackground#131313
  • editorGroup.focusedEmptyBorder#424242
  • editorGroupHeader.border#000000
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#000000
  • editorGutter.addedBackground#8de029
  • editorGutter.background#000000
  • editorGutter.commentRangeForeground#a3a3a3
  • editorGutter.deletedBackground#c41f26
  • editorGutter.foldingControlForeground#a3a3a3
  • editorGutter.modifiedBackground#418ae8
  • editorHoverWidget.background#101010
  • editorHoverWidget.border#222222
  • editorHoverWidget.foreground#ffffff
  • editorIndentGuide.activeBackground#303030
  • editorIndentGuide.background#0f0f0f
  • editorInfo.background#00000000
  • editorInfo.border#00000000
  • editorInfo.foreground#5186b6
  • editorInlayHint.background#181818
  • editorInlayHint.foreground#a3a3a3
  • editorLineNumber.activeForeground#57a6e6
  • editorLineNumber.foreground#333333
  • editorLink.activeForeground#57a6e6
  • editorMarkerNavigation.background#000000
  • editorMarkerNavigationError.background#921b1b
  • editorMarkerNavigationInfo.background#1e5f99
  • editorMarkerNavigationWarning.background#ffed59
  • editorOverviewRuler.background#00000000
  • editorOverviewRuler.border#00000000
  • editorRuler.foreground#212121
  • editorSuggestWidget.background#111111
  • editorSuggestWidget.border#45454544
  • editorSuggestWidget.foreground#8da5b6
  • editorSuggestWidget.highlightForeground#15c0f5
  • editorSuggestWidget.selectedBackground#1b2336
  • editorWarning.background#00000000
  • editorWarning.border#00000000
  • editorWarning.foreground#e6a732
  • editorWhitespace.foreground#000000
  • editorWidget.background#141414
  • editorWidget.foreground#ffffff
  • editorWidget.resizeBorder#87cbfdc7
  • focusBorder#00000000
  • foreground#cecece
  • gitDecoration.addedResourceForeground#a1ffb2
  • gitDecoration.conflictingResourceForeground#95a5ff
  • gitDecoration.deletedResourceForeground#ff6e6e
  • gitDecoration.ignoredResourceForeground#8c8c8c
  • gitDecoration.modifiedResourceForeground#b1e7fd
  • gitDecoration.stageDeletedResourceForeground#c74e39
  • gitDecoration.stageModifiedResourceForeground#4dafd6
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#73c991
  • icon.foreground#cecece
  • input.background#161616
  • input.border#00000000
  • input.foreground#ffffff
  • input.placeholderForeground#797979
  • inputOption.activeBackground#1e3366
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#242424
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#0a0a0a
  • list.focusBackground#1e3e668d
  • list.focusForeground#ffffff
  • list.highlightForeground#50A7FF
  • list.hoverBackground#0f0f0f
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#111111
  • list.inactiveSelectionForeground#ffffff
  • listFilterWidget.background#222222
  • listFilterWidget.noMatchesOutline#ab282874
  • listFilterWidget.outline#00000000
  • menu.background#161616
  • menu.border#000000
  • menu.foreground#ffffff
  • menu.selectionBackground#000000
  • menu.selectionBorder#000000
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#474747
  • menubar.selectionBackground#222222
  • menubar.selectionBorder#00000000
  • menubar.selectionForeground#ffffff
  • merge.commonContentBackground#282828
  • merge.commonHeaderBackground#383838
  • merge.currentContentBackground#27403B
  • merge.currentHeaderBackground#367366
  • merge.incomingContentBackground#28384B
  • merge.incomingHeaderBackground#395F8F
  • minimap.background#000000
  • minimap.errorHighlight#ff3520
  • minimap.findMatchHighlight#2c4363
  • minimap.selectionHighlight#0d0d0d
  • minimap.warningHighlight#f9d081c7
  • minimapGutter.addedBackground#8de029
  • minimapGutter.deletedBackground#c41f26
  • minimapGutter.modifiedBackground#418ae8
  • notebook.cellBorderColor#1b1b1b
  • notebook.cellEditorBackground#050505
  • notebook.cellInsertionIndicator#2a529c
  • notebook.cellStatusBarItemHoverBackground#2a529c
  • notebook.cellToolbarSeparator#6d6d6d
  • notebook.focusedEditorBorder#6d6d6d
  • notebook.inactiveFocusedCellBorder#000000
  • notebook.inactiveSelectedCellBorder#ff0000
  • notebook.outputContainerBackgroundColor#0e0e0e
  • notebook.selectedCellBackground#ff0000
  • notebook.selectedCellBorder#ff0000
  • notebook.symbolHighlightBackground#ff0000
  • notebookScrollbarSlider.hoverBackground#2b2b2b
  • notebookStatusErrorIcon.foreground#ca3838
  • notebookStatusRunningIcon.foreground#ff0000
  • notebookStatusSuccessIcon.foreground#48da2a
  • notificationCenter.border#00000000
  • notificationCenterHeader.background#060606
  • notificationCenterHeader.foreground#eaeaea
  • notifications.background#0a0a0a
  • notifications.border#0d0d0d00
  • notifications.foreground#ffffff
  • notificationsErrorIcon.foreground#ff3854
  • notificationsInfoIcon.foreground#7EE2FF
  • notificationsWarningIcon.foreground#ffed59
  • notificationToast.border#00000000
  • panel.background#000000
  • panel.border#303030
  • panel.dropBorder#4baede
  • panelInput.border#cccccc
  • panelSection.border#21212158
  • panelSection.dropBackground#58585856
  • panelSectionHeader.background#0e0e0e
  • panelSectionHeader.border#00ff62
  • panelSectionHeader.foreground#7EE2FF
  • panelTitle.activeBorder#4baede
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#909090
  • peekView.border#324a77
  • peekViewEditor.background#070707
  • peekViewEditor.matchHighlightBackground#a579132f
  • peekViewEditor.matchHighlightBorder#00000000
  • peekViewEditorGutter.background#070707
  • peekViewResult.background#070707
  • peekViewResult.fileForeground#b0f0ff
  • peekViewResult.lineForeground#ffffff
  • peekViewResult.matchHighlightBackground#df521070
  • peekViewResult.selectionBackground#ffffff25
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#070707
  • peekViewTitleDescription.foreground#a3a3a3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#4f4f4f58
  • pickerGroup.foreground#87cbfdc7
  • progressBar.background#4baede
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#e7e7e7
  • scrollbarSlider.background#313131
  • scrollbarSlider.hoverBackground#757575
  • selection.background#333333
  • settings.checkboxBackground#202020
  • settings.checkboxBorder#000000
  • settings.checkboxForeground#ffffff
  • settings.dropdownBackground#202020
  • settings.dropdownBorder#000000
  • settings.dropdownForeground#ffffff
  • settings.dropdownListBorder#124a64
  • settings.focusedRowBackground#0f0f0f
  • settings.focusedRowBorder#267ea1
  • settings.headerBorder#202020
  • settings.headerForeground#5db1ff
  • settings.modifiedItemIndicator#03b8ff
  • settings.numberInputBackground#202020
  • settings.numberInputBorder#000000
  • settings.numberInputForeground#ffffff
  • settings.rowHoverBackground#0f0f0f
  • settings.sashBorder#202020
  • settings.textInputBackground#202020
  • settings.textInputBorder#000000
  • settings.textInputForeground#ffffff
  • sideBar.background#050505
  • sideBar.border#303030
  • sideBar.dropBackground#53535363
  • sideBar.foreground#bebebe
  • sideBarSectionHeader.background#1d1d1d36
  • sideBarSectionHeader.border#3b3b3b36
  • sideBarSectionHeader.foreground#50A7FF
  • sideBarTitle.foreground#ffffff
  • statusBar.background#000000
  • statusBar.border#303030
  • statusBar.debuggingBackground#aa4003
  • statusBar.debuggingBorder#000000
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#000000
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderBorder#303030
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#ffffff25
  • statusBarItem.hoverBackground#427faa41
  • statusBarItem.remoteBackground#000000
  • statusBarItem.remoteForeground#5fcbff
  • tab.activeBackground#0e0e0e
  • tab.activeBorder#4baede
  • tab.activeBorderTop#00000000
  • tab.activeForeground#ffffff
  • tab.border#00000000
  • tab.hoverBackground#171717
  • tab.hoverBorder#00000000
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#999999
  • terminal.ansiBlack#3d3d3d
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#f4f4f4
  • terminal.ansiYellow#e5e510
  • terminal.background#000000
  • terminal.border#21212158
  • terminal.dropBackground#2e2e2e93
  • terminal.foreground#ffffff
  • terminal.selectionBackground#ffffff
  • terminal.tab.activeBorder#03b8ff
  • terminalCursor.background#1d1d1d
  • terminalCursor.foreground#ffffff
  • textCodeBlock.background#1d335a
  • textLink.foreground#5EB3FF
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#ffffff
  • titleBar.border#000000
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#6b6b6b
  • toolbar.activeBackground#7e7e7e
  • toolbar.hoverBackground#464646
  • toolbar.hoverOutline#00000000
  • tree.indentGuidesStroke#8f8f8f
  • tree.tableColumnsBorder#494949
  • tree.tableOddRowsBackground#111111
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison#cf6ecd—
support.constant.edge#a584ff—
variable.parameter.function#e4e4e4—
comment markup.link#658595—
markup.changed.diff#1babff—
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#ff6176—
markup.inserted.diff#a0e65c—
markup.deleted.diff#cf6ecd—
storage.type.annotation.java, storage.type.object.array.java#1babff—
meta.definition.variable.name.java#cf6ecd—
support.constant.property-value.scss,support.constant.property-value.css#58f5ab—
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#58f5ab—
punctuation.separator.list.comma.css#e4e4e4—
support.type.vendored.property-name.css#f9c64e—
entity.name.type.module#1babff—
support.type.object.dom#f9c64e—
support.variable.dom,support.variable.property.dom#cf6ecd—
punctuation.separator.delimiter#e4e4e4—
token.package.keyword#a584ff—
token.package#e4e4e4—
entity.name.type.namespace#1babff—
entity.name.class.identifier.namespace.type#1babff—
entity.name.type#1babff—
control.elements#58f5ab—
keyword.other.special-method#ff6176—
token.storage#a584ff—
token.storage.type.java#ff00ff—
support.constant.property-value#e4e4e4—
support.constant.font-name#58f5ab—
entity.other.inherited-class#1babff—
constant.other.symbol#f9c64e—
constant.numeric#58f5ab—
entity.other.attribute-name.class.css#58f5ab
meta.selector#a584ff—
markup.heading#cf6ecd—
markup.heading punctuation.definition.heading, entity.name.section#ff6176—
markup.bold,todo.bold#58f5ab—
punctuation.definition.bold#1babff—
markup.italic, punctuation.definition.italic,todo.emphasis#a584ff—
emphasis md#a584ff—
markup.heading.setext#e4e4e4—
punctuation.definition.bold.markdown#58f5ab—
markup.inline.raw.markdown#a0e65c—
punctuation.definition.list.markdown#cf6ecd—
beginning.punctuation.definition.list.markdown#cf6ecd—
punctuation.section.embedded, variable.interpolation#cf6ecd—
punctuation.section.embedded.begin,punctuation.section.embedded.end#a584ff—
source.json meta.structure.dictionary.json > string.quoted.json#cf6ecd—
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#cf6ecd—
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#71d6d6—
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#f9c64e—
function.brace#e4e4e4—
function.parameter.ruby, function.parameter.cs#e4e4e4—
constant.language.symbol.ruby#f9c64e—
rgb-value#f9c64e—
inline-color-decoration rgb-value#58f5ab—
less rgb-value#58f5ab—
selector.sass#cf6ecd—
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#1babff—
block.scope.end,block.scope.begin#e4e4e4—
storage.type.cs#1babff—
entity.name.variable.local.cs#cf6ecd—
token.info-token#ff6176—
token.warn-token#58f5ab—
token.error-token#f44747—
token.debug-token#a584ff—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#a584ff—
meta.template.expression#e4e4e4—
support.type.type.flowtype#ff6176—
support.type.primitive#1babff—
meta.property.object#cf6ecd—
variable.parameter.function.js#cf6ecd—
keyword.other.template.begin#a0e65c—
keyword.other.template.end#a0e65c—
keyword.other.substitution.begin#a0e65c—
keyword.other.substitution.end#a0e65c—
punctuation.quasi.element#a584ff—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#f9c64e—
text.variable, text.bracketed#cf6ecd—
comment#658595—
string#58F5AB—
punctuation.definition.string.begin,punctuation.definition.string.end#58F5AB—
variable.other.object.property#955ae7—
storage#4e79f0—
entity.name.function, meta.require, support.function.any-method, variable.function#ff6176—
storage.type.annotation.java#58F5AB—
variable#8bd4ff—
entity.name.tag#2d93f3—
constant#2ADEDE—
keyword#2ADEDE—
entity.other.attribute-name#2ADEDE—
storage.modifier.import.java#ffffff—
storage.type.java,storage.type.generic.java#1babff—
support.class, entity.name.type.class#1babff—
variable.language#0e95be—
keyword.other.unit#6d6fca—
meta.directive.vue entity.other.attribute-name#49e951—
storage.type.built-in#a584ff—
storage.modifier.specifier.functional.post-parameters#a584ff—
support.type.property-name.json#8edfff—
support.type.property-name.json punctuation#8edfff—
constant.character.escape#f9c64e—
keyword.operator#ffffff—
keyword.operator.type#ff765e—
keyword.operator.assignment#f9c64e—
keyword.operator.assignment.compound#ff765e—
keyword.operator.logical#f9c64e—
keyword.operator.bitwise#8df94e—
keyword.operator.comparison#f9c64e—
keyword.operator.relational#f9c64e—
keyword.operator.arithmetic#f9c64e—
keyword.operator.decrement#f94e4e—
keyword.operator.increment#8df94e—
keyword.operator.new#8df94e—
keyword.operator.delete#f94e4e—
keyword.operator.expression.typeof#a584ff—
keyword.operator.channel#a584ff—
keyword.operator.module#ff0000—
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.expression.void#a584ff—
support.function#f9c64e—
entity.name.section.markdown#8edfff—
punctuation.definition.heading.markdown#cf6ecd—
punctuation.definition.list.begin.markdown#ebc90a—
markup.inline.raw.string.markdown#3affc4—
markup.underline.link.markdown,markup.underline.link.image.markdown#8edfff—
string.other.link.title.markdown,string.other.link.description.markdown#61ff76—
punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.metadata.markdown, punctuation.definition.markdown#ebc90a—
fenced_code#8edfff—
markup.fenced_code.block.markdown#b4b3ff—
source#ffffff—
support.type#ffffff—
entity.name.section#FF6176—
source.ini#2d93f3—
keyword.control#a584ff—
meta.function-call.generic#2389ff—