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#1a2a1a
  • activityBar.activeBorder#32CD32
  • activityBar.background#0a0a0a
  • activityBar.border#2a4a2a
  • activityBar.foreground#00FF00
  • activityBar.inactiveForeground#5a8a5a
  • activityBarBadge.background#FF4500
  • activityBarBadge.foreground#ffffff
  • badge.background#FF4500
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#00FF00
  • breadcrumb.focusForeground#32CD32
  • breadcrumb.foreground#7a9a7a
  • button.background#32CD32
  • button.foreground#000000
  • button.hoverBackground#00FF00
  • button.secondaryBackground#2a4a2a
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#3a5a3a
  • debugExceptionWidget.background#2a0a0a
  • debugExceptionWidget.border#DC143C
  • debugToolBar.background#1a2a1a
  • debugToolBar.border#32CD32
  • diffEditor.border#2a4a2a
  • diffEditor.insertedTextBackground#32CD3230
  • diffEditor.removedTextBackground#DC143C30
  • dropdown.background#1a2a1a
  • dropdown.border#32CD32
  • dropdown.foreground#ffffff
  • editor.background#0a1a0a
  • editor.findMatchBackground#FFD70080
  • editor.findMatchHighlightBackground#FFD70050
  • editor.foreground#F0FFF0
  • editor.inactiveSelectionBackground#32CD3250
  • editor.lineHighlightBackground#1a2a1a
  • editor.selectionBackground#32CD3280
  • editor.selectionHighlightBackground#7FFF0040
  • editor.wordHighlightBackground#00FF0030
  • editor.wordHighlightStrongBackground#00FF0050
  • editorBracketMatch.background#32CD3250
  • editorBracketMatch.border#00FF00
  • editorCursor.foreground#00FF00
  • editorError.background#8B000080
  • editorError.border#DC143C
  • editorError.foreground#8B0000
  • editorGroupHeader.tabsBackground#0a0a0a
  • editorGroupHeader.tabsBorder#2a4a2a
  • editorHint.foreground#7FFF00
  • editorIndentGuide.activeBackground1#32CD32
  • editorIndentGuide.background1#2a4a2a
  • editorInfo.foreground#32CD32
  • editorLineNumber.activeForeground#7FFF00
  • editorLineNumber.foreground#5a8a5a
  • editorSuggestWidget.background#1a2a1a
  • editorSuggestWidget.border#32CD32
  • editorSuggestWidget.foreground#F0FFF0
  • editorSuggestWidget.highlightForeground#00FF00
  • editorSuggestWidget.selectedBackground#32CD3260
  • editorWarning.foreground#FF4500
  • editorWhitespace.foreground#2a4a2a
  • editorWidget.background#1a2a1a
  • editorWidget.border#32CD32
  • editorWidget.foreground#F0FFF0
  • focusBorder#00FF00
  • gitDecoration.conflictingResourceForeground#FF4500
  • gitDecoration.deletedResourceForeground#DC143C
  • gitDecoration.ignoredResourceForeground#5a8a5a
  • gitDecoration.modifiedResourceForeground#32CD32
  • gitDecoration.untrackedResourceForeground#7FFF00
  • input.background#1a2a1a
  • input.border#32CD32
  • input.foreground#ffffff
  • input.placeholderForeground#5a8a5a
  • inputOption.activeBorder#7FFF00
  • inputValidation.errorBackground#2a0a0a
  • inputValidation.errorBorder#DC143C
  • inputValidation.warningBackground#2a1a0a
  • inputValidation.warningBorder#FF4500
  • list.activeSelectionBackground#32CD3280
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#ff8888
  • list.focusBackground#32CD3280
  • list.focusForeground#ffffff
  • list.highlightForeground#7FFF00
  • list.hoverBackground#1a2a1a
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#2a4a2a
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#FF6347
  • merge.border#00FF00
  • merge.currentContentBackground#32CD3230
  • merge.currentHeaderBackground#32CD3270
  • merge.incomingContentBackground#FF450030
  • merge.incomingHeaderBackground#FF450070
  • minimap.errorHighlight#DC143C
  • minimap.findMatchHighlight#FFD70080
  • minimap.selectionHighlight#32CD3280
  • minimap.warningHighlight#FF4500
  • minimapGutter.addedBackground#32CD32
  • minimapGutter.deletedBackground#DC143C
  • minimapGutter.modifiedBackground#7FFF00
  • notificationCenter.border#2a4a2a
  • notificationCenterHeader.background#1a2a1a
  • notificationLink.foreground#7FFF00
  • notifications.background#1a2a1a
  • notifications.border#32CD32
  • notifications.foreground#ffffff
  • panel.background#0a1a0a
  • panel.border#2a4a2a
  • panelTitle.activeBorder#32CD32
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#7a9a7a
  • peekView.border#32CD32
  • peekViewEditor.background#1a2a1a
  • peekViewEditor.matchHighlightBackground#32CD3250
  • peekViewResult.background#0a1a0a
  • peekViewResult.matchHighlightBackground#32CD3250
  • peekViewResult.selectionBackground#32CD3280
  • peekViewTitle.background#1a2a1a
  • peekViewTitleDescription.foreground#7a9a7a
  • peekViewTitleLabel.foreground#7FFF00
  • progressBar.background#00FF00
  • scrollbarSlider.activeBackground#00FF00A0
  • scrollbarSlider.background#32CD3260
  • scrollbarSlider.hoverBackground#32CD3280
  • sideBar.background#0a1a0a
  • sideBar.border#2a4a2a
  • sideBar.foreground#d0f0d0
  • sideBarSectionHeader.background#1a2a1a
  • sideBarSectionHeader.border#2a4a2a
  • sideBarSectionHeader.foreground#32CD32
  • sideBarTitle.foreground#7FFF00
  • statusBar.background#00FF00
  • statusBar.border#2a4a2a
  • statusBar.debuggingBackground#FF4500
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#2a4a2a
  • statusBarItem.errorBackground#DC143C
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.prominentBackground#32CD32
  • statusBarItem.prominentHoverBackground#7FFF00
  • statusBarItem.warningBackground#FF6347
  • statusBarItem.warningForeground#000000
  • tab.activeBackground#1a2a1a
  • tab.activeBorder#0a0a0a
  • tab.activeBorderTop#00FF00
  • tab.activeForeground#ffffff
  • tab.border#1a1a1a
  • tab.hoverBackground#1a2a1a
  • tab.hoverBorder#32CD32
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#0a1a0a
  • tab.inactiveForeground#7a9a7a
  • terminal.ansiBlack#1a1a1a
  • terminal.ansiBlue#1E90FF
  • terminal.ansiBrightBlack#3a5a3a
  • terminal.ansiBrightBlue#40C8FF
  • terminal.ansiBrightCyan#90EE90
  • terminal.ansiBrightGreen#7FFF00
  • terminal.ansiBrightMagenta#FF6347
  • terminal.ansiBrightRed#ff6666
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffea00
  • terminal.ansiCyan#32CD32
  • terminal.ansiGreen#00FF00
  • terminal.ansiMagenta#FF4500
  • terminal.ansiRed#DC143C
  • terminal.ansiWhite#F0FFF0
  • terminal.ansiYellow#FFD700
  • terminal.background#0a1a0a
  • terminal.foreground#F0FFF0
  • terminalCursor.foreground#00FF00
  • titleBar.activeBackground#0a0a0a
  • titleBar.activeForeground#32CD32
  • titleBar.border#2a4a2a
  • titleBar.inactiveBackground#050505
  • titleBar.inactiveForeground#5a8a5a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a8a5aitalic
keyword, storage.type, storage.modifier#DC143Cbold
keyword.control, keyword.operator#FF4500bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#32CD32
string, string.quoted#FFD700
string.template, string.quoted.template#FFEA00
constant.character.escape#00FF00bold
string.regexp#7FFF00
constant.numeric, constant.language#FFFFFFbold
constant.language.boolean#FF6347bold
variable, variable.other#00FF00bold
variable.parameter#7FFF00italic
variable.other.property, support.variable.property#90EE90
entity.name.function, support.function#FF4500bold
meta.function-call#FF6347
entity.name.type, entity.name.class, support.class#1E90FF
entity.other.inherited-class#40C8FFitalic
entity.name.tag#32CD32bold
entity.other.attribute-name#7FFF00italic
entity.name.tag.css, entity.other.attribute-name.class.css#00FF00
support.type.property-name.css#32CD32
support.constant.property-value.css#FFD700
support.type, support.class#90EE90
support.constant#A8A8A8
support.type.property-name.json#32CD32
keyword.operator#FF4500
punctuation#a0d0a0
punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.array#80c080
meta.brace, punctuation.section#90EE90
invalid#ffffff
invalid.deprecated#5a8a5astrikethrough
markup.heading#00FF00bold
markup.bold#FF4500bold
markup.italic#7FFF00italic
markup.inline.raw#FFD700
markup.underline.link#32CD32underline
markup.list#7FFF00
markup.inserted#00FF00
markup.deleted#DC143C
markup.changed#FF4500
variable.language.this#DC143Citalic
entity.name.type.ts, entity.name.type.tsx#1E90FF
meta.decorator, punctuation.decorator#FF4500bold
variable.language.special.self.python#00FF00italic
entity.name.function.decorator.python#32CD32
keyword.control.conditional, keyword.control.loop#FF6347bold
entity.name.exception, support.class.exception#8B0000bold
storage.type.annotation, punctuation.definition.annotation#7FFF00italic
entity.name.namespace#1E90FF
entity.name.tag#32CD32