Skip to main content
Coding Theme

Monokai Pro

Publisher: monokaiThemes in package: 8

✨ Professional dark & light theme + icon pack, from the author of the original Monokai color scheme.

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.activeFocusBorder#ffd76d
  • activityBar.background#161821
  • activityBar.border#161821
  • activityBar.foreground#b2b9bd
  • activityBar.inactiveForeground#535763
  • activityBarBadge.background#ffd76d
  • activityBarBadge.foreground#282a3a
  • activityBarTop.background#1e1f2b
  • activityBarTop.foreground#b2b9bd
  • activityBarTop.inactiveForeground#535763
  • activityErrorBadge.background#ff657a
  • activityErrorBadge.foreground#282a3a
  • activityWarningBadge.background#ff9b5e
  • activityWarningBadge.foreground#282a3a
  • badge.background#3a3d4b
  • badge.foreground#888d94
  • banner.background#3a3d4b
  • banner.foreground#b2b9bd
  • banner.iconForeground#b2b9bd
  • breadcrumb.activeSelectionForeground#eaf2f1
  • breadcrumb.focusForeground#b2b9bd
  • breadcrumb.foreground#888d94
  • breadcrumbPicker.background#282a3a
  • button.background#3a3d4b
  • button.foreground#eaf2f1
  • button.hoverBackground#535763
  • button.secondaryBackground#3a3d4b
  • button.secondaryForeground#b2b9bd
  • button.secondaryHoverBackground#535763
  • button.separator#282a3a
  • charts.blue#9cd1bb
  • charts.foreground#eaf2f1
  • charts.green#bad761
  • charts.lines#696d77
  • charts.orange#ff9b5e
  • charts.purple#c39ac9
  • charts.red#ff657a
  • charts.yellow#ffd76d
  • chat.avatarBackground#282a3a
  • chat.avatarForeground#c39ac9
  • chat.linesAddedForeground#bad761
  • chat.linesRemovedForeground#ff657a
  • chat.requestBackground#3a3d4b
  • chat.requestBorder#535763
  • chat.requestBubbleBackground#282a3a
  • chat.requestBubbleHoverBackground#3a3d4b
  • chat.requestCodeBorder#3a3d4b
  • chat.slashCommandBackground#00000000
  • chat.slashCommandForeground#ffd76d
  • chat.thinkingShimmer#bad761
  • checkbox.background#3a3d4b
  • checkbox.border#535763
  • checkbox.foreground#ffd76d
  • commandCenter.activeBackground#282a3a
  • commandCenter.activeForeground#b2b9bd
  • commandCenter.background#1e1f2b
  • commandCenter.border#282a3a
  • commandCenter.debuggingBackground#1e1f2b
  • commandCenter.foreground#888d94
  • debugConsole.errorForeground#ff657a
  • debugConsole.infoForeground#9cd1bb
  • debugConsole.sourceForeground#eaf2f1
  • debugConsole.warningForeground#ff9b5e
  • debugConsoleInputIcon.foreground#ffd76d
  • debugExceptionWidget.background#3a3d4b
  • debugExceptionWidget.border#1e1f2b
  • debugIcon.breakpointCurrentStackframeForeground#ffd76d
  • debugIcon.breakpointDisabledForeground#b2b9bd
  • debugIcon.breakpointForeground#ff657a
  • debugIcon.breakpointStackframeForeground#eaf2f1
  • debugIcon.breakpointUnverifiedForeground#ff9b5e
  • debugIcon.continueForeground#eaf2f1
  • debugIcon.disconnectForeground#eaf2f1
  • debugIcon.pauseForeground#eaf2f1
  • debugIcon.restartForeground#bad761
  • debugIcon.startForeground#bad761
  • debugIcon.stepBackForeground#eaf2f1
  • debugIcon.stepIntoForeground#eaf2f1
  • debugIcon.stepOutForeground#eaf2f1
  • debugIcon.stepOverForeground#eaf2f1
  • debugIcon.stopForeground#ff657a
  • debugTokenExpression.boolean#ff9b5e
  • debugTokenExpression.error#ff657a
  • debugTokenExpression.name#9cd1bb
  • debugTokenExpression.number#c39ac9
  • debugTokenExpression.string#ffd76d
  • debugTokenExpression.value#eaf2f1
  • debugToolBar.background#3a3d4b
  • debugView.exceptionLabelBackground#ff657a
  • debugView.exceptionLabelForeground#282a3a
  • debugView.stateLabelBackground#bad761
  • debugView.stateLabelForeground#282a3a
  • debugView.valueChangedHighlight#ffd76d
  • descriptionForeground#888d94
  • diffEditor.diagonalFill#3a3d4b
  • diffEditor.insertedLineBackground#bad76119
  • diffEditor.insertedTextBackground#bad76119
  • diffEditor.move.border
  • diffEditor.moveActive.border
  • diffEditor.removedLineBackground#ff657a19
  • diffEditor.removedTextBackground#ff657a19
  • diffEditor.unchangedCodeBackground#1e1f2b
  • diffEditor.unchangedRegionBackground#1e1f2b
  • diffEditor.unchangedRegionForeground#b2b9bd
  • diffEditor.unchangedRegionShadow#161821
  • diffEditorGutter.insertedLineBackground#bad76119
  • diffEditorGutter.removedLineBackground#ff657a19
  • diffEditorOverview.insertedForeground#bad761a5
  • diffEditorOverview.removedForeground#ff657aa5
  • disabledForeground#eaf2f126
  • dropdown.background#3a3d4b
  • dropdown.border#535763
  • dropdown.foreground#888d94
  • dropdown.listBackground#3a3d4b
  • editor.background#282a3a
  • editor.findMatchBackground#eaf2f126
  • editor.findMatchBorder#ffd76d
  • editor.findMatchHighlightBackground#eaf2f126
  • editor.findMatchHighlightBorder#00000000
  • editor.findRangeHighlightBackground#eaf2f10c
  • editor.findRangeHighlightBorder#00000000
  • editor.focusedStackFrameHighlightBackground#b2b9bd26
  • editor.foldBackground#eaf2f10c
  • editor.foreground#eaf2f1
  • editor.hoverHighlightBackground#eaf2f10c
  • editor.inactiveSelectionBackground#eaf2f10c
  • editor.inlineValuesBackground#535763
  • editor.inlineValuesForeground#b2b9bd
  • editor.lineHighlightBackground#eaf2f10c
  • editor.lineHighlightBorder#00000000
  • editor.linkedEditingBackground#3a3d4b
  • editor.rangeHighlightBackground#3a3d4b
  • editor.rangeHighlightBorder#3a3d4b
  • editor.selectionBackground#b2b9bd26
  • editor.selectionHighlightBackground#eaf2f126
  • editor.selectionHighlightBorder#00000000
  • editor.stackFrameHighlightBackground#b2b9bd26
  • editor.wordHighlightBackground#eaf2f126
  • editor.wordHighlightBorder#00000000
  • editor.wordHighlightStrongBackground#eaf2f126
  • editor.wordHighlightStrongBorder#00000000
  • editorBracketHighlight.foreground1#ff657a
  • editorBracketHighlight.foreground2#ff9b5e
  • editorBracketHighlight.foreground3#ffd76d
  • editorBracketHighlight.foreground4#bad761
  • editorBracketHighlight.foreground5#9cd1bb
  • editorBracketHighlight.foreground6#c39ac9
  • editorBracketMatch.background#282a3a
  • editorBracketMatch.border#696d77
  • editorCodeLens.foreground#696d77
  • editorCursor.background#282a3a
  • editorCursor.foreground#eaf2f1
  • editorError.background#00000000
  • editorError.border#00000000
  • editorError.foreground#ff657a
  • editorGhostText.foreground#696d77
  • editorGroup.border#1e1f2b
  • editorGroup.dropBackground#1e1f2bbf
  • editorGroup.emptyBackground#161821
  • editorGroup.focusedEmptyBorder#1e1f2b
  • editorGroupHeader.noTabsBackground#282a3a
  • editorGroupHeader.tabsBackground#282a3a
  • editorGroupHeader.tabsBorder#282a3a
  • editorGutter.addedBackground#bad761
  • editorGutter.background#282a3a
  • editorGutter.deletedBackground#ff657a
  • editorGutter.foldingControlForeground#b2b9bd
  • editorGutter.modifiedBackground#ff9b5e
  • editorHint.border#282a3a
  • editorHint.foreground#c39ac9
  • editorHoverWidget.background#3a3d4b
  • editorHoverWidget.border#1e1f2b
  • editorIndentGuide.background#3a3d4b
  • editorInfo.background#00000000
  • editorInfo.border#282a3a
  • editorInfo.foreground#9cd1bb
  • editorInlayHint.background#3a3d4b
  • editorInlayHint.foreground#888d94
  • editorInlayHint.parameterBackground#ff9b5e0c
  • editorInlayHint.parameterForeground#ff9b5e7f
  • editorInlayHint.typeBackground#c39ac90c
  • editorInlayHint.typeForeground#c39ac97f
  • editorLightBulb.foreground#ffd76d
  • editorLightBulbAi.foreground#ffd76d
  • editorLightBulbAutoFix.foreground#bad761
  • editorLineNumber.activeForeground#b2b9bd
  • editorLineNumber.foreground#535763
  • editorLink.activeForeground#9cd1bb
  • editorMarkerNavigation.background#3a3d4b
  • editorMarkerNavigationError.background#ff657a
  • editorMarkerNavigationInfo.background#9cd1bb
  • editorMarkerNavigationWarning.background#ff9b5e
  • editorOverviewRuler.addedForeground#bad761
  • editorOverviewRuler.border#282a3a
  • editorOverviewRuler.currentContentForeground#3a3d4b
  • editorOverviewRuler.deletedForeground#ff657a
  • editorOverviewRuler.errorForeground#ff657a
  • editorOverviewRuler.findMatchForeground#eaf2f126
  • editorOverviewRuler.incomingContentForeground#3a3d4b
  • editorOverviewRuler.infoForeground#9cd1bb
  • editorOverviewRuler.modifiedForeground#ff9b5e
  • editorOverviewRuler.rangeHighlightForeground#eaf2f126
  • editorOverviewRuler.selectionHighlightForeground#eaf2f126
  • editorOverviewRuler.warningForeground#ff9b5e
  • editorOverviewRuler.wordHighlightForeground#eaf2f126
  • editorOverviewRuler.wordHighlightStrongForeground#eaf2f126
  • editorPane.background#282a3a
  • editorRuler.foreground#535763
  • editorStickyScroll.background#282a3a
  • editorStickyScroll.border#3a3d4b
  • editorStickyScroll.shadow#282a3a
  • editorStickyScrollHover.background#eaf2f10c
  • editorSuggestWidget.background#3a3d4b
  • editorSuggestWidget.border#1e1f2b
  • editorSuggestWidget.foreground#b2b9bd
  • editorSuggestWidget.highlightForeground#eaf2f1
  • editorSuggestWidget.selectedBackground#535763
  • editorUnnecessaryCode.opacity#000000a5
  • editorWarning.background#00000000
  • editorWarning.border#00000000
  • editorWarning.foreground#ff9b5e
  • editorWhitespace.foreground#535763
  • editorWidget.background#3a3d4b
  • editorWidget.border#1e1f2b
  • errorForeground#ff657a
  • extensionBadge.remoteBackground#bad761
  • extensionBadge.remoteForeground#eaf2f1
  • extensionButton.background#3a3d4b
  • extensionButton.foreground#b2b9bd
  • extensionButton.hoverBackground#535763
  • extensionButton.prominentBackground#3a3d4b
  • extensionButton.prominentForeground#eaf2f1
  • extensionButton.prominentHoverBackground#535763
  • extensionIcon.preReleaseForeground#c39ac9
  • extensionIcon.sponsorForeground#9cd1bb
  • extensionIcon.starForeground#ffd76d
  • extensionIcon.verifiedForeground#bad761
  • focusBorder#696d77
  • foreground#eaf2f1
  • gitDecoration.addedResourceForeground#bad761
  • gitDecoration.conflictingResourceForeground#ff9b5e
  • gitDecoration.deletedResourceForeground#ff657a
  • gitDecoration.ignoredResourceForeground#535763
  • gitDecoration.modifiedResourceForeground#ffd76d
  • gitDecoration.stageDeletedResourceForeground#ff657a
  • gitDecoration.stageModifiedResourceForeground#ffd76d
  • gitDecoration.untrackedResourceForeground#b2b9bd
  • icon.foreground#888d94
  • inlineChat.background#282a3a
  • inlineChat.border#1e1f2b
  • inlineChat.shadow#161821
  • inlineChatDiff.inserted#bad76119
  • inlineChatDiff.removed#bad76119
  • inlineEdit.gutterIndicator.background#3a3d4b
  • inlineEdit.gutterIndicator.primaryBackground#3a3d4b
  • inlineEdit.gutterIndicator.primaryBorder#3a3d4b
  • inlineEdit.gutterIndicator.primaryForeground#c39ac9
  • inlineEdit.gutterIndicator.secondaryBackground#3a3d4b
  • inlineEdit.gutterIndicator.secondaryBorder#3a3d4b
  • inlineEdit.gutterIndicator.secondaryForeground#ffd76d
  • inlineEdit.gutterIndicator.successfulBackground#3a3d4b
  • inlineEdit.gutterIndicator.successfulBorder#3a3d4b
  • inlineEdit.gutterIndicator.successfulForeground#bad761
  • inlineEdit.modifiedBackground#bad76119
  • inlineEdit.modifiedBorder#bad76119
  • inlineEdit.modifiedChangedLineBackground#bad76119
  • inlineEdit.modifiedChangedTextBackground#bad76119
  • inlineEdit.originalBackground#ff657a19
  • inlineEdit.originalBorder#ff657a19
  • inlineEdit.originalChangedLineBackground#ff657a19
  • inlineEdit.originalChangedTextBackground#ff657a19
  • inlineEdit.tabWillAcceptModifiedBorder#bad76119
  • inlineEdit.tabWillAcceptOriginalBorder#ff657a19
  • input.background#282a3a
  • input.border#535763
  • input.foreground#eaf2f1
  • input.placeholderForeground#696d77
  • inputOption.activeBackground#535763
  • inputOption.activeBorder#535763
  • inputOption.activeForeground#eaf2f1
  • inputOption.hoverBackground#535763
  • inputValidation.errorBackground#3a3d4b
  • inputValidation.errorBorder#ff657a
  • inputValidation.errorForeground#ff657a
  • inputValidation.infoBackground#3a3d4b
  • inputValidation.infoBorder#9cd1bb
  • inputValidation.infoForeground#9cd1bb
  • inputValidation.warningBackground#3a3d4b
  • inputValidation.warningBorder#ff9b5e
  • inputValidation.warningForeground#ff9b5e
  • interactive.activeCodeBorder#696d77
  • interactive.inactiveCodeBorder#3a3d4b
  • keybindingLabel.background#535763
  • keybindingLabel.border#535763
  • keybindingLabel.bottomBorder#535763
  • keybindingLabel.foreground#b2b9bd
  • list.activeSelectionBackground#eaf2f10c
  • list.activeSelectionForeground#ffd76d
  • list.dropBackground#161821bf
  • list.errorForeground#ff657a
  • list.focusBackground#282a3a
  • list.focusForeground#eaf2f1
  • list.highlightForeground#eaf2f1
  • list.hoverBackground#eaf2f10c
  • list.hoverForeground#eaf2f1
  • list.inactiveFocusBackground#282a3a
  • list.inactiveSelectionBackground#b2b9bd0c
  • list.inactiveSelectionForeground#ffd76d
  • list.invalidItemForeground#ff657a
  • list.warningForeground#ff9b5e
  • listFilterWidget.background#282a3a
  • listFilterWidget.noMatchesOutline#ff657a
  • listFilterWidget.outline#282a3a
  • listFilterWidget.shadow#161821
  • menu.background#282a3a
  • menu.border#1e1f2b
  • menu.foreground#eaf2f1
  • menu.selectionForeground#ffd76d
  • menu.separatorBackground#3a3d4b
  • menubar.selectionForeground#eaf2f1
  • merge.border#282a3a
  • merge.commonContentBackground#eaf2f119
  • merge.commonHeaderBackground#eaf2f126
  • merge.currentContentBackground#ff657a19
  • merge.currentHeaderBackground#ff657a26
  • merge.incomingContentBackground#bad76119
  • merge.incomingHeaderBackground#bad76126
  • mergeEditor.change.background#eaf2f119
  • mergeEditor.change.word.background#eaf2f119
  • mergeEditor.conflict.handled.minimapOverViewRuler#bad761
  • mergeEditor.conflict.handledFocused.border#bad761
  • mergeEditor.conflict.handledUnfocused.border#bad761
  • mergeEditor.conflict.unhandled.minimapOverViewRuler#ff657a
  • mergeEditor.conflict.unhandledFocused.border#ff657a
  • mergeEditor.conflict.unhandledUnfocused.border#ff657a
  • minimap.chatEditHighlight#c39ac9a5
  • minimap.errorHighlight#ff657aa5
  • minimap.findMatchHighlight#888d94a5
  • minimap.infoHighlight#9cd1bba5
  • minimap.selectionHighlight#b2b9bd26
  • minimap.selectionOccurrenceHighlight#696d77a5
  • minimap.warningHighlight#ff9b5ea5
  • minimapGutter.addedBackground#bad761
  • minimapGutter.deletedBackground#ff657a
  • minimapGutter.modifiedBackground#ffd76d
  • notebook.cellBorderColor#3a3d4b
  • notebook.cellEditorBackground#1e1f2b7f
  • notebook.cellInsertionIndicator#eaf2f1
  • notebook.cellStatusBarItemHoverBackground#696d77
  • notebook.cellToolbarSeparator#3a3d4b
  • notebook.editorBackground#282a3a
  • notebook.focusedEditorBorder#696d77
  • notebookStatusErrorIcon.foreground#ff657a
  • notebookStatusRunningIcon.foreground#eaf2f1
  • notebookStatusSuccessIcon.foreground#bad761
  • notificationCenter.border#1e1f2b
  • notificationCenterHeader.background#3a3d4b
  • notificationCenterHeader.foreground#888d94
  • notificationLink.foreground#ffd76d
  • notifications.background#3a3d4b
  • notifications.border#1e1f2b
  • notifications.foreground#b2b9bd
  • notificationsErrorIcon.foreground#ff657a
  • notificationsInfoIcon.foreground#9cd1bb
  • notificationsWarningIcon.foreground#ff9b5e
  • notificationToast.border#1e1f2b
  • panel.background#3a3d4b
  • panel.border#161821
  • panel.dropBackground#1e1f2bbf
  • panelStickyScroll.background#3a3d4b
  • panelStickyScroll.border#535763
  • panelStickyScroll.shadow#3a3d4b
  • panelTitle.activeBorder#ffd76d
  • panelTitle.activeForeground#ffd76d
  • panelTitle.inactiveForeground#888d94
  • panelTitleBadge.background#ffd76d
  • panelTitleBadge.foreground#282a3a
  • peekView.border#1e1f2b
  • peekViewEditor.background#3a3d4b
  • peekViewEditor.matchHighlightBackground#535763
  • peekViewEditorGutter.background#3a3d4b
  • peekViewResult.background#3a3d4b
  • peekViewResult.fileForeground#888d94
  • peekViewResult.lineForeground#888d94
  • peekViewResult.matchHighlightBackground#535763
  • peekViewResult.selectionBackground#3a3d4b
  • peekViewResult.selectionForeground#eaf2f1
  • peekViewTitle.background#1e1f2b
  • peekViewTitleDescription.foreground#888d94
  • peekViewTitleLabel.foreground#eaf2f1
  • pickerGroup.border#282a3a
  • pickerGroup.foreground#535763
  • ports.iconRunningProcessForeground#bad761
  • problemsErrorIcon.foreground#ff657a
  • problemsInfoIcon.foreground#9cd1bb
  • problemsWarningIcon.foreground#ff9b5e
  • profileBadge.background#3a3d4b
  • profileBadge.foreground#b2b9bd
  • progressBar.background#696d77
  • quickInput.background#3a3d4b
  • quickInput.foreground#888d94
  • radio.activeBackground#3a3d4b
  • radio.activeBorder#535763
  • radio.activeForeground#ffd76d
  • radio.inactiveBackground#282a3a
  • radio.inactiveBorder#535763
  • radio.inactiveForeground#888d94
  • radio.inactiveHoverBackground#3a3d4b
  • sash.hoverBorder#696d77
  • scmGraph.foreground1#ff657a
  • scmGraph.foreground2#ff9b5e
  • scmGraph.foreground3#ffd76d
  • scmGraph.foreground4#bad761
  • scmGraph.foreground5#c39ac9
  • scmGraph.historyItemBaseRefColor#9cd1bb
  • scmGraph.historyItemHoverAdditionsForeground#bad761
  • scmGraph.historyItemHoverDefaultLabelBackground#696d77
  • scmGraph.historyItemHoverDefaultLabelForeground#282a3a
  • scmGraph.historyItemHoverDeletionsForeground#ff657a
  • scmGraph.historyItemHoverLabelForeground#282a3a
  • scmGraph.historyItemRefColor#c39ac9
  • scmGraph.historyItemRemoteRefColor#bad761
  • scrollbar.shadow#282a3a
  • scrollbarSlider.activeBackground#eaf2f159
  • scrollbarSlider.background#b2b9bd26
  • scrollbarSlider.hoverBackground#eaf2f126
  • selection.background#b2b9bd26
  • settings.checkboxBackground#3a3d4b
  • settings.checkboxBorder#535763
  • settings.checkboxForeground#ffd76d
  • settings.dropdownBackground#3a3d4b
  • settings.dropdownBorder#535763
  • settings.dropdownForeground#eaf2f1
  • settings.dropdownListBorder#888d94
  • settings.focusedRowBackground#3a3d4b
  • settings.focusedRowBorder#535763
  • settings.headerForeground#ffd76d
  • settings.modifiedItemForeground#ffd76d
  • settings.modifiedItemIndicator#ffd76d
  • settings.numberInputBackground#3a3d4b
  • settings.numberInputBorder#535763
  • settings.numberInputForeground#eaf2f1
  • settings.rowHoverBackground#eaf2f10c
  • settings.sashBorder#3a3d4b
  • settings.settingsHeaderHoverForeground#eaf2f1
  • settings.textInputBackground#3a3d4b
  • settings.textInputBorder#535763
  • settings.textInputForeground#eaf2f1
  • sideBar.background#1e1f2b
  • sideBar.border#161821
  • sideBar.dropBackground#1e1f2bbf
  • sideBar.foreground#888d94
  • sideBarSectionHeader.background#1e1f2b
  • sideBarSectionHeader.foreground#696d77
  • sideBarStickyScroll.background#1e1f2b
  • sideBarStickyScroll.border#3a3d4b
  • sideBarStickyScroll.shadow#1e1f2b
  • sideBarTitle.foreground#535763
  • simpleFindWidget.sashBorder
  • statusBar.background#1e1f2b
  • statusBar.border#161821
  • statusBar.debuggingBackground#696d77
  • statusBar.debuggingBorder#1e1f2b
  • statusBar.debuggingForeground#eaf2f1
  • statusBar.focusBorder#3a3d4b
  • statusBar.foreground#696d77
  • statusBar.noFolderBackground#1e1f2b
  • statusBar.noFolderBorder#161821
  • statusBar.noFolderForeground#696d77
  • statusBarItem.activeBackground#282a3a
  • statusBarItem.errorBackground#282a3a
  • statusBarItem.errorForeground#ff657a
  • statusBarItem.focusBorder#696d77
  • statusBarItem.hoverBackground#1e1f2b
  • statusBarItem.hoverForeground#eaf2f1
  • statusBarItem.offlineBackground
  • statusBarItem.offlineForeground
  • statusBarItem.prominentBackground#3a3d4b
  • statusBarItem.prominentHoverBackground#3a3d4b
  • statusBarItem.remoteBackground#1e1f2b
  • statusBarItem.remoteForeground#bad761
  • statusBarItem.remoteHoverBackground#bad761
  • statusBarItem.remoteHoverForeground#282a3a
  • statusBarItem.warningBackground#282a3a
  • statusBarItem.warningForeground#ff9b5e
  • symbolIcon.arrayForeground#ff657a
  • symbolIcon.booleanForeground#ff657a
  • symbolIcon.classForeground#9cd1bb
  • symbolIcon.colorForeground#c39ac9
  • symbolIcon.constantForeground#c39ac9
  • symbolIcon.constructorForeground#bad761
  • symbolIcon.enumeratorForeground#ff9b5e
  • symbolIcon.enumeratorMemberForeground#ff9b5e
  • symbolIcon.eventForeground#ff9b5e
  • symbolIcon.fieldForeground#ff9b5e
  • symbolIcon.fileForeground#b2b9bd
  • symbolIcon.folderForeground#b2b9bd
  • symbolIcon.functionForeground#bad761
  • symbolIcon.interfaceForeground#9cd1bb
  • symbolIcon.keyForeground#ff9b5e
  • symbolIcon.keywordForeground#ff657a
  • symbolIcon.methodForeground#bad761
  • symbolIcon.moduleForeground#9cd1bb
  • symbolIcon.namespaceForeground#9cd1bb
  • symbolIcon.nullForeground#c39ac9
  • symbolIcon.numberForeground#c39ac9
  • symbolIcon.objectForeground#9cd1bb
  • symbolIcon.operatorForeground#ff657a
  • symbolIcon.packageForeground#c39ac9
  • symbolIcon.propertyForeground#ff9b5e
  • symbolIcon.referenceForeground#c39ac9
  • symbolIcon.snippetForeground#bad761
  • symbolIcon.stringForeground#ffd76d
  • symbolIcon.structForeground#ff657a
  • symbolIcon.textForeground#ffd76d
  • symbolIcon.typeParameterForeground#ff9b5e
  • symbolIcon.unitForeground#c39ac9
  • symbolIcon.variableForeground#9cd1bb
  • tab.activeBackground#282a3a
  • tab.activeBorder#ffd76d
  • tab.activeForeground#ffd76d
  • tab.activeModifiedBorder#535763
  • tab.border#282a3a
  • tab.hoverBackground#282a3a
  • tab.hoverBorder#535763
  • tab.hoverForeground#eaf2f1
  • tab.inactiveBackground#282a3a
  • tab.inactiveForeground#888d94
  • tab.inactiveModifiedBorder#535763
  • tab.lastPinnedBorder#535763
  • tab.unfocusedActiveBorder#888d94
  • tab.unfocusedActiveForeground#b2b9bd
  • tab.unfocusedActiveModifiedBorder#3a3d4b
  • tab.unfocusedHoverBackground#282a3a
  • tab.unfocusedHoverBorder#282a3a
  • tab.unfocusedHoverForeground#b2b9bd
  • tab.unfocusedInactiveForeground#888d94
  • tab.unfocusedInactiveModifiedBorder#3a3d4b
  • terminal.ansiBlack#3a3d4b
  • terminal.ansiBlue#ff9b5e
  • terminal.ansiBrightBlack#696d77
  • terminal.ansiBrightBlue#ff9b5e
  • terminal.ansiBrightCyan#9cd1bb
  • terminal.ansiBrightGreen#bad761
  • terminal.ansiBrightMagenta#c39ac9
  • terminal.ansiBrightRed#ff657a
  • terminal.ansiBrightWhite#eaf2f1
  • terminal.ansiBrightYellow#ffd76d
  • terminal.ansiCyan#9cd1bb
  • terminal.ansiGreen#bad761
  • terminal.ansiMagenta#c39ac9
  • terminal.ansiRed#ff657a
  • terminal.ansiWhite#eaf2f1
  • terminal.ansiYellow#ffd76d
  • terminal.background#3a3d4b
  • terminal.foreground#eaf2f1
  • terminal.selectionBackground#eaf2f126
  • terminalCommandDecoration.defaultBackground#eaf2f1
  • terminalCommandDecoration.errorBackground#ff657a
  • terminalCommandDecoration.successBackground#bad761
  • terminalCursor.background#00000000
  • terminalCursor.foreground#eaf2f1
  • testing.iconErrored#ff657a
  • testing.iconFailed#ff657a
  • testing.iconPassed#bad761
  • testing.iconQueued#eaf2f1
  • testing.iconSkipped#ff9b5e
  • testing.iconUnset#888d94
  • testing.message.error.decorationForeground#ff657a
  • testing.message.error.lineBackground#ff657a19
  • testing.message.info.decorationForeground#eaf2f1
  • testing.message.info.lineBackground#eaf2f119
  • testing.runAction#ffd76d
  • textBlockQuote.background#3a3d4b
  • textBlockQuote.border#3a3d4b
  • textCodeBlock.background#3a3d4b
  • textLink.activeForeground#eaf2f1
  • textLink.foreground#ffd76d
  • textPreformat.foreground#eaf2f1
  • textSeparator.foreground#696d77
  • titleBar.activeBackground#1e1f2b
  • titleBar.activeForeground#888d94
  • titleBar.border#161821
  • titleBar.inactiveBackground#1e1f2b
  • titleBar.inactiveForeground#535763
  • tree.inactiveIndentGuidesStroke#282a3a
  • tree.indentGuidesStroke#3a3d4b
  • walkThrough.embeddedEditorBackground#1e1f2b
  • welcomePage.buttonBackground#3a3d4b
  • welcomePage.buttonHoverBackground#535763
  • welcomePage.progress.background#696d77
  • welcomePage.progress.foreground#888d94
  • welcomePage.tileBackground#3a3d4b
  • welcomePage.tileHoverBackground#535763
  • welcomePage.tileShadow#161821
  • widget.shadow#161821

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment keyword, comment markup.underline.link, comment string, comment punctuation.definition, comment punctuation, comment text#696d77italic
comment storage.type#696d77
comment entity.name.type#b2b9bd
comment variable, comment variable.other#b2b9bd
comment keyword, comment entity.name.tag, entity.name.tag.documentation#b2b9bd
comment keyword.codetag.notation#c39ac9
comment.git-status.header.remote#ff657a
comment.git-status.header.local#9cd1bb
comment.other.git-status.head#eaf2f1
string.quoted.docstring, string.quoted.docstring punctuation.definition#696d77
constant#c39ac9
constant.other#eaf2f1
constant.other.java#c39ac9
constant.other.caps#c39ac9
constant.other.placeholder#ff9b5e
constant.other.property#c39ac9
constant.other.citation.latex#c39ac9
constant.other.color#c39ac9
constant.other.character-class.escape#c39ac9
constant.other.key#c39ac9
constant.other.symbol#ff9b5e
constant.other.elm#9cd1bb
constant.numeric#c39ac9
constant.language#c39ac9
constant.character.escape#c39ac9
constant.numeric.line-number.find-in-files#535763
constant.numeric.line-number.match.find-in-files#ffd76d
entity.name.section#ffd76d
entity.name.function, entity.name.function.templated, entity.name.function.member.static#bad761
entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace#9cd1bb
entity.name.label#c39ac9
entity.name.function.preprocessor#9cd1bb
entity.name#bad761
entity.name.class#9cd1bb
entity.name.constant#c39ac9
entity.name.namespace#9cd1bb
entity.other.inherited-class#9cd1bbitalic
entity.name.function#bad761
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component#ff657a
source.ansible entity.name.tag#9cd1bb
entity.name.function.operator#ff657a
meta.brackets entity.name.function.operator, punctuation.separator entity.name.function.operator#888d94
entity.name.type, entity.name.type.class.reference, entity.name.type.class.value#9cd1bb
entity.other.attribute-name#9cd1bbitalic
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.css, entity.other.attribute-name.parent-selector-suffix.css punctuation.definition.entity.css, entity.other.attribute-name.css, entity.other.animation-name.css#bad761
entity.other.attribute-name.id.css#ff9b5e
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css#9cd1bbitalic
entity.name.function, support.function#bad761
entity.other.git-status.hex#c39ac9
entity.other.jinja2.delimiter#888d94
entity.name.operator.custom-literal#eaf2f1
entity.name.operator.custom-literal.string#ffd76d
entity.name.operator.custom-literal.number#c39ac9
entity.name.type.rust#9cd1bb
entity.name.lifetime.rust#ff657a
invalid#ff657aitalic underline
invalid.deprecated#ff9b5eitalic underline
keyword#ff657a
keyword.control#ff657a
keyword.control.directive#ff657a
keyword.operator, keyword.operator.member, keyword.operator.new#ff657a
keyword.other.substitution#888d94
keyword.other.template.begin, keyword.other.template.end#ff657a
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext#888d94
keyword.other.parenthesis.elm#888d94
keyword.other.fn.rust, keyword.other.rust, keyword.other.unsafe.rust, keyword.other.where.rust#9cd1bb
keyword.control.rust, keyword.operator.misc.rust#ff657a
keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby#ff657a
markup.italicitalic
markup.boldbold
markup.heading#ffd76d
markup.raw#ff9b5e
markup.underlineunderline
markup.underline.link#bad761
markup.inserted, markup.inserted punctuation.definition.inserted#bad761
markup.deleted, markup.deleted punctuation.definition.deleted#ff657a
markup.changed, markup.changed punctuation.definition.changed#ffd76d
markup.ignored, markup.ignored punctuation.definition.ignored#888d94
markup.untracked#888d94
markup.quoteitalic
meta.brace.round, meta.brace.square, meta.brace.curly, meta.delimiter.comma.js, meta.function-call.without-arguments.js, meta.function-call.method.without-arguments.js#888d94
meta.function-call.generic.python, support.function.builtin.python#bad761
meta.function-call.python meta.function-call.arguments.python#eaf2f1
meta.interpolation#ff9b5e
meta.instance.constructor#bad761
meta.attribute-with-value.class string, meta.attribute.class.html string#bad761
meta.attribute-with-value.id string, meta.attribute.id.html string#ff9b5e
source.json meta.mapping.key string#eaf2f1
source.yaml meta.mapping.key string#ff657a
meta.object.member#eaf2f1
meta.property-list.css variable.other#ff9b5e
entity.name.constant.preprocessor, meta.preprocessor#c39ac9
meta.diff.git-diff.header#ffd76d
meta.type_params.rust#eaf2f1
meta.attribute.rust, meta.annotation.rust, variable.language.rust, variable.annotation.rust, meta.annotation.rust string, meta.annotation.rust keyword, meta.annotation.rust keyword.operator, meta.attribute.rust string#b2b9bd
meta.type variable, meta.type variable.other.readwrite, variable.annotation, meta.decorator variable.other.readwrite#c39ac9
punctuation#888d94
punctuation.definition.tag, punctuation.definition.tag source, punctuation.definition.group.begin.ruby, punctuation.definition.group.end.ruby, punctuation.definition.group.begin.css, punctuation.definition.group.end.css, punctuation.definition.string.end.html source.css, punctuation.definition.block, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.separator.parameter, punctuation.accessor, punctuation.terminator#888d94
punctuation.definition.group#eaf2f1
punctuation.definition.comment#696d77
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css#b2b9bd
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source, punctuation.section.embedded.begin#ff9b5e
punctuation.template-string.element.begin, punctuation.template-string.element.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string.quoted.template punctuation.definition.string.begin, string.quoted.template punctuation.definition.string.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#ff657a
meta.paragraph.markdown meta.dummy.line-break, meta.paragraph.markdown meta.hard-line-break.markdown
markup.underline.link punctuation#bad761
meta.brace.round, meta.brace.square, keyword.operator.type.annotation, meta.type storage.modifier.array#888d94
region.redish#ff657a
region.orangish#ff9b5e
region.yellowish#ffd76d
region.greenish#bad761
region.bluish#9cd1bb
region.purplish#c39ac9
region.pinkish#ff657a
region.whitish#FFFFFF
source#eaf2f1
source.scss, source.sass#888d94
source.sass variable.other, source.sass variable.sass, source.scss variable.other, source.scss variable.scss, source.scss variable.sass, source.css variable.other, source.css variable.scss, source.less variable.other, source.less variable.other.less, source.less variable.declaration.less#ff9b5eitalic
source.git-show.commit.sha#c39ac9
source.git-show.author, source.git-show.date, source.git-diff.command, source.git-diff.command meta.diff.git-diff.header.from-file, source.git-diff.command meta.diff.git-diff.header.to-file#888d94
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha#c39ac9
source.git-show meta.diff.range.unified#ff9b5e
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file#888d94
storage#ff657a
storage.type#9cd1bbitalic
storage.type.extends#ff657anormal
storage.type.function.arrow#ff657anormal
storage.modifier, storage.type.modifier#ff657aitalic
storage.class.restructuredtext.ref#c39ac9
storage.modifier.visibility.rust, storage.modifier.lifetime.rust#ff657a
storage.modifier.const.rust, storage.modifier.dyn.rust, storage.modifier.mut.rust, storage.modifier.static.rust, storage.type.rust, storage.type.core.rust, storage.class.std.rust#9cd1bb
storage.type.rust, storage.modifier.const.rust, storage.modifier.dyn.rust, storage.modifier.mut.rust, storage.modifier.static.rust, keyword.other.rust, keyword.other.where.rust#ff657a
storage.modifier.import.java#eaf2f1
string#ffd76d
string.unquoted.label#eaf2f1
string source#eaf2f1
string source punctuation.section.embedded, string punctuation.definition.string source#888d94
string.other.link.title, string.other.link.description#ff657a
string.other.link.description.title#9cd1bb
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff657a
string.other.ref, string.other.restructuredtext.ref#bad761
string.other.git-status.help.key#b2b9bd
string.other.git-status.remote#ff657a
support.constant#9cd1bb
support.constant.handlebars#888d94
support.type.vendor-prefix.css#b2b9bd
support.function#bad761
support.macro#bad761
support.function.delimiter.elm#888d94
support.type, entity.name.type.object.console#9cd1bbitalic
support.variable, support.variable.property#9cd1bb
support.type.property-name#eaf2f1normal
support.class#9cd1bb
support.constant.core.rust#c39ac9
comment support, comment support.class#696d77
text#eaf2f1
text.find-in-files#eaf2f1
variable, variable.other#eaf2f1
variable.parameter, parameters variable.function#ff9b5eitalic
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#b2b9bditalic
variable.language.arguments#c39ac9
variable.other.class#9cd1bb
variable.other.constant#c39ac9
variable.other.readwrite#eaf2f1
variable.other.member#eaf2f1
variable.other.enummember#c39ac9
variable.other.property, variable.other.property.static, variable.other.event#eaf2f1
variable.function#bad761
variable.other.substitution#ff9b5e
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby#c39ac9
source.jinja2 variable.other.jinja2.block#bad761
source.jinja2 variable.other.jinja2#ff9b5e

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...