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

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#6e7066italic
comment storage.type#6e7066
comment entity.name.type#c0c1b5
comment variable, comment variable.other#c0c1b5
comment keyword, comment entity.name.tag, entity.name.tag.documentation#c0c1b5
comment keyword.codetag.notation#ae81ff
comment.git-status.header.remote#f92672
comment.git-status.header.local#66d9ef
comment.other.git-status.head#fdfff1
string.quoted.docstring, string.quoted.docstring punctuation.definition#6e7066
constant#ae81ff
constant.other#fdfff1
constant.other.java#ae81ff
constant.other.caps#ae81ff
constant.other.placeholder#fd971f
constant.other.property#ae81ff
constant.other.citation.latex#ae81ff
constant.other.color#ae81ff
constant.other.character-class.escape#ae81ff
constant.other.key#ae81ff
constant.other.symbol#fd971f
constant.other.elm#66d9ef
constant.numeric#ae81ff
constant.language#ae81ff
constant.character.escape#ae81ff
constant.numeric.line-number.find-in-files#57584f
constant.numeric.line-number.match.find-in-files#e6db74
entity.name.section#e6db74
entity.name.function, entity.name.function.templated, entity.name.function.member.static#a6e22e
entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace#66d9ef
entity.name.label#ae81ff
entity.name.function.preprocessor#66d9ef
entity.name#a6e22e
entity.name.class#66d9ef
entity.name.constant#ae81ff
entity.name.namespace#66d9ef
entity.other.inherited-class#66d9efitalic
entity.name.function#a6e22e
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component#f92672
source.ansible entity.name.tag#66d9ef
entity.name.function.operator#f92672
meta.brackets entity.name.function.operator, punctuation.separator entity.name.function.operator#919288
entity.name.type, entity.name.type.class.reference, entity.name.type.class.value#66d9ef
entity.other.attribute-name#66d9efitalic
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#a6e22e
entity.other.attribute-name.id.css#fd971f
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css#66d9efitalic
entity.name.function, support.function#a6e22e
entity.other.git-status.hex#ae81ff
entity.other.jinja2.delimiter#919288
entity.name.operator.custom-literal#fdfff1
entity.name.operator.custom-literal.string#e6db74
entity.name.operator.custom-literal.number#ae81ff
entity.name.type.rust#66d9ef
entity.name.lifetime.rust#f92672
invalid#f92672italic underline
invalid.deprecated#fd971fitalic underline
keyword#f92672
keyword.control#f92672
keyword.control.directive#f92672
keyword.operator, keyword.operator.member, keyword.operator.new#f92672
keyword.other.substitution#919288
keyword.other.template.begin, keyword.other.template.end#f92672
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext#919288
keyword.other.parenthesis.elm#919288
keyword.other.fn.rust, keyword.other.rust, keyword.other.unsafe.rust, keyword.other.where.rust#66d9ef
keyword.control.rust, keyword.operator.misc.rust#f92672
keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby#f92672
markup.italicitalic
markup.boldbold
markup.heading#e6db74
markup.raw#fd971f
markup.underlineunderline
markup.underline.link#a6e22e
markup.inserted, markup.inserted punctuation.definition.inserted#a6e22e
markup.deleted, markup.deleted punctuation.definition.deleted#f92672
markup.changed, markup.changed punctuation.definition.changed#e6db74
markup.ignored, markup.ignored punctuation.definition.ignored#919288
markup.untracked#919288
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#919288
meta.function-call.generic.python, support.function.builtin.python#a6e22e
meta.function-call.python meta.function-call.arguments.python#fdfff1
meta.interpolation#fd971f
meta.instance.constructor#a6e22e
meta.attribute-with-value.class string, meta.attribute.class.html string#a6e22e
meta.attribute-with-value.id string, meta.attribute.id.html string#fd971f
source.json meta.mapping.key string#fdfff1
source.yaml meta.mapping.key string#f92672
meta.object.member#fdfff1
meta.property-list.css variable.other#fd971f
entity.name.constant.preprocessor, meta.preprocessor#ae81ff
meta.diff.git-diff.header#e6db74
meta.type_params.rust#fdfff1
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#c0c1b5
meta.type variable, meta.type variable.other.readwrite, variable.annotation, meta.decorator variable.other.readwrite#ae81ff
punctuation#919288
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#919288
punctuation.definition.group#fdfff1
punctuation.definition.comment#6e7066
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css#c0c1b5
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source, punctuation.section.embedded.begin#fd971f
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#f92672
meta.paragraph.markdown meta.dummy.line-break, meta.paragraph.markdown meta.hard-line-break.markdown
markup.underline.link punctuation#a6e22e
meta.brace.round, meta.brace.square, keyword.operator.type.annotation, meta.type storage.modifier.array#919288
region.redish#f92672
region.orangish#fd971f
region.yellowish#e6db74
region.greenish#a6e22e
region.bluish#66d9ef
region.purplish#ae81ff
region.pinkish#f92672
region.whitish#FFFFFF
source#fdfff1
source.scss, source.sass#919288
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#fd971fitalic
source.git-show.commit.sha#ae81ff
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#919288
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha#ae81ff
source.git-show meta.diff.range.unified#fd971f
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file#919288
storage#f92672
storage.type#66d9efitalic
storage.type.extends#f92672normal
storage.type.function.arrow#f92672normal
storage.modifier, storage.type.modifier#f92672italic
storage.class.restructuredtext.ref#ae81ff
storage.modifier.visibility.rust, storage.modifier.lifetime.rust#f92672
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#66d9ef
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#f92672
storage.modifier.import.java#fdfff1
string#e6db74
string.unquoted.label#fdfff1
string source#fdfff1
string source punctuation.section.embedded, string punctuation.definition.string source#919288
string.other.link.title, string.other.link.description#f92672
string.other.link.description.title#66d9ef
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#f92672
string.other.ref, string.other.restructuredtext.ref#a6e22e
string.other.git-status.help.key#c0c1b5
string.other.git-status.remote#f92672
support.constant#66d9ef
support.constant.handlebars#919288
support.type.vendor-prefix.css#c0c1b5
support.function#a6e22e
support.macro#a6e22e
support.function.delimiter.elm#919288
support.type, entity.name.type.object.console#66d9efitalic
support.variable, support.variable.property#66d9ef
support.type.property-name#fdfff1normal
support.class#66d9ef
support.constant.core.rust#ae81ff
comment support, comment support.class#6e7066
text#fdfff1
text.find-in-files#fdfff1
variable, variable.other#fdfff1
variable.parameter, parameters variable.function#fd971fitalic
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#c0c1b5italic
variable.language.arguments#ae81ff
variable.other.class#66d9ef
variable.other.constant#ae81ff
variable.other.readwrite#fdfff1
variable.other.member#fdfff1
variable.other.enummember#ae81ff
variable.other.property, variable.other.property.static, variable.other.event#fdfff1
variable.function#a6e22e
variable.other.substitution#fd971f
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby#ae81ff
source.jinja2 variable.other.jinja2.block#a6e22e
source.jinja2 variable.other.jinja2#fd971f

Shiki preview

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

Loading...