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