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.activeBackground#1a1f2a
  • activityBar.activeBorder#FFD700
  • activityBar.background#050a15
  • activityBar.border#2a3a4a
  • activityBar.foreground#FFD700
  • activityBar.inactiveForeground#5a7a9a
  • activityBarBadge.background#FFA500
  • activityBarBadge.foreground#000000
  • badge.background#FFA500
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#FFA500
  • breadcrumb.focusForeground#FFD700
  • breadcrumb.foreground#8a9aaa
  • button.background#FFD700
  • button.foreground#000000
  • button.hoverBackground#FFA500
  • button.secondaryBackground#2a3a4a
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#3a4a5a
  • debugExceptionWidget.background#2a0a0a
  • debugExceptionWidget.border#DC143C
  • debugToolBar.background#1a1f2a
  • debugToolBar.border#FFD700
  • diffEditor.border#2a3a4a
  • diffEditor.insertedTextBackground#FFD70030
  • diffEditor.removedTextBackground#DC143C30
  • dropdown.background#1a1f2a
  • dropdown.border#FFD700
  • dropdown.foreground#ffffff
  • editor.background#0a0f1a
  • editor.findMatchBackground#00BFFF80
  • editor.findMatchHighlightBackground#00BFFF50
  • editor.foreground#f5f5dc
  • editor.inactiveSelectionBackground#FFD70050
  • editor.lineHighlightBackground#1a1f2a
  • editor.selectionBackground#FFD70080
  • editor.selectionHighlightBackground#FFA50040
  • editor.wordHighlightBackground#FFEA0030
  • editor.wordHighlightStrongBackground#FFEA0050
  • editorBracketMatch.background#FFD70050
  • editorBracketMatch.border#FFD700
  • editorCursor.foreground#FFD700
  • editorError.background#FF450080
  • editorError.border#DC143C
  • editorError.foreground#FF4500
  • editorGroupHeader.tabsBackground#050a15
  • editorGroupHeader.tabsBorder#2a3a4a
  • editorHint.foreground#87CEEB
  • editorIndentGuide.activeBackground1#FFD700
  • editorIndentGuide.background1#2a3a4a
  • editorInfo.foreground#00BFFF
  • editorLineNumber.activeForeground#FFA500
  • editorLineNumber.foreground#5a7a9a
  • editorSuggestWidget.background#1a1f2a
  • editorSuggestWidget.border#FFD700
  • editorSuggestWidget.foreground#f5f5dc
  • editorSuggestWidget.highlightForeground#FFD700
  • editorSuggestWidget.selectedBackground#FFD70060
  • editorWarning.foreground#FFA500
  • editorWhitespace.foreground#2a3a4a
  • editorWidget.background#1a1f2a
  • editorWidget.border#FFD700
  • editorWidget.foreground#f5f5dc
  • focusBorder#FFD700
  • gitDecoration.conflictingResourceForeground#FF8C00
  • gitDecoration.deletedResourceForeground#DC143C
  • gitDecoration.ignoredResourceForeground#5a7a9a
  • gitDecoration.modifiedResourceForeground#FFD700
  • gitDecoration.untrackedResourceForeground#87CEEB
  • input.background#1a1f2a
  • input.border#FFD700
  • input.foreground#ffffff
  • input.placeholderForeground#5a7a9a
  • inputOption.activeBorder#FFA500
  • inputValidation.errorBackground#2a0a0a
  • inputValidation.errorBorder#DC143C
  • inputValidation.warningBackground#2a1a0a
  • inputValidation.warningBorder#FF8C00
  • list.activeSelectionBackground#FFD70080
  • list.activeSelectionForeground#000000
  • list.errorForeground#ff8888
  • list.focusBackground#FFD70080
  • list.focusForeground#000000
  • list.highlightForeground#FFD700
  • list.hoverBackground#1a1f2a
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#2a3a4a
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#FFA500
  • merge.border#FFD700
  • merge.currentContentBackground#FFD70030
  • merge.currentHeaderBackground#FFD70070
  • merge.incomingContentBackground#00BFFF30
  • merge.incomingHeaderBackground#00BFFF70
  • minimap.errorHighlight#DC143C
  • minimap.findMatchHighlight#FFD70080
  • minimap.selectionHighlight#FFD70080
  • minimap.warningHighlight#FF8C00
  • minimapGutter.addedBackground#FFD700
  • minimapGutter.deletedBackground#DC143C
  • minimapGutter.modifiedBackground#FFA500
  • notificationCenter.border#2a3a4a
  • notificationCenterHeader.background#1a1f2a
  • notificationLink.foreground#87CEEB
  • notifications.background#1a1f2a
  • notifications.border#FFD700
  • notifications.foreground#ffffff
  • panel.background#0a0f1a
  • panel.border#2a3a4a
  • panelTitle.activeBorder#FFD700
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#8a9aaa
  • peekView.border#FFD700
  • peekViewEditor.background#1a1f2a
  • peekViewEditor.matchHighlightBackground#FFD70050
  • peekViewResult.background#0a0f1a
  • peekViewResult.matchHighlightBackground#FFD70050
  • peekViewResult.selectionBackground#FFD70080
  • peekViewTitle.background#1a1f2a
  • peekViewTitleDescription.foreground#8a9aaa
  • peekViewTitleLabel.foreground#FFA500
  • progressBar.background#FFD700
  • scrollbarSlider.activeBackground#FFA500A0
  • scrollbarSlider.background#FFD70060
  • scrollbarSlider.hoverBackground#FFD70080
  • sideBar.background#0a0f1a
  • sideBar.border#2a3a4a
  • sideBar.foreground#e0e0d0
  • sideBarSectionHeader.background#1a1f2a
  • sideBarSectionHeader.border#2a3a4a
  • sideBarSectionHeader.foreground#FFA500
  • sideBarTitle.foreground#FFD700
  • statusBar.background#FFD700
  • statusBar.border#2a3a4a
  • statusBar.debuggingBackground#00BFFF
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#2a3a4a
  • statusBarItem.errorBackground#DC143C
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.prominentBackground#FFA500
  • statusBarItem.prominentHoverBackground#FFD700
  • statusBarItem.warningBackground#FF8C00
  • statusBarItem.warningForeground#000000
  • tab.activeBackground#1a1f2a
  • tab.activeBorder#050a15
  • tab.activeBorderTop#FFD700
  • tab.activeForeground#ffffff
  • tab.border#0a0f1a
  • tab.hoverBackground#1a1f2a
  • tab.hoverBorder#FFA500
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#0a0f1a
  • tab.inactiveForeground#8a9aaa
  • terminal.ansiBlack#1a1a1a
  • terminal.ansiBlue#00BFFF
  • terminal.ansiBrightBlack#4a5a6a
  • terminal.ansiBrightBlue#40C8FF
  • terminal.ansiBrightCyan#B0E0E6
  • terminal.ansiBrightGreen#90EE90
  • terminal.ansiBrightMagenta#FFA500
  • terminal.ansiBrightRed#ff6666
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FFEA00
  • terminal.ansiCyan#87CEEB
  • terminal.ansiGreen#32CD32
  • terminal.ansiMagenta#FF8C00
  • terminal.ansiRed#DC143C
  • terminal.ansiWhite#f5f5dc
  • terminal.ansiYellow#FFD700
  • terminal.background#0a0f1a
  • terminal.foreground#f5f5dc
  • terminalCursor.foreground#FFD700
  • titleBar.activeBackground#050a15
  • titleBar.activeForeground#FFD700
  • titleBar.border#2a3a4a
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#5a7a9a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a7a9aitalic
keyword, storage.type, storage.modifier#FFA500bold
keyword.control, keyword.operator#FFD700bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#87CEEB
string, string.quoted#FFFFFF
string.template, string.quoted.template#F5F5DC
constant.character.escape#FFD700bold
string.regexp#FFA500
constant.numeric, constant.language#FFEA00bold
constant.language.boolean#00BFFFbold
variable, variable.other#FFD700
variable.parameter#FFA500italic
variable.other.property, support.variable.property#F0E68C
entity.name.function, support.function#00BFFFbold
meta.function-call#40C8FF
entity.name.type, entity.name.class, support.class#87CEEB
entity.other.inherited-class#B0E0E6italic
entity.name.tag#FFD700bold
entity.other.attribute-name#FFA500italic
entity.name.tag.css, entity.other.attribute-name.class.css#FFD700
support.type.property-name.css#FFA500
support.constant.property-value.css#FFEA00
support.type, support.class#87CEEB
support.constant#D3D3D3
support.type.property-name.json#FFD700
keyword.operator#FFA500
punctuation#c0d0e0
punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.array#a0b0c0
meta.brace, punctuation.section#87CEEB
invalid#ffffff
invalid.deprecated#5a7a9astrikethrough
markup.heading#FFD700bold
markup.bold#FFA500bold
markup.italic#F0E68Citalic
markup.inline.raw#FFFFFF
markup.underline.link#87CEEBunderline
markup.list#FFA500
markup.inserted#FFD700
markup.deleted#DC143C
markup.changed#FFA500
variable.language.this#FFD700italic
entity.name.type.ts, entity.name.type.tsx#87CEEB
meta.decorator, punctuation.decorator#FFD700bold
variable.language.special.self.python#FFA500italic
entity.name.function.decorator.python#FFD700
keyword.control.conditional, keyword.control.loop#FFA500bold
entity.name.exception, support.class.exception#DC143Cbold
storage.type.annotation, punctuation.definition.annotation#87CEEBitalic
entity.name.namespace#00BFFF
entity.name.tag#FFD700