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#06060cff
  • activityBar.border#0a0a0cff
  • activityBar.foreground#656a83c2
  • activityBar.inactiveForeground#272a40c2
  • activityBarBadge.background#a3d3dcff
  • activityBarBadge.foreground#bfde93ff
  • badge.background#0c0c13ff
  • badge.foreground#767b95c2
  • breadcrumb.activeSelectionForeground#767b95c2
  • breadcrumb.background#0c0c13ff
  • breadcrumb.focusForeground#767b95c2
  • breadcrumb.foreground#767b95c2
  • button.background#24232df8
  • button.border#3d374978
  • button.foreground#b1b3b8ff
  • button.hoverBackground#4a4854f8
  • button.secondaryBackground#0c0c131a
  • button.secondaryBorder#4a4854f8
  • button.secondaryForeground#e8aadbe6
  • button.secondaryHoverBackground#0c0c13ff
  • button.separator#584b7036
  • chat.requestBackground#04041bff
  • composerPane.background#0e0a12ff
  • contrastBorder#a099ae14
  • debugConsole.errorForeground#ff6261ff
  • debugConsole.infoForeground#78dde9ff
  • debugConsole.sourceForeground#e1e3e5ff
  • debugConsole.warningForeground#ffcb6cff
  • diffEditor.diagonalFill#96a5b6ff
  • diffEditor.insertedLineBackground#040e0987
  • diffEditor.insertedTextBackground#040e0987
  • diffEditor.insertedTextBorder#a1dfb8df
  • diffEditor.removedLineBackground#0e02049e
  • diffEditor.removedTextBackground#12080a82
  • diffEditorGutter.insertedLineBackground#99d3b980
  • diffEditorGutter.removedLineBackground#b6416b8c
  • dropdown.background#0c0c13ff
  • dropdown.border#6c7a8aff
  • dropdown.foreground#767b95c2
  • dropdown.listBackground#0c0c13ff
  • editor.background#0a0a10ff
  • editor.compositionBorder#b3ebe280
  • editor.findMatchBackground#b3ebe2ff
  • editor.findMatchHighlightBackground#2d3143f3
  • editor.findRangeHighlightBackground#2d3143f3
  • editor.foreground#575b6fce
  • editor.hoverHighlightBackground#2d3143f3
  • editor.inactiveSelectionBackground#e1e3e5e6
  • editor.lineHighlightBackground#1b162994
  • editor.selectionBackground#1f1f2a83
  • editor.selectionHighlightBackground#2d3143f3
  • editor.selectionHighlightBorder#b3ebe280
  • editor.wordHighlightBackground#20275333
  • editor.wordHighlightStrongBackground#564f66ab
  • editorCursor.foreground#da4c51ff
  • editorError.background#52000045
  • editorError.foreground#e13e7ee6
  • editorGroup.border#2b2e3e26
  • editorGroupHeader.border#1b1c28ff
  • editorGroupHeader.noTabsBackground#101018ff
  • editorGroupHeader.tabsBackground#0f0f12ff
  • editorGroupHeader.tabsBorder#2b2e3e26
  • editorGutter.addedBackground#99d3b980
  • editorGutter.deletedBackground#b6416b8c
  • editorGutter.modifiedBackground#fecf0d80
  • editorHoverWidget.background#13141bbd
  • editorHoverWidget.border#131a24ff
  • editorHoverWidget.foreground#d4edffa6
  • editorHoverWidget.highlightForeground#b3ebe2ff
  • editorHoverWidget.statusBarBackground#403d53ff
  • editorIndentGuide.activeBackground1#6b40b859
  • editorIndentGuide.background1#25183b59
  • editorInfo.foreground#83a3cbff
  • editorInlayHint.background#100f1bff
  • editorInlayHint.diagonalFill#96a5b6ff
  • editorInlayHint.foreground#b9c9dbff
  • editorInlayHint.insertedLineBackground#040e0987
  • editorInlayHint.insertedTextBackground#040e0987
  • editorInlayHint.parameterBackground#100f1bff
  • editorInlayHint.parameterForeground#b9c9dbff
  • editorInlayHint.removedLineBackground#0e02049e
  • editorInlayHint.removedTextBackground#12080a82
  • editorInlayHint.typeBackground#100f1bff
  • editorInlayHint.typeForeground#b9c9dbff
  • editorLineNumber.activeForeground#7d7196ff
  • editorLineNumber.foreground#434249cc
  • editorPane.background#0e0e15ff
  • editorRuler.foreground#25183b59
  • editorSuggestWidget.background#13141b5e
  • editorSuggestWidget.border#45414cff
  • editorSuggestWidget.foreground#e1e3e5ff
  • editorSuggestWidget.selectedBackground#2a2441ff
  • editorWarning.foreground#f3e6dfff
  • editorWhitespace.foreground#272636ff
  • editorWidget.background#292931ff
  • editorWidget.border#14151eff
  • editorWidget.foreground#5f6278ce
  • extensionButton.foreground#b1b3b8ff
  • extensionButton.hoverBackground#4a4854f8
  • extensionButton.prominentBackground#b1b3b8ff
  • extensionButton.prominentForeground#b1b3b8ff
  • extensionButton.prominentHoverBackground#100f19ff
  • extensionButton.separator#1b1c28ff
  • focusBorder#a099ae14
  • foreground#575b6fce
  • gitDecoration.addedResourceForeground#a1dfb8df
  • gitDecoration.conflictingResourceForeground#fad2daff
  • gitDecoration.deletedResourceForeground#80123cde
  • gitDecoration.ignoredResourceForeground#767b95c2
  • gitDecoration.modifiedResourceForeground#f3e6dfff
  • gitDecoration.renamedResourceForeground#cbe5ef26
  • gitDecoration.stageDeletedResourceForeground#914c54ff
  • gitDecoration.stageModifiedResourceForeground#6372a1ff
  • gitDecoration.submoduleResourceForeground#8db9e2ff
  • gitDecoration.untrackedResourceForeground#767b95c2
  • icon.foreground#5f6384b8
  • input.background#0f0f135f
  • input.border#1b1c28ff
  • input.foreground#575b6fce
  • input.placeholderForeground#2b2e3eff
  • list.activeSelectionBackground#0c0c13ff
  • list.activeSelectionForeground#767b95c2
  • list.errorForeground#a94f4fff
  • list.focusBackground#2a2441ff
  • list.focusForeground#767b95c2
  • list.highlightForeground#96a5b6ff
  • list.hoverBackground#0c0c13ff
  • list.hoverForeground#767b95c2
  • list.inactiveSelectionBackground#0c0c13ff
  • list.inactiveSelectionForeground#767b95c2
  • menu.background#14121dff
  • menu.foreground#96a5b6ff
  • menu.selectionBackground#2a2441ff
  • menu.selectionForeground#e1e3e5ff
  • menu.separatorBackground#45414cff
  • merge.commonContentBackground#0c051bff
  • merge.commonHeaderBackground#10081fff
  • merge.currentContentBackground#05051cff
  • merge.currentHeaderBackground#080820ff
  • merge.incomingContentBackground#05081bff
  • merge.incomingHeaderBackground#080c1fff
  • minimap.background#0c0c13ff
  • minimap.errorHighlight#cb195fff
  • minimap.findMatchHighlight#5d5a84e7
  • minimap.selectionHighlight#767b95c2
  • minimap.warningHighlight#fcb086ff
  • notifications.background#0c0c13ff
  • notifications.border#96a5b6ff
  • notifications.foreground#767b95c2
  • panel.background#0a0a11ff
  • panel.border#14151eff
  • panelInput.border#1b1c28ff
  • panelTitle.activeBorder#96a5b6ff
  • panelTitle.activeForeground#767b95c2
  • panelTitle.inactiveForeground#767b95c2
  • peekView.border#96a5b6ff
  • peekViewEditor.background#0c0c13ff
  • peekViewEditor.matchHighlightBackground#2d3143f3
  • peekViewResult.background#0c0c13ff
  • peekViewResult.matchHighlightBackground#2d3143f3
  • peekViewResult.selectionBackground#0c0c13ff
  • peekViewTitle.background#0c0c13ff
  • peekViewTitleDescription.foreground#3a4159ff
  • peekViewTitleLabel.foreground#767b95c2
  • progressBar.background#bfde93ff
  • pullRequests.draft#331f57ff
  • quickInput.background#101018ff
  • quickInput.foreground#575b6fce
  • quickInput.list.focusBackground#100f19ff
  • quickInputList.focusBackground#100f19ff
  • quickInputList.focusForeground#fad2daff
  • sash.hoverBorder#b3ebe280
  • scrollbar.shadow#0c0c13ff
  • scrollbarSlider.activeBackground#0c0c13ff
  • scrollbarSlider.background#33343cff
  • scrollbarSlider.hoverBackground#0c0c13ff
  • settings.headerForeground#d1deeacc
  • settings.textInputBackground#121217ff
  • settings.textInputBorder#1c1c25ff
  • settings.textInputForeground#96a5b6ff
  • sideBar.background#0c0c13ff
  • sideBar.border#14151eff
  • sideBar.foreground#5f6278ce
  • sideBarSectionHeader.background#0c0c13ff
  • sideBarSectionHeader.foreground#767b95c2
  • sideBarTitle.background#0a0a10ff
  • sideBarTitle.foreground#e1e3e580
  • statusBar.background#0c0c13ff
  • statusBar.border#14151eff
  • statusBar.debuggingBackground#41ffbcf2
  • statusBar.debuggingBorder#4ce4b4f2
  • statusBar.debuggingForeground#5b0092ff
  • statusBar.foreground#767b95c2
  • statusBar.noFolderBackground#0c0c13ff
  • statusBar.noFolderForeground#767b95c2
  • tab.activeBackground#0c0c13ff
  • tab.activeBorder#14151eff
  • tab.activeBorderTop#96a5b6ff
  • tab.activeForeground#767b95c2
  • tab.border#212131ff
  • tab.hoverBackground#0c0c13ff
  • tab.hoverForeground#767b95c2
  • tab.inactiveBackground#0c0c13ff
  • tab.inactiveForeground#767b95c2
  • tab.lastPinnedBorder#fcb086ff
  • tab.unfocusedActiveBackground#0c0c13ff
  • tab.unfocusedActiveForeground#767b95c2
  • terminal.ansiBlack#383d51ff
  • terminal.ansiBlue#33b3ccff
  • terminal.ansiBrightBlack#96a5b6ff
  • terminal.ansiBrightBlue#33b3ccff
  • terminal.ansiBrightCyan#b4e7dfff
  • terminal.ansiBrightGreen#99d3b9ff
  • terminal.ansiBrightMagenta#998ee0cf
  • terminal.ansiBrightRed#cb195fff
  • terminal.ansiBrightWhite#b1b1bffa
  • terminal.ansiBrightYellow#fcb086ff
  • terminal.ansiCyan#b4e7dfff
  • terminal.ansiGreen#99d3b9ff
  • terminal.ansiMagenta#998ee0cf
  • terminal.ansiRed#cb195fff
  • terminal.ansiWhite#e1e3e5ff
  • terminal.ansiYellow#fcb086ff
  • terminal.background#06060cff
  • terminal.border#11121aff
  • terminal.dropBackground#13141b5e
  • terminal.foreground#767b95c2
  • terminal.selectionBackground#1f1f27ff
  • terminalCursor.foreground#767b95c2
  • textLink.activeForeground#99d3b9ff
  • textLink.foreground#99d3b9ff
  • textPreformat.background#050e0cf0
  • textPreformat.foreground#90e3bccf
  • textSeparator.foreground#45414c80
  • titleBar.activeBackground#0c0c13ff
  • titleBar.activeForeground#767b95c2
  • titleBar.inactiveBackground#0c0c13ff
  • titleBar.inactiveForeground#767b95c2
  • tree.indentGuidesStroke#45414cff
  • window.activeBorder#183856ff
  • window.inactiveBorder#2b2e3e26

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source#575b6fce
text#575b6fce
comment#2b2e3effitalic
punctuation.definition.comment#2b2e3effitalic
string#b1e8f2ff
string.regexp#fad2daffitalic
constant.character.escape#b1e8f2ff
constant.other.placeholder#b1e8f2ff
separator.border#575b6f19
focusBorder#b3ebe280
gauge.border#1b1c28ff
sash.hoverBorder#b3ebe280
editorGroup.border#2b2e3e26
punctuation.definition.template-expression#b1e8f2ff
meta.template.expression#b1e8f2ff
constant#b3ebe2ff
constant.numeric#b3ebe2ff
constant.language#b3ebe2ff
quickInput.background#101018ff
quickInput.foreground#575b6fce
quickInput.focusBackground#101018ff
quickInput.focusForeground#575b6fce
quickInputList.background#101018ff
quickInputList.foreground#575b6fce
quickInputList.focusBackground#101018ff
quickInputList.focusForeground#575b6fce
list.hoverBackground#100f19ff
list.hoverForeground#575b6fce
keyword#575b6fce
keyword.control#575b6fce
keyword.control.conditional#575b6fce
keyword.control.loop#575b6fce
keyword.control.flow#575b6fce
keyword.control.import#575b6fce
keyword.control.export#575b6fce
keyword.directive#fad2daff
keyword.directive.define#fad2daff
keyword.operator#fad2daff
keyword.operator.logical#fad2daff
keyword.operator.assignment#fad2daff
keyword.operator.arithmetic#fad2daff
keyword.operator.comparison#fad2daff
keyword.operator.wordlike#fad2daff
storage#beead0ff
storage.type#beead0ff
storage.type.function#575b6fce
storage.type.class#575b6fce
storage.modifier#575b6fce
storage.type.primitive#fed4c9ff
variable#575b6fce
variable.other#575b6fce
variable.parameter#beead0ffitalic
variable.language#beead0ffitalic
variable.language.this#beead0ffitalic
variable.language.super#beead0ffitalic
entity.name.function#b1e8f2ff
support.function#b1e8f2ff
meta.function-call.generic#b1e8f2ff
entity.name.class#beead0ffbold underline
entity.other.inherited-class#beead0ffbold underline
support.class#beead0ff
entity.name.type#beead0ff
support.type#beead0ff
support.type.builtin#fed4c9ff
entity.name.tag#fed4c9ff
support.class.component#e1a3d4ff
support.class.component.jsx#e1a3d4ff
entity.other.attribute-name#787087d8
meta.tag keyword.operator.assignment#787087d8
meta.tag.attributes#787087d8
support.type.property-name#787087d8
support.type.property-name.css#787087d8
meta.object-literal.key#787087d8
variable.other.property#787087d8
list.hoverBackground#100f19ff
list.hoverForeground#575b6fce
support.type.property-name.css#787087d8
meta.property-name#787087d8
support.constant.property-value#b3ebe2ff
constant.other.color#b3ebe2ff
meta.property-value#b3ebe2ff
meta.selector#beead0ff
entity.name.tag.css#beead0ff
entity.other.attribute-name.class.css#beead0ff
entity.other.attribute-name.id.css#beead0ff
punctuation#3a4159ff
punctuation.definition#2b2e3eff
punctuation.separator#2b2e3eff
punctuation.terminator#2b2e3eff
punctuation.accessor#2b2e3eff
punctuation.definition.tag#2b2e3eff
meta.brace#3a4159ff
meta.brace.round#3a4159ff
meta.brace.square#3a4159ff
meta.brace.curly#3a4159ff
entity.name.function.decorator#fad2daff
punctuation.definition.decorator#fad2daff
markup.heading#f3d1ebffbold
entity.name.section.markdown#f3d1ebffbold
markup.bold#575b6fcebold
markup.italic#b1e8f2ffitalic
markup.inline.raw#b1e8f2ff
markup.fenced_code.block.markdown#b1e8f2ff
markup.quote#2b2e3effitalic
markup.underline.link#b1e8f2ffunderline
markup.inserted#a1dfb8df
markup.inserted.git_gutter#a1dfb8df
markup.changed#f3e6dfff
markup.changed.git_gutter#f3e6dfff
markup.deleted#80123cde
markup.deleted.git_gutter#80123cde
invalid#e13e7ee6
invalid.illegal#e13e7ee6
invalid.deprecated#2b2e3eff
comment.line.todo#fad2daffbold
comment.block.todo#fad2daffbold
comment.line.fixme#f3e6dfffbold
comment.block.fixme#f3e6dfffbold
comment.line.note#83a3cbffbold
comment.block.note#83a3cbffbold
string.quoted.docstring#2b2e3effitalic
string.quoted.docstring.multi.python#2b2e3effitalic
string.quoted.docstring.raw.multi.python#2b2e3effitalic
source.yaml#575b6fce
entity.name.tag.yaml#787087d8
string.unquoted.plain.out.yaml#b1e8f2ff
string.quoted.single.yaml#b1e8f2ff
meta.structure.dictionary.key.json#787087d8
support.type.property-name.json#787087d8
meta.structure.dictionary.value.json#b1e8f2ff
meta.property-list.css#787087d8
Apathy Theme by Cooper Maruyama - VS Code Theme