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#11111b
  • activityBar.foreground#89b4fa
  • activityBar.inactiveForeground#6c7086
  • activityBarBadge.background#89b4fa
  • activityBarBadge.foreground#11111b
  • button.background#89b4fa
  • button.foreground#11111b
  • button.hoverBackground#74c7ec
  • diffEditor.insertedTextBackground#a6e3a120
  • diffEditor.removedTextBackground#f38ba820
  • editor.background#1e1e2e
  • editor.foreground#cdd6f4
  • editor.inactiveSelectionBackground#45475a60
  • editor.selectionBackground#585b7080
  • editorBracketMatch.background#45475a80
  • editorBracketMatch.border#89b4fa
  • editorCursor.foreground#f5c2e7
  • editorError.foreground#f38ba8
  • editorGroupHeader.tabsBackground#181825
  • editorHint.foreground#94e2d5
  • editorIndentGuide.activeBackground#45475a
  • editorIndentGuide.background#313244
  • editorInfo.foreground#89b4fa
  • editorLineNumber.activeForeground#89b4fa
  • editorLineNumber.foreground#6c7086
  • editorRuler.foreground#313244
  • editorWarning.foreground#f9e2af
  • editorWhitespace.foreground#45475a
  • focusBorder#89b4fa
  • input.background#313244
  • input.border#45475a
  • input.foreground#cdd6f4
  • inputOption.activeBorder#89b4fa
  • list.activeSelectionBackground#313244
  • list.activeSelectionForeground#cdd6f4
  • list.hoverBackground#585b70
  • list.hoverForeground#cdd6f4
  • list.inactiveSelectionBackground#45475a
  • panel.background#1e1e2e
  • panel.border#313244
  • panelTitle.activeBorder#89b4fa
  • panelTitle.activeForeground#cdd6f4
  • panelTitle.inactiveForeground#6c7086
  • scrollbarSlider.activeBackground#7f849c80
  • scrollbarSlider.background#585b7080
  • scrollbarSlider.hoverBackground#6c708680
  • selection.background#585b7080
  • sideBar.background#181825
  • sideBar.foreground#cdd6f4
  • sideBarSectionHeader.background#1e1e2e
  • sideBarSectionHeader.foreground#f5c2e7
  • sideBarTitle.foreground#89b4fa
  • statusBar.background#89b4fa
  • statusBar.foreground#11111b
  • statusBar.noFolderBackground#f38ba8
  • statusBarItem.hoverBackground#74c7ec
  • tab.activeBackground#1e1e2e
  • tab.activeForeground#cdd6f4
  • tab.border#11111b
  • tab.inactiveBackground#11111b
  • tab.inactiveForeground#6c7086
  • terminal.ansiBlack#45475a
  • terminal.ansiBlue#89b4fa
  • terminal.ansiBrightBlack#585b70
  • terminal.ansiBrightBlue#89b4fa
  • terminal.ansiBrightCyan#94e2d5
  • terminal.ansiBrightGreen#a6e3a1
  • terminal.ansiBrightMagenta#f5c2e7
  • terminal.ansiBrightRed#f38ba8
  • terminal.ansiBrightWhite#a6adc8
  • terminal.ansiBrightYellow#f9e2af
  • terminal.ansiCyan#94e2d5
  • terminal.ansiGreen#a6e3a1
  • terminal.ansiMagenta#f5c2e7
  • terminal.ansiRed#f38ba8
  • terminal.ansiWhite#bac2de
  • terminal.ansiYellow#f9e2af
  • terminal.background#1e1e2e
  • terminal.foreground#cdd6f4
  • titleBar.activeBackground#11111b
  • titleBar.activeForeground#cdd6f4
  • titleBar.inactiveBackground#181825
  • titleBar.inactiveForeground#6c7086

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6c7086italic
string, string.quoted#a6e3a1—
constant.numeric, constant.language#fab387—
keyword, storage.type, storage.modifier#cba6f7bold
entity.name.function, support.function#89b4fabold
entity.name.type, entity.name.class, support.class#f9e2af—
variable, variable.parameter#cdd6f4—
constant.character.escape#f5c2e7—
keyword.operator#94e2d5—
entity.name.tag#f38ba8—
entity.other.attribute-name#f9e2afitalic