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

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

Shiki preview

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

Loading...