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#1a1a1a
  • activityBar.activeBorder#6B8E23
  • activityBar.background#000000
  • activityBar.border#2a2a2a
  • activityBar.foreground#808080
  • activityBar.inactiveForeground#4a4a4a
  • activityBarBadge.background#556B2F
  • activityBarBadge.foreground#ffffff
  • badge.background#556B2F
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#6B8E23
  • breadcrumb.focusForeground#8B9A6B
  • breadcrumb.foreground#7a7a7a
  • button.background#2F4F2F
  • button.foreground#d0d0d0
  • button.hoverBackground#556B2F
  • button.secondaryBackground#2a2a2a
  • button.secondaryForeground#d0d0d0
  • button.secondaryHoverBackground#3a3a3a
  • debugExceptionWidget.background#2a2a2a
  • debugExceptionWidget.border#696969
  • debugToolBar.background#1a1a1a
  • debugToolBar.border#2F4F2F
  • diffEditor.border#2a2a2a
  • diffEditor.insertedTextBackground#6B8E2330
  • diffEditor.removedTextBackground#69696930
  • dropdown.background#1a1a1a
  • dropdown.border#2F4F2F
  • dropdown.foreground#d0d0d0
  • editor.background#0d0d0d
  • editor.findMatchBackground#556B2F80
  • editor.findMatchHighlightBackground#556B2F50
  • editor.foreground#d0d0d0
  • editor.inactiveSelectionBackground#2a2a2a50
  • editor.lineHighlightBackground#1a1a1a
  • editor.selectionBackground#2a2a2a80
  • editor.selectionHighlightBackground#3a3a3a40
  • editor.wordHighlightBackground#4a4a4a30
  • editor.wordHighlightStrongBackground#4a4a4a50
  • editorBracketMatch.background#3a3a3a50
  • editorBracketMatch.border#6B8E23
  • editorCursor.foreground#8B9A6B
  • editorError.background#69696980
  • editorError.border#808080
  • editorError.foreground#696969
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#2a2a2a
  • editorHint.foreground#8B9A6B
  • editorIndentGuide.activeBackground1#4a4a4a
  • editorIndentGuide.background1#2a2a2a
  • editorInfo.foreground#6B8E23
  • editorLineNumber.activeForeground#8B9A6B
  • editorLineNumber.foreground#5a5a5a
  • editorSuggestWidget.background#1a1a1a
  • editorSuggestWidget.border#2F4F2F
  • editorSuggestWidget.foreground#d0d0d0
  • editorSuggestWidget.highlightForeground#8B9A6B
  • editorSuggestWidget.selectedBackground#3a3a3a60
  • editorWarning.foreground#A9A9A9
  • editorWhitespace.foreground#2a2a2a
  • editorWidget.background#1a1a1a
  • editorWidget.border#2F4F2F
  • editorWidget.foreground#d0d0d0
  • focusBorder#6B8E23
  • gitDecoration.conflictingResourceForeground#556B2F
  • gitDecoration.deletedResourceForeground#696969
  • gitDecoration.ignoredResourceForeground#4a4a4a
  • gitDecoration.modifiedResourceForeground#6B8E23
  • gitDecoration.untrackedResourceForeground#8B9A6B
  • input.background#1a1a1a
  • input.border#2F4F2F
  • input.foreground#d0d0d0
  • input.placeholderForeground#5a5a5a
  • inputOption.activeBorder#6B8E23
  • inputValidation.errorBackground#2a2a2a
  • inputValidation.errorBorder#808080
  • inputValidation.warningBackground#2a2a2a
  • inputValidation.warningBorder#A9A9A9
  • list.activeSelectionBackground#3a3a3a80
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#A9A9A9
  • list.focusBackground#3a3a3a80
  • list.focusForeground#ffffff
  • list.highlightForeground#8B9A6B
  • list.hoverBackground#1a1a1a
  • list.hoverForeground#d0d0d0
  • list.inactiveSelectionBackground#2a2a2a
  • list.inactiveSelectionForeground#d0d0d0
  • list.warningForeground#808080
  • merge.border#6B8E23
  • merge.currentContentBackground#2F4F2F30
  • merge.currentHeaderBackground#2F4F2F70
  • merge.incomingContentBackground#69696930
  • merge.incomingHeaderBackground#69696970
  • minimap.errorHighlight#808080
  • minimap.findMatchHighlight#556B2F80
  • minimap.selectionHighlight#3a3a3a80
  • minimap.warningHighlight#A9A9A9
  • minimapGutter.addedBackground#6B8E23
  • minimapGutter.deletedBackground#696969
  • minimapGutter.modifiedBackground#8B9A6B
  • notificationCenter.border#2a2a2a
  • notificationCenterHeader.background#1a1a1a
  • notificationLink.foreground#8B9A6B
  • notifications.background#1a1a1a
  • notifications.border#2F4F2F
  • notifications.foreground#d0d0d0
  • panel.background#0d0d0d
  • panel.border#2a2a2a
  • panelTitle.activeBorder#6B8E23
  • panelTitle.activeForeground#d0d0d0
  • panelTitle.inactiveForeground#7a7a7a
  • peekView.border#2F4F2F
  • peekViewEditor.background#1a1a1a
  • peekViewEditor.matchHighlightBackground#556B2F50
  • peekViewResult.background#0d0d0d
  • peekViewResult.matchHighlightBackground#556B2F50
  • peekViewResult.selectionBackground#3a3a3a80
  • peekViewTitle.background#1a1a1a
  • peekViewTitleDescription.foreground#7a7a7a
  • peekViewTitleLabel.foreground#8B9A6B
  • progressBar.background#556B2F
  • scrollbarSlider.activeBackground#4a4a4aA0
  • scrollbarSlider.background#3a3a3a60
  • scrollbarSlider.hoverBackground#3a3a3a80
  • sideBar.background#0d0d0d
  • sideBar.border#2a2a2a
  • sideBar.foreground#c0c0c0
  • sideBarSectionHeader.background#1a1a1a
  • sideBarSectionHeader.border#2a2a2a
  • sideBarSectionHeader.foreground#6B8E23
  • sideBarTitle.foreground#8B9A6B
  • statusBar.background#2F4F2F
  • statusBar.border#2a2a2a
  • statusBar.debuggingBackground#556B2F
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#d0d0d0
  • statusBar.noFolderBackground#2a2a2a
  • statusBarItem.errorBackground#696969
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.prominentBackground#556B2F
  • statusBarItem.prominentHoverBackground#6B8E23
  • statusBarItem.warningBackground#808080
  • statusBarItem.warningForeground#000000
  • tab.activeBackground#1a1a1a
  • tab.activeBorder#000000
  • tab.activeBorderTop#6B8E23
  • tab.activeForeground#d0d0d0
  • tab.border#0d0d0d
  • tab.hoverBackground#1a1a1a
  • tab.hoverBorder#556B2F
  • tab.hoverForeground#d0d0d0
  • tab.inactiveBackground#0d0d0d
  • tab.inactiveForeground#7a7a7a
  • terminal.ansiBlack#1a1a1a
  • terminal.ansiBlue#556B2F
  • terminal.ansiBrightBlack#4a4a4a
  • terminal.ansiBrightBlue#6B8E23
  • terminal.ansiBrightCyan#556B2F
  • terminal.ansiBrightGreen#9ACD32
  • terminal.ansiBrightMagenta#A9A9A9
  • terminal.ansiBrightRed#A9A9A9
  • terminal.ansiBrightWhite#e0e0e0
  • terminal.ansiBrightYellow#BDB76B
  • terminal.ansiCyan#2F4F2F
  • terminal.ansiGreen#6B8E23
  • terminal.ansiMagenta#808080
  • terminal.ansiRed#696969
  • terminal.ansiWhite#c0c0c0
  • terminal.ansiYellow#8B9A6B
  • terminal.background#0d0d0d
  • terminal.foreground#d0d0d0
  • terminalCursor.foreground#8B9A6B
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#808080
  • titleBar.border#2a2a2a
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#4a4a4a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a5a5aitalic
keyword, storage.type, storage.modifier#808080bold
keyword.control, keyword.operator#A9A9A9bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#6B8E23
string, string.quoted#8B9A6B
string.template, string.quoted.template#9ACD32
constant.character.escape#6B8E23bold
string.regexp#556B2F
constant.numeric, constant.language#BDB76Bbold
constant.language.boolean#A9A9A9bold
variable, variable.other#3a3a3a
variable.parameter#696969italic
variable.other.property, support.variable.property#808080
entity.name.function, support.function#A9A9A9bold
meta.function-call#C0C0C0
entity.name.type, entity.name.class, support.class#556B2F
entity.other.inherited-class#6B8E23italic
entity.name.tag#696969bold
entity.other.attribute-name#808080italic
entity.name.tag.css, entity.other.attribute-name.class.css#696969
support.type.property-name.css#808080
support.constant.property-value.css#8B9A6B
support.type, support.class#6B8E23
support.constant#D3D3D3
support.type.property-name.json#808080
keyword.operator#A9A9A9
punctuation#9a9a9a
punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.array#7a7a7a
meta.brace, punctuation.section#808080
invalid#e0e0e0
invalid.deprecated#5a5a5astrikethrough
markup.heading#A9A9A9bold
markup.bold#808080bold
markup.italic#8B9A6Bitalic
markup.inline.raw#6B8E23
markup.underline.link#556B2Funderline
markup.list#808080
markup.inserted#6B8E23
markup.deleted#696969
markup.changed#8B9A6B
variable.language.this#4a4a4aitalic
entity.name.type.ts, entity.name.type.tsx#556B2F
meta.decorator, punctuation.decorator#6B8E23bold
variable.language.special.self.python#696969italic
entity.name.function.decorator.python#6B8E23
keyword.control.conditional, keyword.control.loop#A9A9A9bold
entity.name.exception, support.class.exception#696969bold
storage.type.annotation, punctuation.definition.annotation#8B9A6Bitalic
entity.name.namespace#556B2F
entity.name.tag#808080