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#a3449f
  • activityBar.background#fce9f3
  • activityBar.foreground#5e365e
  • activityBarBadge.background#d75bba
  • activityBarBadge.foreground#ffffff
  • badge.background#d75bba
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#5e365e
  • breadcrumb.background#fdf1f8
  • breadcrumb.foreground#935e88
  • breadcrumb.separatorForeground#c05aa6
  • button.background#d75bba
  • button.foreground#ffffff
  • debugToolBar.background#fce9f3
  • diffEditor.insertedTextBackground#28b48733
  • diffEditor.removedTextBackground#d6455c33
  • dropdown.background#ffffff
  • dropdown.border#c05aa6
  • editor.background#fdf1f8
  • editor.findMatchHighlightBackground#c7608799
  • editor.foreground#5e365e
  • editor.inactiveSelectionBackground#f7dbeacc
  • editor.lineHighlightBackground#f7dbea
  • editor.selectionBackground#e4a8d1
  • editor.selectionForeground#ffffff
  • editor.selectionHighlightBackground#e4a8d166
  • editor.wordHighlightBackground#a3449f33
  • editor.wordHighlightStrongBackground#a3449f55
  • editorBracketMatch.background#f3edf6
  • editorBracketMatch.border#8caccf
  • editorCursor.foreground#a3449f
  • editorError.foreground#d6455c
  • editorGroup.border#f2ecf8
  • editorGroup.dropBackground#dcb2d940
  • editorGroup.dropIntoPromptBackground#fff4f9
  • editorGroup.dropIntoPromptForeground#5e365e
  • editorGroupHeader.tabsBackground#fce9f3
  • editorGutter.background#fdf1f8
  • editorGutter.modifiedBackground#a3449f
  • editorHoverWidget.background#fff4f9
  • editorHoverWidget.border#f2ecf8
  • editorHoverWidget.foreground#5e365e
  • editorHoverWidget.highlightForeground#a3449f
  • editorIndentGuide.activeBackground#e4a8d1
  • editorIndentGuide.background#f6e1ef
  • editorInfo.foreground#3277a8
  • editorInlayHint.background#f7dbea
  • editorInlayHint.foreground#935e88
  • editorLightBulb.foreground#d4a373
  • editorLightBulbAutoFix.foreground#28b487
  • editorLineNumber.activeForeground#5e365e
  • editorLineNumber.foreground#a3449f
  • editorLink.activeForeground#a3449f
  • editorOverviewRuler.border#f2ecf8
  • editorOverviewRuler.bracketMatchForeground#a3449f88
  • editorOverviewRuler.errorForeground#d6455c88
  • editorOverviewRuler.findMatchForeground#c7608799
  • editorOverviewRuler.infoForeground#3277a888
  • editorOverviewRuler.warningForeground#d4a37388
  • editorOverviewRuler.wordHighlightForeground#a3449f33
  • editorOverviewRuler.wordHighlightStrongForeground#a3449f55
  • editorRuler.foreground#f2ecf8
  • editorStickyScroll.background#f7dbea
  • editorStickyScrollHover.background#f4d1e5
  • editorSuggestWidget.background#fff0f7
  • editorSuggestWidget.foreground#5e365e
  • editorSuggestWidget.highlightForeground#a3449f
  • editorSuggestWidget.selectedBackground#e4a8d1
  • editorSymbolHighlightBackground#dca9cb66
  • editorUnicodeHighlight.background#f7dbea88
  • editorUnicodeHighlight.border#d6455c
  • editorWarning.foreground#d4a373
  • editorWhitespace.foreground#e8cce5
  • editorWidget.background#fff4f9
  • editorWidget.foreground#5e365e
  • focusBorder#a3449f
  • gitDecoration.addedResourceForeground#28b487
  • gitDecoration.deletedResourceForeground#d6455c
  • gitDecoration.modifiedResourceForeground#f2b880
  • gitDecoration.renamedResourceForeground#3277a8
  • gitDecoration.untrackedResourceForeground#a3449f
  • input.background#ffffff
  • input.border#c05aa6
  • input.foreground#5e365e
  • list.activeSelectionBackground#e4a8d1
  • list.activeSelectionForeground#5e365e
  • list.hoverBackground#f7dbea
  • list.hoverForeground#5e365e
  • menu.background#ffffff
  • menu.foreground#5e365e
  • notification.background#fce9f3
  • notification.buttonBackground#d75bba
  • notification.buttonForeground#ffffff
  • notification.buttonHoverBackground#c05aa6
  • notification.foreground#5e365e
  • panel.background#fff4f9
  • panel.border#f2ecf8
  • panelInput.border#c05aa6
  • panelTitle.inactiveBorder#f2ecf8
  • peekViewEditor.background#faeaf4
  • peekViewEditor.matchHighlightBackground#e4a8d1
  • peekViewResult.background#fce9f3
  • peekViewResult.matchHighlightBackground#c7608799
  • peekViewResult.selectionBackground#f7dbea
  • peekViewTitle.background#fdf1f8
  • progressBar.background#a3449f
  • scrollbarSlider.activeBackground#a3449fcc
  • scrollbarSlider.background#e4a8d155
  • scrollbarSlider.hoverBackground#e4a8d1aa
  • settings.headerForeground#a3449f
  • settings.modifiedItemIndicator#ff8700
  • sideBar.background#f8eaf3
  • sideBar.border#f1d7e6
  • sideBar.foreground#5e365e
  • statusBar.background#fce9f3
  • statusBar.debuggingBackground#d6455c
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#5e365e
  • statusBar.noFolderBackground#fdf1f8
  • tab.activeBackground#fce9f3
  • tab.activeForeground#5e365e
  • tab.border#f2ecf8
  • tab.hoverBackground#fff4f9
  • tab.inactiveBackground#fdf1f8
  • tab.inactiveForeground#b889a7
  • tab.unfocusedHoverBackground#f7dbea
  • terminal.background#fdf1f8
  • terminal.foreground#5e365e
  • terminalCursor.foreground#a3449f
  • titleBar.activeBackground#fdf1f8
  • titleBar.activeForeground#5e365e
  • titleBar.border#f2ecf8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.class.component#b451af
support.type.property-name#c05aa6
variable.language#935e88
variable.other.readwrite#935e88
variable.other.readwrite.js, variable.other.readwrite.ts#935e88
entity.name.function.decorator, meta.decorator punctuation#dd5cab
meta.enum#a04d97
meta.type.annotation, meta.type#a3449f
markup.list#d75bba
markup.raw, markup.inline.raw#b54893italic
markup.heading#C64F72bold
markup.strikethrough#d6455cstrikethrough
markup.inserted, meta.diff.header.from-file#28b487
markup.deleted, meta.diff.header.to-file#d6455c
meta.diff.header#7c87b5bold
constant.other.color#c344a4
constant.other#c344a4
constant.language#ff4f78bold
storage.type#a04d97bold
storage#a04d97bold
storage.modifier#a04d97bold
keyword.operator#ff8700
constant.language.boolean#ff4f78bold
constant.numeric#e6a96bbold
constant.other.symbol#d81b60
entity.name.module#bf7ed5
meta.function-call.generic#b451af
meta.import, meta.export, keyword.control.import#d75bbabold
support.variable, support.other.variable#a3449f
support.constant.handlebars#c344a4
keyword.control.flow#d6455cbold
meta.return-type, meta.type.annotation#a3449f
meta.arrow#a3449f
meta.function.return-type#d75bba
meta.object.member#935e88
markup.underline.link#c76087underline
entity.name.label#a04d97italic
meta.embedded, meta.embedded.block#854A6A
string, constant.other.symbol#D81B60
string.quoted.double#C2185B
string.quoted.single#AD1457
comment#7c496fitalic
invalid, invalid.illegal#ffffffbold
invalid.deprecated#ffffffbold italic
markup.deleted#B34C59
markup.inserted#28b487
markup.changed#f2b880
entity.name.tag#3277a8
constant.numeric#e6a96bbold
keyword#97348Ebold
variable#3B6B80
entity.name.function#2ca58dbold
entity.name.class#3f88c5
punctuation#854A6A
markup.heading#C64F72bold
markup.bold#97348Ebold
markup.italic#3B6B80italic
markup.quote#6C4C70italic
constant.language.boolean#ff4f78bold
keyword.operator#ff8700
entity.other.attribute-name#d4a373
support.function#00b894
meta.brace#a3449f
meta.object-literal.key#97348E
support.type, support.class#b451af
meta.decorator, meta.annotation#dd5cab
entity.name.module#bf7ed5
variable.parameter#935e88
storage, storage.type#a04d97bold
constant.character.escape#d43f84
markup.inline.raw#af427b
markup.fenced_code#b54893
meta.diff.header.from-file#d76b8c
meta.diff.header.to-file#7c87b5
constant.other.color#c344a4
entity.name.constant#e02a7f
meta.jsx.children#e078b4
meta.tag.attributes, entity.other.attribute-name.jsx#b54893
variable.other.readwrite.js, variable.other.readwrite.ts#b451af
storage.type.function.arrow#c344a4
meta.brace.round, meta.brace.square, meta.brace.curly#97348E
Sprinkle Pack by Kagan Mamak - VS Code Theme