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#bb9af7
  • activityBar.background#13141c
  • activityBar.border#13141c
  • activityBar.foreground#bb9af7
  • activityBar.inactiveForeground#5f6b93
  • activityBarBadge.background#bb9af7
  • activityBarBadge.foreground#1a1b26
  • editor.background#1a1b26
  • editor.foreground#a9b1d6
  • editor.lineHighlightBackground#1e2030
  • editor.selectionBackground#bb9af733
  • editor.selectionHighlightBackground#bb9af722
  • editor.wordHighlightBackground#bb9af722
  • editor.wordHighlightStrongBackground#bb9af744
  • editorBracketMatch.background#bb9af733
  • editorBracketMatch.border#bb9af788
  • editorCursor.foreground#bb9af7
  • editorGroupHeader.tabsBackground#14151f
  • editorGroupHeader.tabsBorder#13141c
  • editorIndentGuide.activeBackground1#bb9af788
  • editorIndentGuide.background1#292e42
  • editorLineNumber.activeForeground#bb9af7
  • editorLineNumber.foreground#5f6b93aa
  • editorWhitespace.foreground#3b4261
  • focusBorder#bb9af766
  • foreground#a9b1d6
  • gitDecoration.addedResourceForeground#9ece6a
  • gitDecoration.deletedResourceForeground#f7768e
  • gitDecoration.ignoredResourceForeground#565f89
  • gitDecoration.modifiedResourceForeground#7aa2f7
  • gitDecoration.untrackedResourceForeground#9ece6a
  • input.background#1f2130
  • input.border#13141c
  • input.foreground#a9b1d6
  • input.placeholderForeground#565f89
  • list.activeSelectionBackground#bb9af722
  • list.activeSelectionForeground#c0caf5
  • list.highlightForeground#bb9af7
  • list.hoverBackground#1f2130
  • list.hoverForeground#c0caf5
  • list.inactiveSelectionBackground#1f2130
  • list.inactiveSelectionForeground#a9b1d6
  • scrollbarSlider.activeBackground#bb9af735
  • scrollbarSlider.background#bb9af712
  • scrollbarSlider.hoverBackground#bb9af720
  • selection.background#bb9af744
  • sideBar.background#161720
  • sideBar.border#13141c
  • sideBar.foreground#a9b1d6
  • sideBarSectionHeader.background#1f2130
  • sideBarSectionHeader.border#13141c
  • sideBarSectionHeader.foreground#c0caf5
  • sideBarTitle.foreground#c0caf5
  • statusBar.background#13141c
  • statusBar.border#13141c
  • statusBar.debuggingBackground#ff9e64
  • statusBar.debuggingForeground#1a1b26
  • statusBar.foreground#a9b1d6
  • statusBarItem.remoteBackground#bb9af7
  • statusBarItem.remoteForeground#1a1b26
  • tab.activeBackground#1a1b26
  • tab.activeBorderTop#bb9af7
  • tab.activeForeground#c0caf5
  • tab.border#1f202e
  • tab.inactiveBackground#14151f
  • tab.inactiveForeground#5f6b93
  • terminal.ansiBlack#32344a
  • terminal.ansiBlue#7aa2f7
  • terminal.ansiBrightBlack#414868
  • terminal.ansiBrightBlue#7aa2f7
  • terminal.ansiBrightCyan#7dcfff
  • terminal.ansiBrightGreen#9ece6a
  • terminal.ansiBrightMagenta#bb9af7
  • terminal.ansiBrightRed#f7768e
  • terminal.ansiBrightWhite#c0caf5
  • terminal.ansiBrightYellow#e0af68
  • terminal.ansiCyan#7dcfff
  • terminal.ansiGreen#9ece6a
  • terminal.ansiMagenta#bb9af7
  • terminal.ansiRed#f7768e
  • terminal.ansiWhite#a9b1d6
  • terminal.ansiYellow#e0af68
  • terminal.background#1a1b26
  • terminal.foreground#a9b1d6
  • titleBar.activeBackground#13141c
  • titleBar.activeForeground#c0caf5
  • titleBar.inactiveBackground#13141c
  • titleBar.inactiveForeground#565f89
  • widget.shadow#13141c88

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, unused.comment#5f6b93italic
string, punctuation.definition.string#9ece6a—
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#ff9e64—
entity.name.function, support.function, meta.function-call, variable.function#7aa2f7—
variable, variable.parameter, variable.other, meta.block variable.other, support.variable#c0caf5—
variable.other.property, variable.other.object.property, meta.object-literal.key#a9b1d6—
constant, constant.numeric, constant.language, constant.character, support.constant#ff9e64—
keyword.operator, punctuation.separator, punctuation.terminator, keyword.operator.assignment#bb9af7—
meta.brace, punctuation, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.section, punctuation.accessor#a9b1d6—
entity.name.type, entity.name.class, support.type, support.class#ff9e64—
entity.name.tag, meta.tag#7aa2f7—
entity.other.attribute-name#bb9af7—
support.type.property-name.css#a9b1d6—
support.constant.property-value.css, constant.numeric.css#9ece6a—
markup.heading, entity.name.section.markdown#ff9e64bold
markup.underline.link, string.other.link.title.markdown#7aa2f7—
markup.bold#bb9af7bold
markup.italic—italic
Obsidian Glow by Rasla - VS Code Theme