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#111111
  • activityBar.border#1e1e1e
  • activityBar.foreground#e0e0de
  • activityBar.inactiveForeground#3d3d3d
  • activityBarBadge.background#d97757
  • activityBarBadge.foreground#1a0e08
  • badge.background#d97757
  • badge.foreground#1a0e08
  • breadcrumb.activeSelectionForeground#c9a400
  • breadcrumb.background#161616
  • breadcrumb.focusForeground#a0a09e
  • breadcrumb.foreground#3d3d3d
  • breadcrumbPicker.background#1a1a1a
  • button.background#2a2a2a
  • button.foreground#e0e0de
  • button.hoverBackground#333333
  • button.secondaryBackground#282828
  • button.secondaryForeground#a0a09e
  • button.secondaryHoverBackground#2e2b28
  • chat.requestBackground#1a1a1a
  • chat.requestBorder#282828
  • contrastActiveBorder#00000000
  • contrastBorder#00000000
  • diffEditor.insertedLineBackground#1c3a1d40
  • diffEditor.insertedTextBackground#2a5c3560
  • diffEditor.removedLineBackground#3d1a2040
  • diffEditor.removedTextBackground#5c202860
  • disabledForeground#3d3d3d
  • dropdown.background#1a1a1a
  • dropdown.border#282828
  • dropdown.foreground#e0e0de
  • editor.background#0c0c0c
  • editor.findMatchBackground#d9775750
  • editor.findMatchHighlightBackground#d9775725
  • editor.foreground#e0e0de
  • editor.hoverHighlightBackground#e0e0de10
  • editor.lineHighlightBackground#1e1e1e
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#e0e0de25
  • editor.selectionHighlightBackground#e0e0de15
  • editor.wordHighlightBackground#e0e0de18
  • editor.wordHighlightStrongBackground#e0e0de28
  • editorBracketMatch.background#e0e0de20
  • editorBracketMatch.border#e0e0de40
  • editorCursor.foreground#d97757
  • editorError.foreground#c84040
  • editorGroupHeader.tabsBackground#111111
  • editorGroupHeader.tabsBorder#1e1e1e
  • editorGutter.addedBackground#44aa44
  • editorGutter.background#0c0c0c
  • editorGutter.deletedBackground#c84040
  • editorGutter.modifiedBackground#8fb2e8
  • editorHoverWidget.background#1a1a1a
  • editorHoverWidget.border#282828
  • editorHoverWidget.foreground#e0e0de
  • editorIndentGuide.activeBackground1#404040
  • editorIndentGuide.background1#282828
  • editorInfo.foreground#8fb2e8
  • editorLightBulb.foreground#c9a400
  • editorLineNumber.activeForeground#c9a400
  • editorLineNumber.foreground#3d3d3d
  • editorOverviewRuler.warningForeground#c9a40080
  • editorRuler.foreground#282828
  • editorSuggestWidget.background#1a1a1a
  • editorSuggestWidget.border#282828
  • editorSuggestWidget.foreground#e0e0de
  • editorSuggestWidget.highlightForeground#e0e0de
  • editorSuggestWidget.selectedBackground#e0e0de15
  • editorWarning.foreground#c9a400
  • editorWhitespace.foreground#2a2a2a
  • editorWidget.background#1a1a1a
  • editorWidget.border#282828
  • editorWidget.foreground#e0e0de
  • errorForeground#b84030
  • extensionBadge.remoteBackground#d97757
  • extensionBadge.remoteForeground#1a0e08
  • extensionButton.prominentBackground#2a2a2a
  • extensionButton.prominentForeground#e0e0de
  • extensionButton.prominentHoverBackground#333333
  • focusBorder#8fb2e878
  • foreground#a0a09e
  • gitDecoration.addedResourceForeground#a2c892
  • gitDecoration.conflictingResourceForeground#c9a400
  • gitDecoration.deletedResourceForeground#dd6a6e
  • gitDecoration.ignoredResourceForeground#3d3d3d
  • gitDecoration.modifiedResourceForeground#78b8ff
  • gitDecoration.untrackedResourceForeground#a2c892
  • icon.foreground#a0a09e
  • inlineChat.background#1a1a1a
  • inlineChat.border#3a3a3a80
  • inlineChat.shadow#00000060
  • inlineChatInput.background#1e1e1e
  • inlineChatInput.border#282828
  • inlineChatInput.focusBorder#8fb2e8
  • input.background#1a1a1a
  • input.border#282828
  • input.foreground#e0e0de
  • input.placeholderForeground#3d3d3d
  • inputOption.activeBackground#e0e0de15
  • inputOption.activeBorder#3a3a3a
  • inputOption.activeForeground#e0e0de
  • inputValidation.errorBackground#2a1008
  • inputValidation.errorBorder#b84030
  • inputValidation.infoBackground#1a1008
  • inputValidation.infoBorder#8fb2e8
  • inputValidation.warningBackground#221808
  • inputValidation.warningBorder#c9a400
  • list.activeSelectionBackground#2f2f2f
  • list.activeSelectionForeground#e0e0de
  • list.focusBackground#1e1e1e
  • list.focusForeground#e0e0de
  • list.highlightForeground#e0e0de
  • list.hoverBackground#1a1a1a
  • list.hoverForeground#e0e0de
  • list.inactiveSelectionBackground#181818
  • list.inactiveSelectionForeground#a0a09e
  • list.warningForeground#c9a400
  • merge.currentContentBackground#4a7c5918
  • merge.currentHeaderBackground#4a7c5940
  • merge.incomingContentBackground#d9775718
  • merge.incomingHeaderBackground#d9775740
  • minimap.background#111111
  • minimap.errorHighlight#b84030
  • minimap.findMatchHighlight#d9775778
  • minimap.selectionHighlight#e0e0de30
  • minimap.warningHighlight#c9a400
  • minimapGutter.addedBackground#44aa44
  • minimapGutter.deletedBackground#c84040
  • minimapGutter.modifiedBackground#8fb2e8
  • notificationLink.foreground#8fb2e8
  • notifications.background#1e1e1e
  • notifications.border#282828
  • notifications.foreground#e0e0de
  • notificationsWarningIcon.foreground#c9a400
  • panel.background#111111
  • panel.border#1e1e1e
  • panelTitle.activeBorder#d97757
  • panelTitle.activeForeground#e0e0de
  • panelTitle.inactiveForeground#565656
  • peekView.border#3a3a3a
  • peekViewEditor.background#161616
  • peekViewEditorGutter.background#161616
  • peekViewResult.background#111111
  • peekViewResult.fileForeground#a0a09e
  • peekViewResult.lineForeground#565656
  • peekViewResult.matchHighlightBackground#d9775748
  • peekViewResult.selectionBackground#e0e0de15
  • peekViewResult.selectionForeground#e0e0de
  • peekViewTitle.background#111111
  • peekViewTitleDescription.foreground#565656
  • peekViewTitleLabel.foreground#e0e0de
  • pickerGroup.border#282828
  • pickerGroup.foreground#e0e0de
  • problemsWarningIcon.foreground#c9a400
  • progressBar.background#e0e0de
  • quickInput.background#1a1a1a
  • quickInput.foreground#e0e0de
  • quickInputList.focusBackground#e0e0de15
  • quickInputList.focusForeground#e0e0de
  • quickInputTitle.background#111111
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#e0e0de30
  • scrollbarSlider.background#232120a0
  • scrollbarSlider.hoverBackground#3a3530c0
  • selection.background#e0e0de30
  • sideBar.background#111111
  • sideBar.border#1e1e1e
  • sideBar.foreground#a0a09e
  • sideBarSectionHeader.background#111111
  • sideBarSectionHeader.border#1e1e1e
  • sideBarSectionHeader.foreground#565656
  • sideBarTitle.foreground#565656
  • statusBar.background#111111
  • statusBar.border#1e1e1e
  • statusBar.debuggingBackground#1a1008
  • statusBar.debuggingForeground#c9a400
  • statusBar.foreground#565656
  • statusBar.noFolderBackground#0c0c0c
  • statusBar.noFolderForeground#565656
  • statusBarItem.activeBackground#282828
  • statusBarItem.hoverBackground#1e1e1e
  • statusBarItem.warningBackground#c9a400
  • statusBarItem.warningForeground#0c0c0c
  • tab.activeBackground#161616
  • tab.activeBorder#00000000
  • tab.activeBorderTop#d97757
  • tab.activeForeground#e0e0de
  • tab.border#1e1e1e
  • tab.hoverBackground#1a1a1a
  • tab.hoverForeground#a0a09e
  • tab.inactiveBackground#111111
  • tab.inactiveForeground#565656
  • tab.unfocusedActiveBackground#161616
  • tab.unfocusedActiveForeground#a0a09e
  • terminal.ansiBlack#3a3a3a
  • terminal.ansiBlue#6d8cc9
  • terminal.ansiBrightBlack#707070
  • terminal.ansiBrightBlue#789ace
  • terminal.ansiBrightCyan#68c2bc
  • terminal.ansiBrightGreen#85cc90
  • terminal.ansiBrightMagenta#bc9fe0
  • terminal.ansiBrightRed#dd6a6e
  • terminal.ansiBrightWhite#e8e8e8
  • terminal.ansiBrightYellow#ecdf7d
  • terminal.ansiCyan#5fb9b3
  • terminal.ansiGreen#7cbe80
  • terminal.ansiMagenta#b294da
  • terminal.ansiRed#da6d6f
  • terminal.ansiWhite#cccccc
  • terminal.ansiYellow#e6d980
  • terminal.background#111111
  • terminal.foreground#d6d6d6
  • terminal.selectionBackground#e0e0de25
  • terminal.tab.activeBorder#d97757
  • terminalCursor.foreground#78b8ff
  • textBlockQuote.background#1a1a1a
  • textBlockQuote.border#3a3a3a
  • textCodeBlock.background#1e1e1e
  • textLink.activeForeground#a8c5ed
  • textLink.foreground#8fb2e8
  • textSeparator.foreground#282828
  • titleBar.activeBackground#111111
  • titleBar.activeForeground#a0a09e
  • titleBar.border#1e1e1e
  • titleBar.inactiveBackground#111111
  • titleBar.inactiveForeground#3d3d3d
  • tree.indentGuidesStroke#282828
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#787878italic
comment.block.documentation#8a8a86italic
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier#e07890
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#e07890
string, string.quoted, string.template#a2c892
constant.character.escape#c89050
punctuation.definition.template-expression, punctuation.section.embedded#e07890
constant.numeric#e07890
constant.language.boolean, constant.language.null, constant.language.undefined#e07890
constant.language, constant.other#e07890
entity.name.function, meta.function entity.name.function#b294da
meta.function-call entity.name.function, support.function#b294da
variable, variable.other#e0e0de
variable.parameter#d97757
variable.language#e07890italic
variable.other.property, support.variable.property#e0e0de
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, entity.other.inherited-class, support.class#b294da
support.type, entity.name.type.primitive#b294da
meta.decorator, entity.name.decorator, punctuation.decorator#8bc4c8
meta.object-literal.key, support.type.property-name#e0e0de
keyword.operator#e07890
punctuation, meta.brace, meta.delimiter#8a8a8a
entity.name.tag#a2c892
entity.other.attribute-name#8bc4c8
punctuation.definition.tag#6a6a6a
string.quoted.double.html, string.quoted.single.html#a2c892
support.type.property-name.css#8bc4c8
support.constant.property-value.css#a2c892
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#8bc4c8
constant.numeric.css, keyword.other.unit.css#e07890
keyword.control.at-rule.css#e07890
support.type.property-name.json#8bc4c8
markup.heading, punctuation.definition.heading#e07890bold
markup.bold#e0e0debold
markup.italic#e0e0deitalic
markup.inline.raw, markup.fenced_code.block#8bc4c8
markup.underline.link, string.other.link#8fb3e0
markup.list, punctuation.definition.list#e07890
markup.quote#787878italic
invalid#dd6a6eunderline
invalid.deprecated#787878strikethrough
Claudio Code Theme by Matheus Teles - VS Code Theme