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#150d1e
  • activityBar.foreground#f0e6fa
  • activityBar.inactiveForeground#5e4a78
  • activityBarBadge.background#f15bb5
  • activityBarBadge.foreground#ffffff
  • badge.background#f15bb5
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#f0e6fa
  • breadcrumb.focusForeground#f0e6fa
  • breadcrumb.foreground#8d7aa6
  • button.background#9b5de5
  • button.foreground#ffffff
  • button.hoverBackground#8a4ad4
  • button.secondaryBackground#382950
  • button.secondaryForeground#f0e6fa
  • descriptionForeground#8d7aa6
  • diffEditor.insertedTextBackground#7dd8f715
  • diffEditor.removedTextBackground#f15bb515
  • dropdown.background#1f1330
  • dropdown.border#382950
  • dropdown.foreground#f0e6fa
  • editor.background#1a1026
  • editor.findMatchBackground#ffe98a40
  • editor.findMatchHighlightBackground#ffe98a20
  • editor.foreground#f0e6fa
  • editor.lineHighlightBackground#2d1e4240
  • editor.selectionBackground#9b5de540
  • editor.selectionHighlightBackground#9b5de525
  • editor.wordHighlightBackground#9b5de530
  • editor.wordHighlightStrongBackground#9b5de540
  • editorBracketMatch.background#9b5de530
  • editorBracketMatch.border#9b5de580
  • editorCursor.foreground#ffe98a
  • editorGroupHeader.tabsBackground#150d1e
  • editorGutter.addedBackground#7dd8f7
  • editorGutter.deletedBackground#f7a0d0
  • editorGutter.modifiedBackground#c4a4f0
  • editorHoverWidget.background#1f1330
  • editorHoverWidget.border#382950
  • editorIndentGuide.activeBackground1#382950
  • editorIndentGuide.background1#2d1e42
  • editorLineNumber.activeForeground#8d7aa6
  • editorLineNumber.foreground#5e4a78
  • editorOverviewRuler.addedForeground#7dd8f780
  • editorOverviewRuler.deletedForeground#f7a0d080
  • editorOverviewRuler.modifiedForeground#c4a4f080
  • editorSuggestWidget.background#1f1330
  • editorSuggestWidget.border#382950
  • editorSuggestWidget.selectedBackground#2d1e42
  • editorWhitespace.foreground#382950
  • editorWidget.background#1f1330
  • editorWidget.border#382950
  • focusBorder#9b5de580
  • foreground#f0e6fa
  • gitDecoration.addedResourceForeground#7dd8f7
  • gitDecoration.deletedResourceForeground#f15bb5
  • gitDecoration.ignoredResourceForeground#5e4a78
  • gitDecoration.modifiedResourceForeground#ffe98a
  • gitDecoration.untrackedResourceForeground#c4a4f0
  • icon.foreground#d4c8e8
  • input.background#150d1e
  • input.border#382950
  • input.foreground#f0e6fa
  • input.placeholderForeground#5e4a78
  • inputOption.activeBorder#9b5de5
  • list.activeSelectionBackground#2d1e42
  • list.activeSelectionForeground#f0e6fa
  • list.highlightForeground#7dd8f7
  • list.hoverBackground#231534
  • list.inactiveSelectionBackground#231534
  • minimap.selectionHighlight#9b5de540
  • notificationCenterHeader.background#231534
  • notifications.background#1f1330
  • notifications.border#382950
  • panel.background#1a1026
  • panel.border#2d1e42
  • panelTitle.activeBorder#f15bb5
  • panelTitle.activeForeground#f0e6fa
  • panelTitle.inactiveForeground#8d7aa6
  • peekView.border#9b5de5
  • peekViewEditor.background#1f1330
  • peekViewResult.background#150d1e
  • peekViewTitle.background#231534
  • quickInput.background#1f1330
  • quickInputList.focusBackground#2d1e42
  • scrollbarSlider.activeBackground#382950a0
  • scrollbarSlider.background#38295050
  • scrollbarSlider.hoverBackground#38295080
  • sideBar.background#1f1330
  • sideBar.border#2d1e42
  • sideBar.foreground#d4c8e8
  • sideBarSectionHeader.background#231534
  • sideBarSectionHeader.foreground#f0e6fa
  • sideBarTitle.foreground#f0e6fa
  • statusBar.background#150d1e
  • statusBar.debuggingBackground#9b5de5
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#d4c8e8
  • statusBar.noFolderBackground#1a1026
  • statusBarItem.remoteBackground#9b5de5
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#1a1026
  • tab.activeBorderTop#f15bb5
  • tab.activeForeground#f0e6fa
  • tab.border#150d1e
  • tab.inactiveBackground#150d1e
  • tab.inactiveForeground#8d7aa6
  • terminal.ansiBlack#1a1026
  • terminal.ansiBlue#9b5de5
  • terminal.ansiBrightBlack#8d7aa6
  • terminal.ansiBrightBlue#c4a4f0
  • terminal.ansiBrightCyan#00bbf9
  • terminal.ansiBrightGreen#7dd8f7
  • terminal.ansiBrightMagenta#f7a0d0
  • terminal.ansiBrightRed#f7a0d0
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffe98a
  • terminal.ansiCyan#00bbf9
  • terminal.ansiGreen#7dd8f7
  • terminal.ansiMagenta#c4a4f0
  • terminal.ansiRed#f15bb5
  • terminal.ansiWhite#f0e6fa
  • terminal.ansiYellow#ffe98a
  • terminal.foreground#f0e6fa
  • titleBar.activeBackground#150d1e
  • titleBar.activeForeground#d4c8e8
  • titleBar.inactiveBackground#150d1e
  • titleBar.inactiveForeground#5e4a78

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8d7aa6italic
keyword, keyword.control, keyword.other, storage.type, storage.modifier#f7a0d0
keyword.operator, keyword.operator.assignment#f7a0d0
string, string.quoted, string.template#ffe98a
string.other.raw#ffe98a
constant.numeric, constant.numeric.duration#c4a4f0
constant.numeric.duration.edg#7dd8f7
constant.language, constant.language.boolean#f7a0d0
constant.character.escape#c4a4f0
entity.name.function, support.function#7dd8f7
entity.name.type, entity.name.class, support.type, support.class#7dd8f7
entity.name.tag#f7a0d0
entity.other.attribute-name#c4a4f0
variable, variable.other, variable.parameter#c4a4f0
variable.parameter.placeholder#7dd8f7
variable.language#f7a0d0italic
punctuation#d4c8e8
punctuation.definition.string#ffe98a
meta.embedded, source.groovy.embedded#f0e6fa
markup.heading, markup.heading.setext#7dd8f7bold
markup.bold#f7a0d0bold
markup.italic#c4a4f0italic
markup.inline.raw, markup.fenced_code#ffe98a
markup.underline.link#00bbf9
markup.inserted#7dd8f7
markup.deleted#f15bb5
markup.changed#ffe98a
support.constant#c4a4f0
support.variable#c4a4f0
meta.diff.header#7dd8f7bold
invalid, invalid.illegal#f15bb5
invalid.deprecated#f7a0d0strikethrough
edg DSL by Rob Reid - VS Code Theme