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.activeBackground#00000000
  • activityBar.activeBorder#a288b8
  • activityBar.activeFocusBorder#f0d6fd
  • activityBar.background#f9fdff
  • activityBar.border#d9ddea
  • activityBar.dropBorder#3e4154
  • activityBar.foreground#2b2d3f
  • activityBar.inactiveForeground#3e4154
  • activityBarBadge.background#a288b8
  • activityBarBadge.foreground#f9fdff
  • badge.background#a288b8
  • badge.foreground#f9fdff
  • breadcrumb.activeSelectionForeground#2b2d3f
  • breadcrumb.background#f0f3fb
  • breadcrumb.focusForeground#2b2d3f
  • breadcrumb.foreground#3e4154
  • breadcrumbPicker.background#d9ddea
  • button.background#a288b8
  • button.border#00000000
  • button.foreground#f9fdff
  • button.hoverBackground#d8bfec
  • button.secondaryBackground#f0f3fb
  • button.secondaryForeground#2b2d3f
  • button.secondaryHoverBackground#d9ddea
  • button.separator#f9fdff
  • checkbox.background#d9ddea
  • checkbox.foreground#2b2d3f
  • checkbox.selectBackground#a288b8
  • checkbox.selectBorder#c2c6d9
  • commandCenter.activeBackground#c2c6d9
  • commandCenter.activeBorder#c2c6d9
  • commandCenter.activeForeground#2b2d3f
  • commandCenter.background#d9ddea
  • commandCenter.border#d9ddea
  • commandCenter.inactiveBorder#d9ddea
  • debugIcon.breakpointCurrentStackframeForeground#ffb957
  • debugIcon.breakpointForeground#c92c63
  • debugToolBar.background#d9ddea
  • debugToolBar.border#00000000
  • debugView.exceptionLabelBackground#c92c63
  • debugView.exceptionLabelForeground#f9fdff
  • diffEditor.border#c2c6d9
  • diffEditor.diagonalFill#c2c6d9
  • diffEditor.insertedLineBackground#6ac9ad20
  • diffEditor.insertedTextBackground#6ac9ad4c
  • diffEditor.removedLineBackground#c92c6320
  • diffEditor.removedTextBackground#c92c634c
  • diffEditorGutter.insertedLineBackground#6ac9ad4c
  • diffEditorGutter.removedLineBackground#c92c634c
  • dropdown.background#d9ddea
  • dropdown.foreground#2b2d3f
  • editor.background#f0f3fb
  • editor.findMatchBackground#ffb95720
  • editor.findMatchBorder#ffb9574c
  • editor.findMatchHighlightBackground#ffb95720
  • editor.findMatchHighlightBorder#5154694c
  • editor.findRangeHighlightBackground#51546920
  • editor.foldBackground#00000000
  • editor.foreground#2b2d3f
  • editor.hoverHighlightBackground#a288b84c
  • editor.inactiveSelectionBackground#51546920
  • editor.lineHighlightBackground#51546920
  • editor.selectionBackground#5154694c
  • editor.selectionHighlightBackground#51546920
  • editor.selectionHighlightBorder#5154694c
  • editor.wordHighlightBackground#5475c620
  • editor.wordHighlightStrongBackground#5475c64c
  • editorBracketMatch.background#00000000
  • editorBracketMatch.border#3e4154
  • editorCodeLens.foreground#2b2d3f
  • editorCursor.background#f9fdff
  • editorCursor.foreground#a288b8
  • editorError.background#00000000
  • editorError.foreground#c92c63
  • editorGhostText.foreground#515469
  • editorGroup.border#d9ddea
  • editorGroup.dropBackground#d9ddeabf
  • editorGroupHeader.tabsBackground#f9fdff
  • editorGroupHeader.tabsBorder#d9ddea
  • editorGutter.addedBackground#b3ecdb
  • editorGutter.deletedBackground#e7598c
  • editorGutter.foldingControlForeground#2b2d3f
  • editorGutter.modifiedBackground#a288b8
  • editorHoverWidget.background#f9fdff
  • editorHoverWidget.border#d9ddea
  • editorHoverWidget.foreground#2b2d3f
  • editorIndentGuide.activeBackground#3e4154
  • editorIndentGuide.background#c2c6d9
  • editorInlayHint.background#c2c6d9
  • editorInlayHint.foreground#3e4154
  • editorLineNumber.activeForeground#2b2d3f
  • editorLineNumber.foreground#515469
  • editorLink.activeForeground#a288b8
  • editorMarkerNavigation.background#d9ddea
  • editorMarkerNavigationError.background#c92c63
  • editorMarkerNavigationError.headerBackground#d9ddea
  • editorMarkerNavigationInfo.background#5475c6
  • editorMarkerNavigationInfo.headerBackground#d9ddea
  • editorMarkerNavigationWarning.background#ffb957
  • editorMarkerNavigationWarning.headerBackground#d9ddea
  • editorOverviewRuler.background#00000000
  • editorOverviewRuler.border#515469
  • editorOverviewRuler.errorForeground#c92c63
  • editorRuler.foreground#c2c6d9
  • editorSuggestWidget.background#f9fdff
  • editorSuggestWidget.border#d9ddea
  • editorSuggestWidget.focusHighlightForeground#a288b8
  • editorSuggestWidget.foreground#35374a
  • editorSuggestWidget.highlightForeground#e7598c
  • editorSuggestWidget.selectedBackground#f0f3fb
  • editorSuggestWidget.selectedForeground#2b2d3f
  • editorWarning.background#00000000
  • editorWarning.foreground#ffb957
  • editorWhitespace.foreground#515469
  • editorWidget.background#f0f3fb
  • editorWidget.foreground#2b2d3f
  • editorWidget.resizeBorder#c2c6d9
  • focusBorder#515469
  • gitDecoration.addedResourceForeground#d3ffe1
  • gitDecoration.conflictingResourceForeground#f5bf97
  • gitDecoration.deletedResourceForeground#c92c63
  • gitDecoration.ignoredResourceForeground#515469
  • gitDecoration.modifiedResourceForeground#d8bfec
  • gitDecoration.renamedResourceForeground#d8bfec
  • gitDecoration.stageDeletedResourceForeground#c92c63
  • gitDecoration.stageModifiedResourceForeground#d8bfec
  • gitDecoration.submoduleResourceForeground#95e3f4
  • gitDecoration.untrackedResourceForeground#839fe7
  • input.background#d9ddea
  • input.border#00000000
  • input.foreground#2b2d3f
  • input.placeholderForeground#3e4154
  • inputOption.activeBackground#c2c6d9
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#35374a
  • list.activeSelectionBackground#d9ddea
  • list.activeSelectionForeground#2b2d3f
  • list.dropBackground#d9ddea
  • list.errorForeground#e7598c
  • list.focusBackground#d9ddea
  • list.highlightForeground#a288b8
  • list.hoverBackground#d9ddea
  • list.hoverForeground#2b2d3f
  • list.inactiveSelectionBackground#f9fdff
  • list.inactiveSelectionForeground#2b2d3f
  • list.warningForeground#ffb957
  • listFilterWidget.background#d9ddea
  • listFilterWidget.noMatchesOutline#e7598c
  • listFilterWidget.outline#00000000
  • menu.background#f0f3fb
  • menu.border#00000000
  • menu.foreground#2b2d3f
  • menu.selectionBackground#f9fdff
  • menu.selectionBorder#00000000
  • menu.selectionForeground#2b2d3f
  • menu.separatorBackground#c2c6d9
  • menubar.selectionBackground#d9ddea
  • menubar.selectionBorder#00000000
  • menubar.selectionForeground#2b2d3f
  • merge.commonContentBackground#d9ddea20
  • merge.commonHeaderBackground#d9ddea4c
  • merge.currentContentBackground#6ac9ad20
  • merge.currentHeaderBackground#6ac9ad4c
  • merge.incomingContentBackground#5475c620
  • merge.incomingHeaderBackground#5475c64c
  • mergeEditor.change.background#c92c6320
  • mergeEditor.change.word.background#c92c634c
  • mergeEditor.conflict.handled.minimapOverViewRuler#6ac9ad
  • mergeEditor.conflict.handledFocused.border#515469
  • mergeEditor.conflict.handledUnfocused.border#c2c6d9
  • mergeEditor.conflict.unhandled.minimapOverViewRuler#c92c63
  • mergeEditor.conflict.unhandledFocused.border#c92c63
  • mergeEditor.conflict.unhandledUnfocused.border#de889a
  • minimap.errorHighlight#c92c63
  • minimap.findMatchHighlight#ffb9574c
  • minimap.selectionHighlight#839fe7
  • minimap.selectionOccurrenceHighlight#5154694c
  • minimap.warningHighlight#ffb957
  • notebook.cellInsertionIndicator#3e4154
  • notebook.cellStatusBarItemHoverBackground#51546920
  • notebook.cellToolbarSeparator#d9ddea
  • notebook.focusedCellBorder#c2c6d9
  • notebook.focusedEditorBorder#d9ddea
  • notebookStatusErrorIcon.foreground#e7598c
  • notebookStatusSuccessIcon.foreground#6ac9ad
  • notificationCenterHeader.background#f0f3fb
  • notificationCenterHeader.foreground#3e4154
  • notifications.background#f9fdff
  • notifications.foreground#2b2d3f
  • notificationsErrorIcon.foreground#c92c63
  • notificationsInfoIcon.foreground#5475c6
  • notificationsWarningIcon.foreground#ffb957
  • notificationToast.border#00000000
  • panel.background#f9fdff
  • panel.border#d9ddea
  • panelTitle.activeBorder#a288b8
  • panelTitle.activeForeground#2b2d3f
  • panelTitle.inactiveForeground#3e4154
  • peekView.border#5475c6
  • peekViewEditor.background#f9fdff
  • peekViewEditor.matchHighlightBackground#ffb95720
  • peekViewEditor.matchHighlightBorder#ffb9574c
  • peekViewResult.background#d9ddea
  • peekViewResult.fileForeground#35374a
  • peekViewResult.lineForeground#2b2d3f
  • peekViewResult.matchHighlightBackground#ffb95720
  • peekViewResult.selectionBackground#c2c6d9
  • peekViewResult.selectionForeground#2b2d3f
  • peekViewTitle.background#d9ddea
  • peekViewTitleDescription.foreground#2b2d3f
  • peekViewTitleLabel.foreground#2b2d3f
  • pickerGroup.border#c2c6d9
  • pickerGroup.foreground#a288b8
  • problemsErrorIcon.foreground#c92c63
  • problemsInfoIcon.foreground#5475c6
  • problemsWarningIcon.foreground#ffb957
  • progressBar.background#d8bfec
  • scrollbarSlider.activeBackground#2b2d3f4c
  • scrollbarSlider.background#5154694c
  • scrollbarSlider.hoverBackground#35374a4c
  • settings.modifiedItemIndicator#a288b8
  • sideBar.background#f9fdff
  • sideBar.border#d9ddea
  • sideBar.foreground#35374a
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#3e4154
  • sideBarTitle.foreground#3e4154
  • statusBar.background#d9ddea
  • statusBar.border#00000000
  • statusBar.debuggingBackground#c92c63
  • statusBar.debuggingBorder#00000000
  • statusBar.debuggingForeground#f9fdff
  • statusBar.focusBorder#f0f3fb
  • statusBar.foreground#2b2d3f
  • statusBar.noFolderBackground#d9ddea
  • statusBar.noFolderBorder#00000000
  • statusBar.noFolderForeground#2b2d3f
  • statusBar.offlineBackground#d9ddea
  • statusBar.offlineForeground#2b2d3f
  • statusBarItem.errorBackground#e7598c
  • statusBarItem.errorForeground#f9fdff
  • statusBarItem.hoverBackground#c2c6d94c
  • statusBarItem.prominentBackground#a288b8
  • statusBarItem.prominentForeground#f9fdff
  • statusBarItem.remoteBackground#a288b8
  • statusBarItem.remoteForeground#f9fdff
  • statusBarItem.warningBackground#ffb957
  • statusBarItem.warningForeground#f9fdff
  • tab.activeBackground#f0f3fb
  • tab.activeBorder#f0f3fb
  • tab.border#d9ddea
  • tab.hoverBackground#f0f3fb
  • tab.inactiveBackground#f9fdff
  • terminal.ansiBlack#303030
  • terminal.ansiBlue#839fe7
  • terminal.ansiBrightBlack#303030
  • terminal.ansiBrightBlue#839fe7
  • terminal.ansiBrightCyan#95e3f4
  • terminal.ansiBrightGreen#b3ecdb
  • terminal.ansiBrightMagenta#d8bfec
  • terminal.ansiBrightRed#e7598c
  • terminal.ansiBrightWhite#e4e4e4
  • terminal.ansiBrightYellow#f5bf97
  • terminal.ansiCyan#95e3f4
  • terminal.ansiGreen#b3ecdb
  • terminal.ansiMagenta#d8bfec
  • terminal.ansiRed#e7598c
  • terminal.ansiWhite#e4e4e4
  • terminal.ansiYellow#f5bf97
  • terminal.border#d9ddea
  • terminal.selectionBackground#5154694c
  • terminalCursor.background#f9fdff
  • terminalCursor.foreground#2b2d3f
  • testing.iconErrored#e7598c
  • testing.iconFailed#e7598c
  • testing.iconPassed#6ac9ad
  • testing.iconQueued#5475c6
  • testing.iconSkipped#3e4154
  • testing.iconUnset#3e4154
  • testing.runAction#6ac9ad
  • textLink.activeForeground#d8bfec
  • textLink.foreground#a288b8
  • textPreformat.foreground#e7598c
  • titleBar.activeBackground#f9fdff
  • titleBar.activeForeground#2b2d3f
  • titleBar.border#d9ddea
  • titleBar.inactiveBackground#f9fdff
  • titleBar.inactiveForeground#3e4154
  • tree.indentGuidesStroke#3e4154
  • welcomePage.tileBackground#d9ddea
  • welcomePage.tileHoverBackground#c2c6d9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.operator#2b2d3f
comment, punctuation.definition.comment#515469italic
keyword.type, storage.modifier, keyword.declaration, keyword.other.definition, punctuation.definition.variable.php, keyword.other.class, storage.type, keyword.other.fn.rust, keyword.other.rust, keyword.function.go, keyword.var.go, keyword.interface.go, keyword.struct.go#839fe7italic
variable#2b2d3fitalic
keyword.control, keyword.other.new.cs#a288b8italic
variable.parameter#ffb957
support.function.builtin#a288b8
support.other.namespace.use.php, meta.use.php, support.other.namespace.php, support.class, entity.name.type.class, entity.name.type.struct.rust, entity.name.type, entity.name.class, support.type.python#de889a
entity.name.function, support.function.any-method.lua, support.function#e7598c
variable.other.property#2b2d3f
constant, string#839fe7
punctuation.definition.template-expression, variable.string-escape, constant.character.format, constant.other.placeholder#59bad0
constant.character.escape#95e3f4
keyword.other.import, keyword.control.import, keyword.control.directive.include, storage.type.import, meta.import, keyword.other.using.cs, keyword.other.using.directive.cpp, meta.use.rust keyword.other.rust, keyword.import.go#a288b8italic
storage.modifier.import, string.quoted.other.lt-gt.include, entity.name.package, entity.name.type.namespace.cs, storage.modifier.package.java#2b2d3fitalic
storage.type.namespace.directive.cpp, keyword.package.go, storage.type.package, keyword.other.package, keyword.other.namespace.cs#839fe7italic
string.regexp#ffb957
entity.other.inherited-class#de889a
variable.language.this.js, variable.language.this.ts, variable.language.special.self.python, variable.language.self.lua#de889aitalic
*url*, *link*, *uri*underline
variable.other.object#de889a
entity.name.tag, punctuation.definition.tag, meta.tag.sgml#e7598c
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#f5bf97
punctuation.section.embedded.begin.svelte, punctuation.section.embedded.end.svelte#a288b8
entity.other.attribute-name.id.css#59bad0italic
entity.other.attribute-name.class.css#de889aitalic
source.css support.function#a288b8
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css#ffb957italic
source.css meta.property-value, source.sass meta.property-value, source.scss meta.property-value, source.less meta.property-value, source.stylus meta.property-value, source.postcss meta.property-value#839fe7
source.css keyword.other.unit, source.sass keyword.other.unit, source.scss keyword.other.unit, source.less keyword.other.unit, source.stylus keyword.other.unit, source.postcss keyword.other.unit#f5bf97italic
punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.section.function.scss#2b2d3f
source.css keyword.control.at-rule, source.sass keyword.control.at-rule, source.scss keyword.control.at-rule, source.less keyword.control.at-rule, source.stylus keyword.control.at-rule, source.postcss keyword.control.at-rule#a288b8italic
support.function.magic.python#59bad0italic
source.json meta.structure.dictionary.json support.type.property-name.json, meta.embedded.block.json meta.structure.dictionary.json support.type.property-name.json#e7598c
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown#a288b8
markup.italic#6ac9aditalic
markup.bold, markup.bold string#e7598cbold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold stringbold italic
markup.underline#839fe7underline
markup.quote#59bad0italic
string.other.link.title.markdown#839fe7
string.other.link.description.title.markdown, string.other.link.description#ffb957
constant.other.reference.link.markdown, string.other.link.title.markdown#ffb957
markup.strikethrough.markdown#e7598cstrikethrough
fenced_code.block.language.markdown, markup.fenced_code.block.markdown#59bad0
text.html.markdown markup.fenced_code.block.markdown meta.embedded.block#2b2d3f
markup.inline.raw.string.markdown#59bad0
punctuation.definition.list.begin.markdown#839fe7bold
meta.separator#3e4154bold
support.type.property-name.table.toml#a288b8italic
support.type.property-name.toml#e7598c
variable.other.object.js#de889a
meta.object-literal.key.js#e7598c
punctuation.definition.block.js, punctuation.definition.block.ts#2b2d3f
support.type.builtin.ts, support.type.builtin.js#5475c6
keyword.other.ts, keyword.other.js#a288b8
support.type.primitive.ts#de889a
variable.other.readwrite.hcl#e7598c
source.shell string.unquoted.argument constant.other.option #a288b8
source.shell variable.other.normal.shell#59bad0italic
source.dockerfile keyword.other.special-method.dockerfile#a288b8italic
source.sql keyword.other#a288b8italic
entity.alias.import.goitalic
Seiun by Vincentvibe3 - VS Code Theme