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#ff79c6
  • activityBar.activeFocusBorder#ff79c6
  • activityBar.background#191a21
  • activityBar.border#0d0e14
  • activityBar.foreground#bd93f9
  • activityBar.inactiveForeground#6272a4
  • activityBarBadge.background#ff79c6
  • activityBarBadge.foreground#191a21
  • activityBarTop.activeBorder#ff79c6
  • activityBarTop.foreground#bd93f9
  • activityBarTop.inactiveForeground#6272a4
  • badge.background#bd93f9
  • badge.foreground#282a36
  • breadcrumb.activeSelectionForeground#f8f8f2
  • breadcrumb.background#282a36
  • breadcrumb.focusForeground#f8f8f2
  • breadcrumb.foreground#6272a4
  • breadcrumbPicker.background#21222c
  • button.background#bd93f9
  • button.foreground#282a36
  • button.hoverBackground#ff79c6
  • button.secondaryBackground#44475a
  • button.secondaryForeground#f8f8f2
  • button.secondaryHoverBackground#6272a4
  • debugConsole.errorForeground#ff5555
  • debugConsole.infoForeground#8be9fd
  • debugConsole.sourceForeground#bd93f9
  • debugConsole.warningForeground#ffb86c
  • debugConsoleInputIcon.foreground#8be9fd
  • debugIcon.breakpointCurrentStackframeForeground#f1fa8c
  • debugIcon.breakpointDisabledForeground#6272a4
  • debugIcon.breakpointForeground#ff5555
  • debugIcon.breakpointStackframeForeground#50fa7b
  • debugIcon.breakpointUnverifiedForeground#ffb86c
  • debugIcon.continueForeground#50fa7b
  • debugIcon.disconnectForeground#6272a4
  • debugIcon.pauseForeground#8be9fd
  • debugIcon.restartForeground#50fa7b
  • debugIcon.startForeground#50fa7b
  • debugIcon.stepBackForeground#8be9fd
  • debugIcon.stepIntoForeground#8be9fd
  • debugIcon.stepOutForeground#8be9fd
  • debugIcon.stepOverForeground#8be9fd
  • debugIcon.stopForeground#ff5555
  • debugTokenExpression.boolean#bd93f9
  • debugTokenExpression.error#ff5555
  • debugTokenExpression.name#8be9fd
  • debugTokenExpression.number#bd93f9
  • debugTokenExpression.string#f1fa8c
  • debugTokenExpression.value#f1fa8c
  • debugToolBar.background#21222c
  • debugView.exceptionLabelBackground#ff555520
  • debugView.exceptionLabelForeground#ff5555
  • debugView.stateLabelBackground#8be9fd20
  • debugView.stateLabelForeground#8be9fd
  • debugView.valueChangedHighlight#f1fa8c80
  • diffEditor.insertedTextBackground#50fa7b30
  • diffEditor.removedTextBackground#ff557730
  • dropdown.background#21222c
  • dropdown.border#44475a
  • dropdown.foreground#f8f8f2
  • dropdown.listBackground#1e1f29
  • editor.background#282a36
  • editor.findMatchBackground#ffb86c60
  • editor.findMatchBorder#ffb86c
  • editor.findMatchHighlightBackground#ffb86c30
  • editor.findMatchHighlightBorder#ffb86c80
  • editor.foreground#f8f8f2
  • editor.inactiveSelectionBackground#44475a60
  • editor.lineHighlightBackground#44475a
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#44475a50
  • editor.rangeHighlightBorder#00000000
  • editor.selectionBackground#44475a
  • editor.selectionForeground#f8f8f2
  • editor.selectionHighlightBackground#44475a80
  • editor.selectionHighlightBorder#00000000
  • editor.wordHighlightBackground#44475a50
  • editor.wordHighlightBorder#00000000
  • editor.wordHighlightStrongBackground#44475a70
  • editor.wordHighlightStrongBorder#00000000
  • editor.wordHighlightTextBackground#44475a50
  • editor.wordHighlightTextBorder#00000000
  • editorBracketMatch.background#00000000
  • editorBracketMatch.border#bd93f9
  • editorCommentsWidget.rangeBackground#44475a40
  • editorCommentsWidget.resolvedBorder#50fa7b
  • editorCommentsWidget.unresolvedBorder#ffb86c
  • editorCursor.foreground#f8f8f2
  • editorError.foreground#ff5555
  • editorGroup.border#21222c
  • editorGroup.dropBackground#44475a80
  • editorGroupHeader.border#191a21
  • editorGroupHeader.tabsBackground#1e1f29
  • editorGutter.addedBackground#50fa7b
  • editorGutter.background#282a36
  • editorGutter.commentRangeForeground#6272a4
  • editorGutter.deletedBackground#ff5555
  • editorGutter.foldingControlForeground#6272a4
  • editorGutter.modifiedBackground#ffb86c
  • editorHoverWidget.background#21222c
  • editorHoverWidget.border#bd93f9
  • editorHoverWidget.foreground#f8f8f2
  • editorHoverWidget.statusBarBackground#191a21
  • editorIndentGuide.activeBackground1#6272a4
  • editorIndentGuide.background1#44475a
  • editorLineNumber.activeForeground#f8f8f2
  • editorLineNumber.foreground#6272a4
  • editorLink.activeForeground#8be9fd
  • editorMarkerNavigation.background#21222c
  • editorOverviewRuler.addedForeground#50fa7b
  • editorOverviewRuler.border#282a36
  • editorOverviewRuler.currentContentForeground#50fa7b
  • editorOverviewRuler.deletedForeground#ff5555
  • editorOverviewRuler.errorForeground#ff5555
  • editorOverviewRuler.incomingContentForeground#bd93f9
  • editorOverviewRuler.infoForeground#8be9fd
  • editorOverviewRuler.modifiedForeground#ffb86c
  • editorOverviewRuler.selectionHighlightForeground#ffb86c80
  • editorOverviewRuler.warningForeground#ffb86c80
  • editorOverviewRuler.wordHighlightForeground#bd93f980
  • editorOverviewRuler.wordHighlightStrongForeground#50fa7b80
  • editorRuler.foreground#44475a
  • editorSuggestWidget.background#21222c
  • editorSuggestWidget.border#6272a4
  • editorSuggestWidget.foreground#f8f8f2
  • editorSuggestWidget.highlightForeground#8be9fd
  • editorSuggestWidget.selectedBackground#44475a
  • editorWarning.foreground#ffb86c
  • editorWhitespace.foreground#44475a
  • editorWidget.background#21222c
  • editorWidget.border#6272a4
  • editorWidget.foreground#f8f8f2
  • editorWidget.resizeBorder#bd93f9
  • extensionButton.prominentBackground#50fa7b
  • extensionButton.prominentForeground#282a36
  • extensionButton.prominentHoverBackground#8be9fd
  • focusBorder#6272a4
  • foreground#f8f8f2
  • gitDecoration.conflictingResourceForeground#ffb86c
  • gitDecoration.deletedResourceForeground#ff5555
  • gitDecoration.ignoredResourceForeground#6272a4
  • gitDecoration.modifiedResourceForeground#f1fa8c
  • gitDecoration.submoduleResourceForeground#8be9fd
  • gitDecoration.untrackedResourceForeground#50fa7b
  • input.background#21222c
  • input.border#6272a4
  • input.foreground#f8f8f2
  • input.placeholderForeground#6272a4
  • inputOption.activeBackground#44475a
  • inputOption.activeBorder#bd93f9
  • inputValidation.errorBorder#ff5555
  • inputValidation.infoBorder#8be9fd
  • inputValidation.warningBorder#ffb86c
  • keybindingLabel.background#44475a
  • keybindingLabel.border#6272a4
  • keybindingLabel.bottomBorder#6272a4
  • keybindingLabel.foreground#f8f8f2
  • keybindingTable.headerBackground#1e1f29
  • keybindingTable.rowsBackground#282a36
  • list.activeSelectionBackground#44475a
  • list.activeSelectionForeground#f8f8f2
  • list.activeSelectionIconForeground#8be9fd
  • list.dropBackground#44475a
  • list.errorForeground#ff5555
  • list.focusBackground#44475a
  • list.focusForeground#f8f8f2
  • list.focusHighlightForeground#8be9fd
  • list.focusOutline#bd93f9
  • list.highlightForeground#8be9fd
  • list.hoverBackground#44475a
  • list.hoverForeground#f8f8f2
  • list.inactiveFocusBackground#44475a80
  • list.inactiveFocusOutline#00000000
  • list.inactiveSelectionBackground#44475a
  • list.inactiveSelectionForeground#f8f8f2
  • list.inactiveSelectionIconForeground#6272a4
  • list.invalidItemForeground#ff5555
  • list.warningForeground#ffb86c
  • listFilterWidget.background#21222c
  • listFilterWidget.noMatchesOutline#ff5555
  • listFilterWidget.outline#6272a4
  • menu.background#21222c
  • menu.foreground#f8f8f2
  • menu.selectionBackground#44475a
  • menu.selectionForeground#f8f8f2
  • menu.separatorBackground#6272a4
  • menubar.selectionBackground#44475a
  • menubar.selectionForeground#f8f8f2
  • merge.commonContentBackground#44475a80
  • merge.commonHeaderBackground#44475a80
  • merge.currentContentBackground#50fa7b30
  • merge.currentHeaderBackground#50fa7b90
  • merge.incomingContentBackground#bd93f930
  • merge.incomingHeaderBackground#bd93f990
  • minimap.background#1e1f2980
  • minimap.errorHighlight#ff5555
  • minimap.findMatchHighlight#ffb86c80
  • minimap.selectionHighlight#44475a80
  • minimap.selectionOccurrenceHighlight#44475a60
  • minimap.warningHighlight#ffb86c
  • minimapGutter.addedBackground#50fa7b
  • minimapGutter.deletedBackground#ff5555
  • minimapGutter.modifiedBackground#ffb86c
  • minimapSlider.activeBackground#44475ac0
  • minimapSlider.background#44475a80
  • minimapSlider.hoverBackground#44475aa0
  • notebook.cellBorderColor#191a21
  • notebook.cellInsertionIndicator#bd93f9
  • notebook.cellStatusBarItemHoverBackground#44475a
  • notebook.cellToolbarSeparator#191a21
  • notebook.focusedCellBorder#bd93f9
  • notebook.focusedEditorBorder#bd93f9
  • notebook.inactiveFocusedCellBorder#6272a4
  • notebook.inactiveSelectedCellBorder#44475a
  • notebook.selectedCellBackground#44475a40
  • notebook.selectedCellBorder#bd93f9
  • notebook.symbolHighlightBackground#44475a60
  • notebookEditorOverviewRuler.runningCellForeground#8be9fd
  • notebookScrollbarSlider.activeBackground#44475ac0
  • notebookScrollbarSlider.background#44475a80
  • notebookScrollbarSlider.hoverBackground#44475aa0
  • notebookStatusErrorIcon.foreground#ff5555
  • notebookStatusRunningIcon.foreground#8be9fd
  • notebookStatusSuccessIcon.foreground#50fa7b
  • notificationCenterHeader.background#21222c
  • notifications.background#21222c
  • notifications.foreground#f8f8f2
  • panel.background#282a36
  • panel.border#191a21
  • panelSectionHeader.background#1e1f29
  • panelSectionHeader.border#191a21
  • panelSectionHeader.foreground#8be9fd
  • panelTitle.activeBorder#ff79c6
  • panelTitle.activeForeground#f8f8f2
  • panelTitle.inactiveForeground#6272a4
  • peekView.border#bd93f9
  • peekViewEditor.background#21222c
  • peekViewEditor.matchHighlightBackground#ffb86c60
  • peekViewResult.background#21222c
  • peekViewResult.fileForeground#f8f8f2
  • peekViewResult.lineForeground#f8f8f2
  • peekViewResult.matchHighlightBackground#ffb86c60
  • peekViewResult.selectionBackground#44475a
  • peekViewResult.selectionForeground#f8f8f2
  • peekViewTitle.background#21222c
  • peekViewTitleDescription.foreground#6272a4
  • peekViewTitleLabel.foreground#f8f8f2
  • pickerGroup.border#6272a4
  • pickerGroup.foreground#8be9fd
  • ports.iconRunningProcessForeground#8be9fd
  • problemsErrorIcon.foreground#ff5555
  • problemsInfoIcon.foreground#8be9fd
  • problemsWarningIcon.foreground#ffb86c
  • profiles.sashBorder#191a21
  • progressBar.background#bd93f9
  • quickInput.background#21222c
  • quickInput.foreground#f8f8f2
  • quickInputList.focusBackground#44475a
  • quickInputList.focusForeground#f8f8f2
  • quickInputList.focusIconForeground#8be9fd
  • quickInputTitle.background#191a21
  • searchEditor.findMatchBackground#ffb86c60
  • searchEditor.findMatchBorder#ffb86c
  • searchEditor.textInputBorder#6272a4
  • selection.background#44475a
  • settings.checkboxBackground#21222c
  • settings.checkboxBorder#6272a4
  • settings.checkboxForeground#f8f8f2
  • settings.dropdownBackground#21222c
  • settings.dropdownBorder#6272a4
  • settings.dropdownForeground#f8f8f2
  • settings.headerForeground#f8f8f2
  • settings.modifiedItemIndicator#ffb86c
  • settings.numberInputBackground#21222c
  • settings.numberInputBorder#6272a4
  • settings.numberInputForeground#f8f8f2
  • settings.textInputBackground#21222c
  • settings.textInputBorder#6272a4
  • settings.textInputForeground#f8f8f2
  • sideBar.background#1e1f29
  • sideBar.border#191a21
  • sideBar.foreground#e4e4e4
  • sideBarSectionHeader.background#191a21
  • sideBarSectionHeader.border#191a21
  • sideBarSectionHeader.foreground#8be9fd
  • sideBarTitle.foreground#bd93f9
  • statusBar.background#191a21
  • statusBar.border#0d0e14
  • statusBar.debuggingBackground#ff5555
  • statusBar.debuggingForeground#191a21
  • statusBar.foreground#8be9fd
  • statusBar.noFolderBackground#191a21
  • statusBar.noFolderForeground#8be9fd
  • statusBarItem.prominentBackground#ff79c6
  • statusBarItem.prominentHoverBackground#ffb86c
  • statusBarItem.remoteBackground#bd93f9
  • statusBarItem.remoteForeground#282a36
  • symbolIcon.arrayForeground#ffb86c
  • symbolIcon.booleanForeground#bd93f9
  • symbolIcon.classForeground#8be9fd
  • symbolIcon.colorForeground#ff79c6
  • symbolIcon.constantForeground#bd93f9
  • symbolIcon.constructorForeground#50fa7b
  • symbolIcon.enumeratorForeground#bd93f9
  • symbolIcon.enumeratorMemberForeground#bd93f9
  • symbolIcon.eventForeground#ff79c6
  • symbolIcon.fieldForeground#50fa7b
  • symbolIcon.fileForeground#f8f8f2
  • symbolIcon.folderForeground#8be9fd
  • symbolIcon.functionForeground#50fa7b
  • symbolIcon.interfaceForeground#8be9fd
  • symbolIcon.keyForeground#8be9fd
  • symbolIcon.keywordForeground#ff79c6
  • symbolIcon.methodForeground#50fa7b
  • symbolIcon.moduleForeground#ff79c6
  • symbolIcon.namespaceForeground#ff79c6
  • symbolIcon.nullForeground#6272a4
  • symbolIcon.numberForeground#bd93f9
  • symbolIcon.objectForeground#8be9fd
  • symbolIcon.operatorForeground#ff79c6
  • symbolIcon.packageForeground#ff79c6
  • symbolIcon.propertyForeground#50fa7b
  • symbolIcon.referenceForeground#8be9fd
  • symbolIcon.snippetForeground#f1fa8c
  • symbolIcon.stringForeground#f1fa8c
  • symbolIcon.structForeground#8be9fd
  • symbolIcon.textForeground#f8f8f2
  • symbolIcon.typeParameterForeground#ffb86c
  • symbolIcon.unitForeground#bd93f9
  • symbolIcon.variableForeground#f1fa8c
  • tab.activeBackground#282a36
  • tab.activeBorder#00000000
  • tab.activeBorderTop#ff79c6
  • tab.activeForeground#f8f8f2
  • tab.activeModifiedBorder#f1fa8c
  • tab.border#191a21
  • tab.hoverBackground#21222c
  • tab.hoverBorder#00000000
  • tab.hoverForeground#f8f8f2
  • tab.inactiveBackground#1e1f29
  • tab.inactiveForeground#6272a4
  • tab.inactiveModifiedBorder#6272a4
  • tab.lastPinnedBorder#bd93f9
  • tab.unfocusedActiveBackground#282a36
  • tab.unfocusedActiveBorder#00000000
  • tab.unfocusedActiveBorderTop#6272a4
  • tab.unfocusedActiveForeground#e4e4e4
  • tab.unfocusedActiveModifiedBorder#6272a4
  • tab.unfocusedHoverBackground#21222c80
  • tab.unfocusedHoverBorder#00000000
  • tab.unfocusedHoverForeground#e4e4e4
  • tab.unfocusedInactiveBackground#1e1f29
  • tab.unfocusedInactiveForeground#6272a4
  • tab.unfocusedInactiveModifiedBorder#44475a
  • terminal.ansiBlack#21222c
  • terminal.ansiBlue#bd93f9
  • terminal.ansiBrightBlack#6272a4
  • terminal.ansiBrightBlue#d6acff
  • terminal.ansiBrightCyan#a4ffff
  • terminal.ansiBrightGreen#69ff94
  • terminal.ansiBrightMagenta#ff92df
  • terminal.ansiBrightRed#ff6e6e
  • terminal.ansiBrightWhite#f8f8f2
  • terminal.ansiBrightYellow#ffffa5
  • terminal.ansiCyan#8be9fd
  • terminal.ansiGreen#50fa7b
  • terminal.ansiMagenta#ff79c6
  • terminal.ansiRed#ff5555
  • terminal.ansiWhite#e4e4e4
  • terminal.ansiYellow#f1fa8c
  • terminal.background#282a36
  • terminal.border#191a21
  • terminal.findMatchBackground#ffb86c60
  • terminal.findMatchBorder#ffb86c
  • terminal.findMatchHighlightBackground#ffb86c30
  • terminal.findMatchHighlightBorder#ffb86c80
  • terminal.foreground#f8f8f2
  • terminal.hoverHighlightBackground#44475a80
  • terminal.inactiveSelectionBackground#44475a60
  • terminal.selectionBackground#44475a
  • terminal.selectionForeground#f8f8f2
  • terminal.tab.activeBorder#ff79c6
  • terminalCommandDecoration.defaultBackground#6272a4
  • terminalCommandDecoration.errorBackground#ff5555
  • terminalCommandDecoration.successBackground#50fa7b
  • terminalCursor.background#282a36
  • terminalCursor.foreground#f8f8f2
  • terminalOverviewRuler.cursorForeground#f8f8f2
  • terminalOverviewRuler.findMatchForeground#ffb86c
  • testing.iconErrored#ff5555
  • testing.iconFailed#ff5555
  • testing.iconPassed#50fa7b
  • testing.iconQueued#f1fa8c
  • testing.iconSkipped#6272a4
  • testing.iconUnset#6272a4
  • testing.peekBorder#bd93f9
  • testing.peekHeaderBackground#191a21
  • testing.runAction#50fa7b
  • titleBar.activeBackground#0d0e14
  • titleBar.activeForeground#bd93f9
  • titleBar.border#0d0e14
  • titleBar.inactiveBackground#0d0e14
  • titleBar.inactiveForeground#6272a4
  • walkThrough.embeddedEditorBackground#282a36
  • welcomePage.background#282a36
  • welcomePage.progress.background#21222c
  • welcomePage.progress.foreground#bd93f9
  • welcomePage.tileBackground#1e1f29
  • welcomePage.tileBorder#191a21
  • welcomePage.tileHoverBackground#21222c
  • widget.border#6272a4
  • widget.shadow#0d0e1480

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.attribute#50fa7b
meta.annotation#50fa7b
variable.annotation#50fa7b
comment#6272a4italic
punctuation.definition.comment#6272a4italic
constant#bd93f9
entity.name.constant#bd93f9
variable.other.constant#bd93f9
variable.language#bd93f9
constant.numeric#bd93f9
constant.language.boolean#bd93f9
entity#50fa7b
entity.name#50fa7b
variable.parameter.function#ffb86citalic
entity.name.tag#ff79c6
keyword#ff79c6italic
storage#ff79c6
storage.type#8be9fditalic
storage.modifier.package#ff79c6
storage.modifier.import#ff79c6
string#f1fa8c
punctuation.definition.string#f1fa8c
support#8be9fd
property#50fa7b
meta.property-name#50fa7b
variable#f8f8f2
variable.other#f8f8f2
variable.other.readwrite#f8f8f2
entity.name.variable#f8f8f2
variable.other.object#f8f8f2
variable.other.property#50fa7b
support.variable.property#50fa7b
meta.object-literal.key#50fa7b
support.type.property-name#50fa7b
meta.property-name#50fa7b
entity.name.function#50fa7bbold
support.function#50fa7b
support.class#8be9fd
entity.name.type#8be9fd
entity.name.type.struct#8be9fd
entity.name.type.enum#bd93f9
entity.name.type.trait#8be9fditalic
entity.name.type.interface#8be9fditalic
entity.name.type.class#8be9fd
entity.name.type.alias#8be9fd
support.type.primitive#8be9fd
storage.type#8be9fditalic
entity.name.function.macro#ff79c6bold
support.type#8be9fd
support.class#8be9fd
support.constant#bd93f9
constant.other.placeholder#ffb86c
variable.other.constant#bd93f9
variable.language.special#bd93f9
keyword.operator#ff79c6
punctuation.separator#f8f8f2
punctuation.terminator#f8f8f2
punctuation.delimiter#f8f8f2
punctuation.section#f8f8f2
meta.brace.round#f8f8f2
meta.brace.square#f8f8f2
meta.brace.curly#f8f8f2
variable.other.member#50fa7b
entity.name.variable.field#50fa7b
variable.language.this#bd93f9italic
keyword.other.unit#bd93f9
punctuation.separator.key-value#ff79c6
markup.heading#bd93f9bold
markup.italic#f1fa8citalic
markup.bold#ffb86cbold
markup.underline#8be9fdunderline
markup.inline.raw#50fa7b
markup.list#f1fa8c
markup.quote#f1fa8citalic
meta.link#8be9fd
markup.underline.link#8be9fdunderline
Axiomatic by xcuzalex - VS Code Theme