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#fbf7f0
  • activityBar.border#9f9690
  • activityBar.foreground#000000
  • activityBar.inactiveForeground#595959
  • activityBarBadge.background#0031a9
  • activityBarBadge.foreground#ffffff
  • badge.background#0031a9
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#000000
  • breadcrumb.background#fbf7f0
  • breadcrumb.focusForeground#000000
  • breadcrumb.foreground#595959
  • button.background#c9b9b0
  • button.foreground#000000
  • button.hoverBackground#9f9690
  • diffEditor.insertedLineBackground#c3ebc120
  • diffEditor.insertedTextBackground#c3ebc140
  • diffEditor.removedLineBackground#f4d0cf20
  • diffEditor.removedTextBackground#f4d0cf40
  • dropdown.background#efe9dd
  • dropdown.border#9f9690
  • dropdown.foreground#000000
  • editor.background#fbf7f0
  • editor.findMatchBackground#f3d000
  • editor.findMatchHighlightBackground#a4d5f999
  • editor.foreground#000000
  • editor.lineHighlightBackground#f1d5d0
  • editor.selectionBackground#c2bcb5
  • editor.selectionForeground#000000
  • editor.wordHighlightBackground#f0c1cf99
  • editor.wordHighlightStrongBackground#f0c1cf99
  • editorBracketMatch.background#7fdfcf
  • editorBracketMatch.border#7fdfcf
  • editorCursor.foreground#d00000
  • editorError.foreground#d00000
  • editorGroupHeader.tabsBackground#e0d4ce
  • editorGroupHeader.tabsBorder#9f9690
  • editorHoverWidget.background#efe9dd
  • editorHoverWidget.border#9f9690
  • editorIndentGuide.activeBackground1#595959
  • editorIndentGuide.background1#9f9690
  • editorInfo.foreground#006300
  • editorLineNumber.activeForeground#000000
  • editorLineNumber.foreground#595959
  • editorSuggestWidget.background#efe9dd
  • editorSuggestWidget.border#9f9690
  • editorSuggestWidget.selectedBackground#c9b9b0
  • editorWarning.foreground#808000
  • editorWhitespace.foreground#9f9690
  • editorWidget.background#efe9dd
  • editorWidget.border#9f9690
  • gitDecoration.addedResourceForeground#005000
  • gitDecoration.conflictingResourceForeground#7f0000
  • gitDecoration.deletedResourceForeground#8f1313
  • gitDecoration.ignoredResourceForeground#595959
  • gitDecoration.modifiedResourceForeground#553d00
  • gitDecoration.untrackedResourceForeground#304463
  • input.background#efe9dd
  • input.border#9f9690
  • input.foreground#000000
  • input.placeholderForeground#595959
  • inputOption.activeBorder#0031a9
  • list.activeSelectionBackground#c9b9b0
  • list.activeSelectionForeground#000000
  • list.focusBackground#c9b9b0
  • list.focusForeground#000000
  • list.hoverBackground#b2e4dc
  • list.hoverForeground#000000
  • list.inactiveSelectionBackground#dfd5cf
  • list.inactiveSelectionForeground#000000
  • notificationLink.foreground#3546c2
  • notifications.background#efe9dd
  • notifications.border#9f9690
  • notifications.foreground#000000
  • panel.background#efe9dd
  • panel.border#9f9690
  • panelTitle.activeBorder#0031a9
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#595959
  • peekView.border#9f9690
  • peekViewEditor.background#efe9dd
  • peekViewResult.background#efe9dd
  • peekViewTitle.background#dfd5cf
  • progressBar.background#0031a9
  • scrollbar.shadow#fbf7f0
  • scrollbarSlider.activeBackground#595959
  • scrollbarSlider.background#c9b9b0
  • scrollbarSlider.hoverBackground#9f9690
  • sideBar.background#efe9dd
  • sideBar.border#9f9690
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#dfd5cf
  • sideBarSectionHeader.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#cab9b2
  • statusBar.border#545454
  • statusBar.debuggingBackground#ef7969
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#cab9b2
  • tab.activeBackground#fbf7f0
  • tab.activeForeground#000000
  • tab.border#9f9690
  • tab.inactiveBackground#c8b8b2
  • tab.inactiveForeground#595959
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0031a9
  • terminal.ansiBrightBlack#595959
  • terminal.ansiBrightBlue#3546c2
  • terminal.ansiBrightCyan#005f5f
  • terminal.ansiBrightGreen#00603f
  • terminal.ansiBrightMagenta#531ab6
  • terminal.ansiBrightRed#972500
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#894000
  • terminal.ansiCyan#00598b
  • terminal.ansiGreen#006300
  • terminal.ansiMagenta#721045
  • terminal.ansiRed#a60000
  • terminal.ansiWhite#a6a6a6
  • terminal.ansiYellow#6d5000
  • terminal.background#fbf7f0
  • terminal.foreground#000000
  • titleBar.activeBackground#fbf7f0
  • titleBar.activeForeground#000000
  • titleBar.border#9f9690
  • titleBar.inactiveBackground#efe9dd
  • titleBar.inactiveForeground#595959

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7f0000
string, string.quoted, string.template#00598b
constant.numeric, constant.language, constant.character#000000
constant.other#531ab6
keyword, storage.type, storage.modifier#0031a9
keyword.control, keyword.operator.new#0031a9bold
variable, variable.other#00603f
variable.parameter, variable.language#574316
entity.name.function, support.function#602938
entity.name.type, entity.name.class, support.type, support.class#306010
entity.name.tag#0031a9
entity.other.attribute-name#00603f
support.constant, support.variable#721045
meta.preprocessor, entity.name.function.preprocessor#894000
invalid, invalid.illegal#000000
invalid.deprecated#000000
markup.heading#00603fbold
markup.bold#000000bold
markup.italic#000000italic
markup.underline.link#3546c2underline
markup.inline.raw, markup.fenced_code#00603f
markup.quote#304463
punctuation.definition.list#000000