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#F3F4F6
  • activityBar.border#E2E8F0
  • activityBar.foreground#2A2F2C
  • activityBar.inactiveForeground#7F8C8D
  • badge.background#3A6F9F
  • badge.foreground#FAF5ED
  • diffEditor.insertedTextBackground#5B8C5A33
  • diffEditor.removedTextBackground#B71C1C33
  • editor.background#F9FAFB
  • editor.findMatchBackground#A1764666
  • editor.findMatchHighlightBackground#A1764633
  • editor.foreground#2A2F2C
  • editor.lineHighlightBackground#3A6F9F0D
  • editor.selectionBackground#3A6F9F55
  • editor.selectionHighlightBackground#3A6F9F33
  • editor.wordHighlightBackground#5B8C5A33
  • editor.wordHighlightStrongBackground#3A6F9F33
  • editorBracketMatch.background#3A6F9F33
  • editorBracketMatch.border#3A6F9F
  • editorCursor.background#F9FAFB
  • editorCursor.foreground#3A6F9F
  • editorError.foreground#B71C1C
  • editorLineNumber.activeForeground#2A2F2C
  • editorLineNumber.foreground#8A908D
  • editorWarning.foreground#A17646
  • focusBorder#3A6F9F33
  • input.background#FFFFFF
  • input.border#E2E8F0
  • input.foreground#2A2F2C
  • list.activeSelectionBackground#E0F2FE
  • list.activeSelectionForeground#2A2F2C
  • list.hoverBackground#E2E8F066
  • list.hoverForeground#2A2F2C
  • menu.background#FFFFFF
  • menu.foreground#2A2F2C
  • menu.selectionBackground#D5D0C8
  • menu.selectionForeground#2A2F2C
  • scrollbarSlider.activeBackground#3A6F9F99
  • scrollbarSlider.background#3A6F9F55
  • scrollbarSlider.hoverBackground#3A6F9F77
  • sideBar.background#F3F4F6
  • sideBar.border#E2E8F0
  • sideBar.foreground#2A2F2C
  • statusBar.background#F3F4F6
  • statusBar.debuggingBackground#B71C1C
  • statusBar.foreground#2A2F2C
  • statusBar.noFolderBackground#E5E7EB
  • statusBarItem.warningBackground#A1764622
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#2A2F2C
  • tab.hoverBackground#E2E8F0
  • tab.inactiveBackground#F3F4F6
  • tab.inactiveForeground#7F8C8D
  • terminal.ansiBlack#2A2F2C
  • terminal.ansiBlue#3A6F9F
  • terminal.ansiBrightBlack#7F8C8D
  • terminal.ansiBrightBlue#5B8BBF
  • terminal.ansiBrightCyan#2AA198
  • terminal.ansiBrightGreen#5B8C5A
  • terminal.ansiBrightMagenta#B16286
  • terminal.ansiBrightRed#B71C1C
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#A17646
  • terminal.ansiCyan#2AA198
  • terminal.ansiGreen#5B8C5A
  • terminal.ansiMagenta#B16286
  • terminal.ansiRed#B71C1C
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#A17646
  • terminal.background#FFFFFF
  • terminal.foreground#2A2F2C
  • terminalCursor.foreground#2A2F2C
  • titleBar.activeBackground#F3F4F6
  • titleBar.activeForeground#2A2F2C
  • titleBar.inactiveBackground#E5E7EB
  • titleBar.inactiveForeground#7F8C8D
  • widget.shadow#00000022

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage.type, storage.modifier#3A6F9F—
string, string.quoted, string.regexp#5B8C5A—
string.template, string.interpolated#5B8C5A
constant.numeric, constant.language.boolean#A17646—
comment, punctuation.definition.comment, comment.block.documentation#9CA3AF—
entity.name.function, support.function#B71C1C—
entity.name.type, support.class, support.type#3A6F9F—
variable, variable.parameter#2A2F2C—
entity.name.tag, meta.tag.html#3A6F9F—
entity.other.attribute-name#A17646—
punctuation, meta.delimiter#3A6F9F—
keyword.operator#3A6F9F—