IntelliJ IDEA Islands Theme

Name: IntelliJ IDEA Islands Theme
Author: Oleksandr Havrysh

Publisher: Oleksandr HavryshThemes in package: 3

Dark and Light themes for Visual Studio Code inspired by IntelliJ IDEA Islands.

Open in VS Code GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

IntelliJ IDEA Islands Theme — IntelliJ IDEA Islands Light

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#FFFFFF
activityBar.activeBorder#5DA9FF
activityBar.activeFocusBorder#00000000
activityBar.background#FFFFFF
activityBar.border#00000000
activityBar.foreground#5DA9FF
activityBar.inactiveForeground#AEB3C2
activityBarBadge.background#0033B3
activityBarBadge.foreground#FFFFFF
badge.background#D5E1FF
badge.foreground#0033B3
breadcrumb.activeSelectionForeground#080808
breadcrumb.background#FFFFFF
breadcrumb.focusForeground#080808
breadcrumb.foreground#6C707E
breadcrumbPicker.background#FFFFFF
button.background#0033B3
button.border#0033B300
button.foreground#FFFFFF
button.hoverBackground#0043D3
button.secondaryBackground#D5E1FF
button.secondaryForeground#0033B3
button.secondaryHoverBackground#C9DAFB
charts.blue#0033B3
charts.foreground#080808
charts.green#067D17
charts.lines#DFE1E5
charts.orange#8C4F00
charts.purple#871094
charts.red#DE1B2E
charts.yellow#9E880D
chat.requestBackground#FFFFFF
chat.requestBorder#DFE1E5
checkbox.background#FFFFFF
checkbox.border#00000000
checkbox.foreground#080808
checkbox.selectBackground#D5E1FF
checkbox.selectBorder#0033B3
commandCenter.activeBackground#D5E1FF
commandCenter.activeBorder#0033B380
commandCenter.activeForeground#080808
commandCenter.background#FFFFFF
commandCenter.border#00000000
commandCenter.foreground#6C707E
commandCenter.inactiveBorder#00000000
commandCenter.inactiveForeground#AEB3C2
debugConsole.errorForeground#DE1B2E
debugConsole.infoForeground#88ADF7
debugConsole.sourceForeground#080808
debugConsole.warningForeground#8C4F00
debugConsoleInputIcon.foreground#0033B3
debugIcon.breakpointCurrentStackframeForeground#9E880D
debugIcon.breakpointDisabledForeground#AEB3C2
debugIcon.breakpointForeground#DE1B2E
debugIcon.breakpointStackframeForeground#067D17
debugIcon.breakpointUnverifiedForeground#AEB3C280
debugIcon.continueForeground#067D17
debugIcon.disconnectForeground#DE1B2E
debugIcon.pauseForeground#9E880D
debugIcon.restartForeground#067D17
debugIcon.startForeground#067D17
debugIcon.stepBackForeground#0033B3
debugIcon.stepIntoForeground#0033B3
debugIcon.stepOutForeground#0033B3
debugIcon.stepOverForeground#0033B3
debugIcon.stopForeground#DE1B2E
debugTokenExpression.boolean#0033B3
debugTokenExpression.error#DE1B2E
debugTokenExpression.name#871094
debugTokenExpression.number#1750EB
debugTokenExpression.string#067D17
debugTokenExpression.value#067D17
debugToolBar.background#FFFFFF
debugToolBar.border#00000000
debugView.exceptionLabelBackground#DE1B2E
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#D5E1FF
debugView.stateLabelForeground#080808
debugView.valueChangedHighlight#FCD47E
descriptionForeground#6C707E
diffEditor.border#00000000
diffEditor.diagonalFill#E4E6EB
diffEditor.insertedLineBackground#7FC78422
diffEditor.insertedTextBackground#7FC78433
diffEditor.removedLineBackground#DE1B2E22
diffEditor.removedTextBackground#DE1B2E33
diffEditorGutter.insertedLineBackground#7FC78444
diffEditorGutter.removedLineBackground#DE1B2E44
diffEditorOverview.insertedForeground#7FC784
diffEditorOverview.removedForeground#DE1B2E
dropdown.background#FFFFFF
dropdown.border#00000000
dropdown.foreground#080808
dropdown.listBackground#FFFFFF
editor.background#FFFFFF
editor.findMatchBackground#FCD47E
editor.findMatchBorder#C47233
editor.findMatchHighlightBackground#FCD47EAA
editor.foldBackground#E9F5E680
editor.foreground#080808
editor.hoverHighlightBackground#A6D2FF40
editor.inactiveSelectionBackground#A6D2FF80
editor.lineHighlightBackground#F5F8FE
editor.lineHighlightBorder#F5F8FE
editor.rangeHighlightBackground#F5F8FE
editor.selectionBackground#A6D2FF
editor.selectionForeground#080808
editor.selectionHighlightBackground#A6D2FF60
editor.wordHighlightBackground#EDEBFC
editor.wordHighlightStrongBackground#FCE8F4
editorBracketHighlight.foreground1#0033B3
editorBracketHighlight.foreground2#067D17
editorBracketHighlight.foreground3#9E880D
editorBracketHighlight.foreground4#871094
editorBracketHighlight.foreground5#1750EB
editorBracketHighlight.foreground6#007E8A
editorBracketHighlight.unexpectedBracket.foreground#DE1B2E
editorBracketMatch.background#93D9D9
editorBracketMatch.border#93D9D9
editorCodeLens.foreground#818594
editorCursor.background#FFFFFF
editorCursor.foreground#080808
editorError.border#DE1B2E00
editorError.foreground#DE1B2E
editorGroup.border#00000000
editorGroup.dropBackground#D5E1FF80
editorGroupHeader.border#00000000
editorGroupHeader.noTabsBackground#FFFFFF
editorGroupHeader.tabsBackground#FFFFFF
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#7FC784
editorGutter.background#FFFFFF
editorGutter.deletedBackground#767A8A
editorGutter.foldingControlForeground#6C707E
editorGutter.modifiedBackground#88ADF7
editorHint.border#AEB3C200
editorHint.foreground#AEB3C2
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#00000000
editorHoverWidget.foreground#080808
editorHoverWidget.highlightForeground#0033B3
editorHoverWidget.statusBarBackground#F5F8FE
editorIndentGuide.activeBackground#AEB3C2
editorIndentGuide.activeBackground1#AEB3C2
editorIndentGuide.background#EBECF000
editorIndentGuide.background1#EBECF0
editorInfo.border#88ADF700
editorInfo.foreground#88ADF7
editorLineNumber.activeForeground#767A8A
editorLineNumber.dimmedForeground#AEB3C280
editorLineNumber.foreground#AEB3C2
editorLink.activeForeground#006DCC
editorMarkerNavigation.background#FFFFFF
editorMarkerNavigationError.background#FFE8E8
editorMarkerNavigationInfo.background#D5E1FF
editorMarkerNavigationWarning.background#FCF4D4
editorOverviewRuler.addedForeground#7FC784
editorOverviewRuler.border#EBECF0
editorOverviewRuler.deletedForeground#767A8A
editorOverviewRuler.errorForeground#DE1B2E
editorOverviewRuler.findMatchForeground#C47233
editorOverviewRuler.infoForeground#88ADF7
editorOverviewRuler.modifiedForeground#88ADF7
editorOverviewRuler.rangeHighlightForeground#A6D2FF
editorOverviewRuler.selectionHighlightForeground#A6D2FF
editorOverviewRuler.warningForeground#F2BF57
editorOverviewRuler.wordHighlightForeground#D0A1FF
editorOverviewRuler.wordHighlightStrongForeground#F0A8D2
editorRuler.foreground#EBECF0
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.border#00000000
editorSuggestWidget.focusHighlightForeground#0033B3
editorSuggestWidget.foreground#080808
editorSuggestWidget.highlightForeground#0033B3
editorSuggestWidget.selectedBackground#D5E1FF
editorSuggestWidget.selectedForeground#080808
editorSuggestWidget.selectedIconForeground#080808
editorUnnecessaryCode.opacity#00000077
editorWarning.border#F2BF5700
editorWarning.foreground#F2BF57
editorWhitespace.foreground#D4D4D4
editorWidget.background#FFFFFF
editorWidget.border#00000000
editorWidget.foreground#080808
errorForeground#DE1B2E
extensionBadge.remoteBackground#0033B3
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#0033B3
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#0043D3
extensionButton.separator#FFFFFF40
extensionIcon.preReleaseForeground#8C4F00
extensionIcon.starForeground#9E880D
extensionIcon.verifiedForeground#067D17
focusBorder#0033B380
foreground#080808
gitDecoration.addedResourceForeground#067D17
gitDecoration.conflictingResourceForeground#DE1B2E
gitDecoration.deletedResourceForeground#6C707E
gitDecoration.ignoredResourceForeground#AEB3C2
gitDecoration.modifiedResourceForeground#0033B3
gitDecoration.renamedResourceForeground#0033B3
gitDecoration.stageDeletedResourceForeground#6C707E
gitDecoration.stageModifiedResourceForeground#0033B3
gitDecoration.submoduleResourceForeground#007E8A
gitDecoration.untrackedResourceForeground#B23247
icon.foreground#6C707E
inlineChat.background#FFFFFF
inlineChat.border#00000000
inlineChat.shadow#00000020
inlineChatDiff.inserted#7FC78433
inlineChatDiff.removed#DE1B2E33
inlineChatInput.background#FFFFFF
inlineChatInput.border#00000000
inlineChatInput.focusBorder#0033B3
inlineChatInput.placeholderForeground#AEB3C2
input.background#FFFFFF
input.border#00000000
input.foreground#080808
input.placeholderForeground#AEB3C2
inputOption.activeBackground#D5E1FF
inputOption.activeBorder#0033B3
inputOption.activeForeground#0033B3
inputOption.hoverBackground#EBECF0
inputValidation.errorBackground#FFE8E8
inputValidation.errorBorder#DE1B2E
inputValidation.errorForeground#DE1B2E
inputValidation.infoBackground#D5E1FF
inputValidation.infoBorder#0033B3
inputValidation.infoForeground#0033B3
inputValidation.warningBackground#FFF8E3
inputValidation.warningBorder#F2BF57
inputValidation.warningForeground#8C4F00
keybindingLabel.background#D5E1FF
keybindingLabel.border#DFE1E5
keybindingLabel.bottomBorder#AEB3C2
keybindingLabel.foreground#0033B3
keybindingTable.headerBackground#FFFFFF
keybindingTable.rowsBackground#FFFFFF
list.activeSelectionBackground#D5E1FF
list.activeSelectionForeground#080808
list.activeSelectionIconForeground#080808
list.dropBackground#D5E1FF80
list.errorForeground#DE1B2E
list.focusBackground#D5E1FF
list.focusForeground#080808
list.focusOutline#0033B340
list.highlightForeground#0033B3
list.hoverBackground#EBECF0
list.hoverForeground#080808
list.inactiveSelectionBackground#D5E1FF80
list.inactiveSelectionForeground#080808
list.invalidItemForeground#DE1B2E
list.warningForeground#8C4F00
listFilterWidget.background#FFFFFF
listFilterWidget.noMatchesOutline#DE1B2E
listFilterWidget.outline#0033B3
menu.background#FFFFFF
menu.border#00000000
menu.foreground#080808
menu.selectionBackground#D5E1FF
menu.selectionBorder#D5E1FF00
menu.selectionForeground#080808
menu.separatorBackground#DFE1E5
menubar.selectionBackground#D5E1FF
menubar.selectionBorder#D5E1FF
menubar.selectionForeground#080808
merge.border#DFE1E5
merge.commonContentBackground#E4E6EB80
merge.commonHeaderBackground#E4E6EB
merge.currentContentBackground#7FC78433
merge.currentHeaderBackground#7FC78466
merge.incomingContentBackground#88ADF733
merge.incomingHeaderBackground#88ADF766
minimap.background#FFFFFF
minimap.errorHighlight#DE1B2E
minimap.findMatchHighlight#FCD47E
minimap.foregroundOpacity#000000FF
minimap.selectionHighlight#A6D2FF
minimap.selectionOccurrenceHighlight#A6D2FF
minimap.warningHighlight#F2BF57
minimapGutter.addedBackground#7FC784
minimapGutter.deletedBackground#767A8A
minimapGutter.modifiedBackground#88ADF7
minimapSlider.activeBackground#767A8A40
minimapSlider.background#AEB3C220
minimapSlider.hoverBackground#AEB3C240
notebook.cellBorderColor#DFE1E5
notebook.cellHoverBackground#F5F8FE
notebook.cellInsertionIndicator#0033B3
notebook.cellStatusBarItemHoverBackground#EBECF0
notebook.cellToolbarSeparator#DFE1E5
notebook.editorBackground#FFFFFF
notebook.focusedCellBorder#0033B3
notebook.focusedEditorBorder#0033B3
notebook.inactiveFocusedCellBorder#0033B380
notebook.outputContainerBackgroundColor#F5F8FE
notebook.selectedCellBackground#D5E1FF
notebook.selectedCellBorder#D5E1FF
notebook.symbolHighlightBackground#FCD47E
notebookStatusErrorIcon.foreground#DE1B2E
notebookStatusRunningIcon.foreground#0033B3
notebookStatusSuccessIcon.foreground#067D17
notificationCenter.border#00000000
notificationCenterHeader.background#FFFFFF
notificationCenterHeader.foreground#080808
notificationLink.foreground#006DCC
notifications.background#FFFFFF
notifications.border#00000000
notifications.foreground#080808
notificationsErrorIcon.foreground#DE1B2E
notificationsInfoIcon.foreground#0033B3
notificationsWarningIcon.foreground#8C4F00
notificationToast.border#00000000
panel.background#FFFFFF
panel.border#00000000
panel.dropBorder#0033B3
panelInput.border#00000000
panelSection.border#00000000
panelSectionHeader.background#FFFFFF
panelSectionHeader.border#00000000
panelSectionHeader.foreground#6C707E
panelTitle.activeBorder#0033B3
panelTitle.activeForeground#080808
panelTitle.inactiveForeground#6C707E
peekView.border#00000000
peekViewEditor.background#FFFFFF
peekViewEditor.matchHighlightBackground#FCD47E
peekViewEditorGutter.background#FFFFFF
peekViewResult.background#F5F8FE
peekViewResult.fileForeground#080808
peekViewResult.lineForeground#6C707E
peekViewResult.matchHighlightBackground#FCD47E
peekViewResult.selectionBackground#D5E1FF
peekViewResult.selectionForeground#080808
peekViewTitle.background#D5E1FF
peekViewTitleDescription.foreground#6C707E
peekViewTitleLabel.foreground#080808
pickerGroup.border#00000000
pickerGroup.foreground#0033B3
problemsErrorIcon.foreground#DE1B2E
problemsInfoIcon.foreground#88ADF7
problemsWarningIcon.foreground#F2BF57
progressBar.background#0033B3
quickInput.background#FFFFFF
quickInput.foreground#080808
quickInputList.focusBackground#D5E1FF
quickInputList.focusForeground#080808
quickInputList.focusIconForeground#080808
quickInputTitle.background#FFFFFF
sash.hoverBorder#0033B3
scrollbar.shadow#00000020
scrollbarSlider.activeBackground#767A8A80
scrollbarSlider.background#AEB3C240
scrollbarSlider.hoverBackground#AEB3C280
selection.background#A6D2FF
settings.checkboxBackground#FFFFFF
settings.checkboxBorder#DFE1E5
settings.checkboxForeground#080808
settings.dropdownBackground#FFFFFF
settings.dropdownBorder#DFE1E5
settings.dropdownForeground#080808
settings.dropdownListBorder#DFE1E5
settings.focusedRowBackground#D5E1FF40
settings.focusedRowBorder#0033B380
settings.headerForeground#080808
settings.modifiedItemIndicator#0033B3
settings.numberInputBackground#FFFFFF
settings.numberInputBorder#DFE1E5
settings.numberInputForeground#080808
settings.rowHoverBackground#FFFFFF
settings.textInputBackground#FFFFFF
settings.textInputBorder#DFE1E5
settings.textInputForeground#080808
sideBar.background#FFFFFF
sideBar.border#00000000
sideBar.dropBackground#D5E1FF80
sideBar.foreground#080808
sideBarSectionHeader.background#FFFFFF
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#6C707E
sideBarTitle.foreground#6C707E
statusBar.background#FFFFFF
statusBar.border#00000000
statusBar.debuggingBackground#7FC784
statusBar.debuggingBorder#7FC78400
statusBar.debuggingForeground#080808
statusBar.foreground#6C707E
statusBar.noFolderBackground#FFFFFF
statusBar.noFolderBorder#00000000
statusBar.noFolderForeground#6C707E
statusBarItem.activeBackground#D5E1FF
statusBarItem.errorBackground#DE1B2E
statusBarItem.errorForeground#FFFFFF
statusBarItem.hoverBackground#EBECF0
statusBarItem.prominentBackground#D5E1FF
statusBarItem.prominentForeground#080808
statusBarItem.prominentHoverBackground#A6D2FF
statusBarItem.remoteBackground#0033B3
statusBarItem.remoteForeground#FFFFFF
statusBarItem.warningBackground#F2BF57
statusBarItem.warningForeground#080808
symbolIcon.arrayForeground#080808
symbolIcon.booleanForeground#0033B3
symbolIcon.classForeground#9E880D
symbolIcon.colorForeground#080808
symbolIcon.constantForeground#871094
symbolIcon.constructorForeground#00627A
symbolIcon.enumeratorForeground#9E880D
symbolIcon.enumeratorMemberForeground#871094
symbolIcon.eventForeground#9E880D
symbolIcon.fieldForeground#871094
symbolIcon.fileForeground#080808
symbolIcon.folderForeground#080808
symbolIcon.functionForeground#00627A
symbolIcon.interfaceForeground#007E8A
symbolIcon.keyForeground#871094
symbolIcon.keywordForeground#0033B3
symbolIcon.methodForeground#00627A
symbolIcon.moduleForeground#080808
symbolIcon.namespaceForeground#080808
symbolIcon.nullForeground#0033B3
symbolIcon.numberForeground#1750EB
symbolIcon.objectForeground#080808
symbolIcon.operatorForeground#080808
symbolIcon.packageForeground#080808
symbolIcon.propertyForeground#871094
symbolIcon.referenceForeground#080808
symbolIcon.snippetForeground#080808
symbolIcon.stringForeground#067D17
symbolIcon.structForeground#9E880D
symbolIcon.textForeground#080808
symbolIcon.typeParameterForeground#007E8A
symbolIcon.unitForeground#080808
symbolIcon.variableForeground#080808
tab.activeBackground#E1EAFF
tab.activeBorder#E1EAFF
tab.activeBorderTop#00000000
tab.activeForeground#080808
tab.border#00000000
tab.hoverBackground#E1EAFF
tab.hoverBorder#FFFFFF00
tab.hoverForeground#080808
tab.inactiveBackground#FFFFFF
tab.inactiveForeground#6C707E
tab.lastPinnedBorder#DFE1E5
tab.unfocusedActiveBackground#E1EAFF
tab.unfocusedActiveBorderTop#00000000
tab.unfocusedActiveForeground#080808
tab.unfocusedHoverBackground#E1EAFF
tab.unfocusedHoverForeground#080808
tab.unfocusedInactiveBackground#FFFFFF
tab.unfocusedInactiveForeground#6C707E80
terminal.ansiBlack#080808
terminal.ansiBlue#0033B3
terminal.ansiBrightBlack#6C707E
terminal.ansiBrightBlue#88ADF7
terminal.ansiBrightCyan#00B5BC
terminal.ansiBrightGreen#7FC784
terminal.ansiBrightMagenta#A678F2
terminal.ansiBrightRed#F05661
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#F2BF57
terminal.ansiCyan#007E8A
terminal.ansiGreen#067D17
terminal.ansiMagenta#871094
terminal.ansiRed#DE1B2E
terminal.ansiWhite#FFFFFF
terminal.ansiYellow#9E880D
terminal.background#FFFFFF
terminal.foreground#080808
terminal.selectionBackground#A6D2FF
terminalCursor.background#FFFFFF
terminalCursor.foreground#080808
testing.iconErrored#DE1B2E
testing.iconFailed#DE1B2E
testing.iconPassed#067D17
testing.iconQueued#9E880D
testing.iconSkipped#AEB3C2
testing.iconUnset#AEB3C2
testing.runAction#067D17
textBlockQuote.background#FFFFFF
textBlockQuote.border#0033B3
textCodeBlock.background#F3F3F4
textLink.activeForeground#006DCC
textLink.foreground#006DCC
textPreformat.background#F3F3F4
textPreformat.foreground#0033B3
textSeparator.foreground#DFE1E5
titleBar.activeBackground#FFFFFF
titleBar.activeForeground#080808
titleBar.border#00000000
titleBar.inactiveBackground#FFFFFF
titleBar.inactiveForeground#6C707E
tree.inactiveIndentGuidesStroke#EBECF080
tree.indentGuidesStroke#EBECF0
walkThrough.embeddedEditorBackground#FFFFFF
welcomePage.progress.background#DFE1E5
welcomePage.progress.foreground#0033B3
welcomePage.tileBackground#FFFFFF
welcomePage.tileBorder#DFE1E5
welcomePage.tileHoverBackground#D5E1FF
widget.border#00000000
widget.shadow#00000020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8C8C8C	italic
string, string.quoted, string.template, punctuation.definition.string	#067D17	—
constant.character.escape, string.quoted constant.character.escape	#0037A6	—
constant.numeric	#1750EB	—
constant.language.boolean	#0033B3	—
constant, constant.language, constant.character	#0033B3	—
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete, keyword.operator.typeof, keyword.operator.instanceof, keyword.operator.void, keyword.operator.in, keyword.operator.of, storage.type, storage.modifier	#0033B3	—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.relational, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.decrement, keyword.operator.ternary, punctuation.separator.key-value	#080808	—
punctuation, punctuation.definition, punctuation.terminator, punctuation.separator, punctuation.section, punctuation.accessor, meta.brace	#080808	—
entity.name.function, meta.function-call entity.name.function, support.function, meta.method.identifier entity.name.function	#00627A	—
meta.method entity.name.function, meta.method.declaration entity.name.function	#00627A	—
entity.name.class, entity.name.type.class, entity.name.type, support.class, support.type	#080808	—
entity.name.type.interface, entity.other.inherited-class	#080808	—
entity.name.type.enum	#080808	—
entity.name.namespace, entity.name.module, entity.name.type.module	#080808	—
variable, variable.other, variable.language	#080808	—
variable.parameter, meta.parameter	#080808	—
variable.other.property, variable.other.object.property, meta.object-literal.key, support.variable.property	#871094	—
entity.name.type.parameter, storage.type.generic	#007E8A	—
meta.decorator, entity.name.function.decorator, storage.type.annotation, punctuation.definition.annotation, meta.annotation	#9E880D	—
entity.name.tag, punctuation.definition.tag, meta.tag.sgml	#0033B3	—
entity.other.attribute-name	#080808	—
support.function.builtin, support.variable.dom, support.constant	#00627A	—
invalid, invalid.illegal	#DE1B2E	—
invalid.deprecated	#080808	strikethrough
string.regexp, constant.other.character-class.regexp, constant.character.escape.backslash.regexp	#264EFF	—
url, link, uri	—	underline
markup.heading, markup.heading entity.name, entity.name.section	#0033B3	bold
markup.bold, punctuation.definition.bold	—	bold
markup.italic, punctuation.definition.italic	—	italic
markup.underline	—	underline
markup.inline.raw, markup.fenced_code, markup.raw	#067D17	—
markup.quote	#8C8C8C	italic
markup.underline.link, string.other.link	#006DCC	—
markup.list, punctuation.definition.list	#080808	—
markup.inserted	#067D17	—
markup.deleted	#DE1B2E	—
markup.changed	#0033B3	—
support.type.property-name.json, source.json meta.structure.dictionary.json string.quoted.double.json	#871094	—
source.json meta.structure.dictionary.value.json string.quoted.double.json	#067D17	—
entity.name.tag.yaml	#0033B3	—
entity.name.type.anchor.yaml, punctuation.definition.anchor.yaml, variable.other.alias.yaml	#0000E6	—
support.type.property-name.css, meta.property-name.css	#0033B3	—
support.constant.property-value.css, meta.property-value.css	#080808	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#9E880D	—
keyword.other.unit.css	#1750EB	—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#9E880D	—
entity.name.tag.html, punctuation.definition.tag.html	#0033B3	—
entity.other.attribute-name.html	#080808	—
string.quoted.double.html, string.quoted.single.html	#067D17	—
entity.name.tag.xml, entity.name.tag.localname.xml	#0033B3	—
entity.other.attribute-name.xml	#080808	—
entity.name.tag.namespace.xml	#008077	—
variable.other.normal.shell, punctuation.definition.variable.shell	#080808	—
support.function.builtin.shell	#0033B3	—
keyword.other.sql, keyword.other.DML.sql	#0033B3	—
source.java, meta.class.java, meta.class.body.java, meta.method.java, meta.method.body.java	#080808	—
punctuation.definition.parameters.varargs.java, punctuation.separator.delimiter.java, punctuation.definition.annotation-arguments.begin.bracket.round.java, punctuation.definition.annotation-arguments.end.bracket.round.java, keyword.control.ternary.java, source.java punctuation.definition.parameters.begin.bracket.round.java, source.java punctuation.definition.parameters.end.bracket.round.java, source.java punctuation.terminator.java, source.java punctuation.separator.period.java, source.java meta.brace.round.java, source.java meta.brace.square.java, source.java meta.brace.curly.java	#080808	—
storage.type.annotation.java, punctuation.definition.annotation.java	#9E880D	—
storage.modifier.package.java, storage.modifier.import.java	#0033B3	—
storage.type.java, storage.type.object.array.java, storage.type.generic.java	#080808	—
meta.method.identifier.java entity.name.function.java	#00627A	—
variable.other.definition.java	#080808	—
source.kotlin, meta.class.kotlin, meta.class.body.kotlin	#080808	—
storage.type.annotation.kotlin, punctuation.definition.annotation.kotlin	#9E880D	—
entity.name.function.kotlin	#00627A	—
source.ts, source.tsx	#080808	—
entity.name.type.ts, entity.name.type.tsx, support.type.primitive.ts, support.type.primitive.tsx	#080808	—
entity.name.type.interface.ts, entity.name.type.interface.tsx	#080808	—
entity.name.type.enum.ts, entity.name.type.enum.tsx	#080808	—
entity.name.type.module.ts, entity.name.type.module.tsx	#080808	—
entity.name.namespace.ts, entity.name.namespace.tsx	#080808	—
entity.name.type.parameter.ts, entity.name.type.parameter.tsx	#007E8A	—
source.js, source.jsx	#080808	—
variable.other.readwrite.js, variable.other.readwrite.jsx	#2A8C7C	—
variable.other.constant.js, variable.other.constant.jsx	#871094	—
variable.language.this.js, variable.language.this.jsx, support.variable.dom.js, support.variable.object.process.js, support.variable.object.node.js	#830091	—
string.regexp.js, string.regexp.jsx	#264EFF	—
entity.name.tag.jsx, punctuation.definition.tag.jsx, entity.name.tag.tsx, punctuation.definition.tag.tsx	#AD6339	—
support.class.component.jsx, support.class.component.tsx	#AD6339	—
source.python	#080808	—
variable.language.self.python, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python	#0033B3	—
support.function.magic.python	#0033B3	italic
entity.name.function.decorator.python, meta.function.decorator.python	#9E880D	—
meta.fstring.python, storage.type.string.python	#067D17	—
source.go	#080808	—
entity.name.package.go	#805900	—
entity.name.import.go	#067D17	—
entity.name.function.go, support.function.go	#286D73	—
entity.name.type.go, support.type.go, storage.type.go	#336ECC	—
support.function.builtin.go, constant.language.go	#0033B3	—
source.rust	#080808	—
entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust	#007E8A	—
entity.name.function.macro.rust, meta.macro.rust	#0033B3	—
meta.attribute.rust, punctuation.definition.attribute.rust	#9E880D	—
variable.language.self.rust	#0033B3	—
source.c, source.cpp	#080808	—
meta.preprocessor.c, meta.preprocessor.cpp, keyword.control.directive.c, keyword.control.directive.cpp	#0033B3	—
entity.name.function.preprocessor.c, entity.name.function.preprocessor.cpp	#0033B3	—
source.cs	#080808	—
meta.attribute.cs	#9E880D	—
source.groovy	#080808	—
storage.type.annotation.groovy, punctuation.definition.annotation.groovy	#9E880D	—
meta.interpolation.groovy, punctuation.section.embedded.groovy	#080808	—
source.php, text.html.php	#080808	—
variable.other.php, punctuation.definition.variable.php	#080808	—
source.ruby	#080808	—
constant.language.symbol.ruby, punctuation.definition.symbol.ruby	#871094	—
source.scala	#080808	—
entity.name.class.annotation.scala	#9E880D	—
source.swift	#080808	—
meta.attribute.swift, storage.modifier.attribute.swift	#9E880D	—
source.dart	#080808	—
storage.type.annotation.dart	#9E880D	—
entity.name.tag.template.html.vue	#0033B3	—
source.graphql	#080808	—
support.type.graphql, entity.name.type.graphql	#080808	—
keyword.other.special-method.dockerfile	#0033B3	—
entity.name.function.target.makefile	#00627A	—
variable.other.makefile	#871094	—
entity.name.section.group-title.ini	#9E880D	—
keyword.other.definition.ini	#0033B3	—
keyword.key.toml, support.type.property-name.toml	#0033B3	—
entity.name.table.toml, support.type.property-name.table.toml	#9E880D	—
support.constant.property-value.properties, keyword.other.definition.properties	#0083080	—
markup.inserted.diff, meta.diff.header.to-file	#067D17	—
markup.deleted.diff, meta.diff.header.from-file	#DE1B2E	—
markup.changed.diff	#0033B3	—
meta.diff.range.unified	#9E880D	—
log.error, markup.error.log	#DE1B2E	—
log.warning, markup.warning.log	#8C4F00	—
log.info, markup.info.log	#0033B3	—
log.date, constant.other.timestamp.log	#9E880D	—
keyword.todo, comment.line.todo, keyword.other.todo	#008DDE	italic
keyword.fixme, comment.line.fixme, keyword.other.fixme	#DE1B2E	italic bold

Shiki preview

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

export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id  
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}