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#89b4fa
  • activityBar.background#181825
  • activityBar.foreground#cdd6f4
  • activityBarBadge.background#89b4fa
  • activityBarBadge.foreground#1e1e2e
  • badge.background#89b4fa
  • badge.foreground#1e1e2e
  • button.background#89b4fa
  • button.foreground#1e1e2e
  • button.hoverBackground#b4befe
  • dropdown.background#313244
  • dropdown.border#585b70
  • dropdown.foreground#cdd6f4
  • editor.background#1e1e2e
  • editor.findMatchBackground#f5e0dc
  • editor.findMatchHighlightBackground#ff9e64
  • editor.foreground#cdd6f4
  • editor.lineHighlightBackground#31324433
  • editor.lineHighlightBorder#313244
  • editor.selectionBackground#45475a
  • editor.selectionHighlightBackground#585b70
  • editorBracketMatch.background#313244
  • editorBracketMatch.border#89b4fa
  • editorCursor.foreground#f5e0dc
  • editorGroupHeader.tabsBackground#11111b
  • editorIndentGuide.activeBackground#cdd6f4
  • editorIndentGuide.background#313244
  • editorLineNumber.activeForeground#cdd6f4
  • editorLineNumber.foreground#585b70
  • editorWhitespace.foreground#585b70
  • focusBorder#89b4fa
  • gitDecoration.conflictingResourceForeground#f38ba8
  • gitDecoration.deletedResourceForeground#f38ba8
  • gitDecoration.modifiedResourceForeground#fab387
  • gitDecoration.untrackedResourceForeground#a6e3a1
  • input.background#313244
  • input.border#585b70
  • input.foreground#cdd6f4
  • input.placeholderForeground#585b70
  • inputOption.activeBorder#89b4fa
  • list.activeSelectionBackground#45475a
  • list.activeSelectionForeground#cdd6f4
  • list.focusBackground#45475a
  • list.highlightForeground#89b4fa
  • list.hoverBackground#313244
  • minimap.background#11111b
  • minimapSlider.activeBackground#585b7080
  • minimapSlider.background#31324480
  • minimapSlider.hoverBackground#45475a80
  • panel.background#11111b
  • panel.border#313244
  • panelTitle.activeBorder#89b4fa
  • panelTitle.activeForeground#cdd6f4
  • panelTitle.inactiveForeground#585b70
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#585b7080
  • scrollbarSlider.background#31324480
  • scrollbarSlider.hoverBackground#45475a80
  • sideBar.background#181825
  • sideBar.foreground#cdd6f4
  • sideBarSectionHeader.background#11111b
  • sideBarSectionHeader.foreground#cdd6f4
  • sideBarTitle.foreground#cdd6f4
  • statusBar.background#11111b
  • statusBar.debuggingBackground#f38ba8
  • statusBar.foreground#cdd6f4
  • statusBar.noFolderBackground#11111b
  • statusBarItem.hoverBackground#313244
  • tab.activeBackground#1e1e2e
  • tab.activeBorder#89b4fa
  • tab.activeForeground#cdd6f4
  • tab.border#313244
  • tab.inactiveBackground#11111b
  • tab.inactiveForeground#585b70
  • terminal.ansiBlue#89b4fa
  • terminal.ansiBrightBlue#b4befe
  • terminal.ansiBrightCyan#a6e3a1
  • terminal.ansiBrightGreen#a6e3a1
  • terminal.ansiBrightMagenta#f5c2e7
  • terminal.ansiBrightRed#f38ba8
  • terminal.ansiBrightYellow#f9e2af
  • terminal.ansiCyan#94e2d5
  • terminal.ansiGreen#a6e3a1
  • terminal.ansiMagenta#f5c2e7
  • terminal.ansiRed#f38ba8
  • terminal.ansiYellow#f9e2af
  • terminal.background#1e1e2e
  • terminal.foreground#cdd6f4
  • titleBar.activeBackground#11111b
  • titleBar.activeForeground#cdd6f4
  • titleBar.inactiveBackground#1e1e2e
  • titleBar.inactiveForeground#585b70

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#585b70italic
string, string.quoted, string.template#a6e3a1—
keyword, storage.type, storage.modifier#89b4fabold
keyword.operator, punctuation.accessor#cba6f7—
variable, variable.other#cdd6f4—
variable.parameter#f38ba8italic
entity.name.function, support.function#f9e2af—
meta.function-call#f5c2e7—
entity.name.class, entity.name.type.class, support.class#fab387bold
entity.name.type, support.type#94e2d5—
entity.name.type.interface#b4befeitalic
constant.numeric#fab387—
constant, constant.language, constant.character#f5c2e7—
constant.language.boolean#89b4fabold
variable.other.property, support.variable.property#cdd6f4—
meta.object-literal.key#cba6f7—
entity.name.tag, punctuation.definition.tag#f38ba8—
entity.other.attribute-name#f5c2e7italic
punctuation, meta.brace#cdd6f4—
string.regexp#a6e3a1—
constant.character.escape#f5c2e7—
meta.decorator, punctuation.decorator#fab387—
invalid, invalid.illegal#f38ba8strikethrough
markup.heading, entity.name.section#89b4fabold
markup.bold#f5c2e7bold
markup.italic#cba6f7italic
markup.underline.link#94e2d5—
markup.inline.raw, markup.fenced_code#a6e3a1—
support.type.property-name.json#cba6f7—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#f38ba8—
support.type.property-name.css#94e2d5—
support.constant.property-value.css#a6e3a1—