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#18141F
  • activityBar.foreground#E8E0F0
  • activityBar.inactiveForeground#5A5268
  • activityBarBadge.background#E88AC4
  • activityBarBadge.foreground#1E1A26
  • badge.background#E88AC4
  • badge.foreground#1E1A26
  • button.background#E88AC4
  • button.foreground#1E1A26
  • button.hoverBackground#F2A8D0
  • dropdown.background#18141F
  • dropdown.foreground#E8E0F0
  • editor.background#1E1A26
  • editor.findMatchBackground#E88AC460
  • editor.findMatchHighlightBackground#E88AC430
  • editor.foreground#E8E0F0
  • editor.inactiveSelectionBackground#4A3A5C40
  • editor.lineHighlightBackground#2A2436
  • editor.selectionBackground#5C3A6E80
  • editor.selectionHighlightBackground#4A3A5C40
  • editor.wordHighlightBackground#9B6FBF30
  • editorBracketMatch.background#5C3A6E60
  • editorBracketMatch.border#F2A8D0
  • editorCursor.foreground#F2A8D0
  • editorGutter.addedBackground#B8A8D8
  • editorGutter.background#1E1A26
  • editorGutter.deletedBackground#D06868
  • editorGutter.modifiedBackground#9B6FBF
  • editorIndentGuide.activeBackground#4A425C
  • editorIndentGuide.background#302A3E
  • editorLineNumber.activeForeground#E88AC4
  • editorLineNumber.foreground#5A5268
  • editorWhitespace.foreground#3A3448
  • focusBorder#5C3A6E
  • input.background#18141F
  • input.border#302A3E
  • input.foreground#E8E0F0
  • inputOption.activeBorder#E88AC4
  • list.activeSelectionBackground#2A2436
  • list.activeSelectionForeground#F2A8D0
  • list.highlightForeground#E88AC4
  • list.hoverBackground#221D2C
  • list.inactiveSelectionBackground#221D2C
  • notifications.background#1A1620
  • notifications.foreground#E8E0F0
  • panel.background#1A1620
  • panel.border#120F17
  • panelTitle.activeBorder#E88AC4
  • panelTitle.activeForeground#F2A8D0
  • peekViewEditor.background#18141F
  • peekViewResult.background#1A1620
  • scrollbarSlider.activeBackground#5C4A6EA0
  • scrollbarSlider.background#4A3A5C60
  • scrollbarSlider.hoverBackground#5C4A6E80
  • sideBar.background#1A1620
  • sideBar.foreground#C9BCDA
  • sideBarSectionHeader.background#1E1A26
  • sideBarTitle.foreground#E8E0F0
  • statusBar.background#18141F
  • statusBar.debuggingBackground#D888B8
  • statusBar.debuggingForeground#1E1A26
  • statusBar.foreground#C9BCDA
  • statusBar.noFolderBackground#18141F
  • tab.activeBackground#1E1A26
  • tab.activeBorderTop#E88AC4
  • tab.activeForeground#F2A8D0
  • tab.border#120F17
  • tab.inactiveBackground#18141F
  • tab.inactiveForeground#5A5268
  • terminal.ansiBlack#1E1A26
  • terminal.ansiBlue#9B6FBF
  • terminal.ansiBrightBlack#5A5268
  • terminal.ansiBrightBlue#B590D6
  • terminal.ansiBrightCyan#DCC4EC
  • terminal.ansiBrightGreen#D0C4E8
  • terminal.ansiBrightMagenta#F2A8D0
  • terminal.ansiBrightRed#E29A9A
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F8DCEC
  • terminal.ansiCyan#C9A8E0
  • terminal.ansiGreen#B8A8D8
  • terminal.ansiMagenta#E88AC4
  • terminal.ansiRed#D06868
  • terminal.ansiWhite#E8E0F0
  • terminal.ansiYellow#F2C6E0
  • terminal.background#1E1A26
  • terminal.foreground#E8E0F0
  • titleBar.activeBackground#18141F
  • titleBar.activeForeground#E8E0F0
  • titleBar.inactiveBackground#18141F
  • titleBar.inactiveForeground#5A5268
  • widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6B5F7Aitalic
string, string.quoted, punctuation.definition.string#C9A8E0
constant.numeric, constant.language, constant.character#F2C6E0
keyword, keyword.control, storage, storage.type, storage.modifier#E88AC4
keyword.operator#D888B8
entity.name.function, support.function, meta.function-call#9B6FBF
variable, variable.other, variable.parameter#B8A8D8
variable.language, variable.language.this#F2A8D0italic
entity.name.class, entity.name.type, support.class, support.type#F2A8D0
entity.name.tag#E88AC4
entity.other.attribute-name#F2C6E0
punctuation, meta.brace#C9BCDA
support.constant.property-value, constant.other.color#C9A8E0
invalid, invalid.illegal#D06868
markup.heading#9B6FBFbold
markup.bold#F2C6E0bold
markup.italic#E88AC4italic
markup.underline.link#B8A8D8