Skip to main content
Coding Theme

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#0f0a1a
  • activityBar.border#24253a
  • activityBar.foreground#ffc1eb
  • activityBar.inactiveForeground#6c7086
  • activityBarBadge.background#e4c87b
  • activityBarBadge.foreground#0f0a1a
  • badge.background#ffc1eb
  • badge.foreground#0f0a1a
  • breadcrumb.activeSelectionForeground#ffc1eb
  • breadcrumb.background#1a1a2e
  • breadcrumb.focusForeground#ffc1eb
  • breadcrumb.foreground#6c7086
  • breadcrumbPicker.background#232433
  • button.background#c4a7e7
  • button.border#24253a
  • button.foreground#ffffff
  • button.hoverBackground#ffc1eb
  • checkbox.background#232433
  • checkbox.border#6c7086
  • contrastBorder#ffc1eb
  • descriptionForeground#6c7086
  • diffEditor.diagonalFill#24253a
  • diffEditor.insertedLineBackground#e4c87b10
  • diffEditor.insertedTextBackground#e4c87b20
  • diffEditor.removedLineBackground#ff6b6b10
  • diffEditor.removedTextBackground#ff6b6b20
  • diffEditorGutter.insertedLineBackground#e4c87b20
  • diffEditorGutter.removedLineBackground#ff6b6b20
  • dropdown.background#232433
  • dropdown.border#6c7086
  • dropdown.foreground#e0def4
  • editor.background#1a1a2e
  • editor.findMatchBackground#f2cb7c60
  • editor.findMatchHighlightBackground#f2cb7c30
  • editor.foreground#ffc1eb
  • editor.lineHighlightBackground#24253a40
  • editor.selectionBackground#ffc1eb40
  • editor.selectionHighlightBackground#e4c87b20
  • editorBracketHighlight.foreground1#ffc1eb
  • editorBracketHighlight.foreground2#8bbec7
  • editorBracketHighlight.foreground3#e4c87b
  • editorBracketHighlight.foreground4#c4a7e7
  • editorBracketHighlight.foreground5#f2cb7c
  • editorBracketHighlight.foreground6#6c7086
  • editorBracketHighlight.unexpectedBracket.foreground#ff6b6b
  • editorBracketMatch.background#c4a7e740
  • editorBracketMatch.border#c4a7e7
  • editorCodeLens.foreground#6c7086
  • editorCursor.foreground#ffc1eb
  • editorError.background#ff6b6b20
  • editorError.foreground#ff6b6b
  • editorGroupHeader.tabsBackground#0f0a1a
  • editorGutter.addedBackground#e4c87b
  • editorGutter.background#1a1a2e
  • editorGutter.deletedBackground#ff6b6b
  • editorGutter.modifiedBackground#f2cb7c
  • editorHint.background#6c708620
  • editorHint.foreground#6c7086
  • editorHoverWidget.background#232433
  • editorHoverWidget.border#6c7086
  • editorHoverWidget.foreground#e0def4
  • editorIndentGuide.activeBackground#ffc1eb80
  • editorIndentGuide.background#6c708640
  • editorInfo.background#8bbec720
  • editorInfo.foreground#8bbec7
  • editorInlayHint.background#24253a80
  • editorInlayHint.foreground#6c7086
  • editorInlayHint.parameterBackground#232433
  • editorInlayHint.parameterForeground#e0def4
  • editorInlayHint.typeBackground#232433
  • editorInlayHint.typeForeground#e0def4
  • editorLineNumber.activeForeground#ffc1eb
  • editorLineNumber.dimmedForeground#6c708680
  • editorLineNumber.foreground#6c7086
  • editorLink.activeForeground#8bbec7
  • editorOverviewRuler.addedForeground#e4c87b
  • editorOverviewRuler.border#0f0a1a
  • editorOverviewRuler.deletedForeground#ff6b6b
  • editorOverviewRuler.findMatchForeground#f2cb7c
  • editorOverviewRuler.modifiedForeground#f2cb7c
  • editorOverviewRuler.selectionHighlightForeground#e4c87b
  • editorOverviewRuler.wordHighlightForeground#ffc1eb
  • editorOverviewRuler.wordHighlightStrongForeground#c4a7e7
  • editorRuler.foreground#6c708640
  • editorUnicodeHighlight.background#f2cb7c20
  • editorUnicodeHighlight.border#f2cb7c
  • editorWarning.background#f2cb7c20
  • editorWarning.foreground#f2cb7c
  • editorWhitespace.foreground#6c708640
  • errorForeground#ff6b6b
  • focusBorder#ffc1eb
  • foreground#e0def4
  • gitDecoration.addedResourceForeground#e4c87b
  • gitDecoration.conflictingResourceForeground#ffc1eb
  • gitDecoration.deletedResourceForeground#ff6b6b
  • gitDecoration.ignoredResourceForeground#6c7086
  • gitDecoration.modifiedResourceForeground#f2cb7c
  • gitDecoration.untrackedResourceForeground#8bbec7
  • icon.foreground#e0def4
  • input.background#232433
  • input.border#6c7086
  • input.foreground#e0def4
  • input.placeholderForeground#6c7086
  • inputOption.activeBackground#ffc1eb20
  • inputOption.activeBorder#ffc1eb
  • inputOption.activeForeground#ffc1eb
  • inputOption.hoverBackground#24253a
  • inputValidation.errorBackground#ff6b6b20
  • inputValidation.errorBorder#ff6b6b
  • inputValidation.infoBackground#8bbec720
  • inputValidation.infoBorder#8bbec7
  • inputValidation.warningBackground#f2cb7c20
  • inputValidation.warningBorder#f2cb7c
  • keybindingLabel.background#232433
  • keybindingLabel.border#6c7086
  • keybindingLabel.bottomBorder#6c7086
  • keybindingLabel.foreground#e0def4
  • link.activeForeground#ffc1eb
  • link.foreground#8bbec7
  • list.activeSelectionBackground#24253a
  • list.activeSelectionForeground#ffc1eb
  • list.dropBackground#ffc1eb20
  • list.focusBackground#24253a
  • list.focusForeground#e0def4
  • list.highlightForeground#ffc1eb
  • list.hoverBackground#24253a60
  • list.inactiveSelectionBackground#6c708640
  • menu.background#1a1a2e
  • menu.border#24253a
  • menu.foreground#e0def4
  • menu.selectionBackground#24253a
  • menu.selectionBorder#ffc1eb
  • menu.selectionForeground#ffc1eb
  • menu.separatorBackground#24253a
  • menubar.selectionBackground#24253a
  • menubar.selectionBorder#24253a
  • menubar.selectionForeground#ffc1eb
  • notificationCenter.border#24253a
  • notificationCenterHeader.background#1a1a2e
  • notificationCenterHeader.foreground#e0def4
  • notificationLink.foreground#8bbec7
  • notifications.background#1a1a2e
  • notifications.border#24253a
  • notifications.foreground#e0def4
  • notificationsErrorIcon.foreground#ff6b6b
  • notificationsInfoIcon.foreground#8bbec7
  • notificationsWarningIcon.foreground#f2cb7c
  • panel.background#1a1a2e
  • panel.border#6c7086
  • panelTitle.activeBorder#ffc1eb
  • panelTitle.activeForeground#ffc1eb
  • panelTitle.border#24253a
  • panelTitle.inactiveForeground#6c7086
  • peekView.border#ffc1eb
  • peekViewEditor.background#232433
  • peekViewResult.background#0f0a1a
  • peekViewTitle.background#ffc1eb
  • peekViewTitle.foreground#0f0a1a
  • pickerGroup.border#24253a
  • pickerGroup.foreground#ffc1eb
  • progressBar.background#e4c87b
  • quickInput.background#1a1a2e
  • quickInput.foreground#e0def4
  • quickInputTitle.background#0f0a1a
  • scrollbar.shadow#00000080
  • scrollbarSlider.activeBackground#ffc1eb80
  • scrollbarSlider.background#6c708660
  • scrollbarSlider.hoverBackground#ffc1eb60
  • selection.background#ffc1eb60
  • sideBar.background#1a1a2e
  • sideBar.border#24253a
  • sideBar.foreground#e0def4
  • sideBarSectionHeader.background#24253a
  • sideBarSectionHeader.border#24253a
  • sideBarSectionHeader.foreground#ffc1eb
  • sideBarTitle.foreground#ffc1eb
  • statusBar.background#0f0a1a
  • statusBar.border#24253a
  • statusBar.foreground#ffc1eb
  • statusBar.noFolderBackground#0f0a1a
  • statusBarItem.activeBackground#ffc1eb60
  • statusBarItem.hoverBackground#ffc1eb40
  • statusBarItem.prominentBackground#c4a7e7
  • statusBarItem.prominentHoverBackground#ffc1eb
  • tab.activeBackground#24253a
  • tab.activeBorder#ffc1eb
  • tab.activeForeground#ffc1eb
  • tab.border#0f0a1a
  • tab.hoverBackground#24253a80
  • tab.inactiveBackground#0f0a1a
  • tab.inactiveForeground#6c7086
  • tab.unfocusedActiveBackground#1a1a2e
  • tab.unfocusedActiveForeground#e0def4
  • tab.unfocusedInactiveForeground#6c7086
  • terminal.ansiBlack#0f0a1a
  • terminal.ansiBlue#8bbec7
  • terminal.ansiBrightBlack#6c7086
  • terminal.ansiBrightBlue#8bbec7
  • terminal.ansiBrightCyan#8bbec7
  • terminal.ansiBrightGreen#e4c87b
  • terminal.ansiBrightMagenta#c4a7e7
  • terminal.ansiBrightRed#ffc1eb
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f2cb7c
  • terminal.ansiCyan#8bbec7
  • terminal.ansiGreen#e4c87b
  • terminal.ansiMagenta#c4a7e7
  • terminal.ansiRed#ffc1eb
  • terminal.ansiWhite#e0def4
  • terminal.ansiYellow#f2cb7c
  • terminal.background#1a1a2e
  • terminal.foreground#ffc1eb
  • terminal.selectionBackground#ffc1eb60
  • textLink.activeForeground#ffc1eb
  • textLink.foreground#8bbec7
  • titleBar.activeBackground#0f0a1a
  • titleBar.activeForeground#ffc1eb
  • titleBar.border#24253a
  • titleBar.inactiveBackground#0f0a1a
  • titleBar.inactiveForeground#6c7086
  • warningForeground#f2cb7c
  • widget.border#24253a
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6c7086italic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.other.import, keyword.other.package#c4a7e7bold
variable, variable.other, variable.language.this#ffc1eb
variable.parameter, meta.parameter, entity.name.variable.parameter#e4c87bitalic
string, string.quoted, string.template, constant.other.symbol#7dd3fc
constant.numeric, constant.language, constant.character, constant.other#e4c87b
entity.name.function, support.function, meta.function-call entity.name.function#8bbec7
entity.name.type, entity.other.inherited-class, support.type#ffc1eb
entity.name.class, entity.other.attribute-name, entity.name.tag#c4a7e7
punctuation, meta.brace, meta.delimiter, punctuation.separator, punctuation.terminator#ffc1eb
support.type, support.class, support.constant#ffc1eb
entity.name.module, entity.name.namespace#c4a7e7
markup.heading#ffffffbold
markup.italic#e0def4italic
markup.bold#e0def4bold
markup.underlineunderline
markup.quote#6c7086italic
markup.inline.raw, markup.fenced_code#f2cb7c
invalid, invalid.illegal#ffc1ebbold underline
string.regexp#8bbec7
constant.character.escape#c4a7e7
meta.import entity.name, meta.import variable.other#8bbec7
source.gleam entity.name.function, source.gleam meta.function#8bbec7
source.gleam keyword, source.gleam storage.type#c4a7e7bold
source.gleam string#7dd3fc
source.gleam comment#6c7086italic
Vapor Gleam by Streek - VS Code Theme