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.activeBorder#FFD700
  • activityBar.background#0F1411
  • activityBar.border#0F1411
  • activityBar.foreground#FFD700
  • activityBar.inactiveForeground#5E7365
  • activityBarBadge.background#FFD700
  • activityBarBadge.foreground#0F1411
  • badge.background#FFD700
  • badge.foreground#0F1411
  • breadcrumb.activeSelectionForeground#81C784
  • breadcrumb.focusForeground#EAF0F8
  • breadcrumb.foreground#7D9485
  • breadcrumbPicker.background#131815
  • button.background#FFD700
  • button.foreground#0F1411
  • button.hoverBackground#E5551B
  • button.secondaryBackground#1E2922
  • button.secondaryForeground#EAF0F8
  • button.secondaryHoverBackground#25362B
  • descriptionForeground#A7BEAF
  • diffEditor.diagonalFill#1E292280
  • diffEditor.insertedTextBackground#50C87820
  • diffEditor.removedTextBackground#FFD70020
  • dropdown.background#131815
  • dropdown.border#1E2922
  • dropdown.foreground#EAF0F8
  • dropdown.listBackground#131815
  • editor.background#161C18
  • editor.findMatchBackground#FFD7004D
  • editor.findMatchHighlightBackground#81C78433
  • editor.findRangeHighlightBackground#1F2D244D
  • editor.foreground#EAF0F8
  • editor.inactiveSelectionBackground#81C78422
  • editor.lineHighlightBackground#1F2D2480
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#81C78433
  • editor.selectionHighlightBackground#81C7841F
  • editor.wordHighlightBackground#81C78426
  • editor.wordHighlightStrongBackground#FFD70033
  • editorBracketHighlight.foreground1#FFD700
  • editorBracketHighlight.foreground2#81C784
  • editorBracketHighlight.foreground3#E6C280
  • editorBracketHighlight.foreground4#66BB6A
  • editorBracketHighlight.foreground5#EAF0F8
  • editorBracketHighlight.foreground6#A7BEAF
  • editorBracketMatch.background#81C78433
  • editorBracketMatch.border#81C784
  • editorCursor.foreground#FFD700
  • editorGroup.border#0F1411
  • editorGroupHeader.tabsBackground#0F1411
  • editorGroupHeader.tabsBorder#0F1411
  • editorGutter.addedBackground#50C878
  • editorGutter.deletedBackground#FFD700
  • editorGutter.modifiedBackground#81C784
  • editorHoverWidget.background#131815
  • editorHoverWidget.border#1E2922
  • editorIndentGuide.activeBackground1#4B6153
  • editorIndentGuide.background1#1E2922
  • editorLineNumber.activeForeground#FFD700
  • editorLineNumber.foreground#4B6153
  • editorOverviewRuler.border#0F1411
  • editorOverviewRuler.errorForeground#FFD700
  • editorOverviewRuler.findMatchForeground#FFD70099
  • editorOverviewRuler.infoForeground#81C784
  • editorOverviewRuler.warningForeground#E6C280
  • editorRuler.foreground#1E2922
  • editorSuggestWidget.background#131815
  • editorSuggestWidget.border#1E2922
  • editorSuggestWidget.foreground#EAF0F8
  • editorSuggestWidget.highlightForeground#FFD700
  • editorSuggestWidget.selectedBackground#1F2D24
  • editorWhitespace.foreground#1E2922
  • editorWidget.background#131815
  • editorWidget.border#1E2922
  • editorWidget.foreground#EAF0F8
  • errorForeground#FFD700
  • focusBorder#FFD70080
  • foreground#EAF0F8
  • gitDecoration.addedResourceForeground#50C878
  • gitDecoration.conflictingResourceForeground#FFD700
  • gitDecoration.deletedResourceForeground#FFD700
  • gitDecoration.ignoredResourceForeground#5E7365
  • gitDecoration.modifiedResourceForeground#81C784
  • gitDecoration.submoduleResourceForeground#66BB6A
  • gitDecoration.untrackedResourceForeground#E6C280
  • input.background#131815
  • input.border#1E2922
  • input.foreground#EAF0F8
  • input.placeholderForeground#5E7365
  • inputOption.activeBackground#FFD70033
  • inputOption.activeBorder#FFD700
  • inputOption.activeForeground#EAF0F8
  • inputValidation.errorBackground#131815
  • inputValidation.errorBorder#FFD700
  • inputValidation.infoBackground#131815
  • inputValidation.infoBorder#81C784
  • inputValidation.warningBackground#131815
  • inputValidation.warningBorder#E6C280
  • list.activeSelectionBackground#1F2D24
  • list.activeSelectionForeground#F2F4F8
  • list.errorForeground#FFD700
  • list.focusBackground#1F2D24
  • list.focusHighlightForeground#FFD700
  • list.highlightForeground#FFD700
  • list.hoverBackground#17211A80
  • list.hoverForeground#F2F4F8
  • list.inactiveSelectionBackground#17211A
  • list.inactiveSelectionForeground#EAF0F8
  • list.warningForeground#E6C280
  • notificationLink.foreground#81C784
  • notifications.background#131815
  • notifications.border#1E2922
  • notifications.foreground#EAF0F8
  • notificationsErrorIcon.foreground#FFD700
  • notificationsInfoIcon.foreground#81C784
  • notificationsWarningIcon.foreground#E6C280
  • panel.background#111613
  • panel.border#0F1411
  • panelTitle.activeBorder#FFD700
  • panelTitle.activeForeground#81C784
  • panelTitle.inactiveForeground#7D9485
  • peekView.border#81C784
  • peekViewEditor.background#111613
  • peekViewEditor.matchHighlightBackground#FFD7004D
  • peekViewResult.background#131815
  • peekViewResult.fileForeground#EAF0F8
  • peekViewResult.lineForeground#A7BEAF
  • peekViewResult.matchHighlightBackground#FFD7004D
  • peekViewResult.selectionBackground#1F2D24
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#0F1411
  • peekViewTitleDescription.foreground#7D9485
  • peekViewTitleLabel.foreground#81C784
  • progressBar.background#FFD700
  • scrollbarSlider.activeBackground#FFD70066
  • scrollbarSlider.background#5E736526
  • scrollbarSlider.hoverBackground#5E73654D
  • sideBar.background#131815
  • sideBar.border#0F1411
  • sideBar.foreground#A7BEAF
  • sideBarSectionHeader.background#1E2922
  • sideBarSectionHeader.border#131815
  • sideBarSectionHeader.foreground#F2F4F8
  • sideBarTitle.foreground#81C784
  • statusBar.background#0C110E
  • statusBar.border#0C110E
  • statusBar.debuggingBackground#FFD700
  • statusBar.debuggingForeground#0F1411
  • statusBar.foreground#81C784
  • statusBar.noFolderBackground#0C110E
  • statusBar.noFolderForeground#81C784
  • statusBarItem.errorBackground#FFD700
  • statusBarItem.errorForeground#0F1411
  • statusBarItem.hoverBackground#1E2922
  • statusBarItem.prominentBackground#1E2922
  • statusBarItem.prominentHoverBackground#27382D
  • statusBarItem.remoteBackground#FFD700
  • statusBarItem.remoteForeground#0F1411
  • statusBarItem.warningBackground#E6C280
  • statusBarItem.warningForeground#0F1411
  • tab.activeBackground#161C18
  • tab.activeBorder#FFD700
  • tab.activeForeground#81C784
  • tab.border#0F1411
  • tab.hoverBackground#1B222C
  • tab.hoverForeground#EAF0F8
  • tab.inactiveBackground#131815
  • tab.inactiveForeground#7D9485
  • tab.unfocusedActiveBorder#FFD70080
  • tab.unfocusedActiveForeground#81C784B3
  • terminal.ansiBlack#0F1411
  • terminal.ansiBlue#81C784
  • terminal.ansiBrightBlack#5E7365
  • terminal.ansiBrightBlue#66BB6A
  • terminal.ansiBrightCyan#66BB6A
  • terminal.ansiBrightGreen#6CE896
  • terminal.ansiBrightMagenta#CD9EED
  • terminal.ansiBrightRed#FFD700
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFC043
  • terminal.ansiCyan#81C784
  • terminal.ansiGreen#50C878
  • terminal.ansiMagenta#B87FD9
  • terminal.ansiRed#E5551B
  • terminal.ansiWhite#EAF0F8
  • terminal.ansiYellow#E6C280
  • terminal.background#111613
  • terminal.foreground#EAF0F8
  • terminal.selectionBackground#81C78433
  • terminalCursor.foreground#FFD700
  • titleBar.activeBackground#0F1411
  • titleBar.activeForeground#E5EAF0
  • titleBar.border#0C110E
  • titleBar.inactiveBackground#0F1411
  • titleBar.inactiveForeground#7D9485
  • widget.shadow#090C0E80

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, keyword.control, storage.type, storage.modifier#FFD700bold
entity.name.function, support.function, meta.function-call#81C784
string, constant.numeric, constant.language#E6C280
variable, variable.parameter, variable.other#F2F5F9
entity.name.type, entity.name.class, support.type, support.class#66BB6A
comment, punctuation.definition.comment#5E7365italic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FFD700
entity.other.attribute-name#81C784
support.type.property-name.css, meta.property-name.css#66BB6A
support.type.property-name.json#81C784
keyword.operator, punctuation.separator, punctuation.terminator#A7BEAF
string.regexp#6CE896
markup.heading, entity.name.section#FFD700bold
markup.underline.link, string.other.link#81C784
markup.bold#F2F5F9bold
markup.italic#66BB6Aitalic
markup.inline.raw, markup.raw.block#E6C280