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#fdfdfc
  • activityBar.border#e7e7e6
  • activityBar.foreground#1a1a1a
  • activityBar.inactiveForeground#6a6a6a
  • activityBarBadge.background#d97757
  • activityBarBadge.foreground#fdfdfc
  • badge.background#d97757
  • badge.foreground#fdfdfc
  • breadcrumb.activeSelectionForeground#a48300
  • breadcrumb.background#f5f5f4
  • breadcrumb.focusForeground#6a6a6a
  • breadcrumb.foreground#8a8a8a
  • breadcrumbPicker.background#f5f5f4
  • button.background#d9d9d8
  • button.foreground#1a1a1a
  • button.hoverBackground#d2d2d1
  • button.secondaryBackground#ebebea
  • button.secondaryForeground#6a6a6a
  • button.secondaryHoverBackground#e0e0df
  • chat.requestBackground#f5f5f4
  • chat.requestBorder#dcdcdb
  • contrastActiveBorder#00000000
  • contrastBorder#00000000
  • diffEditor.insertedLineBackground#c8e8c830
  • diffEditor.insertedTextBackground#a8d8a850
  • diffEditor.removedLineBackground#f0d0d030
  • diffEditor.removedTextBackground#e8b0b050
  • disabledForeground#c0c0bf
  • dropdown.background#f5f5f4
  • dropdown.border#dcdcdb
  • dropdown.foreground#1a1a1a
  • editor.background#fbfbfa
  • editor.findMatchBackground#d9775760
  • editor.findMatchHighlightBackground#d9775730
  • editor.foreground#1a1a1a
  • editor.hoverHighlightBackground#1a1a1a10
  • editor.lineHighlightBackground#f0f0ef
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#1a1a1a20
  • editor.selectionHighlightBackground#1a1a1a12
  • editor.wordHighlightBackground#1a1a1a15
  • editor.wordHighlightStrongBackground#1a1a1a22
  • editorBracketMatch.background#1a1a1a15
  • editorBracketMatch.border#1a1a1a35
  • editorCursor.foreground#d97757
  • editorError.foreground#c04040
  • editorGroupHeader.tabsBackground#fdfdfc
  • editorGroupHeader.tabsBorder#e7e7e6
  • editorGutter.addedBackground#4a8a4e
  • editorGutter.background#fbfbfa
  • editorGutter.deletedBackground#b85555
  • editorGutter.modifiedBackground#3060b0
  • editorHoverWidget.background#f5f5f4
  • editorHoverWidget.border#dcdcdb
  • editorHoverWidget.foreground#1a1a1a
  • editorIndentGuide.activeBackground1#c4c4c3
  • editorIndentGuide.background1#ebebea
  • editorInfo.foreground#3060b0
  • editorLightBulb.foreground#a48300
  • editorLineNumber.activeForeground#a48300
  • editorLineNumber.foreground#9a9a9a
  • editorOverviewRuler.warningForeground#a4830080
  • editorRuler.foreground#ebebea
  • editorSuggestWidget.background#f5f5f4
  • editorSuggestWidget.border#dcdcdb
  • editorSuggestWidget.foreground#1a1a1a
  • editorSuggestWidget.highlightForeground#1a1a1a
  • editorSuggestWidget.selectedBackground#1a1a1a12
  • editorWarning.foreground#a48300
  • editorWhitespace.foreground#dcdcdb
  • editorWidget.background#f5f5f4
  • editorWidget.border#dcdcdb
  • editorWidget.foreground#1a1a1a
  • errorForeground#c04040
  • extensionBadge.remoteBackground#d97757
  • extensionBadge.remoteForeground#fdfdfc
  • extensionButton.prominentBackground#d9d9d8
  • extensionButton.prominentForeground#1a1a1a
  • extensionButton.prominentHoverBackground#d2d2d1
  • focusBorder#3060b078
  • foreground#6a6a6a
  • gitDecoration.addedResourceForeground#3e8a4e
  • gitDecoration.conflictingResourceForeground#a48300
  • gitDecoration.deletedResourceForeground#c04040
  • gitDecoration.ignoredResourceForeground#c0c0bf
  • gitDecoration.modifiedResourceForeground#2f70d4
  • gitDecoration.untrackedResourceForeground#3e8a4e
  • icon.foreground#6a6a6a
  • inlineChat.background#f5f5f4
  • inlineChat.border#c4c4c380
  • inlineChat.shadow#00000020
  • inlineChatInput.background#fdfdfc
  • inlineChatInput.border#dcdcdb
  • inlineChatInput.focusBorder#3060b0
  • input.background#f5f5f4
  • input.border#dcdcdb
  • input.foreground#1a1a1a
  • input.placeholderForeground#8a8a8a
  • inputOption.activeBackground#1a1a1a12
  • inputOption.activeBorder#c4c4c3
  • inputOption.activeForeground#1a1a1a
  • inputValidation.errorBackground#fbe8e8
  • inputValidation.errorBorder#c04040
  • inputValidation.infoBackground#e8f0fb
  • inputValidation.infoBorder#3060b0
  • inputValidation.warningBackground#fbf6e8
  • inputValidation.warningBorder#a48300
  • list.activeSelectionBackground#e0e0df
  • list.activeSelectionForeground#1a1a1a
  • list.focusBackground#e7e7e6
  • list.focusForeground#1a1a1a
  • list.highlightForeground#1a1a1a
  • list.hoverBackground#f0f0ef
  • list.hoverForeground#1a1a1a
  • list.inactiveSelectionBackground#ebebea
  • list.inactiveSelectionForeground#6a6a6a
  • list.warningForeground#a48300
  • merge.currentContentBackground#c8e8c830
  • merge.currentHeaderBackground#a8d8a850
  • merge.incomingContentBackground#d9775715
  • merge.incomingHeaderBackground#d9775738
  • minimap.background#fdfdfc
  • minimap.errorHighlight#c04040
  • minimap.findMatchHighlight#d9775760
  • minimap.selectionHighlight#1a1a1a22
  • minimap.warningHighlight#a48300
  • minimapGutter.addedBackground#4a8a4e
  • minimapGutter.deletedBackground#b85555
  • minimapGutter.modifiedBackground#3060b0
  • notificationLink.foreground#3060b0
  • notifications.background#f5f5f4
  • notifications.border#dcdcdb
  • notifications.foreground#1a1a1a
  • notificationsWarningIcon.foreground#a48300
  • panel.background#fdfdfc
  • panel.border#e7e7e6
  • panelTitle.activeBorder#d97757
  • panelTitle.activeForeground#1a1a1a
  • panelTitle.inactiveForeground#9a9a9a
  • peekView.border#c4c4c3
  • peekViewEditor.background#f5f5f4
  • peekViewEditorGutter.background#f5f5f4
  • peekViewResult.background#fdfdfc
  • peekViewResult.fileForeground#6a6a6a
  • peekViewResult.lineForeground#9a9a9a
  • peekViewResult.matchHighlightBackground#d9775738
  • peekViewResult.selectionBackground#1a1a1a12
  • peekViewResult.selectionForeground#1a1a1a
  • peekViewTitle.background#fdfdfc
  • peekViewTitleDescription.foreground#9a9a9a
  • peekViewTitleLabel.foreground#1a1a1a
  • pickerGroup.border#dcdcdb
  • pickerGroup.foreground#1a1a1a
  • problemsWarningIcon.foreground#a48300
  • progressBar.background#1a1a1a
  • quickInput.background#f5f5f4
  • quickInput.foreground#1a1a1a
  • quickInputList.focusBackground#1a1a1a12
  • quickInputList.focusForeground#1a1a1a
  • quickInputTitle.background#fdfdfc
  • scrollbar.shadow#00000015
  • scrollbarSlider.activeBackground#1a1a1a50
  • scrollbarSlider.background#1a1a1a20
  • scrollbarSlider.hoverBackground#1a1a1a35
  • selection.background#1a1a1a22
  • sideBar.background#fdfdfc
  • sideBar.border#e7e7e6
  • sideBar.foreground#4a4a4a
  • sideBarSectionHeader.background#fdfdfc
  • sideBarSectionHeader.border#e7e7e6
  • sideBarSectionHeader.foreground#5a5a5a
  • sideBarTitle.foreground#5a5a5a
  • statusBar.background#fdfdfc
  • statusBar.border#e7e7e6
  • statusBar.debuggingBackground#fdf8e8
  • statusBar.debuggingForeground#a48300
  • statusBar.foreground#5a5a5a
  • statusBar.noFolderBackground#fbfbfa
  • statusBar.noFolderForeground#5a5a5a
  • statusBarItem.activeBackground#dcdcdb
  • statusBarItem.hoverBackground#ebebea
  • statusBarItem.warningBackground#a48300
  • statusBarItem.warningForeground#fdfdfc
  • tab.activeBackground#f5f5f4
  • tab.activeBorder#00000000
  • tab.activeBorderTop#d97757
  • tab.activeForeground#1a1a1a
  • tab.border#e7e7e6
  • tab.hoverBackground#f0f0ef
  • tab.hoverForeground#6a6a6a
  • tab.inactiveBackground#fdfdfc
  • tab.inactiveForeground#9a9a9a
  • tab.unfocusedActiveBackground#f5f5f4
  • tab.unfocusedActiveForeground#6a6a6a
  • terminal.ansiBlack#3a3a3a
  • terminal.ansiBlue#3060b0
  • terminal.ansiBrightBlack#8a8a8a
  • terminal.ansiBrightBlue#4070c0
  • terminal.ansiBrightCyan#4090a0
  • terminal.ansiBrightGreen#55a05e
  • terminal.ansiBrightMagenta#8e5ed0
  • terminal.ansiBrightRed#c85050
  • terminal.ansiBrightWhite#3a3a3a
  • terminal.ansiBrightYellow#b89520
  • terminal.ansiCyan#3a8690
  • terminal.ansiGreen#4a8a4e
  • terminal.ansiMagenta#7d4fbf
  • terminal.ansiRed#b85555
  • terminal.ansiWhite#6a6a6a
  • terminal.ansiYellow#a08a20
  • terminal.background#fdfdfc
  • terminal.foreground#2a2a2a
  • terminal.selectionBackground#1a1a1a20
  • terminal.tab.activeBorder#d97757
  • terminalCursor.foreground#2f70d4
  • textBlockQuote.background#f5f5f4
  • textBlockQuote.border#c4c4c3
  • textCodeBlock.background#ebebea
  • textLink.activeForeground#4080d0
  • textLink.foreground#3060b0
  • textSeparator.foreground#dcdcdb
  • titleBar.activeBackground#fdfdfc
  • titleBar.activeForeground#6a6a6a
  • titleBar.border#e7e7e6
  • titleBar.inactiveBackground#fdfdfc
  • titleBar.inactiveForeground#c0c0bf
  • tree.indentGuidesStroke#ebebea
  • widget.shadow#00000018

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#707070italic
comment.block.documentation#808078italic
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier#c74468
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#c74468
string, string.quoted, string.template#3e8a4e
constant.character.escape#a06820
punctuation.definition.template-expression, punctuation.section.embedded#c74468
constant.numeric#c74468
constant.language.boolean, constant.language.null, constant.language.undefined#c74468
constant.language, constant.other#c74468
entity.name.function, meta.function entity.name.function#7b4cbf
meta.function-call entity.name.function, support.function#7b4cbf
variable, variable.other#1a1a1a
variable.parameter#b55a30
variable.language#c74468italic
variable.other.property, support.variable.property#1a1a1a
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, entity.other.inherited-class, support.class#7b4cbf
support.type, entity.name.type.primitive#7b4cbf
meta.decorator, entity.name.decorator, punctuation.decorator#3a8590
meta.object-literal.key, support.type.property-name#1a1a1a
keyword.operator#c74468
punctuation, meta.brace, meta.delimiter#707070
entity.name.tag#3e8a4e
entity.other.attribute-name#3a8590
punctuation.definition.tag#8a8a8a
string.quoted.double.html, string.quoted.single.html#3e8a4e
support.type.property-name.css#3a8590
support.constant.property-value.css#3e8a4e
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#3a8590
constant.numeric.css, keyword.other.unit.css#c74468
keyword.control.at-rule.css#c74468
support.type.property-name.json#3a8590
markup.heading, punctuation.definition.heading#c74468bold
markup.bold#1a1a1abold
markup.italic#1a1a1aitalic
markup.inline.raw, markup.fenced_code.block#3a8590
markup.underline.link, string.other.link#3060b0
markup.list, punctuation.definition.list#c74468
markup.quote#8a8a8aitalic
invalid#c04040underline
invalid.deprecated#8a8a8astrikethrough