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#07070eff
  • activityBar.border#0a0a0cff
  • activityBar.foreground#656a83c2
  • activityBar.inactiveForeground#272a40c2
  • activityBarBadge.background#9095c0f7
  • activityBarBadge.foreground#bfde93ff
  • badge.background#0c0c13ff
  • badge.foreground#767b95c2
  • breadcrumb.activeSelectionForeground#767b95c2
  • breadcrumb.background#0c0c13ff
  • breadcrumb.focusForeground#767b95c2
  • breadcrumb.foreground#767b95c2
  • button.background#bbb8d5ff
  • button.border#4b495078
  • button.foreground#0a0a1aff
  • button.hoverBackground#c3bceaf8
  • button.secondaryBackground#191937ff
  • button.secondaryBorder#4b495078
  • button.secondaryForeground#d9d4e2e0
  • button.secondaryHoverBackground#0c0c13ff
  • button.separator#584b7036
  • chat.requestBackground#04041bff
  • composerPane.background#12151cff
  • contrastBorder#a099ae14
  • debugConsole.errorForeground#ff6261ff
  • debugConsole.infoForeground#78dde9ff
  • debugConsole.sourceForeground#e1e3e5ff
  • debugConsole.warningForeground#ffcb6cff
  • diffEditor.diagonalFill#fecf0dff
  • diffEditor.insertedLineBackground#01121157
  • diffEditor.insertedTextBackground#010808b9
  • diffEditor.insertedTextBorder#05151467
  • diffEditor.removedLineBackground#0f0404ff
  • diffEditor.removedTextBackground#20030cbb
  • diffEditor.removedTextBorder#300e1622
  • diffEditorGutter.insertedLineBackground#01121157
  • diffEditorGutter.removedLineBackground#2d0a12b4
  • dropdown.background#0c0c13ff
  • dropdown.border#6c7a8aff
  • dropdown.foreground#767b95c2
  • dropdown.listBackground#0c0c13ff
  • editor.background#090910ff
  • editor.compositionBorder#a7f3f1f0
  • editor.findMatchBackground#343d5daa
  • editor.findMatchHighlightBackground#201f2d80
  • editor.findRangeHighlightBackground#201f2d80
  • editor.foreground#545c7ee6
  • editor.hoverHighlightBackground#19163154
  • editor.inactiveSelectionBackground#0c002ecf
  • editor.lineHighlightBackground#1b162994
  • editor.selectionBackground#191a25fa
  • editor.selectionHighlightBackground#201f2d80
  • editor.selectionHighlightBorder#252527ff
  • editor.wordHighlightBackground#20275333
  • editor.wordHighlightStrongBackground#564f66ab
  • editorCursor.foreground#da4c51ff
  • editorError.background#52000045
  • editorError.foreground#d96a92ff
  • editorGroup.border#14151e86
  • editorGroupHeader.border#52559e14
  • editorGroupHeader.noTabsBackground#100f1cd6
  • editorGroupHeader.tabsBackground#0f0f12ff
  • editorGroupHeader.tabsBorder#14151ee6
  • editorGutter.addedBackground#01121157
  • editorGutter.deletedBackground#a36673ff
  • editorGutter.modifiedBackground#8b7940ff
  • editorHoverWidget.background#090a0eec
  • editorHoverWidget.border#66748867
  • editorHoverWidget.foreground#d4edffb7
  • editorHoverWidget.highlightForeground#96f1f6ff
  • editorHoverWidget.statusBarBackground#9fe5eecd
  • editorIndentGuide.activeBackground1#6b40b859
  • editorIndentGuide.background1#25183b59
  • editorInfo.foreground#93a7e6f0
  • editorInlayHint.background#6870a008
  • editorInlayHint.diagonalFill#fecf0dff
  • editorInlayHint.foreground#948be862
  • editorInlayHint.insertedLineBackground#01121157
  • editorInlayHint.insertedTextBackground#010808b9
  • editorInlayHint.parameterBackground#6870a008
  • editorInlayHint.parameterForeground#948be862
  • editorInlayHint.removedLineBackground#090505ff
  • editorInlayHint.removedTextBackground#090505ff
  • editorInlayHint.typeBackground#6870a008
  • editorInlayHint.typeForeground#948be862
  • editorLineNumber.activeForeground#7d7196ff
  • editorLineNumber.foreground#434249cc
  • editorPane.background#090910ff
  • editorRuler.foreground#25183b59
  • editorSuggestWidget.background#10101bff
  • editorSuggestWidget.border#45414cff
  • editorSuggestWidget.foreground#e1e3e5ff
  • editorSuggestWidget.selectedBackground#2a2441ff
  • editorWarning.foreground#ebd8bee8
  • editorWhitespace.foreground#272636ff
  • editorWidget.background#090a0eec
  • editorWidget.border#66748867
  • editorWidget.foreground#d4edffb7
  • extensionButton.foreground#0a0a1aff
  • extensionButton.hoverBackground#c3bceaf8
  • extensionButton.prominentBackground#e1e3e5ff
  • extensionButton.prominentForeground#767b95ff
  • extensionButton.prominentHoverBackground#3a3f541a
  • extensionButton.separator#52559e14
  • focusBorder#a099ae14
  • foreground#7b8ab1b5
  • gitDecoration.addedResourceForeground#a6d1cfd2
  • gitDecoration.conflictingResourceForeground#f09fb5ea
  • gitDecoration.deletedResourceForeground#f09fadea
  • gitDecoration.ignoredResourceForeground#454d61c9
  • gitDecoration.modifiedResourceForeground#7786b7ff
  • gitDecoration.renamedResourceForeground#9fa0f0ea
  • gitDecoration.stageDeletedResourceForeground#704752f5
  • gitDecoration.stageModifiedResourceForeground#555e91f4
  • gitDecoration.submoduleResourceForeground#8db9e2ff
  • gitDecoration.untrackedResourceForeground#91eaccd2
  • gitlens.decorations.addedForegroundColor#9ff0e3ea
  • icon.foreground#d7f7f2ff
  • input.background#100f1cd6
  • input.border#14151ee6
  • input.foreground#a8adc9c2
  • input.placeholderForeground#555972c2
  • 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#4f4a76d3
  • minimap.selectionHighlight#767b95c2
  • minimap.warningHighlight#fcb086ff
  • minimapGutter.addedBackground#01121157
  • notifications.background#0c0c13ff
  • notifications.border#96a5b6ff
  • notifications.foreground#767b95c2
  • panel.background#070709ff
  • panel.border#52559e14
  • panelInput.border#14151ee6
  • 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#676597ab
  • peekViewTitleLabel.foreground#767b95c2
  • progressBar.background#bfde93ff
  • pullRequests.draft#331f57ff
  • quickInput.background#100f1cd6
  • quickInput.foreground#7b8ab1b5
  • quickInput.list.focusBackground#3a3f541a
  • quickInputList.focusBackground#3a3f541a
  • quickInputList.focusForeground#fcb086ff
  • sash.hoverBorder#a7f3f1f0
  • scrollbar.shadow#0c0c13ff
  • scrollbarSlider.activeBackground#0c0c13ff
  • scrollbarSlider.background#1b1b364d
  • scrollbarSlider.hoverBackground#0c0c13ff
  • settings.headerForeground#d1deeacc
  • settings.textInputBackground#121217ff
  • settings.textInputBorder#1c1c25ff
  • settings.textInputForeground#96a5b6ff
  • sideBar.background#09090fff
  • sideBar.border#52559e14
  • sideBar.foreground#515b76c9
  • sideBarSectionHeader.background#0c0c13ff
  • sideBarSectionHeader.foreground#767b95c2
  • sideBarTitle.background#0e0e18b3
  • sideBarTitle.foreground#e1e3e580
  • statusBar.background#0c0c13ff
  • statusBar.border#52559e14
  • statusBar.debuggingBackground#41ffbcf2
  • statusBar.debuggingBorder#4ce4b4f2
  • statusBar.debuggingForeground#5b0092ff
  • statusBar.foreground#767b95c2
  • statusBar.noFolderBackground#0c0c13ff
  • statusBar.noFolderForeground#767b95c2
  • tab.activeBackground#0a0a15ff
  • tab.activeBorder#52559e14
  • 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#383d51c8
  • terminal.ansiBlue#89b4faff
  • terminal.ansiBrightBlack#535d87ff
  • terminal.ansiBrightBlue#78d7ecff
  • terminal.ansiBrightCyan#89dcebff
  • terminal.ansiBrightGreen#86f7c4cb
  • terminal.ansiBrightMagenta#cb2eaccf
  • terminal.ansiBrightRed#cb195fff
  • terminal.ansiBrightWhite#b1b1bffa
  • terminal.ansiBrightYellow#e5c567ff
  • terminal.ansiCyan#89dcebff
  • terminal.ansiGreen#a6e3a1ff
  • terminal.ansiMagenta#d01b52ff
  • terminal.ansiRed#c71255ff
  • terminal.ansiWhite#070606ff
  • terminal.ansiYellow#e8d7baff
  • terminal.background#07070dff
  • terminal.border#12131cff
  • terminal.dropBackground#10101bff
  • terminal.foreground#aeaacceb
  • terminal.selectionBackground#1f1f27ff
  • terminalCursor.foreground#767b95c2
  • textLink.activeForeground#9ec2e6ff
  • textLink.foreground#9ec2e6ff
  • textPreformat.background#050e0cf0
  • textPreformat.foreground#90e3bccf
  • textSeparator.foreground#45414c80
  • titleBar.activeBackground#0c0c13ff
  • titleBar.activeForeground#767b95c2
  • titleBar.inactiveBackground#08080aff
  • titleBar.inactiveForeground#767b95c2
  • tree.inactiveIndentGuidesStroke#12131dde
  • tree.indentGuidesStroke#38377299
  • window.activeBorder#183856ff
  • window.inactiveBorder#14151ee6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source#4e5c7ae6
text#4e5c7ae6
comment#282948deitalic
punctuation.definition.comment#282948deitalic
string#c6d4cbee
string.regexp#fcb086ffitalic
constant.character.escape#c6d4cbee
constant.other.placeholder#c6d4cbee
separator.border#767b951a
focusBorder#a7f3f1f0
gauge.border#52559e14
sash.hoverBorder#a7f3f1f0
editorGroup.border#14151ee6
punctuation.definition.template-expression#c6d4cbee
meta.template.expression#c6d4cbee
constant#7bc2dfff
constant.numeric#7bc2dfff
constant.language#7bc2dfff
quickInput.background#100f1cd6
quickInput.foreground#7b8ab1b5
quickInput.focusBackground#100f1cd6
quickInput.focusForeground#7b8ab1b5
quickInputList.background#100f1cd6
quickInputList.foreground#7b8ab1b5
quickInputList.focusBackground#100f1cd6
quickInputList.focusForeground#7b8ab1b5
list.hoverBackground#3a3f541a
list.hoverForeground#7b8ab1b5
keyword#4a5585ff
keyword.control#4a5585ff
keyword.control.conditional#4a5585ff
keyword.control.loop#4a5585ff
keyword.control.flow#4a5585ff
keyword.control.import#4a5585ff
keyword.control.export#4a5585ff
keyword.directive#cd5cf2ff
keyword.directive.define#cd5cf2ff
keyword.operator#adaca2ff
keyword.operator.logical#adaca2ff
keyword.operator.assignment#adaca2ff
keyword.operator.arithmetic#adaca2ff
keyword.operator.comparison#adaca2ff
keyword.operator.wordlike#adaca2ff
storage#6372a1ff
storage.type#6372a1ff
storage.type.function#4a5585ff
storage.type.class#4a5585ff
storage.modifier#4a5585ff
storage.type.primitive#4f4980ff
variable#7777a8ff
variable.other#b1b1bffa
variable.parameter#7777a8ffitalic
variable.language#7777a8ffitalic
variable.language.this#7777a8ffitalic
variable.language.super#7777a8ffitalic
entity.name.function#f2cdcdff
support.function#4f4980ff
meta.function-call.generic#f2cdcdff
entity.name.class#f2cdcdffbold underline
entity.other.inherited-class#f2cdcdffbold underline
support.class#f2cdcdff
entity.name.type#9599cfff
support.type#9599cfff
support.type.builtin#4f4980ff
entity.name.tag#5c5675ff
support.class.component#e1a3d4ff
support.class.component.jsx#e1a3d4ff
entity.other.attribute-name#8380a8cc
meta.tag keyword.operator.assignment#8380a8cc
meta.tag.attributes#8380a8cc
support.type.property-name#8380a8cc
support.type.property-name.css#8380a8cc
meta.object-literal.key#8380a8cc
variable.other.property#8380a8cc
list.hoverBackground#3a3f541a
list.hoverForeground#7b8ab1b5
support.type.property-name.css#8380a8cc
meta.property-name#8380a8cc
support.constant.property-value#7bc2dfff
constant.other.color#7bc2dfff
meta.property-value#7bc2dfff
meta.selector#9599cfff
entity.name.tag.css#9599cfff
entity.other.attribute-name.class.css#9599cfff
entity.other.attribute-name.id.css#9599cfff
punctuation#767b95c2
punctuation.definition#3c394bd1
punctuation.separator#383d51ff
punctuation.terminator#383d51ff
punctuation.accessor#383d51ff
punctuation.definition.tag#3c394bd1
meta.brace#383d51ff
meta.brace.round#383d51ff
meta.brace.square#383d51ff
meta.brace.curly#383d51ff
entity.name.function.decorator#6a6c85ff
punctuation.definition.decorator#6a6c85ff
markup.heading#f2daebaabold
entity.name.section.markdown#f2daebaabold
markup.bold#4a5585ffbold
markup.italic#c6d4cbeeitalic
markup.inline.raw#c6d4cbee
markup.fenced_code.block.markdown#c6d4cbee
markup.quote#282948deitalic
markup.underline.link#f2cdcdffunderline
markup.inserted#4c867c45
markup.inserted.git_gutter#4c867c45
markup.changed#7786b7f4
markup.changed.git_gutter#7786b7f4
markup.deleted#a43a644d
markup.deleted.git_gutter#a43a644d
invalid#d96a92ff
invalid.illegal#d96a92ff
invalid.deprecated#282948de
comment.line.todo#6a6c85ffbold
comment.block.todo#6a6c85ffbold
comment.line.fixme#ebd8bee8bold
comment.block.fixme#ebd8bee8bold
comment.line.note#93a7e6f0bold
comment.block.note#93a7e6f0bold
string.quoted.docstring#282948deitalic
string.quoted.docstring.multi.python#282948deitalic
string.quoted.docstring.raw.multi.python#282948deitalic
source.yaml#4e5c7ae6
entity.name.tag.yaml#8380a8cc
string.unquoted.plain.out.yaml#c6d4cbee
string.quoted.single.yaml#c6d4cbee
meta.structure.dictionary.key.json#8380a8cc
support.type.property-name.json#8380a8cc
meta.structure.dictionary.value.json#c6d4cbee
meta.property-list.css#8380a8cc
Apathy Theme by Cooper Maruyama - VS Code Theme