Photonica
Publisher: Luke NiuThemes in package: 4
Photonica themes for VS code. Its soft colors will be helpful for you to get inspired.
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.activeBackground#EBEBEB7d
- activityBar.activeBorder#A091FF
- activityBar.activeFocusBorder#008CFF
- activityBar.background#DCDCDC
- activityBar.border#DCDCDC
- activityBar.dropBorder#008CFF
- activityBar.foreground#7864E1
- activityBar.inactiveForeground#787878
- activityBarBadge.background#A091FF
- activityBarBadge.foreground#FFFFFF
- badge.background#A091FF
- badge.foreground#FFFFFF
- banner.background#E6E6E6
- banner.foreground#141414
- banner.iconForeground#A091FF
- breadcrumb.activeSelectionForeground#008CFF
- breadcrumb.background#FFFFFFf0
- breadcrumb.focusForeground#7864E1
- breadcrumb.foreground#141414
- breadcrumbPicker.background#FFFFFFf0
- button.background#7864E1
- button.border#FFFFFF64
- button.foreground#FAFAFA
- button.hoverBackground#0078E1
- button.secondaryBackground#8C78FFe1
- button.secondaryForeground#F0F0F0
- button.secondaryHoverBackground#0078E1e1
- checkbox.background#8C78FFe1
- checkbox.border#FFFFFF64
- checkbox.foreground#F0F0F0
- debugExceptionWidget.background#FAFAFAe1
- debugExceptionWidget.border#AF78E1
- debugToolBar.background#F5F5F5f0
- debugView.exceptionLabelBackground#A51919
- debugView.exceptionLabelForeground#FAFAFA
- descriptionForeground#141414
- diffEditor.insertedLineBackground#64B48C28
- diffEditor.insertedTextBackground#64B48C14
- diffEditor.removedLineBackground#E1646428
- diffEditor.removedTextBackground#E1646414
- diffEditorGutter.insertedLineBackground#64B48C14
- diffEditorGutter.removedLineBackground#E1646414
- diffEditorOverview.insertedForeground#64B48Ce1
- diffEditorOverview.removedForeground#E16464e1
- dropdown.background#FFFFFFe1
- dropdown.border#D2D2D2
- dropdown.foreground#0F0F0F
- dropdown.listBackground#FFFFFFe1
- editor.background#FFFFFF
- editor.findMatchBackground#FFE150c8
- editor.findMatchBorder#FFE150c8
- editor.findMatchHighlightBackground#FFE15064
- editor.findMatchHighlightBorder#FFE15064
- editor.findRangeHighlightBackground#D7D7D77d
- editor.foldBackground#9BCDFF28
- editor.foreground#141414
- editor.hoverHighlightBackground#008CFF3c
- editor.inactiveSelectionBackground#B9D7F55A
- editor.lineHighlightBackground#E1E1E132
- editor.lineHighlightBorder#E1E1E164
- editor.linkedEditingBackground#EBEBEB
- editor.rangeHighlightBackground#FFE1503c
- editor.rangeHighlightBorder#FFE15064
- editor.selectionBackground#B9D7F564
- editor.selectionForeground#645AC8
- editor.selectionHighlightBackground#9BEBAF50
- editor.selectionHighlightBorder#9BEBAF00
- editor.snippetFinalTabstopHighlightBackground#C8B9FF28
- editor.snippetFinalTabstopHighlightBorder#C8B9FF64
- editor.snippetTabstopHighlightBackground#64C8FF28
- editor.snippetTabstopHighlightBorder#64C8FF64
- editor.stackFrameHighlightBackground#B4AAFF32
- editor.symbolHighlightBackground#FFE15064
- editor.symbolHighlightBorder#FFE150cd
- editor.wordHighlightBackground#91A5B91e
- editor.wordHighlightBorder#7332C850
- editor.wordHighlightStrongBackground#91A5B928
- editor.wordHighlightStrongBorder#91A5B93c
- editorBracketHighlight.foreground1#2850A0
- editorBracketHighlight.foreground2#7332C8
- editorBracketHighlight.foreground3#0064D2
- editorBracketHighlight.foreground4#288C3C
- editorBracketHighlight.foreground5#E1B400
- editorBracketHighlight.foreground6#EB6400
- editorBracketHighlight.unexpectedBracket.foreground#EB2828
- editorBracketMatch.background#B9D7F564
- editorBracketMatch.border#0064D250
- editorBracketPairGuide.activeBackground1#2850A0c8
- editorBracketPairGuide.activeBackground2#7332C8c8
- editorBracketPairGuide.activeBackground3#0064D2c8
- editorBracketPairGuide.activeBackground4#288C3Cc8
- editorBracketPairGuide.activeBackground5#E1B400c8
- editorBracketPairGuide.activeBackground6#EB6400c8
- editorBracketPairGuide.background1#2850A050
- editorBracketPairGuide.background2#7332C850
- editorBracketPairGuide.background3#0064D250
- editorBracketPairGuide.background4#288C3C50
- editorBracketPairGuide.background5#E1B40050
- editorBracketPairGuide.background6#EB640050
- editorCodeLens.foreground#7D9BDC
- editorCursor.foreground#645AC8
- editorError.background#F03C3C00
- editorError.border#F03C3C00
- editorError.foreground#F03C3C
- editorGhostText.background#FFFFFFe1
- editorGhostText.border#FFFFFF00
- editorGhostText.foreground#505050
- editorGroup.border#A091FF3c
- editorGroup.dropBackground#00A0FF3c
- editorGroup.emptyBackground#FAFAFA
- editorGroup.focusedEmptyBorder#E1E1E1
- editorGroupHeader.border#FFFFFF00
- editorGroupHeader.noTabsBackground#FAFAFA
- editorGroupHeader.tabsBackground#EBEBEB
- editorGroupHeader.tabsBorder#FFFFFF00
- editorGutter.addedBackground#64B48C
- editorGutter.background#FFFFFF
- editorGutter.commentRangeForeground#8C8C8C
- editorGutter.deletedBackground#E16464
- editorGutter.foldingControlForeground#8C78FF
- editorGutter.modifiedBackground#3C96FF
- editorHint.border#788CA064
- editorHint.foreground#788CA0
- editorHoverWidget.background#FAFAFAe1
- editorHoverWidget.border#C8C8C850
- editorHoverWidget.foreground#646464
- editorHoverWidget.highlightForeground#00A0FF
- editorHoverWidget.statusBarBackground#F0F0F0e1
- editorIndentGuide.activeBackground#A0A0A0
- editorIndentGuide.background#E1E1E1
- editorInfo.background#A078E100
- editorInfo.border#A078E100
- editorInfo.foreground#A078E1
- editorInlayHint.background#F0F0F0
- editorInlayHint.foreground#F05000b4
- editorInlayHint.parameterBackground#F0F0F0
- editorInlayHint.parameterForeground#50A0A0b4
- editorInlayHint.typeBackground#F0F0F0
- editorInlayHint.typeForeground#963296b4
- editorLightBulb.foreground#FFEB00
- editorLightBulbAutoFix.foreground#FFC800
- editorLineNumber.activeForeground#645AC8
- editorLineNumber.foreground#B4B4B4
- editorLink.activeForeground#8C78FF
- editorMarkerNavigation.background#FAFAFAe1
- editorMarkerNavigationError.background#F03C3C
- editorMarkerNavigationError.headerBackground#F5F5F5e1
- editorMarkerNavigationInfo.background#A078E1
- editorMarkerNavigationInfo.headerBackground#F5F5F5e1
- editorMarkerNavigationWarning.background#3CA087
- editorMarkerNavigationWarning.headerBackground#F5F5F5e1
- editorOverviewRuler.addedForeground#64B48Ce1
- editorOverviewRuler.background#FFFFFF
- editorOverviewRuler.border#FFFFFF
- editorOverviewRuler.bracketMatchForeground#64D7FFe1
- editorOverviewRuler.commonContentForeground#646464
- editorOverviewRuler.currentContentForeground#646464
- editorOverviewRuler.deletedForeground#E16464e1
- editorOverviewRuler.errorForeground#F03C3Ce1
- editorOverviewRuler.findMatchForeground#FFE150c8
- editorOverviewRuler.incomingContentForeground#646464
- editorOverviewRuler.infoForeground#A078E1e1
- editorOverviewRuler.modifiedForeground#3C96FFe1
- editorOverviewRuler.rangeHighlightForeground#28B4B450
- editorOverviewRuler.selectionHighlightForeground#B9D7F5c8
- editorOverviewRuler.warningForeground#3CA087e1
- editorOverviewRuler.wordHighlightForeground#00A0FFaf
- editorOverviewRuler.wordHighlightStrongForeground#0096FFe1
- editorPane.background#FFFFFF
- editorSuggestWidget.background#FAFAFAe1
- editorSuggestWidget.border#C8C8C850
- editorSuggestWidget.focusHighlightForeground#645AC8
- editorSuggestWidget.foreground#646464
- editorSuggestWidget.highlightForeground#00A0FF
- editorSuggestWidget.selectedBackground#E1E1E164
- editorSuggestWidget.selectedForeground#646464
- editorSuggestWidget.selectedIconForeground#5046A0
- editorSuggestWidgetStatus.foreground#A091FF
- editorUnicodeHighlight.border#E1E1E196
- editorUnnecessaryCode.border#A0A0A0
- editorUnnecessaryCode.opacity#FFFFFFa0
- editorWarning.background#3CA08700
- editorWarning.border#3CA08700
- editorWarning.foreground#3CA087
- editorWhitespace.foreground#A0A0A0
- editorWidget.background#FFFFFFe1
- editorWidget.border#C8C8C850
- editorWidget.foreground#141414
- editorWidget.resizeBorder#A091FF
- errorForeground#F03C3C
- extensionBadge.remoteBackground#D796FF
- extensionBadge.remoteForeground#FAFAFA
- extensionButton.prominentBackground#A091FF
- extensionButton.prominentForeground#FFFFFF
- extensionButton.prominentHoverBackground#00A0FF
- extensionIcon.preReleaseForeground#4EC3A0
- extensionIcon.starForeground#FF9100
- extensionIcon.verifiedForeground#008CFF
- focusBorder#A091FF
- foreground#000000
- gitDecoration.addedResourceForeground#FFC828
- gitDecoration.conflictingResourceForeground#DC3232
- gitDecoration.deletedResourceForeground#E16464
- gitDecoration.ignoredResourceForeground#8C8C8C
- gitDecoration.modifiedResourceForeground#005FC8
- gitDecoration.renamedResourceForeground#4EC8A0
- gitDecoration.stageDeletedResourceForeground#E16464
- gitDecoration.stageModifiedResourceForeground#005FC8
- gitDecoration.submoduleResourceForeground#BE6EBE
- gitDecoration.untrackedResourceForeground#28A050
- icon.foreground#5046A0
- imagePreview.border#EBEBEB
- input.background#FFFFFFe1
- input.border#D2D2D2
- input.foreground#141414
- input.placeholderForeground#969696
- inputOption.activeBackground#A091FF
- inputOption.activeForeground#FFFFFF
- inputValidation.errorBackground#FFFFFFe1
- inputValidation.errorBorder#D2D2D2
- inputValidation.errorForeground#F03C3C
- inputValidation.infoBackground#FFFFFFe1
- inputValidation.infoBorder#D2D2D2
- inputValidation.infoForeground#A078E1
- inputValidation.warningBackground#FFFFFFe1
- inputValidation.warningBorder#D2D2D2
- inputValidation.warningForeground#3CA087
- keybindingLabel.background#F0F0F0f0
- keybindingLabel.border#DCDCDCf0
- keybindingLabel.bottomBorder#C8C8C8f0
- keybindingLabel.foreground#787878
- keybindingTable.headerBackground#F0F0F0c8
- keybindingTable.rowsBackground#F5F5F5
- list.activeSelectionBackground#A091FFd7
- list.activeSelectionForeground#FFFFFF
- list.activeSelectionIconForeground#5046A0
- list.deemphasizedForeground#D2D2D2
- list.dropBackground#00A0FF32
- list.errorForeground#F03C3C
- list.filterMatchBackground#00A0FF50
- list.focusAndSelectionOutline#DCC8FF
- list.focusBackground#A091FF32
- list.focusForeground#141414
- list.focusHighlightForeground#0064C8
- list.focusOutline#A091FF
- list.highlightForeground#A091FF
- list.hoverBackground#E6E6E6
- list.hoverForeground#7864E1
- list.inactiveFocusBackground#00A0FF4b
- list.inactiveFocusOutline#A091FF
- list.inactiveSelectionBackground#A091FF8c
- list.inactiveSelectionForeground#FFFFFF
- list.inactiveSelectionIconForeground#5046A0e1
- list.invalidItemForeground#323232
- list.warningForeground#3CA087
- listFilterWidget.background#00A0FF28
- listFilterWidget.noMatchesOutline#FF5050e1
- listFilterWidget.outline#00A0FFe1
- listFilterWidget.shadow#00A0FFc8
- menu.background#FAFAFAe1
- menu.border#FAFAFA64
- menu.foreground#282828
- menu.selectionBackground#A091FFe1
- menu.selectionForeground#FAFAFA
- menu.separatorBackground#28282864
- menubar.selectionBackground#A0A0A07d
- menubar.selectionForeground#645AC8
- merge.border#FF9100
- merge.commonContentBackground#FAFAFAe1
- merge.commonHeaderBackground#FAFAFAe1
- merge.currentContentBackground#288CF01e
- merge.currentHeaderBackground#288CF050
- merge.incomingContentBackground#4EBEAF1e
- merge.incomingHeaderBackground#4EBEAF50
- minimap.background#FFFFFFa0
- minimap.errorHighlight#F03C3C78
- minimap.findMatchHighlight#FFE15078
- minimap.foregroundOpacity#000000FF
- minimap.selectionHighlight#B9D7F578
- minimap.selectionOccurrenceHighlight#9BEBAF96
- minimap.warningHighlight#3CA08778
- minimapGutter.addedBackground#64B48Ce1
- minimapGutter.deletedBackground#E16464e1
- minimapGutter.modifiedBackground#3C96FFe1
- minimapSlider.activeBackground#00A0FF64
- minimapSlider.background#FAFAFA1e
- minimapSlider.hoverBackground#8C78FF64
- notificationCenterHeader.background#F5F5F5e1
- notificationCenterHeader.foreground#141414
- notificationLink.foreground#8C78FF
- notifications.background#FFFFFFe1
- notifications.border#28282864
- notifications.foreground#141414
- notificationsErrorIcon.foreground#F03C3C
- notificationsInfoIcon.foreground#A078E1
- notificationsWarningIcon.foreground#3CA087
- notificationToast.border#B4AAFF
- panel.background#EBEBEB
- panel.border#F0F0F000
- panel.dropBorder#A091FF
- panelInput.border#D2D2D2
- panelSection.border#F0F0F0
- panelSection.dropBackground#008CFF28
- panelSectionHeader.background#FFFFFF64
- panelSectionHeader.border#D2D2D2
- panelSectionHeader.foreground#141414
- panelTitle.activeBorder#FFFFFF00
- panelTitle.activeForeground#645AC8
- panelTitle.inactiveForeground#646464
- peekView.border#00A0FF
- peekViewEditor.background#FFFFFFe1
- peekViewEditor.matchHighlightBackground#A091FF41
- peekViewEditor.matchHighlightBorder#A091FF50
- peekViewEditorGutter.background#FFFFFFe1
- peekViewResult.background#FAFAFAe1
- peekViewResult.fileForeground#00A0FF
- peekViewResult.lineForeground#646464
- peekViewResult.matchHighlightBackground#A091FF50
- peekViewResult.selectionBackground#A091FF14
- peekViewResult.selectionForeground#645AC8
- peekViewTitle.background#FAFAFAe1
- peekViewTitleDescription.foreground#646464
- peekViewTitleLabel.foreground#008CFF
- pickerGroup.border#28282864
- pickerGroup.foreground#8C78FF
- problemsErrorIcon.foreground#F03C3C
- problemsInfoIcon.foreground#A078E1
- problemsWarningIcon.foreground#3CA087
- quickInput.background#FFFFFFf0
- quickInput.foreground#505050
- quickInputList.focusBackground#00A0FF3c
- quickInputList.focusForeground#141414
- quickInputList.focusIconForeground#5046A0
- quickInputTitle.background#F5F5f5f0
- sash.hoverBorder#A091FF
- scrollbar.shadow#B4B4B4
- scrollbarSlider.activeBackground#7864E17d
- scrollbarSlider.background#C8C8C8c8
- scrollbarSlider.hoverBackground#0078E17d
- settings.checkboxBackground#FAFAFA
- settings.checkboxBorder#C8C8C8
- settings.checkboxForeground#7864E1
- settings.dropdownBackground#FFFFFFf0
- settings.dropdownBorder#C8C8C8
- settings.dropdownForeground#141414
- settings.dropdownListBorder#D2D2D2
- settings.focusedRowBackground#B4AAFF1e
- settings.focusedRowBorder#B4AAFF3c
- settings.headerBorder#F0F0F0
- settings.headerForeground#323232
- settings.modifiedItemIndicator#A091FF
- settings.numberInputBackground#FFFFFF
- settings.numberInputBorder#C8C8C8
- settings.numberInputForeground#0078E1
- settings.rowHoverBackground#C8C8C81e
- settings.sashBorder#F0F0F0
- settings.textInputBackground#FFFFFFf0
- settings.textInputBorder#C8C8C8
- settings.textInputForeground#141414
- sideBar.background#EBEBEB
- sideBar.border#EBEBEB
- sideBar.dropBackground#008CFF28
- sideBar.foreground#141414
- sideBarSectionHeader.background#DCDCDC
- sideBarSectionHeader.border#FFFFFF64
- sideBarSectionHeader.foreground#141414
- sideBarTitle.foreground#000000
- sideBySideEditor.horizontalBorder#FFFFFF00
- sideBySideEditor.verticalBorder#FFFFFF00
- statusBar.background#DCDCDC
- statusBar.border#DCDCDC
- statusBar.debuggingBackground#008CFFe1
- statusBar.debuggingBorder#008CFFe1
- statusBar.debuggingForeground#F0F0F0
- statusBar.focusBorder#A091FF7d
- statusBar.foreground#141414
- statusBar.noFolderBackground#DCDCDC
- statusBar.noFolderBorder#DCDCDC
- statusBar.noFolderForeground#646464
- statusBarItem.activeBackground#FFFFFF64
- statusBarItem.compactHoverBackground#00A0FF50
- statusBarItem.errorBackground#DCDCDC
- statusBarItem.errorForeground#F03C3C
- statusBarItem.focusBorder#A091FF7d
- statusBarItem.hoverBackground#00B4FF7d
- statusBarItem.prominentBackground#A091FF7d
- statusBarItem.prominentForeground#FAFAFA
- statusBarItem.prominentHoverBackground#00A0FF7d
- statusBarItem.remoteBackground#A091FF
- statusBarItem.remoteForeground#F0F0F0
- statusBarItem.warningBackground#DCDCDC
- statusBarItem.warningForeground#3CA087
- tab.activeBackground#FFFFFF
- tab.activeBorder#FFFFFF00
- tab.activeBorderTop#00A0FF00
- tab.activeForeground#000000
- tab.activeModifiedBorder#FFFFFF00
- tab.border#FFFFFF00
- tab.hoverBackground#A091FF1e
- tab.hoverBorder#A091FFe1
- tab.hoverForeground#141414
- tab.inactiveBackground#F5F5F5
- tab.inactiveForeground#646464
- tab.inactiveModifiedBorder#FFFFFF00
- tab.lastPinnedBorder#00A0FF00
- tab.unfocusedActiveBackground#FAFAFA
- tab.unfocusedActiveBorder#FFFFFF00
- tab.unfocusedActiveBorderTop#00A0FF00
- tab.unfocusedActiveForeground#282828
- tab.unfocusedActiveModifiedBorder#FFFFFF00
- tab.unfocusedHoverBackground#00A0FF1e
- tab.unfocusedHoverBorder#00A0FFe1
- tab.unfocusedHoverForeground#1E1E1E
- tab.unfocusedInactiveBackground#F5F5F5
- tab.unfocusedInactiveForeground#787878
- tab.unfocusedInactiveModifiedBorder#FFFFFF00
- terminal.ansiBlack#141414
- terminal.ansiBlue#1496F0
- terminal.ansiBrightBlack#646464
- terminal.ansiBrightBlue#19A0FF
- terminal.ansiBrightCyan#46D2B4
- terminal.ansiBrightGreen#5FC33C
- terminal.ansiBrightMagenta#9178F0
- terminal.ansiBrightRed#FF5050
- terminal.ansiBrightWhite#F0F0F0
- terminal.ansiBrightYellow#FFBE46
- terminal.ansiCyan#3CB4A0
- terminal.ansiGreen#50A028
- terminal.ansiMagenta#7864C8
- terminal.ansiRed#E14646
- terminal.ansiWhite#C8C8C8
- terminal.ansiYellow#F0B414
- terminal.background#FAFAFA
- terminal.border#FAFAFA
- terminal.dropBackground#A091FF32
- terminal.foreground#141414
- terminal.selectionBackground#00A0FF50
- terminal.tab.activeBorder#A091FF
- terminalCursor.foreground#645AC8
- textLink.activeForeground#8C78FF
- textLink.foreground#645AC8
- titleBar.activeBackground#DCDCDC
- titleBar.activeForeground#000000
- titleBar.inactiveBackground#DCDCDC
- titleBar.inactiveForeground#646464
- toolbar.activeBackground#A091FF
- toolbar.activeForeground#F0F0F0
- toolbar.hoverBackground#A091FF8c
- toolbar.hoverOutline#00A0FF00
- walkThrough.embeddedEditorBackground#FAFAFA
- welcomePage.background#FFFFFF
- welcomePage.progress.background#B4AAFF50
- welcomePage.progress.foreground#A091FF
- welcomePage.tileBackground#F5F5F5
- welcomePage.tileHoverBackground#C8C8C864
- welcomePage.tileShadow#F0F0F0
- widget.shadow#C8C8C8
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| #141414 | — | |
| comment | #787878 | |
| none | #141414 | — |
| punctuation.definition.comment | #646464 | |
| emphasis | — | italic |
| strong | — | bold |
| constant.numeric | #285078 | — |
| constant.numeric.json | #00783C | — |
| constant.numeric.julia | #2D5AB4 | — |
| constant | #504BA0 | — |
| constant.character, constant.other, constant.other.symbol | #504BA0 | — |
| constant.character.escape | #007882 | — |
| constant.language, constant.language.json | #007882 | — |
| ts.block.class.declaration.method.constant.numeric.decimal | #00783C | — |
| constant.numeric.c, constant.numeric.cpp | #007882 | — |
| constant.regexp | #008C64 | — |
| entity.name.class, entity.name.type.class, meta.class | #141414 | — |
| entity.name.function, meta.require | #0078C8 | — |
| entity.name.function.python | #0078C8 | — |
| entity.name.function.julia | #643CB4 | — |
| keyword.other.special-method | #0078C8 | — |
| meta.function-call | #505A64 | — |
| entity.name.tag | #963296 | — |
| entity.other.attribute-name | #963296 | — |
| entity.other.attribute-name.id | #008C64 | — |
| entity.other.inherited-class | #0078C8 | — |
| invalid.deprecated | #787878 | — |
| invalid.illegal | #B4283C | — |
| keyword | #F05A00 | — |
| keyword.operator | #0078B4 | — |
| keyword.operator.comparison, keyword.operator.logical | #0078B4 | — |
| keyword.other.new | #783CC8 | — |
| markup.bold | — | bold |
| markup.italic | — | italic |
| markup.changed | #963296 | — |
| markup.deleted | #787878 | — |
| markup.inserted | #288C50 | — |
| markup.quote | #643CC8 | — |
| markup.list | #3C3C3C | — |
| markup.heading punctuation.definition.heading, entity.name.section | #A03C8C | |
| string.other.link | #C8646E | — |
| meta.link, meta.paragraph.inline.link.underline.detected-link | #8C5AA0 | — |
| markup.raw.inline | #008C64 | — |
| meta.preprocessor | #0078C8 | — |
| meta.preprocessor.at-rule keyword.control.at-rule, meta.at-rule.import, keyword.control.at-rule | #506478 | — |
| punctuation | #3C5078 | — |
| punctuation.definition | #3C5078 | — |
| punctuation.definition.method-parameters | #3C5078 | — |
| punctuation.definition.function-parameters | #0078C8 | — |
| punctuation.definition.parameters | #282828 | — |
| punctuation.section.function | #282828 | — |
| punctuation.separator | #282828 | — |
| punctuation.section.function | #3C5078 | — |
| punctuation.support.type.property-name, support.type.property-name.json | #963296 | — |
| punctuation.support.type.property-name, support.constant.mathematical-symbols | #282828 | — |
| support.constant.mathematical-symbols | #282828 | — |
| punctuation.decorator.objectliteral.object.member.accessor | #282828 | — |
| punctuation.decorator.objectliteral.object.member.accessor | #282828 | — |
| block.brace.array.literal.square, block.brace.round, block.punctuation | #282828 | — |
| brace.array.literal.square, brace.type.square | #282828 | — |
| meta.brace, meta.brace.round, meta.brace.square | #282828 | — |
| punctuation.definition.tag | #282828 | — |
| punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment | #505050 | — |
| punctuation.section | #282828 | — |
| punctuation.section.embedded, variable.interpolation | #282828 | — |
| punctuation.section.embedded.begin, punctuation.section.embedded.end | #282828 | — |
| punctuation.terminator | #0A826E | — |
| variable | #282828 | — |
| punctuation.definition.variable.php, variable.other.php | #0A826E | — |
| variable.other.c, variable.other.cpp | #282828 | — |
| variable.other | #0A826E | — |
| variable.other.property, variable.other.object.property | #0A826E | — |
| variable.language | #0078C8 | — |
| variable.parameter | #0A826E | — |
| variable.parameter.function, text.html.basic | #0A826E | — |
| punctuation.definition.variable | #0A826E | — |
| storage | #3C78C8 | — |
| storage.type | #6E50A0 | — |
| string | #3CA087 | — |
| string.regexp | #00783C | — |
| support.class | #0078C8 | — |
| support.class.console.js | #0078C8 | — |
| support.function.console.js | #0078C8 | — |
| support.constant | #0078C8 | — |
| support.function, support.function.any-method | #0078C8 | — |
| support.function.construct | #0078C8 | — |
| support.type | #7864A0 | — |
| support.type.exception | #0078C8 | — |
| token.debug-token | #7864A0 | — |
| token.error-token | #FF5064 | — |
| token.info-token | #A078E1 | — |
| token.warn-token | #3CA087 | — |
| constant.language.boolean.true.js, constant.language.boolean.false.js, constant.language.null.js | #7864A0 | — |
| meta.separator | #141414 | — |
| punctuation.separator.pointer-access.c | #0078C8 | — |
| source.c meta.preprocessor.include, source.c string.quoted.other.lt-gt.include | #3C5078 | — |
| source.cpp keyword.control.directive.conditional, source.cpp punctuation.definition.directive, source.c keyword.control.directive.conditional, source.c punctuation.definition.directive | #A078E1 | — |
| meta.selector, entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.scss | #7864A0 | — |
| variable.css, variable.sass, variable.scss | #0078C8 | — |
| entity.scss.meta.property-list.punctuation.other.attribute-name.class.css.definition, entity.punctuation.other.attribute-name.class.css.definition, punctuation.definition.entity.css, meta.selector.css | #0078C8 | — |
| source.css constant.other.color.rgb-value, support.constant.named-color, meta.property-value constant, constant.other.color.rgb-value, constant.other.rgb-value.css, constant.other.color, constant.numeric.color.hex-value.scss, constant.numeric.color.hex-value.scss punctuation.definition.constant.scss | #00783C | — |
| keyword.other.important, token.literal.sass, meta.at-rule.keyword.other.unit.media, meta.scss.keyword.other.unit.property-list.property-value, property-list.scss.set.variable.keyword.unit, other.meta.scss.set.variable.keyword.unit.map, scss.meta.set.variable.keyword.other.unit, scss.meta.at-rule.keyword.property-list.other.unit.media | #0078C8 | |
| keyword.other.unit, keyword.other.unit.scss, keyword.other.unit.css, keyword.other.unit.scss | #00783C | |
| meta.property-group support.constant.property-value.css, meta.property-list.css meta.property-value.css, meta.property-value support.constant.property-value.css, meta.property-group support.constant.property-value.scss, meta.property-group support.constant.property-value.sass, meta.property-value support.constant.property-value.scss, meta.property-value support.constant.property-value.sass, .variable.parameter.misc.css, parameter.less.data-uri comment markup.raw, source.less meta.property-value.css, scss.meta.set.variable.constant.support.font-name, meta.property-value.scss | #50A0A0 | — |
| entity.property-list.other.attribute-name.pseudo-element.css, entity.property-list.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #7864A0 | — |
| meta.at-rule.constant.numeric.media, meta.property-list.property-value.constant.numeric, scss.meta.property-list.at-rule.media, property-list.scss.constant.numeric.variable.set, meta.scss.set.variable.constant.numeric.map, scss.meta.set.variable.constant.numeric, scss.meta.at-rule.property-list.constant.numeric.media, constant.numeric.css, constant.numeric.scss, constant.numeric.sass | #00783C | — |
| source.css meta.property-value | #0078C8 | — |
| source.css keyword.control.at-rule.media, source.css keyword.control.at-rule.media punctuation.definition.keyword | #783CC8 | — |
| source.css punctuation.definition.keyword | #82A0C8 | — |
| source.css support.type.property-name, support.type.property-name.css, support.type.property-name.scss, support.type.property-name.sass, meta.property-list.css meta.property-name.css, meta.property-list.scss meta.property-name.scss, entity.name.tag.custom.scss, meta.property-list.scss meta.property-name.sass, entity.name.tag.custom.sass | #786EB4 | — |
| entity.name.tag.scss, entity.name.tag.css | #963296 | — |
| entity.name.tag.reference.scss | #00783C | — |
| constant.character.escape.css, string.quoted.single.css | #50A0A0 | — |
| meta.constructor.argument.css, meta.constructor.argument.sass | #786EB4 | — |
| entity.other.attribute-name.attribute.scss | #C8646E | — |
| string.quoted.double.attribute-value.scss | #287850 | — |
| support.function.misc.scss, keyword.control.at-rule.function.scss, keyword.control.at-rule.function.scss punctuation.definition, entity.name.function.scss | #963296 | — |
| keyword.control.at-rule.import, keyword.control.at-rule.import punctuation.definition | #0078C8 | — |
| meta.at-rule.r.seturncss, meta.at-rule.return.scss punctuation.definition, meta.at-rule.else.scss, meta.at-rule.else.scss punctuation.definition,meta.at-rule.if.scss, meta.at-rule.if.scss punctuation.definition, | #F05000 | — |
| keyword.control.at-rule.media, keyword.control.at-rule.media punctuation.definition | #783CC8 | — |
| support.type.property-name.media | #0078C8 | — |
| scss.meta.at-rule.import.string.quoted.single | #3C7878 | — |
| keyword.control.at-rule.mixin.scss, keyword.control.at-rule.mixin.scss punctuation.definition | #783CC8 | — |
| keyword.control.at-rule.include, keyword.control.at-rule.include punctuation.definition | #3C5078 | — |
| keyword.control.at-rule.font-face, keyword.control.at-rule.font-face punctuation.definition | #00783C | — |
| keyword.control.at-rule.keyframes.scss, keyword.control.at-rule.keyframes.scss punctuation.definition | #A078E1 | — |
| meta.at-rule.keyframes.scss entity.other.attribute-name.scss | #3C5078 | — |
| keyword.control.content.scss, keyword.control.content.scss punctuation.definition | #00783C | — |
| source.diff meta.diff.range.context | #0A826E | — |
| source.diff meta.diff.header.from-file | #0A826E | — |
| source.diff punctuation.definition.from-file | #0A826E | — |
| source.diff punctuation.definition.range | #0A826E | — |
| source.diff punctuation.definition.separator | #82A0C8 | — |
| source.go constant.other.placeholder.go | #3C5078 | — |
| source.java comment.block.documentation.javadoc punctuation.definition.entity.html | #82A0C8 | — |
| source.java constant.other | #00783C | — |
| source.java keyword.other.documentation | #008C64 | — |
| source.java keyword.other.documentation.author.javadoc | #008C64 | — |
| source.java keyword.other.documentation.directive, source.java keyword.other.documentation.custom | #F05000 | — |
| source.java keyword.other.documentation.see.javadoc | #F05000 | — |
| source.java meta.method-call meta.method | #82A0C8 | — |
| source.java meta.tag.template.link.javadoc, source.java string.other.link.title.javadoc | #783CC8 | — |
| source.java meta.tag.template.value.javadoc | #00783C | — |
| source.java punctuation.definition.keyword.javadoc | #506478 | — |
| source.java punctuation.definition.tag.begin.javadoc, source.java punctuation.definition.tag.end.javadoc | #00783C | — |
| source.java storage.modifier.import | #0A826E | — |
| source.java storage.modifier.package | #0A826E | — |
| source.java storage.type | #0A826E | — |
| source.java storage.type.annotation | #C8646E | — |
| source.java storage.type.generic | #963296 | — |
| source.java storage.type.primitive | #963296 | — |
| source.js punctuation.decorator, source.js meta.decorator variable.other.readwrite, source.js meta.decorator entity.name.function | #C8646E | — |
| meta.js.function.punctuation.definition.block.comment.line.double-slash, js.function.punctuation.definition.block.object.objectliteral.member.comment.line.double-slash | #8C8C8C | |
| source.js meta.object-literal.key | #7864A0 | — |
| meta.object-literal.key, meta.object.member.object-literal.key, meta.object-literal.key.js entity.name.function.js | #7864A0 | — |
| source.js storage.type.class.jsdoc | #963296 | — |
| source.js string.template punctuation.definition.template-expression | #6482B4 | — |
| source.js string.template meta.template.expression support.variable.property, source.js string.template meta.template.expression variable.other.object | #282828 | — |
| source.js support.type.primitive | #82A0C8 | — |
| source.js meta.var.expr variable.other.object | #0A826E | — |
| source.js variable.other.readwrite.alias | #0A826E | — |
| comment.block.documentation.js, comment.block.documentation.js punctuation.definition.comment.js | #8C8C8C | — |
| keyword.operator.expression.typeof.js | #F05000 | — |
| variable.other.readwrite.js, variable.other.object.js | #008C64 | — |
| variable.parameter.js | #AA8CAF | — |
| function.storage.type.block.js | #F05000 | — |
| support.function.dom.js | #7864A0 | — |
| text.html.basic constant.character.entity.html | #505A64 | — |
| punctuation.definition.entity.html | #008C64 | — |
| comment.block.html | #8C8C8C | |
| text.html.basic | #0A826E | — |
| text.html.basic constant.other.inline-data | #7864A0 | italic |
| text.html.basic meta.tag.sgml.doctype | #6482B4 | — |
| text.html.basic punctuation.definition.entity | #82A0C8 | — |
| keyword.control.html.elements, entity.name.tag.inline.any.html, entity.name.tag.block.any.html | #963296 | — |
| invalid.illegal.bad-ampersand.html | #3CA087 | — |
| meta.tag.any.html entity.other.attribute-name.html, meta.tag.block.any.html entity.other.attribute-name.html, meta.tag.inline.any.html entity.other.attribute-name.html, meta.tag.other.html entity.other.attribute-name.html, source.js.embedded.html entity.other.attribute-name.html | #82A0C8 | — |
| string.quoted.double.html, meta.template string.quoted.double | #00783C | — |
| string.quoted.double.html invalid.illegal.bad-ampersand.html | #0078C8 | — |
| source.properties entity.name.section.group-title.ini | #0078C8 | — |
| source.properties punctuation.separator.key-value.ini | #3C5078 | — |
| text.html.markdown markup.fenced_code.block, text.html.markdown markup.fenced_code.block punctuation.definition | #7864A0 | — |
| markup.heading | #7864A0 | — |
| text.html.markdown markup.inline.raw, text.html.markdown markup.inline.raw punctuation.definition.raw | #008C64 | — |
| text.html.markdown markup.italic | — | italic |
| text.html.markdown beginning.punctuation.definition.list | #786EB4 | — |
| text.html.markdown beginning.punctuation.definition.quote | #7864A0 | — |
| text.html.markdown markup.quote | #7864A0 | — |
| text.html.markdown punctuation.definition.heading | #82A0C8 | — |
| text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string | #82A0C8 | — |
| text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title | #C8646E | — |
| source.php meta.function-call, source.php meta.function-call.object | #3C5078 | — |
| constant.numeric.php | #00783C | — |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php | #282828 | — |
| string.quoted.single.js, string.quoted.double.json, meta.structure.dictionary.value.json, meta.string.quoted.embedded.line.php.source.single.string-contents | #3CA087 | — |
| punctuation.definition.variable.php, variable.other.php | #0A826E | — |
| keyword.control.php | #C8646E | — |
| punctuation.terminator.expression.php | #0A826E | — |
| meta.tag.any.html.string.quoted.double.embedded.line.php.source.constant.language.inline, meta.embedded.line.php.source.constant.language | #7864A0 | — |
| meta.block.embedded.php.source.comment.documentation.phpdoc | #8C8C8C | — |
| source.python entity.name.function.decorator, source.python meta.function.decorator support.type | #A0A0A0 | — |
| source.python meta.function-call, source.python meta.function-call.generic | #3C5078 | — |
| source.python support.type | #A078E1 | — |
| source.python variable.parameter.function.language | #0078C8 | — |
| source.python meta.function.parameters variable.parameter.function.language.special.self | #0078C8 | — |
| source.css.scss punctuation.definition.interpolation.begin.bracket.curly, source.css.scss punctuation.definition.interpolation.end.bracket.curly, punctuation.definition.interpolation.begin.bracket.curly.scss, punctuation.definition.interpolation.end.bracket.curly.scss | #282828 | — |
| source.css.scss variable.interpolation | #282828 | italic |
| constant.character.escape.scss, string.quoted.single.scss, scss.meta.set.variable.string.quoted.single | #3CA087 | — |
| source.sass entity.other.attribute-name.placeholder.sass, source.sass entity.other.attribute-name.placeholder.sass punctuation.definition.entity.sass, source.scss entity.other.attribute-name.placeholder.scss, source.scss entity.other.attribute-name.placeholder.scss punctuation.definition.entity.scss, entity.other.attribute-name.placeholder.scss | #82A0C8 | — |
| source.ts punctuation.decorator, source.ts meta.decorator variable.other.readwrite, source.ts meta.decorator entity.name.function | #3C5078 | — |
| entity.name.function.ts, punctuation.decorator.ts | #3C5078 | — |
| ts.block.class.method.declaration.comment.line.double-slash, ts.class.comment.line.double-slash, ts.punctuation.definition.decorator.objectliteral.object.member.array.literal.comment.line.double-slash | #8C8C8C | |
| keyword.control.export.ts, keyword.control.flow.ts | #F05A00 | — |
| punctuation.accessor.ts | #3C5078 | — |
| entity.name.type.ts | #3C5078 | — |
| storage.modifier.ts | #0A826E | — |
| source.ts meta.object-literal.key | #7864A0 | — |
| source.ts meta.object-literal.key entity.name.function | #7864A0 | — |
| source.ts support.class, source.ts entity.name.class | #0078C8 | — |
| source.ts support.type | #7864A0 | — |
| source.ts entity.name.type | #7864A0 | — |
| block.variable.other.object.class.declaration.property.method.ts, block.variable.other.object.class.declaration.method.ts, block.variable.other.object.array.literal.class.declaration.method.var.expr.ts, block.variable.class.declaration.method.parameter.arrow, ts.block.variable.other.class.declaration.property.method.ts | #3C5078 | — |
| block.variable.other.object.class.declaration.method.ts, block.variable.other.object.array.literal.class.declaration.method.var.expr.tsblock.variable.class.declaration.method.parameter.arrow.ts, block.variable.other.class.declaration.property.method.ts | #3C5078 | — |
| ts.keyword.control.block.class.method.declaration.flow | #506478 | — |
| source.ts support.constant.math, source.ts support.constant.dom, source.ts support.constant.json | #50A0A0 | — |
| source.ts support.variable | #282828 | — |
| meta.type.annotation.ts | #C8646E | — |
| ts.class.storage.modifier.declaration.method.parameters | #3C78C8 | — |
| ts.block.string.quoted.single, ts.string.quoted.single.class.field.declaration | #3CA087 | — |
| ts.block.objectliteral.object.member.class.declaration.method.language.constant.boolean | #7864A0 | — |
| ts.block.variable.class.declaration.method.parameter.arrow | #3C5078 | — |
| support.type.class.declaration.method.return.primitive.ts, type.annotation.support.class.declaration.method.parameters.primitive.ts | #82A0C8 | — |
| ts.entity.name.class.type.method.declaration.parameters.return, ts.punctuation.definition.begin.class.type.method.declaration.parameters.return.typeparameters, ts.punctuation.definition.end.class.type.method.declaration.parameters.return.typeparameters, ts.block.entity.name.class.type.method.declaration.parameters.new.expr, ts.block.punctuation.definition.begin.class.type.method.declaration.parameters.typeparameters.new.expr, ts.block.punctuation.definition.end.class.type.method.declaration.parameters.typeparameters.new.expr, ts.block.objectliteral.object.member.object-literal.key.class.declaration.method | #82A0C8 | — |
| variable.language.this.ts | #008C64 | — |
| text.xml entity.name.tag.namespace | #963296 | — |
| text.xml keyword.other.doctype | #F06400 | — |
| text.xml meta.tag.preprocessor entity.name.tag | #963296 | — |
| text.xml string.unquoted.cdata, text.xml string.unquoted.cdata punctuation.definition.string | #C8646E | italic |
| source.yaml entity.name.tag | #963296 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...