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#3a00cc
  • activityBar.background#fbf4ea
  • activityBar.foreground#b86b00
  • activityBar.inactiveForeground#8c7d73
  • activityBarBadge.background#3a00cc
  • activityBarBadge.foreground#fdfaf5
  • badge.background#3a00cc
  • badge.foreground#fdfaf5
  • breadcrumb.activeSelectionForeground#3a00cc
  • breadcrumb.focusForeground#2a2622
  • breadcrumb.foreground#6a5d55
  • button.background#3a00cc
  • button.foreground#fdfaf5
  • button.hoverBackground#3a00ccd4
  • button.secondaryBackground#b86b00
  • button.secondaryForeground#fdfaf5
  • button.secondaryHoverBackground#b86b00d4
  • diffEditor.border#d9d0c8
  • diffEditor.insertedLineBackground#0064420f
  • diffEditor.insertedTextBackground#0064421a
  • diffEditor.removedLineBackground#b000200f
  • diffEditor.removedTextBackground#b000201a
  • dropdown.background#fdfaf5
  • dropdown.border#d9d0c8
  • dropdown.foreground#2a2622
  • editor.background#fdfaf5
  • editor.findMatchBackground#b86b0033
  • editor.findMatchHighlightBackground#3a00cc26
  • editor.foreground#2a2622
  • editor.lineHighlightBackground#00000006
  • editor.lineHighlightBorder#00000010
  • editor.selectionBackground#3a00cc1f
  • editor.selectionHighlightBackground#b86b001a
  • editor.wordHighlightBackground#0064421a
  • editor.wordHighlightStrongBackground#3a00cc1a
  • editorBracketMatch.background#3a00cc14
  • editorBracketMatch.border#3a00cc
  • editorCursor.foreground#3a00cc
  • editorGroupHeader.tabsBackground#fbf4ea
  • editorGroupHeader.tabsBorder#d9d0c8
  • editorHoverWidget.background#fbf4ea
  • editorHoverWidget.border#d9d0c8
  • editorIndentGuide.activeBackground#b86b00
  • editorIndentGuide.background#d9d0c8
  • editorLineNumber.activeForeground#b86b00
  • editorLineNumber.foreground#cbbfb4
  • editorSuggestWidget.background#fbf4ea
  • editorSuggestWidget.border#d9d0c8
  • editorSuggestWidget.highlightForeground#3a00cc
  • editorSuggestWidget.selectedBackground#3a00cc12
  • editorWidget.background#fbf4ea
  • editorWidget.border#d9d0c8
  • errorForeground#b00020
  • focusBorder#3a00cc
  • foreground#2a2622
  • gitDecoration.addedResourceForeground#006442
  • gitDecoration.conflictingResourceForeground#b86b00
  • gitDecoration.deletedResourceForeground#b00020
  • gitDecoration.ignoredResourceForeground#8c7d73
  • gitDecoration.modifiedResourceForeground#3a00cc
  • gitDecoration.untrackedResourceForeground#b86b00
  • icon.foreground#2a2622
  • input.background#fdfaf5
  • input.border#d9d0c8
  • input.foreground#2a2622
  • input.placeholderForeground#8c7d73
  • inputOption.activeBackground#b86b001a
  • inputOption.activeBorder#b86b00
  • inputValidation.errorBorder#b00020
  • inputValidation.infoBorder#3a00cc
  • inputValidation.warningBorder#b86b00
  • list.activeSelectionBackground#3a00cc12
  • list.activeSelectionForeground#2a2622
  • list.focusBackground#3a00cc12
  • list.focusOutline#3a00cc
  • list.highlightForeground#3a00cc
  • list.hoverBackground#f7efe3
  • list.hoverForeground#2a2622
  • list.inactiveSelectionBackground#3a00cc0a
  • menu.background#fdfaf5
  • menu.border#d9d0c8
  • menu.foreground#2a2622
  • menu.selectionBackground#3a00cc12
  • menu.selectionForeground#2a2622
  • menu.separatorBackground#d9d0c8
  • minimap.errorHighlight#b00020a3
  • minimap.findMatchHighlight#b86b005c
  • minimap.selectionHighlight#3a00cc1a
  • minimap.warningHighlight#b86b00a3
  • minimapGutter.addedBackground#006442
  • minimapGutter.deletedBackground#b00020
  • minimapGutter.modifiedBackground#3a00cc
  • notificationCenter.border#d9d0c8
  • notificationLink.foreground#3a00cc
  • notifications.background#fbf4ea
  • notifications.border#d9d0c8
  • notifications.foreground#2a2622
  • notificationToast.border#d9d0c8
  • panel.background#fbf4ea
  • panel.border#d9d0c8
  • panelTitle.activeBorder#3a00cc
  • panelTitle.activeForeground#2a2622
  • panelTitle.inactiveForeground#6a5d55
  • peekView.border#d9d0c8
  • peekViewEditor.background#fdfaf5
  • peekViewResult.background#fbf4ea
  • peekViewResult.selectionBackground#3a00cc12
  • peekViewTitle.background#f7efe3
  • progressBar.background#3a00cc
  • scrollbarSlider.activeBackground#0000002b
  • scrollbarSlider.background#00000012
  • scrollbarSlider.hoverBackground#0000001f
  • selection.background#3a00cc1a
  • sideBar.background#fbf4ea
  • sideBar.border#d9d0c8
  • sideBar.foreground#2a2622
  • sideBarSectionHeader.background#fdfaf5
  • sideBarSectionHeader.border#d9d0c8
  • sideBarSectionHeader.foreground#b86b00
  • sideBarTitle.foreground#b86b00
  • statusBar.background#fbf4ea
  • statusBar.border#d9d0c8
  • statusBar.debuggingBackground#fbf4ea
  • statusBar.debuggingForeground#b86b00
  • statusBar.foreground#2a2622
  • statusBar.noFolderBackground#fbf4ea
  • statusBar.noFolderForeground#6a5d55
  • statusBarItem.hoverBackground#3a00cc12
  • statusBarItem.prominentBackground#b86b001a
  • tab.activeBackground#fdfaf5
  • tab.activeBorder#3a00cc
  • tab.activeForeground#2a2622
  • tab.border#00000000
  • tab.hoverBackground#f7efe3
  • tab.hoverBorder#b86b00
  • tab.inactiveBackground#fbf4ea
  • tab.inactiveForeground#6a5d55
  • terminal.ansiBlack#2a2622
  • terminal.ansiBlue#3a00cc
  • terminal.ansiBrightBlack#6a5d55
  • terminal.ansiBrightBlue#5a35ff
  • terminal.ansiBrightCyan#00a57b
  • terminal.ansiBrightGreen#00895f
  • terminal.ansiBrightMagenta#6b4cff
  • terminal.ansiBrightRed#d32f2f
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#d48300
  • terminal.ansiCyan#006442
  • terminal.ansiGreen#006442
  • terminal.ansiMagenta#3a00cc
  • terminal.ansiRed#b00020
  • terminal.ansiWhite#fdfaf5
  • terminal.ansiYellow#b86b00
  • terminal.background#fbf4ea
  • terminal.foreground#2a2622
  • terminal.selectionBackground#3a00cc1a
  • terminalCursor.foreground#3a00cc
  • titleBar.activeBackground#fbf4ea
  • titleBar.activeForeground#2a2622
  • titleBar.border#d9d0c8
  • titleBar.inactiveBackground#fbf4ea
  • titleBar.inactiveForeground#8c7d73
  • widget.shadow#0000001f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a68e8eitalic
keyword, storage.type, storage.modifier, keyword.operator.new, keyword.control, keyword.operator.expression, keyword.operator.logical#b86b00—
support.type, support.class, entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, entity.name.struct, entity.name.trait, entity.name.impl#3a00cc—
entity.name.function, support.function, entity.name.method, support.method, variable.function#3a00cc—
string, punctuation.definition.string, string.quoted, string.template, string.regexp#006442—
constant.numeric, constant.language.boolean, constant.language.null, constant.language, constant.character.escape, constant.other, support.constant#b86b00—
variable, variable.other, variable.other.readwrite#2a2622—
variable.parameter#b86b00—
variable.other.property, variable.other.member, support.variable.property, meta.object-literal.key, meta.object.member#3a00cc—
keyword.operator, punctuation.separator, punctuation.accessor, punctuation.terminator, punctuation.section, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.typeparameters#6a5d55—
meta.annotation, punctuation.definition.annotation, entity.name.function.decorator, meta.decorator#b86b00—
invalid, invalid.illegal#b00020underline