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#0E0F15
  • activityBar.border#1d2033
  • activityBar.dropBorder#8696a5
  • activityBar.foreground#cbdbeb
  • activityBar.inactiveForeground#8696a5
  • activityBarBadge.background#a288b8
  • activityBarBadge.foreground#0e0f15
  • badge.background#a288b8
  • badge.foreground#0e0f15
  • breadcrumb.activeSelectionForeground#cbdbeb
  • breadcrumb.background#12141d
  • breadcrumb.focusForeground#cbdbeb
  • breadcrumb.foreground#8696a5
  • breadcrumbPicker.background#1d2033
  • button.background#a288b8
  • button.border#00000000
  • button.foreground#0e0f15
  • button.hoverBackground#d8bfec
  • button.secondaryBackground#12141d
  • button.secondaryForeground#cbdbeb
  • button.secondaryHoverBackground#1d2033
  • button.separator#0e0f15
  • checkbox.background#1d2033
  • checkbox.foreground#cbdbeb
  • checkbox.selectBackground#a288b8
  • checkbox.selectBorder#303247
  • commandCenter.activeBackground#303247
  • commandCenter.activeBorder#303247
  • commandCenter.activeForeground#cbdbeb
  • commandCenter.background#1d2033
  • commandCenter.border#1d2033
  • commandCenter.inactiveBorder#1d2033
  • debugIcon.breakpointCurrentStackframeForeground#ffb957
  • debugIcon.breakpointForeground#c92c63
  • debugToolBar.background#1d2033
  • debugToolBar.border#00000000
  • debugView.exceptionLabelBackground#c92c63
  • debugView.exceptionLabelForeground#0e0f15
  • diffEditor.border#303247
  • diffEditor.diagonalFill#303247
  • diffEditor.insertedLineBackground#6ac9ad20
  • diffEditor.insertedTextBackground#6ac9ad4c
  • diffEditor.removedLineBackground#c92c6320
  • diffEditor.removedTextBackground#c92c634c
  • diffEditorGutter.insertedLineBackground#6ac9ad4c
  • diffEditorGutter.removedLineBackground#c92c634c
  • dropdown.background#1d2033
  • dropdown.foreground#cbdbeb
  • editor.background#12141d
  • editor.findMatchBackground#ffb95720
  • editor.findMatchBorder#ffb9574c
  • editor.findMatchHighlightBackground#ffb95720
  • editor.findMatchHighlightBorder#6f767e4c
  • editor.findRangeHighlightBackground#6f767e20
  • editor.foldBackground#00000000
  • editor.foreground#cbdbeb
  • editor.hoverHighlightBackground#a288b84c
  • editor.inactiveSelectionBackground#6f767e20
  • editor.lineHighlightBackground#6f767e20
  • editor.selectionBackground#6f767e4c
  • editor.selectionHighlightBackground#6f767e20
  • editor.selectionHighlightBorder#6f767e4c
  • editor.wordHighlightBackground#5475c620
  • editor.wordHighlightStrongBackground#5475c64c
  • editorBracketMatch.background#00000000
  • editorBracketMatch.border#8696a5
  • editorCodeLens.foreground#cbdbeb
  • editorCursor.background#0e0f15
  • editorCursor.foreground#a288b8
  • editorError.background#00000000
  • editorError.foreground#c92c63
  • editorGhostText.foreground#6f767e
  • editorGroup.border#1d2033
  • editorGroup.dropBackground#1d2033bf
  • editorGroupHeader.tabsBackground#0E0F15
  • editorGroupHeader.tabsBorder#1d2033
  • editorGutter.addedBackground#b3ecdb
  • editorGutter.deletedBackground#e7598c
  • editorGutter.foldingControlForeground#cbdbeb
  • editorGutter.modifiedBackground#a288b8
  • editorHoverWidget.background#0e0f15
  • editorHoverWidget.border#1d2033
  • editorHoverWidget.foreground#cbdbeb
  • editorIndentGuide.activeBackground#8696a5
  • editorIndentGuide.background#303247
  • editorInlayHint.background#303247
  • editorInlayHint.foreground#8696a5
  • editorLineNumber.activeForeground#cbdbeb
  • editorLineNumber.foreground#6f767e
  • editorLink.activeForeground#a288b8
  • editorMarkerNavigation.background#1d2033
  • editorMarkerNavigationError.background#c92c63
  • editorMarkerNavigationError.headerBackground#1d2033
  • editorMarkerNavigationInfo.background#5475c6
  • editorMarkerNavigationInfo.headerBackground#1d2033
  • editorMarkerNavigationWarning.background#ffb957
  • editorMarkerNavigationWarning.headerBackground#1d2033
  • editorOverviewRuler.background#00000000
  • editorOverviewRuler.border#6f767e
  • editorOverviewRuler.errorForeground#c92c63
  • editorRuler.foreground#303247
  • editorSuggestWidget.background#0e0f15
  • editorSuggestWidget.border#1d2033
  • editorSuggestWidget.focusHighlightForeground#a288b8
  • editorSuggestWidget.foreground#9fb0c1
  • editorSuggestWidget.highlightForeground#e7598c
  • editorSuggestWidget.selectedBackground#12141d
  • editorSuggestWidget.selectedForeground#cbdbeb
  • editorWarning.background#00000000
  • editorWarning.foreground#ffb957
  • editorWhitespace.foreground#6f767e
  • editorWidget.background#12141d
  • editorWidget.foreground#cbdbeb
  • editorWidget.resizeBorder#303247
  • focusBorder#6f767e
  • gitDecoration.addedResourceForeground#d3ffe1
  • gitDecoration.conflictingResourceForeground#f5bf97
  • gitDecoration.deletedResourceForeground#c92c63
  • gitDecoration.ignoredResourceForeground#6f767e
  • gitDecoration.modifiedResourceForeground#d8bfec
  • gitDecoration.renamedResourceForeground#d8bfec
  • gitDecoration.stageDeletedResourceForeground#c92c63
  • gitDecoration.stageModifiedResourceForeground#d8bfec
  • gitDecoration.submoduleResourceForeground#95e3f4
  • gitDecoration.untrackedResourceForeground#839fe7
  • input.background#1d2033
  • input.border#00000000
  • input.foreground#cbdbeb
  • input.placeholderForeground#8696a5
  • inputOption.activeBackground#303247
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#9fb0c1
  • list.activeSelectionBackground#1d2033
  • list.activeSelectionForeground#cbdbeb
  • list.dropBackground#1d2033
  • list.errorForeground#e7598c
  • list.focusBackground#1d2033
  • list.highlightForeground#a288b8
  • list.hoverBackground#1d2033
  • list.hoverForeground#cbdbeb
  • list.inactiveSelectionBackground#0e0f15
  • list.inactiveSelectionForeground#cbdbeb
  • list.warningForeground#ffb957
  • listFilterWidget.background#1d2033
  • listFilterWidget.noMatchesOutline#e7598c
  • listFilterWidget.outline#00000000
  • menu.background#12141d
  • menu.border#00000000
  • menu.foreground#cbdbeb
  • menu.selectionBackground#0e0f15
  • menu.selectionBorder#00000000
  • menu.selectionForeground#cbdbeb
  • menu.separatorBackground#303247
  • menubar.selectionBackground#1d2033
  • menubar.selectionBorder#00000000
  • menubar.selectionForeground#cbdbeb
  • merge.commonContentBackground#1d203320
  • merge.commonHeaderBackground#1d20334c
  • 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#6f767e
  • mergeEditor.conflict.handledUnfocused.border#303247
  • 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#6f767e4c
  • minimap.warningHighlight#ffb957
  • notebook.cellInsertionIndicator#8696a5
  • notebook.cellStatusBarItemHoverBackground#6f767e20
  • notebook.cellToolbarSeparator#1d2033
  • notebook.focusedCellBorder#303247
  • notebook.focusedEditorBorder#1d2033
  • notebookStatusErrorIcon.foreground#e7598c
  • notebookStatusSuccessIcon.foreground#6ac9ad
  • notificationCenterHeader.background#12141d
  • notificationCenterHeader.foreground#8696a5
  • notifications.background#0e0f15
  • notifications.foreground#cbdbeb
  • notificationsErrorIcon.foreground#c92c63
  • notificationsInfoIcon.foreground#5475c6
  • notificationsWarningIcon.foreground#ffb957
  • notificationToast.border#00000000
  • panel.background#0E0F15
  • panel.border#1d2033
  • panelTitle.activeBorder#a288b8
  • panelTitle.activeForeground#cbdbeb
  • panelTitle.inactiveForeground#8696a5
  • peekView.border#5475c6
  • peekViewEditor.background#0e0f15
  • peekViewEditor.matchHighlightBackground#ffb95720
  • peekViewEditor.matchHighlightBorder#ffb9574c
  • peekViewResult.background#1d2033
  • peekViewResult.fileForeground#9fb0c1
  • peekViewResult.lineForeground#cbdbeb
  • peekViewResult.matchHighlightBackground#ffb95720
  • peekViewResult.selectionBackground#303247
  • peekViewResult.selectionForeground#cbdbeb
  • peekViewTitle.background#1d2033
  • peekViewTitleDescription.foreground#cbdbeb
  • peekViewTitleLabel.foreground#cbdbeb
  • pickerGroup.border#303247
  • pickerGroup.foreground#a288b8
  • problemsErrorIcon.foreground#c92c63
  • problemsInfoIcon.foreground#5475c6
  • problemsWarningIcon.foreground#ffb957
  • progressBar.background#d8bfec
  • scrollbarSlider.activeBackground#cbdbeb4c
  • scrollbarSlider.background#6f767e4c
  • scrollbarSlider.hoverBackground#9fb0c14c
  • settings.modifiedItemIndicator#a288b8
  • sideBar.background#0e0f15
  • sideBar.border#1d2033
  • sideBar.foreground#9fb0c1
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#8696a5
  • sideBarTitle.foreground#8696a5
  • statusBar.background#1d2033
  • statusBar.border#00000000
  • statusBar.debuggingBackground#c92c63
  • statusBar.debuggingBorder#00000000
  • statusBar.debuggingForeground#0e0f15
  • statusBar.focusBorder#12141d
  • statusBar.foreground#cbdbeb
  • statusBar.noFolderBackground#1d2033
  • statusBar.noFolderBorder#00000000
  • statusBar.noFolderForeground#cbdbeb
  • statusBar.offlineBackground#1d2033
  • statusBar.offlineForeground#cbdbeb
  • statusBarItem.compactHoverBackground#cbdbeb4c
  • statusBarItem.errorBackground#e7598c
  • statusBarItem.errorForeground#0e0f15
  • statusBarItem.errorHoverBackground#de889a
  • statusBarItem.errorHoverForeground#0e0f15
  • statusBarItem.hoverBackground#6f767e4c
  • statusBarItem.offlineBackground#1d2033
  • statusBarItem.offlineForeground#cbdbeb
  • statusBarItem.offlineHoverBackground#303247
  • statusBarItem.offlineHoverForeground#cbdbeb
  • statusBarItem.prominentBackground#a288b8
  • statusBarItem.prominentForeground#0e0f15
  • statusBarItem.prominentHoverBackground#d8bfec
  • statusBarItem.prominentHoverForeground#0e0f15
  • statusBarItem.remoteBackground#a288b8
  • statusBarItem.remoteForeground#0e0f15
  • statusBarItem.remoteHoverBackground#d8bfec
  • statusBarItem.remoteHoverForeground#0e0f15
  • statusBarItem.warningBackground#ffb957
  • statusBarItem.warningForeground#0e0f15
  • statusBarItem.warningHoverBackground#ffe3bc
  • statusBarItem.warningHoverForeground#0e0f15
  • tab.activeBackground#12141d
  • tab.activeBorder#12141d
  • tab.border#1d2033
  • tab.hoverBackground#12141d
  • tab.inactiveBackground#0E0F15
  • 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#1d2033
  • terminal.selectionBackground#6f767e4c
  • terminalCursor.background#0e0f15
  • terminalCursor.foreground#cbdbeb
  • testing.iconErrored#e7598c
  • testing.iconFailed#e7598c
  • testing.iconPassed#6ac9ad
  • testing.iconQueued#5475c6
  • testing.iconSkipped#8696a5
  • testing.iconUnset#8696a5
  • testing.runAction#6ac9ad
  • textLink.activeForeground#d8bfec
  • textLink.foreground#a288b8
  • textPreformat.foreground#e7598c
  • titleBar.activeBackground#0E0F15
  • titleBar.activeForeground#cbdbeb
  • titleBar.border#1d2033
  • titleBar.inactiveBackground#0E0F15
  • titleBar.inactiveForeground#8696a5
  • tree.indentGuidesStroke#8696a5
  • welcomePage.tileBackground#1d2033
  • welcomePage.tileHoverBackground#303247

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.operator#cbdbeb
comment, punctuation.definition.comment#6f767eitalic
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#cbdbebitalic
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#cbdbeb
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#cbdbebitalic
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#cbdbeb
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#cbdbeb
markup.inline.raw.string.markdown#59bad0
punctuation.definition.list.begin.markdown#839fe7bold
meta.separator#8696a5bold
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#cbdbeb
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