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#272727
  • activityBar.activeBorder#50A7FF
  • activityBar.activeFocusBorder#ffffff
  • activityBar.background#1d1d1d
  • activityBar.border#00000000
  • 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#1d1d1d
  • 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#272727
  • editor.findMatchBackground#113c74
  • editor.findMatchBorder#00000000
  • editor.findMatchHighlightBackground#eca7114f
  • editor.findMatchHighlightBorder#5e5e5e
  • 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#171717
  • 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#202020
  • editorGroup.focusedEmptyBorder#424242
  • editorGroupHeader.border#00000000
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#181818
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#8de029
  • editorGutter.background#272727
  • editorGutter.commentRangeForeground#a3a3a3
  • editorGutter.deletedBackground#c41f26
  • editorGutter.foldingControlForeground#a3a3a3
  • editorGutter.modifiedBackground#418ae8
  • editorHoverWidget.background#101010
  • editorHoverWidget.border#222222
  • editorHoverWidget.foreground#ffffff
  • editorIndentGuide.activeBackground#4d4d4d
  • editorIndentGuide.background#313131
  • editorInfo.background#00000000
  • editorInfo.border#00000000
  • editorInfo.foreground#5186b6
  • editorInlayHint.background#181818
  • editorInlayHint.foreground#a3a3a3
  • editorLineNumber.activeForeground#57a6e6
  • editorLineNumber.foreground#9c9c9c
  • 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#474747
  • 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#101010
  • 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#474747
  • 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#2b2b2b
  • 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#181818
  • notificationCenterHeader.foreground#eaeaea
  • notifications.background#181818
  • notifications.border#0d0d0d00
  • notifications.foreground#ffffff
  • notificationsErrorIcon.foreground#ff3854
  • notificationsInfoIcon.foreground#7EE2FF
  • notificationsWarningIcon.foreground#ffed59
  • notificationToast.border#00000000
  • panel.background#181818
  • panel.border#181818
  • 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#1b1b1b
  • peekViewEditor.matchHighlightBackground#a579132f
  • peekViewEditor.matchHighlightBorder#00000000
  • peekViewEditorGutter.background#1b1b1b
  • peekViewResult.background#141414
  • peekViewResult.fileForeground#b0f0ff
  • peekViewResult.lineForeground#ffffff
  • peekViewResult.matchHighlightBackground#df521070
  • peekViewResult.selectionBackground#ffffff25
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#474747
  • 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#181818
  • sideBar.border#181818
  • sideBar.dropBackground#53535363
  • sideBar.foreground#bebebe
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#3b3b3b36
  • sideBarSectionHeader.foreground#50A7FF
  • sideBarTitle.foreground#ffffff
  • statusBar.background#272727
  • statusBar.border#303030
  • statusBar.debuggingBackground#aa4003
  • statusBar.debuggingBorder#00000000
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#272727
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#171717
  • statusBar.noFolderBorder#00000000
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#ffffff25
  • statusBarItem.hoverBackground#427faa41
  • statusBarItem.remoteBackground#272727
  • statusBarItem.remoteForeground#5fcbff
  • tab.activeBackground#333333
  • tab.activeBorder#4baede
  • tab.activeBorderTop#00000000
  • tab.activeForeground#ffffff
  • tab.border#00000000
  • tab.hoverBackground#4b4b4b
  • tab.hoverBorder#00000000
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#242424
  • 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#242424
  • 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#181818
  • titleBar.activeForeground#ffffff
  • titleBar.border#00000000
  • titleBar.inactiveBackground#181818
  • 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