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.background#141a26
  • activityBar.border#1a2237
  • activityBar.foreground#c7d0e3
  • activityBar.inactiveForeground#7f8aa6
  • activityBarBadge.background#5aa7ff
  • activityBarBadge.foreground#0b1020
  • activityErrorBadge.background#ff6b8a
  • activityErrorBadge.foreground#0b1020
  • activityWarningBadge.background#ffd166
  • activityWarningBadge.foreground#0b1020
  • badge.background#22314f
  • badge.foreground#c7d0e3
  • breadcrumb.activeSelectionForeground#c7d0e3
  • breadcrumb.focusForeground#c7d0e3
  • breadcrumb.foreground#7f8aa6
  • button.background#2f6fff
  • button.foreground#0b1020
  • button.hoverBackground#5aa7ff
  • chat.avatarBackground#22314f
  • chat.avatarForeground#c7d0e3
  • chat.checkpointSeparator#1a2237
  • chat.editedFileForeground#c7d0e3
  • chat.linesAddedForeground#4fd6becc
  • chat.linesRemovedForeground#ff6b8acc
  • chat.requestBackground#101624
  • chat.requestBorder#1a2237
  • chat.requestBubbleBackground#101624cc
  • chat.requestBubbleHoverBackground#111a31cc
  • chat.requestCodeBorder#1a2237cc
  • chat.slashCommandBackground#22314f
  • chat.slashCommandForeground#c7d0e3
  • chatManagement.sashBorder#1a2237
  • commandCenter.activeBackground#101624
  • commandCenter.activeForeground#c7d0e3
  • commandCenter.background#0d1220
  • commandCenter.border#1a2237
  • commandCenter.foreground#c7d0e3
  • contrastActiveBorder#5aa7ff
  • contrastBorder#2f6fff
  • debugIcon.breakpointCurrentStackframeForeground#5aa7ff
  • debugIcon.breakpointDisabledForeground#556783
  • debugIcon.breakpointForeground#ff6b8a
  • debugIcon.breakpointStackframeForeground#5aa7ff
  • debugIcon.breakpointUnverifiedForeground#ffd166
  • debugIcon.continueForeground#4fd6be
  • debugIcon.disconnectForeground#ff6b8a
  • debugIcon.pauseForeground#ffd166
  • debugIcon.restartForeground#5aa7ff
  • debugIcon.startForeground#4fd6be
  • debugIcon.stepBackForeground#5aa7ff
  • debugIcon.stepIntoForeground#5aa7ff
  • debugIcon.stepOutForeground#5aa7ff
  • debugIcon.stepOverForeground#5aa7ff
  • debugIcon.stopForeground#ff6b8a
  • debugToolBar.background#101624
  • debugToolBar.border#1a2237
  • diffEditor.insertedTextBackground#4fd6be22
  • diffEditor.removedTextBackground#ff6b8a22
  • disabledForeground#7f8aa6
  • dropdown.background#101624
  • dropdown.border#1a2237
  • dropdown.foreground#c7d0e3
  • editor.background#0b1020
  • editor.findMatchBackground#2a3a67
  • editor.findMatchHighlightBackground#22314f66
  • editor.foreground#c7d0e3
  • editor.inactiveSelectionBackground#1a2641cc
  • editor.lineHighlightBackground#0d1220
  • editor.rangeHighlightBackground#16224266
  • editor.selectionBackground#2a3a67
  • editor.selectionForeground#ffffff
  • editor.selectionHighlightBackground#22314f4d
  • editor.wordHighlightBackground#18244466
  • editor.wordHighlightStrongBackground#1f2d5280
  • editorBracketMatch.background#22314f66
  • editorBracketMatch.border#2f6fff80
  • editorCursor.foreground#7aa2ff
  • editorError.foreground#ff6b8a
  • editorGroup.border#1a2237
  • editorGroupHeader.tabsBackground#0d1220
  • editorGroupHeader.tabsBorder#1a2237
  • editorGutter.addedBackground#4fd6be
  • editorGutter.background#0b1020
  • editorGutter.commentGlyphForeground#7f8aa6
  • editorGutter.commentRangeForeground#556783
  • editorGutter.commentUnresolvedGlyphForeground#ffd166
  • editorGutter.deletedBackground#ff6b8a
  • editorGutter.foldingControlForeground#7f8aa6
  • editorGutter.itemBackground#2a3a67
  • editorGutter.itemGlyphForeground#c7d0e3
  • editorGutter.modifiedBackground#ffd166
  • editorHoverWidget.background#101624
  • editorHoverWidget.border#1a2237
  • editorIndentGuide.activeBackground1#2a3a67
  • editorIndentGuide.background1#1a2237
  • editorInfo.foreground#5aa7ff
  • editorInlayHint.background#101624cc
  • editorInlayHint.foreground#7f8aa6
  • editorInlayHint.parameterForeground#e0af68
  • editorInlayHint.typeForeground#4fd6be
  • editorLineNumber.activeForeground#7f8aa6
  • editorLineNumber.foreground#42506b
  • editorMinimap.inlineChatInserted#4fd6be66
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.errorForeground#ff6b8a66
  • editorOverviewRuler.infoForeground#5aa7ff66
  • editorOverviewRuler.inlineChatInserted#4fd6be66
  • editorOverviewRuler.inlineChatRemoved#ff6b8a66
  • editorOverviewRuler.warningForeground#ffd16666
  • editorRuler.foreground#1a2237
  • editorSuggestWidget.background#101624
  • editorSuggestWidget.border#1a2237
  • editorSuggestWidget.foreground#c7d0e3
  • editorSuggestWidget.highlightForeground#7aa2ff
  • editorSuggestWidget.selectedBackground#162242
  • editorWarning.foreground#ffd166
  • editorWhitespace.foreground#1a223780
  • editorWidget.background#101624
  • editorWidget.border#1a2237
  • errorForeground#ff6b8a
  • focusBorder#5aa7ff
  • foreground#c7d0e3
  • gitDecoration.deletedResourceForeground#ff6b8a
  • gitDecoration.modifiedResourceForeground#ffd166
  • gitDecoration.untrackedResourceForeground#4fd6be
  • icon.foreground#c7d0e3
  • inlineChat.background#101624
  • inlineChat.border#1a2237
  • inlineChat.foreground#c7d0e3
  • inlineChat.shadow#00000066
  • inlineChatDiff.inserted#4fd6be22
  • inlineChatDiff.removed#ff6b8a22
  • inlineChatInput.background#0b1020
  • inlineChatInput.border#1a2237
  • inlineChatInput.focusBorder#2f6fff
  • inlineChatInput.placeholderForeground#7f8aa6
  • inlineEdit.gutterIndicator.background#22314f
  • inlineEdit.gutterIndicator.primaryBackground#2f6fff22
  • inlineEdit.gutterIndicator.primaryBorder#2f6fff
  • inlineEdit.gutterIndicator.primaryForeground#2f6fff
  • inlineEdit.gutterIndicator.secondaryBackground#5aa7ff22
  • inlineEdit.gutterIndicator.secondaryBorder#5aa7ff
  • inlineEdit.gutterIndicator.secondaryForeground#5aa7ff
  • inlineEdit.gutterIndicator.successfulBackground#4fd6be22
  • inlineEdit.gutterIndicator.successfulBorder#4fd6be
  • inlineEdit.gutterIndicator.successfulForeground#4fd6be
  • inlineEdit.modifiedBackground#4fd6be12
  • inlineEdit.originalBackground#ff6b8a12
  • input.background#101624
  • input.border#1a2237
  • input.foreground#c7d0e3
  • input.placeholderForeground#7f8aa6
  • list.activeSelectionBackground#22314f
  • list.activeSelectionForeground#c7d0e3
  • list.activeSelectionIconForeground#c7d0e3
  • list.focusAndSelectionOutline#5aa7ff
  • list.focusBackground#162242
  • list.focusOutline#5aa7ff
  • list.highlightForeground#7aa2ff
  • list.hoverBackground#111a31
  • list.hoverForeground#c7d0e3
  • list.inactiveSelectionBackground#131d38
  • list.inactiveSelectionForeground#c7d0e3
  • list.inactiveSelectionIconForeground#7f8aa6
  • merge.border#1a2237
  • merge.commonContentBackground#ffd1661f
  • merge.commonHeaderBackground#ffd16633
  • merge.currentContentBackground#5aa7ff1f
  • merge.currentHeaderBackground#5aa7ff33
  • merge.incomingContentBackground#4fd6be1f
  • merge.incomingHeaderBackground#4fd6be33
  • mergeEditor.change.background#2a3a6733
  • mergeEditor.change.word.background#2a3a674d
  • mergeEditor.conflict.handledFocused.border#4fd6be
  • mergeEditor.conflict.handledUnfocused.border#4fd6be99
  • mergeEditor.conflict.unhandledFocused.border#ff6b8a
  • mergeEditor.conflict.unhandledUnfocused.border#ff6b8a99
  • minimap.chatEditHighlight#bb9af766
  • minimap.errorHighlight#ff6b8a66
  • minimap.findMatchHighlight#2a3a6780
  • minimap.infoHighlight#5aa7ff66
  • minimap.selectionHighlight#22314fcc
  • minimap.selectionOccurrenceHighlight#18244466
  • minimap.warningHighlight#ffd16666
  • minimapGutter.addedBackground#4fd6be
  • minimapGutter.deletedBackground#ff6b8a
  • minimapGutter.modifiedBackground#ffd166
  • minimapSlider.activeBackground#42506baa
  • minimapSlider.background#42506b44
  • minimapSlider.hoverBackground#42506b77
  • notebook.cellBorderColor#1a2237
  • notebook.cellEditorBackground#0b1020
  • notebook.cellHoverBackground#111a31
  • notebook.cellInsertionIndicator#2f6fff
  • notebook.cellStatusBarItemHoverBackground#111a31
  • notebook.cellToolbarSeparator#1a2237
  • notebook.editorBackground#0b1020
  • notebook.focusedCellBackground#0d1220
  • notebook.focusedCellBorder#2f6fff
  • notebook.focusedEditorBorder#2f6fff
  • notebook.inactiveFocusedCellBorder#1a2237
  • notebook.inactiveSelectedCellBorder#1a2237
  • notebook.outputContainerBackgroundColor#0d1220
  • notebook.outputContainerBorderColor#1a2237
  • notebook.selectedCellBackground#0d1220
  • notebook.selectedCellBorder#1a2237
  • notebook.symbolHighlightBackground#18244466
  • notebookEditorOverviewRuler.runningCellForeground#5aa7ff66
  • notebookScrollbarSlider.activeBackground#42506baa
  • notebookScrollbarSlider.background#42506b44
  • notebookScrollbarSlider.hoverBackground#42506b77
  • notebookStatusErrorIcon.foreground#ff6b8a
  • notebookStatusRunningIcon.foreground#5aa7ff
  • notebookStatusSuccessIcon.foreground#4fd6be
  • notificationLink.foreground#7aa2ff
  • notifications.background#101624
  • notifications.border#1a2237
  • notifications.foreground#c7d0e3
  • notificationsErrorIcon.foreground#ff6b8a
  • notificationsInfoIcon.foreground#5aa7ff
  • notificationsWarningIcon.foreground#ffd166
  • panel.background#0b1020
  • panel.border#1a2237
  • panelTitle.activeBorder#2f6fff
  • panelTitle.activeForeground#c7d0e3
  • panelTitle.inactiveForeground#7f8aa6
  • peekView.border#1a2237
  • peekViewEditor.background#0b1020
  • peekViewEditor.matchHighlightBackground#2a3a6780
  • peekViewResult.background#101624
  • peekViewResult.matchHighlightBackground#2a3a6766
  • peekViewResult.selectionBackground#162242
  • peekViewResult.selectionForeground#c7d0e3
  • peekViewTitle.background#0d1220
  • peekViewTitleDescription.foreground#7f8aa6
  • peekViewTitleLabel.foreground#c7d0e3
  • problemsErrorIcon.foreground#ff6b8a
  • problemsInfoIcon.foreground#5aa7ff
  • problemsWarningIcon.foreground#ffd166
  • progressBar.background#2f6fff
  • quickInput.background#101624
  • quickInput.foreground#c7d0e3
  • scrollbarSlider.activeBackground#42506bcc
  • scrollbarSlider.background#42506b66
  • scrollbarSlider.hoverBackground#42506b99
  • settings.checkboxBackground#101624
  • settings.checkboxBorder#1a2237
  • settings.checkboxForeground#c7d0e3
  • settings.dropdownBackground#101624
  • settings.dropdownBorder#1a2237
  • settings.dropdownForeground#c7d0e3
  • settings.focusedRowBackground#131d38
  • settings.focusedRowBorder#2f6fff
  • settings.headerBorder#1a2237
  • settings.headerForeground#c7d0e3
  • settings.modifiedItemIndicator#2f6fff
  • settings.rowHoverBackground#111a31
  • settings.sashBorder#1a2237
  • settings.textInputBackground#101624
  • settings.textInputBorder#1a2237
  • settings.textInputForeground#c7d0e3
  • sideBar.background#101624
  • sideBar.border#1a2237
  • sideBar.foreground#c7d0e3
  • sideBarSectionHeader.background#0d1220
  • sideBarSectionHeader.foreground#c7d0e3
  • sideBarTitle.foreground#c7d0e3
  • statusBar.background#0d1220
  • statusBar.debuggingBackground#2f6fff
  • statusBar.debuggingForeground#0b1020
  • statusBar.foreground#c7d0e3
  • symbolIcon.arrayForeground#bb9af7
  • symbolIcon.booleanForeground#ff6b8a
  • symbolIcon.classForeground#4fd6be
  • symbolIcon.colorForeground#5aa7ff
  • symbolIcon.constantForeground#ff6b8a
  • symbolIcon.constructorForeground#5aa7ff
  • symbolIcon.enumeratorForeground#bb9af7
  • symbolIcon.enumeratorMemberForeground#bb9af7
  • symbolIcon.eventForeground#5aa7ff
  • symbolIcon.fieldForeground#c7d0e3
  • symbolIcon.fileForeground#7f8aa6
  • symbolIcon.folderForeground#7f8aa6
  • symbolIcon.functionForeground#5aa7ff
  • symbolIcon.interfaceForeground#4fd6be
  • symbolIcon.keyForeground#ffd166
  • symbolIcon.keywordForeground#7aa2ff
  • symbolIcon.methodForeground#5aa7ff
  • symbolIcon.moduleForeground#bb9af7
  • symbolIcon.namespaceForeground#bb9af7
  • symbolIcon.nullForeground#ff6b8a
  • symbolIcon.numberForeground#ffd166
  • symbolIcon.objectForeground#c7d0e3
  • symbolIcon.operatorForeground#91a0be
  • symbolIcon.packageForeground#bb9af7
  • symbolIcon.propertyForeground#4fd6be
  • symbolIcon.referenceForeground#5aa7ff
  • symbolIcon.snippetForeground#a6f0c6
  • symbolIcon.stringForeground#a6f0c6
  • symbolIcon.structForeground#4fd6be
  • symbolIcon.textForeground#c7d0e3
  • symbolIcon.typeParameterForeground#4fd6be
  • symbolIcon.unitForeground#ffd166
  • symbolIcon.variableForeground#c7d0e3
  • tab.activeBackground#0b1020
  • tab.activeForeground#c7d0e3
  • tab.border#0d1220
  • tab.inactiveBackground#0d1220
  • tab.inactiveForeground#7f8aa6
  • terminal.ansiBlack#0d1220
  • terminal.ansiBlue#7aa2ff
  • terminal.ansiBrightBlack#42506b
  • terminal.ansiBrightBlue#9bb8ff
  • terminal.ansiBrightCyan#8bc6ff
  • terminal.ansiBrightGreen#7be2d0
  • terminal.ansiBrightMagenta#d6b8ff
  • terminal.ansiBrightRed#ff8aa3
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffe29a
  • terminal.ansiCyan#5aa7ff
  • terminal.ansiGreen#4fd6be
  • terminal.ansiMagenta#bb9af7
  • terminal.ansiRed#ff6b8a
  • terminal.ansiWhite#c7d0e3
  • terminal.ansiYellow#ffd166
  • terminal.background#0b1020
  • terminal.foreground#c7d0e3
  • terminal.inactiveSelectionBackground#1a264180
  • terminal.selectionBackground#22314f
  • terminalCommandDecoration.defaultBackground#42506b
  • terminalCommandDecoration.errorBackground#ff6b8a
  • terminalCommandDecoration.successBackground#4fd6be
  • terminalCursor.foreground#7aa2ff
  • testing.iconErrored#ff6b8a
  • testing.iconFailed#ff6b8a
  • testing.iconPassed#4fd6be
  • testing.iconQueued#5aa7ff
  • testing.iconSkipped#ffd166
  • testing.iconUnset#7f8aa6
  • testing.message.error.lineBackground#ff6b8a22
  • testing.message.info.decorationForeground#7f8aa6
  • testing.message.info.lineBackground#5aa7ff22
  • testing.peekBorder#1a2237
  • testing.peekHeaderBackground#0d1220
  • testing.runAction#4fd6be
  • titleBar.activeBackground#0d1220
  • titleBar.activeForeground#c7d0e3
  • titleBar.inactiveBackground#0d1220
  • titleBar.inactiveForeground#7f8aa6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#556783italic
string, punctuation.definition.string#a6f0c6
constant.numeric#ffd166
keyword, storage.type, storage.modifier#7aa2ff
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.import, keyword.control.exception, keyword.control.return, keyword.control.trycatch, keyword.control.async, keyword.control.await#7aa2ff
entity.name.function, support.function, meta.function-call#5aa7ff
entity.name.type, support.type, support.class#4fd6be
variable, meta.definition.variable.name, entity.name.variable#c7d0e3
storage.modifier.readonly, storage.modifier.immutable#e0af68
constant.language, support.constant#ff6b8a
invalid.deprecated, markup.deleted#556783strikethrough
keyword.operator, punctuation, meta.brace, meta.delimiter#91a0be
variable.other.property, support.type.property-name, meta.object-literal.key#4fd6be
support.type.property-name.json, support.type.property-name.jsonc#4fd6be
variable.parameter, meta.function.parameters#e0af68
entity.name.class, entity.name.struct, entity.name.namespace, entity.name.module#4fd6be
entity.name.tag, entity.name.tag.jsx, entity.name.tag.tsx#7aa2ff
entity.other.attribute-name, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx#4fd6be
string.regexp, constant.character.escape#bb9af7
invalid, invalid.illegal#ff6b8aunderline
markup.heading, entity.name.section#7aa2ffbold
markup.inline.raw, markup.fenced_code.block, markup.raw.block#a6f0c6
markup.underline.link, markup.underline.link.image#5aa7ffunderline
support.function.builtin.python, support.type.python, variable.language.special.self.python#5aa7ff
Quimera Night by Andres Antonio Cardoso - VS Code Theme