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#5cffdd
  • activityBar.activeFocusBorder#ff5edb
  • activityBar.background#070d0f
  • activityBar.border#5cffdd
  • activityBar.foreground#00e5ff
  • activityBar.inactiveForeground#ff5edb
  • activityBarBadge.background#487dff
  • activityBarBadge.foreground#99b6ff
  • activityBarTop.activeBorder#00e5ff
  • activityBarTop.foreground#00e5ff
  • badge.background#487dff
  • badge.foreground#99bbff
  • breadcrumb.activeSelectionForeground#5cffdd
  • breadcrumb.background#0f1a1e
  • breadcrumb.focusForeground#9ae4fe
  • breadcrumb.foreground#5cffdd
  • breadcrumbPicker.background#0a1315
  • button.background#9d6bff
  • button.foreground#5cffdd
  • button.hoverBackground#00bdd5
  • button.secondaryBackground#264863
  • button.secondaryForeground#eafcff
  • button.secondaryHoverBackground#2f5c79
  • checkbox.background#070d0f
  • checkbox.border#5cffdd
  • checkbox.foreground#eafcff
  • commandCenter.activeBackground#163336
  • commandCenter.activeBorder#5cffdd
  • commandCenter.activeForeground#ff5edb
  • commandCenter.background#091012
  • commandCenter.border#ff5edb
  • commandCenter.foreground#00e5ff
  • contrastActiveBorder#5cffdd
  • contrastBorder#5cffdd
  • debugExceptionWidget.background#2b1019
  • debugExceptionWidget.border#ff8fa6
  • debugTokenExpression.boolean#b099ff
  • debugTokenExpression.name#54faff
  • debugTokenExpression.number#ff97ac
  • debugTokenExpression.string#58ffc9
  • debugTokenExpression.value#ffce61
  • debugToolBar.background#0a1315
  • debugToolBar.border#9d6bff
  • descriptionForeground#7bbbd5
  • diffEditor.diagonalFill#1f4d63
  • diffEditor.insertedLineBackground#10593866
  • diffEditor.insertedTextBackground#07995f44
  • diffEditor.removedLineBackground#5b182d66
  • diffEditor.removedTextBackground#be183f44
  • diffEditorGutter.insertedLineBackground#069a5f
  • diffEditorGutter.removedLineBackground#c0163e
  • disabledForeground#6f8a93
  • dropdown.background#060b0d
  • dropdown.border#00e5ff
  • dropdown.foreground#eafcff
  • dropdown.listBackground#05090a
  • editor.background#0f1a1e
  • editor.findMatchBackground#ad8015
  • editor.findMatchForeground#ffe699
  • editor.findMatchHighlightBackground#85692288
  • editor.findRangeHighlightBackground#146b9244
  • editor.foreground#eafcff
  • editor.hoverHighlightBackground#154f6955
  • editor.inactiveSelectionBackground#18536e6E
  • editor.lineHighlightBackground#13314166
  • editor.lineHighlightBorder#1a485e
  • editor.rangeHighlightBackground#487dff33
  • editor.selectionBackground#146b92AA
  • editor.selectionHighlightBackground#22729455
  • editor.wordHighlightBackground#487dff44
  • editor.wordHighlightStrongBackground#bdaaff44
  • editorBracketHighlight.foreground1#ffe45c
  • editorBracketHighlight.foreground2#ff5edb
  • editorBracketHighlight.foreground3#5cffdd
  • editorBracketHighlight.foreground4#5cb0ff
  • editorBracketHighlight.foreground5#9d6bff
  • editorBracketHighlight.foreground6#00e5ff
  • editorBracketHighlight.unexpectedBracket.foreground#ff6f8e
  • editorBracketMatch.background#54faff22
  • editorBracketMatch.border#00e5ff
  • editorCodeLens.foreground#58aac8
  • editorCursor.background#0f1a1e
  • editorCursor.foreground#ff5edb
  • editorError.foreground#ff7f9a
  • editorGroup.border#00e5ff
  • editorGroup.dropBackground#1c454a
  • editorGroupHeader.noTabsBackground#0a1315
  • editorGroupHeader.tabsBackground#070d0f
  • editorGroupHeader.tabsBorder#00e5ff
  • editorGutter.addedBackground#58ffc9
  • editorGutter.background#0f1a1e
  • editorGutter.deletedBackground#ff8fa6
  • editorGutter.modifiedBackground#6eb8ff
  • editorHint.foreground#58ffc9
  • editorHoverWidget.background#0a1315
  • editorHoverWidget.border#9d6bff
  • editorHoverWidget.foreground#eafcff
  • editorIndentGuide.activeBackground1#47a1c2
  • editorIndentGuide.background1#1a465a
  • editorInfo.foreground#6eb8ff
  • editorInlayHint.background#12252f
  • editorInlayHint.foreground#7bc6de
  • editorInlayHint.parameterBackground#122d30
  • editorInlayHint.parameterForeground#82fff3
  • editorInlayHint.typeBackground#163a5b
  • editorInlayHint.typeForeground#93afff
  • editorLineNumber.activeForeground#ff5edb
  • editorLineNumber.foreground#00e5ff
  • editorLink.activeForeground#00e5ff
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.errorForeground#ff7f9aCC
  • editorOverviewRuler.findMatchForeground#ffce61CC
  • editorOverviewRuler.infoForeground#6eb8ffCC
  • editorOverviewRuler.warningForeground#ffce61CC
  • editorRuler.foreground#1b4c62
  • editorSuggestWidget.background#0a1315
  • editorSuggestWidget.border#9d6bff
  • editorSuggestWidget.foreground#9ae4fe
  • editorSuggestWidget.highlightForeground#ff5edb
  • editorSuggestWidget.selectedBackground#194348
  • editorSuggestWidget.selectedForeground#eafcff
  • editorUnnecessaryCode.opacity#00000088
  • editorWarning.foreground#ffce61
  • editorWhitespace.foreground#25596f
  • editorWidget.background#0a1315
  • editorWidget.border#9d6bff
  • editorWidget.foreground#eafcff
  • errorForeground#ff8fa6
  • focusBorder#00e5ff
  • foreground#eafcff
  • gitDecoration.addedResourceForeground#58ffc9
  • gitDecoration.conflictingResourceForeground#ffce61
  • gitDecoration.deletedResourceForeground#ff8fa6
  • gitDecoration.ignoredResourceForeground#6d8891
  • gitDecoration.modifiedResourceForeground#6eb8ff
  • gitDecoration.renamedResourceForeground#b099ff
  • gitDecoration.submoduleResourceForeground#54faff
  • gitDecoration.untrackedResourceForeground#6dffce
  • icon.foreground#00e5ff
  • input.background#070d0f
  • input.border#5cffdd
  • input.foreground#ff5edb
  • input.placeholderForeground#00e5ff
  • inputOption.activeBackground#19474d
  • inputOption.activeBorder#ff5edb
  • inputOption.activeForeground#eafcff
  • inputValidation.errorBackground#2b1019
  • inputValidation.errorBorder#ff8fa6
  • inputValidation.infoBackground#12232f
  • inputValidation.infoBorder#6eb8ff
  • inputValidation.warningBackground#2b2210
  • inputValidation.warningBorder#ffce61
  • list.activeSelectionBackground#194348
  • list.activeSelectionForeground#eafcff
  • list.errorForeground#ff8fa6
  • list.focusBackground#1a4e53
  • list.focusForeground#eafcff
  • list.focusOutline#00e5ff
  • list.highlightForeground#ff5edb
  • list.hoverBackground#122729
  • list.hoverForeground#eafcff
  • list.inactiveSelectionBackground#173033
  • list.inactiveSelectionForeground#eafcff
  • list.invalidItemForeground#ff8fa6
  • list.warningForeground#ffce61
  • menu.background#0a1315
  • menu.border#9d6bff
  • menu.foreground#eafcff
  • menu.selectionBackground#194348
  • menu.selectionForeground#eafcff
  • menu.separatorBackground#265a70
  • minimap.background#0a1315
  • minimap.errorHighlight#ff8fa6CC
  • minimap.findMatchHighlight#ffce61AA
  • minimap.selectionHighlight#54faff99
  • minimap.warningHighlight#ffce61CC
  • minimapSlider.activeBackground#54faff66
  • minimapSlider.background#3d7e9733
  • minimapSlider.hoverBackground#4e9bb64D
  • notificationCenterHeader.background#0a1315
  • notificationLink.foreground#00e5ff
  • notifications.background#0a1315
  • notifications.border#9d6bff
  • notifications.foreground#eafcff
  • notificationToast.border#9d6bff
  • panel.background#091013
  • panel.border#00e5ff
  • panelInput.border#5cffdd
  • panelTitle.activeBorder#5cffdd
  • panelTitle.activeForeground#ff5edb
  • panelTitle.inactiveForeground#00e5ff
  • peekView.border#9d6bff
  • peekViewEditor.background#091012
  • peekViewEditor.matchHighlightBackground#ab8017AA
  • peekViewResult.background#070d0f
  • peekViewResult.fileForeground#99fff6
  • peekViewResult.lineForeground#74b9d3
  • peekViewResult.matchHighlightBackground#146b92AA
  • peekViewResult.selectionBackground#194348
  • peekViewResult.selectionForeground#eafcff
  • peekViewTitle.background#0a1315
  • peekViewTitleDescription.foreground#74b9d3
  • peekViewTitleLabel.foreground#9ceffc
  • pickerGroup.border#9d6bff
  • pickerGroup.foreground#5cffdd
  • progressBar.background#5cffdd
  • quickInput.background#0a1315
  • quickInput.foreground#eafcff
  • quickInputTitle.background#0c161a
  • scrollbar.shadow#070e13
  • scrollbarSlider.activeBackground#54faffAA
  • scrollbarSlider.background#3b7d9666
  • scrollbarSlider.hoverBackground#4a97b288
  • selection.background#126c94
  • settings.checkboxBackground#070d0f
  • settings.checkboxBorder#5cffdd
  • settings.dropdownBackground#070d0f
  • settings.dropdownBorder#00e5ff
  • settings.headerForeground#5cffdd
  • settings.modifiedItemIndicator#5cffdd
  • settings.textInputBackground#060b0d
  • settings.textInputBorder#00e5ff
  • sideBar.background#0a1315
  • sideBar.border#5cffdd
  • sideBar.foreground#00e5ff
  • sideBarActivityBarTop.border#ff5edb
  • sideBarSectionHeader.background#091012
  • sideBarSectionHeader.border#ff5edb
  • sideBarSectionHeader.foreground#a3e6f5
  • sideBarTitle.border#ff5edb
  • sideBarTitle.foreground#ff5edb
  • statusBar.background#050a0b
  • statusBar.border#9d6bff
  • statusBar.debuggingBackground#642e97
  • statusBar.debuggingForeground#eafcff
  • statusBar.foreground#ff5edb
  • statusBar.noFolderBackground#070d0f
  • statusBar.noFolderForeground#a1d7e9
  • statusBarItem.activeBackground#1c4e54
  • statusBarItem.hoverBackground#18363a
  • statusBarItem.prominentBackground#009bb4
  • statusBarItem.prominentForeground#99ffff
  • statusBarItem.remoteBackground#214ebe
  • statusBarItem.remoteForeground#ff5edb
  • tab.activeBackground#0f1a1e
  • tab.activeBorder#ff5edb
  • tab.activeBorderTop#00e5ff
  • tab.activeForeground#5cffdd
  • tab.border#9d6bff
  • tab.hoverBackground#122628
  • tab.hoverForeground#eafcff
  • tab.inactiveBackground#070d0f
  • tab.inactiveForeground#00e5ff
  • tab.lastPinnedBorder#387690
  • tab.unfocusedActiveBorderTop#9d6bff
  • tab.unfocusedActiveForeground#a4ddee
  • tab.unfocusedInactiveForeground#4e9abb
  • terminal.ansiBlack#11212d
  • terminal.ansiBlue#53a9ff
  • terminal.ansiBrightBlack#467f96
  • terminal.ansiBrightBlue#8cc9ff
  • terminal.ansiBrightCyan#76ffff
  • terminal.ansiBrightGreen#7effc5
  • terminal.ansiBrightMagenta#b899ff
  • terminal.ansiBrightRed#ff99ae
  • terminal.ansiBrightWhite#9bf4fd
  • terminal.ansiBrightYellow#ffd87b
  • terminal.ansiCyan#36f4ff
  • terminal.ansiGreen#43ffaf
  • terminal.ansiMagenta#a77fff
  • terminal.ansiRed#ff6688
  • terminal.ansiWhite#aeddea
  • terminal.ansiYellow#ffc846
  • terminal.background#070d0f
  • terminal.border#5cffdd
  • terminal.foreground#eafcff
  • terminal.selectionBackground#146b92AA
  • terminalCursor.background#0f1a1e
  • terminalCursor.foreground#ff5edb
  • textBlockQuote.background#0a1315
  • textBlockQuote.border#ff5edb
  • textCodeBlock.background#070d0f
  • textLink.activeForeground#ff5edb
  • textLink.foreground#00e5ff
  • textPreformat.foreground#9d6bff
  • textSeparator.foreground#2e647c
  • titleBar.activeBackground#050a0b
  • titleBar.activeForeground#00e5ff
  • titleBar.border#9d6bff
  • titleBar.inactiveBackground#040809
  • titleBar.inactiveForeground#519ebc
  • tree.inactiveIndentGuidesStroke#1c475d
  • tree.indentGuidesStroke#275e77
  • walkThrough.embeddedEditorBackground#091012
  • welcomePage.background#0f1a1e
  • welcomePage.tileBackground#0c161a
  • welcomePage.tileHoverBackground#173236
  • widget.shadow#06131cAA
  • window.activeBorder#5cffdd
  • window.inactiveBorder#5cffdd

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4fa4c5italic
string, string.quoted, string.template, punctuation.definition.string#58ffc9—
constant.character.escape, constant.other.placeholder#ffce61bold
constant.numeric, constant.language, constant.character, support.constant#ff97ac—
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new#7ebeff—
keyword.operator, punctuation.separator, punctuation.accessor#54faff—
entity.name.function, meta.function-call, variable.function, support.function#b099ff—
variable.parameter, meta.function.parameters#9ed8ea—
variable, variable.other.readwrite, variable.other.object#9ae4fe—
variable.other.property, support.variable.property, meta.object-literal.key#7cfbff—
entity.name.type, entity.name.class, support.type, support.class, storage.type.class#99c6ff—
entity.name.namespace, entity.name.module, support.type.object.module#487dff—
meta.decorator, punctuation.decorator, storage.type.annotation, entity.name.function.decorator#ffce61—
entity.name.tag, punctuation.definition.tag, meta.tag#7ebeff—
entity.other.attribute-name, support.type.property-name#54faff—
string.regexp, constant.other.character-class.regexp, keyword.operator.quantifier.regexp#ffce61—
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted.double.json#7cfbff—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css#b099ff—
support.type.property-name.css, support.type.vendored.property-name.css#7ebeff—
support.constant.property-value.css, constant.other.color.rgb-value.css, constant.other.color#58ffc9—
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#99fff6bold
markup.bold, punctuation.definition.bold.markdown#ffce61bold
markup.italic, punctuation.definition.italic.markdown#b099ffitalic
markup.underline.link, string.other.link.title.markdown, meta.link.inline.markdown#54faffunderline
markup.inline.raw, markup.fenced_code.block, markup.raw.block#58ffc9—
markup.quote, punctuation.definition.quote.begin.markdown#74b9d3italic
markup.inserted, markup.inserted.git_gutter#58ffc9—
markup.deleted, markup.deleted.git_gutter#ff8fa6—
markup.changed, markup.changed.git_gutter#ffce61—
invalid, invalid.illegal, invalid.deprecated#ff99abunderline