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
themesmith by CyberBoost - VS Code Theme