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#0e0b13ff
  • activityBar.border#8079ce23
  • activityBar.foreground#e3e1e8e4
  • activityBar.inactiveForeground#e0dfe127
  • activityBarBadge.background#a3d3dc
  • activityBarBadge.foreground#c3e88dff
  • badge.background#0b0b19c9
  • badge.foreground#82aaffd4
  • breadcrumb.activeSelectionForeground#ffcb6bff
  • breadcrumb.background#0e0b13ff
  • breadcrumb.focusForeground#e6e2d1ff
  • breadcrumb.foreground#e0e0e03c
  • button.background#443e5040
  • button.border#8079ce13
  • button.foreground#acecff7d
  • button.hoverBackground#443e5053
  • button.secondaryBackground#17161e54
  • button.secondaryBorder#8079ce23
  • button.secondaryForeground#d0d5db83
  • button.secondaryHoverBackground#2b293754
  • button.separator#6053786e
  • checkbox.border#8079ce23
  • composerPane.background#0e0a12
  • contrastBorder#30334e43
  • debugConsole.errorForeground#ff6161
  • debugConsole.infoForeground#78DCE8
  • debugConsole.sourceForeground#e5e3e8
  • debugConsole.warningForeground#FFCB6B
  • diffEditor.border#8079ce23
  • diffEditor.diagonalFill#45414cff
  • diffEditor.insertedLineBackground#1b373473
  • diffEditor.insertedTextBackground#1b373473
  • diffEditor.insertedTextBorder#47cf7ec9
  • diffEditor.removedLineBackground#3c152578
  • diffEditor.removedTextBackground#f9267213
  • diffEditorGutter.insertedLineBackground#a8ff60ff
  • diffEditorGutter.removedLineBackground#cc6666ff
  • dropdown.background#1b1629ff
  • dropdown.border#8079ce23
  • dropdown.foreground#e6e2d1ff
  • dropdown.listBackground#1b1629ff
  • editor.background#0a0a10
  • editor.compositionBorder#0b0a3cff
  • editor.findMatchBackground#cbdbe0b3
  • editor.findMatchHighlightBackground#cbdbe0b3
  • editor.findRangeHighlightBackground#cbdbe0b3
  • editor.foreground#6e6a7bff
  • editor.hoverHighlightBackground#1b162994
  • editor.inactiveSelectionBackground#2d22473d
  • editor.selectionBackground#2d22476b
  • editor.selectionHighlightBackground#cbdbe0b3
  • editor.selectionHighlightBorder#1b162994
  • editorCursor.foreground#da4c51
  • editorError.background#52000045
  • editorError.foreground#af252dff
  • editorGroup.border#8079ce23
  • editorGroupHeader.border#33333333
  • editorGroupHeader.noTabsBackground#0f0e10ff
  • editorGroupHeader.tabsBackground#0f0e10ff
  • editorGroupHeader.tabsBorder#00000044
  • editorGutter.addedBackground#a8ff60ff
  • editorGutter.deletedBackground#cc6666ff
  • editorGutter.modifiedBackground#e9c062ff
  • editorHint.border#2a2540dc
  • editorHint.foreground#404970
  • editorHoverWidget.background#0a0610ff
  • editorHoverWidget.border#45414cff
  • editorHoverWidget.foreground#cbdbe0b3
  • editorHoverWidget.highlightForeground#33b3cce6
  • editorHoverWidget.statusBarBackground#1b1629ff
  • editorIndentGuide.activeBackground1#2b2a2ddb
  • editorIndentGuide.background1#292533dc
  • editorInfo.border#8079ce23
  • editorInfo.foreground#68aab2ff
  • editorInlayHint.background#2a2540dc
  • editorInlayHint.diagonalFill#45414cff
  • editorInlayHint.foreground#404970
  • editorInlayHint.insertedLineBackground#1b373473
  • editorInlayHint.insertedTextBackground#1b373473
  • editorInlayHint.parameterBackground#2a5b7edc
  • editorInlayHint.parameterForeground#404970
  • editorInlayHint.removedLineBackground#3c152578
  • editorInlayHint.removedTextBackground#f9267213
  • editorInlayHint.typeBackground#2a2540dc
  • editorInlayHint.typeForeground#404970
  • editorLineNumber.activeForeground#dad7fc80
  • editorLineNumber.foreground#555174ff
  • editorPane.background#0e0a12
  • editorRuler.foreground#b8b1d222
  • editorStickyScroll.background#0d0b12
  • editorStickyScroll.border#2a2635
  • editorStickyScroll.shadow#00000080
  • editorSuggestWidget.background#1B1629
  • editorSuggestWidget.border#45414C
  • editorSuggestWidget.foreground#E6E2D1
  • editorSuggestWidget.selectedBackground#2A2441
  • editorWarning.foreground#d1916cff
  • editorWhitespace.foreground#272636
  • editorWidget.background#0a0610ff
  • editorWidget.border#45414cff
  • editorWidget.foreground#cbdbe0b3
  • extensionButton.foreground#acecff7d
  • extensionButton.hoverBackground#443e5053
  • extensionButton.prominentBackground#acecff7d
  • extensionButton.prominentForeground#acecff7d
  • extensionButton.prominentHoverBackground#07060dff
  • extensionButton.separator#8079ce23
  • focusBorder#8079ce23
  • foreground#dad7fc80
  • gauge.border#a099ae
  • gitDecoration.addedResourceForeground#47cf7ec9
  • gitDecoration.conflictingResourceForeground#ff7a00e6
  • gitDecoration.deletedResourceForeground#f92672ff
  • gitDecoration.ignoredResourceForeground#3b4940ff
  • gitDecoration.modifiedResourceForeground#ffd014d4
  • gitDecoration.renamedResourceForeground#47cf7ec9
  • gitDecoration.stageDeletedResourceForeground#f92672ff
  • gitDecoration.stageModifiedResourceForeground#ffd014d4
  • gitDecoration.submoduleResourceForeground#555174ff
  • gitDecoration.untrackedResourceForeground#e1d9e79e
  • icon.foreground#555174ff
  • input.background#0e0e16ff
  • input.border#30334e43
  • input.foreground#e6e2d1ff
  • input.placeholderForeground#b5b5b545
  • list.activeSelectionBackground#2a2441ff
  • list.activeSelectionForeground#e6e2d1ff
  • list.errorForeground#a84e4e
  • list.focusBackground#2a2441ff
  • list.focusForeground#e6e2d1ff
  • list.highlightForeground#ffb547ff
  • list.hoverBackground#0a0610ff
  • list.hoverForeground#cbdbe0b3
  • list.inactiveSelectionBackground#1b1629ff
  • list.inactiveSelectionForeground#e6e2d1ff
  • menu.background#1B1629
  • menu.border#8079ce23
  • menu.foreground#e3e1e8e4
  • menu.selectionBackground#2A2441
  • menu.selectionForeground#E6E2D1
  • menu.separatorBackground#45414C
  • merge.border#8079ce23
  • merge.commonContentBackground#33303aff
  • merge.commonHeaderBackground#1b1629ff
  • merge.currentContentBackground#008f93d9
  • merge.currentHeaderBackground#1b1629ff
  • merge.incomingContentBackground#c06e5bff
  • merge.incomingHeaderBackground#1b1629ff
  • minimap.background#0e0b13ff
  • minimap.errorHighlight#b70b24ff
  • minimap.findMatchHighlight#2a2540dc
  • minimap.selectionHighlight#2d22476b
  • minimap.warningHighlight#e6986bff
  • notifications.background#0a0610ff
  • notifications.border#45414cff
  • notifications.foreground#e3e1e8e4
  • panel.background#0e0b13
  • panel.border#55447723
  • panel.dropBorder#8079ce23
  • panelInput.border#26242a
  • panelSection.border#8079ce23
  • panelTitle.activeBorder#ffffffff
  • panelTitle.activeForeground#e3e1e891
  • panelTitle.border#00001153
  • panelTitle.inactiveForeground#e0e0e069
  • peekView.border#8079ce23
  • peekViewEditor.background#8079ce23
  • peekViewEditor.matchHighlightBackground#CC850040
  • peekViewResult.background#1b1629ff
  • peekViewResult.matchHighlightBackground#CC850040
  • peekViewResult.selectionBackground#2a2441ff
  • peekViewTitle.background#0b0915ff
  • peekViewTitleDescription.foreground#B5B5B5
  • peekViewTitleLabel.foreground#e6e2d1ff
  • progressBar.background#C3E88D
  • quickInput.background#0e0b13ff
  • quickInput.foreground#cbdbe0b3
  • quickInput.list.focusBackground#0a0610ff
  • quickInputList.focusBackground#0a0610ff
  • quickInputList.focusForeground#cbdbe0b3
  • sash.hoverBorder#a099ae
  • scrollbar.shadow#00000080
  • scrollbarSlider.activeBackground#45414cff
  • scrollbarSlider.background#45418c20
  • scrollbarSlider.hoverBackground#45414c80
  • settings.headerForeground#d1deea75
  • sideBar.background#0e0b13ff
  • sideBar.border#90797e13
  • sideBar.foreground#827b90cf
  • sideBarSectionHeader.background#0f0e1000
  • sideBarSectionHeader.foreground#e3e1e8b7
  • sideBarTitle.background#07060dff
  • sideBarTitle.border#8079ce23
  • sideBarTitle.foreground#e3e1e8d0
  • statusBar.background#0e0b13
  • statusBar.border#8079ce23
  • statusBar.foreground#7c7c7c8a
  • statusBar.noFolderBackground#0b0915ff
  • statusBar.noFolderForeground#4d4a56ff
  • tab.activeBackground#0f0e10
  • tab.activeBorder#00000000
  • tab.activeBorderTop#d0cfd3ff
  • tab.activeForeground#e3e1e894
  • tab.border#11002243
  • tab.hoverBackground#0f0e10
  • tab.hoverBorder#8079ce23
  • tab.hoverForeground#e3e1e8e4
  • tab.inactiveBackground#0f0e10
  • tab.inactiveForeground#b5b5b59e
  • tab.lastPinnedBorder#ffb547ff
  • tab.unfocusedActiveBackground#0f0e10
  • tab.unfocusedActiveForeground#4d4a56ff
  • terminal.ansiBlack#2a273fff
  • terminal.ansiBlue#82aaffff
  • terminal.ansiBrightBlack#3b3853ff
  • terminal.ansiBrightBlue#82aaffff
  • terminal.ansiBrightCyan#89ddffff
  • terminal.ansiBrightGreen#c3e88dff
  • terminal.ansiBrightMagenta#c792eaff
  • terminal.ansiBrightRed#ff5370ff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#ffcb6bff
  • terminal.ansiCyan#89ddffff
  • terminal.ansiGreen#c3e88dff
  • terminal.ansiMagenta#c792eaff
  • terminal.ansiRed#f07178ff
  • terminal.ansiWhite#eceff4ff
  • terminal.ansiYellow#ffcb6bff
  • terminal.background#0e0b13
  • terminal.border#8079ce13
  • terminal.dropBackground#1b1629ff
  • terminal.foreground#6464b97c
  • terminal.selectionBackground#2d22476b
  • terminalCursor.foreground#e3e1e8e4
  • textLink.activeForeground#33b3ccff
  • textLink.foreground#33b3ccff
  • textPreformat.background#1b1629ff
  • textPreformat.foreground#dad7fc80
  • textSeparator.foreground#45414c
  • titleBar.activeBackground#0e0b13
  • titleBar.activeForeground#e3e1e887
  • titleBar.border#00000000
  • titleBar.inactiveBackground#0e0b13
  • titleBar.inactiveForeground#8d8d8d90
  • tree.indentGuidesStroke#40395e53
  • widget.border#8079ce23
  • window.activeBorder#8079ce23
  • window.inactiveBorder#33333333

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source#e3e1e8c8
text#e3e1e8c8
comment#4d4a56ffitalic
punctuation.definition.comment#4d4a56ffitalic
string#b1d36dff
string.regexp#ff6188ffitalic
constant.character.escape#b1d36dff
constant.other.placeholder#b1d36dff
separator.border#8079ce23
focusBorder#0b0a3cff
gauge.border#8079ce23
sash.hoverBorder#0b0a3cff
editorGroup.border#33333333
punctuation.definition.template-expression#b1d36dff
meta.template.expression#b1d36dff
constant#33b3ccff
constant.numeric#33b3ccff
constant.language#33b3ccff
quickInput.background#0e0b13ff
quickInput.foreground#dad7fc80
quickInput.focusBackground#0e0b13ff
quickInput.focusForeground#dad7fc80
quickInputList.background#0e0b13ff
quickInputList.foreground#dad7fc80
quickInputList.focusBackground#0e0b13ff
quickInputList.focusForeground#dad7fc80
list.hoverBackground#07060dff
list.hoverForeground#dad7fc80
keyword#afd1e9cf
keyword.control#e3e1e8a8
keyword.control.conditional#e3e1e8a8
keyword.control.loop#e3e1e8a8
keyword.control.flow#e3e1e8a8
keyword.control.import#d09bd2ff
keyword.control.export#d09bd2ff
keyword.directive#f184bce6
keyword.directive.define#f184bce6
keyword.operator#e60063ff
keyword.operator.logical#e60063ff
keyword.operator.assignment#e60063ff
keyword.operator.arithmetic#e60063ff
keyword.operator.comparison#e60063ff
keyword.operator.wordlike#e60063ff
storage#829297ff
storage.type#829297ff
storage.type.function#7d7a8bff
storage.type.class#7d7a8bff
storage.modifier#829297ff
storage.type.primitive#ffb547ff
variable#e3e1e8e4
variable.other#e3e1e8e4
variable.parameter#8e8db3ffitalic
variable.language#ffa114ffitalic
variable.language.this#ffa114ffitalic
variable.language.super#ffa114ffitalic
entity.name.function#ffb547ff
support.function#ffb547ff
meta.function-call.generic#ffb547ff
entity.name.class#ffb547ffbold underline
entity.other.inherited-class#ffb547ffbold underline
support.class#ffb547ff
entity.name.type#ffb547ff
support.type#ffb547ff
support.type.builtin#ffb547ff
entity.name.tag#e0a2b1ff
support.class.component#ffb547ff
support.class.component.jsx#ffb547ff
entity.other.attribute-name#e3e1e8e4
meta.tag keyword.operator.assignment#e3e1e8e4
meta.tag.attributes#e3e1e8e4
support.type.property-name#e3e1e8e4
support.type.property-name.css#e3e1e8e4
meta.object-literal.key#e3e1e8e4
variable.other.property#e3e1e8e4
list.hoverBackground#07060dff
list.hoverForeground#dad7fc80
support.type.property-name.css#e3e1e8e4
meta.property-name#e3e1e8e4
support.constant.property-value#33b3ccff
constant.other.color#33b3ccff
meta.property-value#33b3ccff
meta.selector#ffb547ff
entity.name.tag.css#ffb547ff
entity.other.attribute-name.class.css#ffb547ff
entity.other.attribute-name.id.css#ffb547ff
punctuation#74727794
punctuation.definition#74727794
punctuation.separator#74727794
punctuation.terminator#74727794
punctuation.accessor#7a73ccff
punctuation.definition.tag#74727794
meta.brace#747277ff
meta.brace.round#747277ff
meta.brace.square#747277ff
meta.brace.curly#747277ff
entity.name.function.decorator#f184bce6
punctuation.definition.decorator#f184bce6
markup.heading#afd1e9cfbold
entity.name.section.markdown#afd1e9cfbold
markup.bold#afd1e9cfbold
markup.italic#b1d36dffitalic
markup.inline.raw#b1d36dff
markup.fenced_code.block.markdown#b1d36dff
markup.quote#4d4a56ffitalic
markup.underline.link#ffb547ffunderline
markup.inserted#47cf7ec9
markup.inserted.git_gutter#47cf7ec9
markup.changed#ffd014d4
markup.changed.git_gutter#ffd014d4
markup.deleted#f92672ff
markup.deleted.git_gutter#f92672ff
invalid#af252dff
invalid.illegal#af252dff
invalid.deprecated#4d4a56ff
comment.line.todo#f184bce6bold
comment.block.todo#f184bce6bold
comment.line.fixme#d1916cffbold
comment.block.fixme#d1916cffbold
comment.line.note#68aab2ffbold
comment.block.note#68aab2ffbold
string.quoted.docstring#4d4a56ffitalic
string.quoted.docstring.multi.python#4d4a56ffitalic
string.quoted.docstring.raw.multi.python#4d4a56ffitalic
source.yaml#e3e1e8c8
entity.name.tag.yaml#e3e1e8e4
string.unquoted.plain.out.yaml#b1d36dff
string.quoted.single.yaml#b1d36dff
meta.structure.dictionary.key.json#e3e1e8e4
support.type.property-name.json#e3e1e8e4
meta.structure.dictionary.value.json#b1d36dff
meta.property-list.css#e3e1e8e4
Apathy Theme by Cooper Maruyama - VS Code Theme