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#0A0814
  • activityBar.border#251540
  • activityBar.foreground#E0DAFF
  • activityBar.inactiveForeground#5A5080
  • activityBarBadge.background#9D60FF
  • activityBarBadge.foreground#0B0814
  • badge.background#9D60FF
  • badge.foreground#0B0814
  • breadcrumb.activeSelectionForeground#E0DAFF
  • breadcrumb.focusForeground#E0DAFF
  • breadcrumb.foreground#5A5080
  • button.background#9D60FF
  • button.foreground#0B0814
  • button.hoverBackground#B880FF
  • descriptionForeground#5A5080
  • diffEditor.insertedLineBackground#0A2018
  • diffEditor.insertedTextBackground#68C88A33
  • diffEditor.modifiedTextBackground#180A30
  • diffEditor.removedLineBackground#200820
  • diffEditor.removedTextBackground#FF407033
  • dropdown.background#160E28
  • dropdown.border#251540
  • dropdown.foreground#E0DAFF
  • editor.background#0B0814
  • editor.findMatchBackground#E870A055
  • editor.findMatchBorder#E870A0
  • editor.findMatchHighlightBackground#E870A033
  • editor.foreground#E0DAFF
  • editor.hoverHighlightBackground#2A1A4A55
  • editor.inactiveSelectionBackground#1E1238
  • editor.lineHighlightBackground#130B22
  • editor.selectionBackground#2A1A4A
  • editor.selectionHighlightBackground#2A1A4A55
  • editor.wordHighlightBackground#2A1A4A66
  • editor.wordHighlightStrongBackground#2A1A4A99
  • editorBracketHighlight.foreground1#50D8E8
  • editorBracketHighlight.foreground2#E870A0
  • editorBracketHighlight.foreground3#9D60FF
  • editorBracketHighlight.foreground4#B070F8
  • editorBracketMatch.background#9D60FF33
  • editorBracketMatch.border#9D60FF
  • editorCursor.foreground#50D8E8
  • editorError.foreground#FF4070
  • editorGroup.border#251540
  • editorGroupHeader.tabsBackground#0F0B1A
  • editorGroupHeader.tabsBorder#251540
  • editorGutter.addedBackground#68C88A
  • editorGutter.deletedBackground#FF4070
  • editorGutter.modifiedBackground#B070F8
  • editorHint.foreground#68C88A
  • editorIndentGuide.activeBackground1#3D2860
  • editorIndentGuide.background1#251540
  • editorInfo.foreground#50D8E8
  • editorLineNumber.activeForeground#E0DAFF
  • editorLineNumber.foreground#5A5080
  • editorLink.activeForeground#60F0F8
  • editorWarning.foreground#E870A0
  • errorForeground#FF4070
  • focusBorder#9D60FF
  • foreground#E0DAFF
  • gitDecoration.addedResourceForeground#68C88A
  • gitDecoration.deletedResourceForeground#FF4070
  • gitDecoration.ignoredResourceForeground#5A5080
  • gitDecoration.modifiedResourceForeground#B070F8
  • gitDecoration.untrackedResourceForeground#7868A0
  • icon.foreground#E0DAFF
  • input.background#160E28
  • input.border#251540
  • input.foreground#E0DAFF
  • input.placeholderForeground#5A5080
  • list.activeSelectionBackground#2A1A4A
  • list.activeSelectionForeground#E0DAFF
  • list.deemphasizedForeground#9080C0
  • list.focusOutline#9D60FF
  • list.hoverBackground#130B22
  • list.hoverForeground#E0DAFF
  • list.inactiveSelectionBackground#1E1238
  • list.inactiveSelectionForeground#E0DAFF
  • minimap.findMatchHighlight#E870A055
  • minimap.selectionHighlight#2A1A4A
  • notificationCenterHeader.background#0B0814
  • notifications.background#0F0B1A
  • notifications.border#251540
  • notifications.foreground#E0DAFF
  • panel.background#0F0B1A
  • panel.border#251540
  • panelTitle.activeForeground#E0DAFF
  • panelTitle.inactiveForeground#5A5080
  • peekView.border#9D60FF
  • peekViewEditor.background#0F0B1A
  • peekViewResult.background#0F0B1A
  • peekViewTitle.background#0B0814
  • progressBar.background#9D60FF
  • scrollbarSlider.activeBackground#6040A0
  • scrollbarSlider.background#352060
  • scrollbarSlider.hoverBackground#4A3080
  • sideBar.background#0F0B1A
  • sideBar.border#251540
  • sideBar.foreground#E0DAFF
  • sideBarSectionHeader.background#0B0814
  • sideBarSectionHeader.foreground#E0DAFF
  • sideBarTitle.foreground#E0DAFF
  • statusBar.background#0A0814
  • statusBar.border#251540
  • statusBar.debuggingBackground#9D60FF
  • statusBar.foreground#E0DAFF
  • statusBar.noFolderBackground#0A0814
  • tab.activeBackground#0B0814
  • tab.activeBorder#9D60FF
  • tab.activeForeground#E0DAFF
  • tab.border#251540
  • tab.inactiveBackground#0F0B1A
  • tab.inactiveForeground#9080C0
  • terminal.ansiBlack#0B0814
  • terminal.ansiBlue#9D60FF
  • terminal.ansiBrightBlack#5A5080
  • terminal.ansiBrightBlue#B880FF
  • terminal.ansiBrightCyan#80F8FF
  • terminal.ansiBrightGreen#88E0A8
  • terminal.ansiBrightMagenta#F890C0
  • terminal.ansiBrightRed#FF6090
  • terminal.ansiBrightWhite#F0ECFF
  • terminal.ansiBrightYellow#C890F8
  • terminal.ansiCyan#50D8E8
  • terminal.ansiGreen#68C88A
  • terminal.ansiMagenta#E870A0
  • terminal.ansiRed#FF4070
  • terminal.ansiWhite#E0DAFF
  • terminal.ansiYellow#B070F8
  • terminal.background#0B0814
  • terminal.foreground#E0DAFF
  • titleBar.activeBackground#0D0918
  • titleBar.activeForeground#E0DAFF
  • titleBar.border#251540
  • titleBar.inactiveBackground#0D0918
  • titleBar.inactiveForeground#9080C0
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A5080italic
string, string.quoted, string.template#68C88A
constant.numeric#E870A0
constant.language, constant.language.null#E870A0
keyword, keyword.control, storage.modifier, meta.decorator, punctuation.decorator#9D60FF
keyword.operator#9080C0
storage.type#B070F8
constant.language.boolean#E870A0
string.regexp#FF5080
entity.name.function, support.function, meta.function-call#50D8E8
entity.name.type, entity.name.class, support.type, support.class#B070F8
variable, variable.other, variable.parameter#D8D0F0
entity.name.tag, meta.tag#9D60FF
entity.other.attribute-name#7888E8
constant.character.escape#9D60FF
invalid, invalid.illegal#FF4070
markup.heading#9D60FFbold
markup.bold#E0DAFFbold
markup.italic#7888E8italic
markup.underline.link, string.other.link#60F0F8
markup.inline.raw, markup.fenced_code#E870A0
markup.fenced_code
markup.quote#5A5080italic
markup.list, punctuation.definition.list#B070F8
markup.inserted#68C88A
markup.deleted#FF4070
punctuation, meta.brace#9080C0