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

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

Shiki preview

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

Loading...