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#191919
  • activityBar.foreground#FAFAF7
  • activityBar.inactiveForeground#91918D
  • activityBarBadge.background#FAFAF7
  • activityBarBadge.foreground#191919
  • button.background#191919
  • button.foreground#FAFAF7
  • button.hoverBackground#40403E
  • checkbox.background#FAFAF7
  • checkbox.border#E5E4DF
  • checkbox.foreground#CC785C
  • dropdown.background#FAFAF7
  • dropdown.border#E5E4DF
  • dropdown.foreground#191919
  • editor.background#FAFAF7
  • editor.foreground#191919
  • editor.lineHighlightBackground#f0EEE6
  • editor.selectionBackground#E3dACC66
  • editorCursor.foreground#CC785C
  • editorLineNumber.activeForeground#CC785C
  • editorLineNumber.foreground#BFBFBA
  • editorWidget.background#FAFAF7
  • editorWidget.border#E5E4DF
  • editorWidget.foreground#191919
  • errorForeground#BF4D43
  • focusBorder#191919
  • input.background#FAFAF7
  • input.border#E5E4DF
  • input.foreground#191919
  • inputOption.activeBorder#191919
  • list.activeSelectionBackground#E3dACC
  • list.activeSelectionForeground#191919
  • list.focusBackground#E5E4DF
  • list.focusForeground#191919
  • list.hoverBackground#E5E4DF
  • menu.background#FAFAF7
  • menu.border#E5E4DF
  • menu.foreground#191919
  • menu.selectionBackground#f0EEE6
  • menu.selectionForeground#191919
  • minimap.background#FAFAF7
  • minimapSlider.activeBackground#91918D
  • minimapSlider.background#BFBFBA
  • minimapSlider.hoverBackground#91918D
  • pickerGroup.border#E5E4DF
  • pickerGroup.foreground#91918D
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#91918D
  • scrollbarSlider.background#BFBFBA
  • scrollbarSlider.hoverBackground#91918D
  • sideBar.background#f0EEE6
  • sideBar.border#E5E4DF
  • sideBar.foreground#40403E
  • statusBar.background#E3dACC
  • statusBar.border#E3dACC
  • statusBar.debuggingBackground#CC785C
  • statusBar.foreground#191919
  • statusBar.noFolderBackground#E3dACC
  • tab.activeBackground#FAFAF7
  • tab.activeBorderTop#191919
  • tab.activeForeground#191919
  • tab.border#E5E4DF
  • tab.inactiveBackground#f0EEE6
  • tab.inactiveForeground#40403E
  • terminal.ansiBlack#191919
  • terminal.ansiBlue#61AAF2
  • terminal.ansiBrightBlack#666663
  • terminal.ansiBrightBlue#61AAF2
  • terminal.ansiBrightCyan#BFBFBA
  • terminal.ansiBrightGreen#778d5e
  • terminal.ansiBrightMagenta#CC785C
  • terminal.ansiBrightRed#BF4D43
  • terminal.ansiBrightWhite#FAFAF7
  • terminal.ansiBrightYellow#EBDBBC
  • terminal.ansiCyan#91918D
  • terminal.ansiGreen#778d5e
  • terminal.ansiMagenta#CC785C
  • terminal.ansiRed#BF4D43
  • terminal.ansiWhite#BFBFBA
  • terminal.ansiYellow#D4A27F
  • terminal.background#f0EEE6
  • terminal.foreground#191919
  • terminalCursor.foreground#CC785C
  • textLink.activeForeground#CC785C
  • textLink.foreground#191919
  • titleBar.activeBackground#FAFAF7
  • titleBar.activeForeground#191919
  • titleBar.border#E5E4DF
  • titleBar.inactiveBackground#FAFAF7
  • titleBar.inactiveForeground#91918D
  • toolbar.activeBackground#E3dACC
  • toolbar.hoverBackground#E5E4DF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#666663italic
keyword, storage, storage.type, variable.language, keyword.control#A65E44
string, meta.embedded.assembly#778d5e
entity.name.type, entity.other.inherited-class, support.class, support.type, entity.name.tag#8b89e2
entity.name.function, support.function, meta.function-call#8b89e2
variable, entity.name.variable, meta.object-literal.key#191919
constant.numeric, constant.language, support.constant, constant.character#A65E44
punctuation, keyword.operator, meta.brace#666663
Anthropic Inspired Theme by Brian Suhit - VS Code Theme