Oceanic Wind

Name: Oceanic Wind
Author: Javier Fernández

Publisher: Javier FernándezThemes in package: 3

Theme based on color combinations from Oceanic Next replaced and customized with Tailwind CSS color palette.

Open in VS Code GitHub

Color themes

VS Code preview

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

Oceanic Wind — Oceanic Wind

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#ffffff
activityBar.background#3f3f46
activityBar.dropBorder#2563eb
activityBar.foreground#ffffff
activityBar.inactiveForeground#ffffff66
activityBarBadge.background#2563eb
activityBarBadge.foreground#eff6ff
badge.background#3f3f46
badge.foreground#fafafa
banner.background#1e40af
banner.foreground#ffffff
banner.iconForeground#0ea5e9
breadcrumb.activeSelectionForeground#f4f4f5
breadcrumb.background#27272a
breadcrumb.focusForeground#f4f4f5
breadcrumb.foreground#a1a1aa
breadcrumbPicker.background#18181b
button.background#2563eb
button.foreground#ffffff
button.hoverBackground#3b82f6
checkbox.background#2563eb
checkbox.border#3f3f46
checkbox.foreground#f4f4f5
debugConsole.errorForeground#fb7185
debugConsole.infoForeground#0ea5e9
debugConsole.sourceForeground#f4f4f5
debugConsole.warningForeground#f59e0b
debugConsoleInputIcon.foreground#f4f4f5
debugExceptionWidget.background#7f1d1d
debugExceptionWidget.border#b91c1c
debugIcon.breakpointCurrentStackframeForeground#facc15
debugIcon.breakpointDisabledForeground#71717a
debugIcon.breakpointForeground#dc2626
debugIcon.breakpointStackframeForeground#86efac
debugIcon.breakpointUnverifiedForeground#71717a
debugIcon.continueForeground#60a5fa
debugIcon.disconnectForeground#fb7185
debugIcon.pauseForeground#60a5fa
debugIcon.restartForeground#86efac
debugIcon.startForeground#86efac
debugIcon.stepBackForeground#60a5fa
debugIcon.stepIntoForeground#60a5fa
debugIcon.stepOutForeground#60a5fa
debugIcon.stepOverForeground#60a5fa
debugIcon.stopForeground#f87171
debugTokenExpression.boolean#06b6d4
debugTokenExpression.error#fb7185
debugTokenExpression.name#a78bfa
debugTokenExpression.number#fb923c
debugTokenExpression.string#86efac
debugTokenExpression.value#f4f4f599
debugToolBar.background#18181b
debugToolBar.border#3f3f46
debugView.exceptionLabelBackground#be123c
debugView.exceptionLabelForeground#f4f4f5
debugView.stateLabelBackground#a1a1aa44
debugView.stateLabelForeground#f4f4f5
debugView.valueChangedHighlight#0ea5e9
descriptionForeground#f4f4f5b3
diffEditor.diagonalFill#f4f4f533
diffEditor.insertedTextBackground#22c55e33
diffEditor.removedTextBackground#ef444433
dropdown.background#3f3f46
dropdown.border#3f3f46
dropdown.foreground#fafafa
editor.background#27272a
editor.findMatchBackground#f973167a
editor.findMatchHighlightBackground#ea580c55
editor.findRangeHighlightBackground#3f3f4666
editor.focusedStackFrameHighlightBackground#4ade804d
editor.foldBackground#1d4ed84d
editor.foreground#e2e8f0
editor.hoverHighlightBackground#1d4ed875
editor.inactiveSelectionBackground#3b82f64d
editor.inlineValuesBackground#facc1533
editor.inlineValuesForeground#ffffff80
editor.lineHighlightBackground#64748b57
editor.linkedEditingBackground#ef44444d
editor.rangeHighlightBackground#64748b57
editor.selectionBackground#3b82f666
editor.selectionHighlightBackground#3b82f64d
editor.selectionHighlightBorder#71717a
editor.snippetFinalTabstopHighlightBorder#3b82f6
editor.snippetTabstopHighlightBackground#71717a4d
editor.stackFrameHighlightBackground#fbbf2433
editor.symbolHighlightBackground#f973167a
editor.wordHighlightBackground#52525bb8
editor.wordHighlightStrongBackground#0c4a6eb8
editorBracketHighlight.foreground1#facc15
editorBracketHighlight.foreground2#e879f9
editorBracketHighlight.foreground3#60a5fa
editorBracketHighlight.unexpectedBracket.foreground#ef4444
editorBracketMatch.background#166534ad
editorBracketMatch.border#a1a1aa
editorCursor.background#52525b
editorCursor.foreground#d4d4d8
editorError.foreground#ef4444
editorGhostText.foreground#ffffff56
editorGroup.border#52525b
editorGroup.dropBackground#52525b80
editorGroupHeader.noTabsBackground#3f3f46
editorGroupHeader.tabsBackground#27272a
editorGutter.addedBackground#4d7c0f
editorGutter.background#27272a
editorGutter.commentRangeForeground#d4d4d8
editorGutter.deletedBackground#991b1b
editorGutter.foldingControlForeground#d4d4d8
editorGutter.modifiedBackground#0891b2
editorHint.foreground#f4f4f5b3
editorHoverWidget.background#18181b
editorHoverWidget.border#52525b
editorHoverWidget.foreground#f4f4f5
editorIndentGuide.activeBackground#e4e4e786
editorIndentGuide.background#e4e4e729
editorInfo.foreground#0ea5e9
editorInlayHint.background#ffffff99
editorInlayHint.foreground#ffffffcc
editorLightBulb.foreground#facc15
editorLightBulbAutoFix.foreground#60a5fa
editorLineNumber.activeForeground#60a5fa
editorLineNumber.foreground#a1a1aa
editorLink.activeForeground#60a5fa
editorMarkerNavigation.background#27272a
editorMarkerNavigationError.background#ef4444
editorMarkerNavigationError.headerBackground#ef444433
editorMarkerNavigationInfo.background#0ea5e9
editorMarkerNavigationInfo.headerBackground#0ea5e933
editorMarkerNavigationWarning.background#fbbf24
editorMarkerNavigationWarning.headerBackground#fbbf2433
editorOverviewRuler.addedForeground#4d7c0f
editorOverviewRuler.border#52525b
editorOverviewRuler.bracketMatchForeground#a1a1aa
editorOverviewRuler.commonContentForeground#52525b66
editorOverviewRuler.currentContentForeground#2dd4bf80
editorOverviewRuler.deletedForeground#991b1b
editorOverviewRuler.errorForeground#dc2626b3
editorOverviewRuler.findMatchForeground#f59e0bb3
editorOverviewRuler.incomingContentForeground#0ea5e980
editorOverviewRuler.infoForeground#0ea5e9
editorOverviewRuler.modifiedForeground#0891b2
editorOverviewRuler.rangeHighlightForeground#0369a1b3
editorOverviewRuler.selectionHighlightForeground#3b82f64d
editorOverviewRuler.warningForeground#f59e0b
editorOverviewRuler.wordHighlightForeground#52525bb8
editorOverviewRuler.wordHighlightStrongForeground#0c4a6eb8
editorRuler.foreground#52525b
editorSuggestWidget.background#18181b
editorSuggestWidget.border#52525b
editorSuggestWidget.focusHighlightForeground#0ea5e9
editorSuggestWidget.foreground#f4f4f5
editorSuggestWidget.highlightForeground#0ea5e9
editorSuggestWidget.selectedBackground#1e40af
editorSuggestWidget.selectedForeground#ffffff
editorSuggestWidget.selectedIconForeground#ffffff
editorUnnecessaryCode.opacity#00000099
editorWarning.foreground#fbbf24
editorWhitespace.foreground#e4e4e729
editorWidget.background#18181b
editorWidget.border#52525b
editorWidget.foreground#f4f4f5
editorWidget.resizeBorder#52525b
errorForeground#f87171
extensionBadge.remoteBackground#2563eb
extensionBadge.remoteForeground#ffffff
extensionButton.prominentBackground#2563eb
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#3b82f6
extensionIcon.starForeground#eab308
focusBorder#2563eb
foreground#f4f4f5
gitDecoration.addedResourceForeground#34d399
gitDecoration.conflictingResourceForeground#fb7185
gitDecoration.deletedResourceForeground#ef4444
gitDecoration.ignoredResourceForeground#a1a1aa
gitDecoration.modifiedResourceForeground#fb923c
gitDecoration.renamedResourceForeground#4ade80
gitDecoration.stageDeletedResourceForeground#ef4444
gitDecoration.stageModifiedResourceForeground#fb923c
gitDecoration.submoduleResourceForeground#93c5fd
gitDecoration.untrackedResourceForeground#4ade80
icon.foreground#d4d4d8
input.background#3f3f46
input.foreground#f4f4f5
input.placeholderForeground#f4f4f580
inputOption.activeBackground#2563eb
inputOption.activeBorder#2563eb00
inputOption.activeForeground#ffffff
inputValidation.errorBackground#7f1d1d
inputValidation.errorBorder#b91c1c
inputValidation.errorForeground#fca5a5
inputValidation.infoBackground#1e3a8a
inputValidation.infoBorder#1d4ed8
inputValidation.infoForeground#93c5fd
inputValidation.warningBackground#713f12
inputValidation.warningBorder#a16207
inputValidation.warningForeground#fde047
keybindingLabel.background#71717a4d
keybindingLabel.border#3f3f4699
keybindingLabel.bottomBorder#52525b99
keybindingLabel.foreground#f4f4f5
list.activeSelectionBackground#1e40af
list.activeSelectionForeground#ffffff
list.activeSelectionIconForeground#f4f4f5
list.deemphasizedForeground#a1a1aa
list.dropBackground#1e3a8a
list.errorForeground#fca5a5
list.filterMatchBackground#ea580c54
list.focusHighlightForeground#93c5fd
list.focusOutline#1e40af
list.highlightForeground#60a5fa
list.hoverBackground#3f3f46
list.hoverForeground#ffffff
list.inactiveSelectionBackground#1e40af
list.inactiveSelectionForeground#d4d4d8
list.inactiveSelectionIconForeground#d4d4d8
list.invalidItemForeground#fcd34d
list.warningForeground#fcd34d
listFilterWidget.background#be123c
listFilterWidget.noMatchesOutline#d4d4d8
listFilterWidget.outline#e11d48
menu.background#3f3f46
menu.foreground#fafafa
menu.selectionBackground#1e40af
menu.selectionForeground#ffffff
menu.separatorBackground#d4d4d8
menubar.selectionBackground#ffffff1a
menubar.selectionForeground#f4f4f5
merge.commonContentBackground#52525b33
merge.commonHeaderBackground#52525b80
merge.currentContentBackground#2dd4bf33
merge.currentHeaderBackground#2dd4bf80
merge.incomingContentBackground#0ea5e933
merge.incomingHeaderBackground#0ea5e980
minimap.errorHighlight#b91c1c
minimap.findMatchHighlight#f59e0b
minimap.selectionHighlight#0369a1
minimap.warningHighlight#eab308
minimapGutter.addedBackground#4d7c0f
minimapGutter.deletedBackground#991b1b
minimapGutter.modifiedBackground#0891b2
minimapSlider.activeBackground#a1a1aa8c
minimapSlider.background#71717a8c
minimapSlider.hoverBackground#a1a1aa8c
notebook.cellBorderColor#1e40af
notebook.cellEditorBackground#f4f4f50a
notebook.cellInsertionIndicator#2563eb
notebook.cellStatusBarItemHoverBackground#ffffff26
notebook.cellToolbarSeparator#71717a59
notebook.focusedCellBorder#2563eb
notebook.focusedEditorBorder#2563eb
notebook.inactiveFocusedCellBorder#1e40af
notebook.selectedCellBackground#1e40af
notebook.selectedCellBorder#1e40af
notebook.symbolHighlightBackground#ffffff0b
notebookScrollbarSlider.activeBackground#d4d4d866
notebookScrollbarSlider.background#71717a66
notebookScrollbarSlider.hoverBackground#71717ab3
notebookStatusErrorIcon.foreground#fb7185
notebookStatusRunningIcon.foreground#f4f4f5
notebookStatusSuccessIcon.foreground#86efac
notificationCenterHeader.background#18181b
notificationLink.foreground#60a5fa
notifications.background#27272a
notifications.foreground#f4f4f5
notificationsErrorIcon.foreground#ef4444
notificationsInfoIcon.foreground#0ea5e9
notificationsWarningIcon.foreground#f59e0b
panel.background#27272a
panel.border#3f3f46
panelSection.border#71717a59
panelSection.dropBackground#52525b80
panelSectionHeader.background#71717a33
panelSectionHeader.foreground#f4f4f5
panelTitle.activeBorder#e4e4e7
panelTitle.activeForeground#e4e4e7
panelTitle.inactiveForeground#e4e4e799
peekView.border#0ea5e9
peekViewEditor.background#1e3a8a66
peekViewEditor.matchHighlightBackground#ea580c55
peekViewEditorGutter.background#1e3a8a66
peekViewResult.background#18181b
peekViewResult.fileForeground#ffffff
peekViewResult.matchHighlightBackground#ea580c4d
peekViewResult.selectionBackground#3b82f666
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#0ea5e91a
peekViewTitleDescription.foreground#f4f4f5b3
peekViewTitleLabel.foreground#ffffff
pickerGroup.border#3f3f46
pickerGroup.foreground#60a5fa
ports.iconRunningProcessForeground#2563eb
problemsErrorIcon.foreground#ef4444
problemsInfoIcon.foreground#0ea5e9
problemsWarningIcon.foreground#fbbf24
progressBar.background#2563eb
quickInput.background#18181b
quickInput.foreground#f4f4f5
quickInputList.focusBackground#1e40af
quickInputList.focusForeground#ffffff
quickInputList.focusIconForeground#ffffff
quickInputTitle.background#ffffff1a
sash.hoverBorder#2563eb
scrollbar.shadow#000000
scrollbarSlider.activeBackground#a1a1aa66
scrollbarSlider.background#71717acc
scrollbarSlider.hoverBackground#71717ab3
searchEditor.findMatchBackground#f973167a
settings.checkboxBackground#2563eb
settings.checkboxBorder#3f3f46
settings.checkboxForeground#f4f4f5
settings.dropdownBackground#3f3f46
settings.dropdownBorder#3f3f46
settings.dropdownForeground#f4f4f5
settings.dropdownListBorder#71717a
settings.focusedRowBackground#a1a1aa1a
settings.focusedRowBorder#ffffff1f
settings.headerForeground#e4e4e7
settings.modifiedItemIndicator#2563eb
settings.numberInputBackground#3f3f46
settings.numberInputForeground#f4f4f5
settings.rowHoverBackground#a1a1aa1a
settings.textInputBackground#3f3f46
settings.textInputForeground#f4f4f5
sideBar.background#27272a
sideBar.border#3f3f46
sideBar.dropBackground#71717a80
sideBar.foreground#f4f4f5
sideBarSectionHeader.background#71717a33
sideBarSectionHeader.foreground#f4f4f5
sideBarTitle.foreground#f4f4f5
statusBar.background#2563eb
statusBar.debuggingBackground#c2410c
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#701a75
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#ffffff2e
statusBarItem.errorBackground#7f1d1d
statusBarItem.errorForeground#ffffff
statusBarItem.hoverBackground#ffffff1f
statusBarItem.remoteBackground#2563eb
statusBarItem.remoteForeground#ffffff
statusBarItem.warningBackground#f59e0b
statusBarItem.warningForeground#ffffff
symbolIcon.arrayForeground#f4f4f5
symbolIcon.booleanForeground#f4f4f5
symbolIcon.classForeground#f59e0b
symbolIcon.colorForeground#f4f4f5
symbolIcon.constantForeground#f4f4f5
symbolIcon.constructorForeground#c084fc
symbolIcon.enumeratorForeground#60a5fa
symbolIcon.enumeratorMemberForeground#60a5fa
symbolIcon.eventForeground#f59e0b
symbolIcon.fieldForeground#60a5fa
symbolIcon.fileForeground#f4f4f5
symbolIcon.folderForeground#f4f4f5
symbolIcon.functionForeground#c084fc
symbolIcon.interfaceForeground#60a5fa
symbolIcon.keyForeground#f4f4f5
symbolIcon.keywordForeground#f4f4f5
symbolIcon.methodForeground#c084fc
symbolIcon.moduleForeground#f4f4f5
symbolIcon.namespaceForeground#f4f4f5
symbolIcon.nullForeground#f4f4f5
symbolIcon.numberForeground#f4f4f5
symbolIcon.objectForeground#f4f4f5
symbolIcon.operatorForeground#f4f4f5
symbolIcon.packageForeground#f4f4f5
symbolIcon.propertyForeground#f4f4f5
symbolIcon.referenceForeground#f4f4f5
symbolIcon.snippetForeground#f4f4f5
symbolIcon.stringForeground#f4f4f5
symbolIcon.structForeground#f4f4f5
symbolIcon.textForeground#f4f4f5
symbolIcon.typeParameterForeground#f4f4f5
symbolIcon.unitForeground#f4f4f5
symbolIcon.variableForeground#60a5fa
tab.activeBackground#3f3f46
tab.activeBorder#f5f5f5
tab.activeForeground#ffffff
tab.activeModifiedBorder#3b82f6
tab.border#3f3f46
tab.inactiveBackground#27272a
tab.inactiveForeground#a1a1aa
tab.inactiveModifiedBorder#3b82f6
tab.lastPinnedBorder#52525b
tab.unfocusedActiveForeground#d4d4d8
tab.unfocusedActiveModifiedBorder#71717a
tab.unfocusedInactiveBackground#27272a
tab.unfocusedInactiveForeground#a1a1aa
tab.unfocusedInactiveModifiedBorder#52525b
terminal.ansiBlack#000000
terminal.ansiBlue#0284c7
terminal.ansiBrightBlack#71717a
terminal.ansiBrightBlue#38bdf8
terminal.ansiBrightCyan#22d3ee
terminal.ansiBrightGreen#4ade80
terminal.ansiBrightMagenta#e879f9
terminal.ansiBrightRed#f87171
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#facc15
terminal.ansiCyan#0891b2
terminal.ansiGreen#22c55e
terminal.ansiMagenta#c026d3
terminal.ansiRed#dc2626
terminal.ansiWhite#ffffff
terminal.ansiYellow#eab308
terminal.border#71717a59
terminal.dropBackground#52525b80
terminal.foreground#f4f4f5
terminal.selectionBackground#8b5cf64d
textBlockQuote.background#3f3f46
textBlockQuote.border#2563eb
textLink.activeForeground#60a5fa
textLink.foreground#60a5fa
textPreformat.foreground#fcd34d
titleBar.activeBackground#3f3f46
titleBar.activeForeground#f4f4f5
titleBar.border#27272a
titleBar.inactiveBackground#3f3f4699
titleBar.inactiveForeground#f4f4f599
toolbar.hoverBackground#3b82f680
tree.indentGuidesStroke#52525b
tree.tableColumnsBorder#f4f4f520
welcomePage.progress.background#3f3f46
welcomePage.progress.foreground#60a5fa
welcomePage.tileBackground#18181b
welcomePage.tileHoverBackground#18181b40
widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#64748b	italic
variable, string constant.other.placeholder	#e2e8f0	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#f87171	—
keyword, storage.type, storage.modifier	#d8b4fe	—
keyword.operator	#14b8a6	—
constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#7dd3fc	—
support.type.property-name.css	#fcd34d	—
keyword.control	#d8b4fe	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#f87171	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#60a5fa	—
meta.block variable.other	#e2e8f0	—
support.other.variable, string.other.link	#f87171	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#fb923c	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#86efac	—
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#fcd34d	—
support.type	#fcd34d	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#fcd34d	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#f87171	—
variable.language	#f87171	italic
entity.name.method.js	#60a5fa	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#60a5fa	—
entity.other.attribute-name	#d8b4fe	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#fcd34d	italic
entity.other.attribute-name.class	#c084fc	—
source.sass keyword.control	#60a5fa	—
markup.inserted	#86efac	—
markup.deleted	#f87171	—
markup.changed	#d8b4fe	—
string.regexp	#7dd3fc	—
constant.character.escape	#7dd3fc	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#60a5fa	italic
source.js constant.other.object.key.js string.unquoted.label.js	#f87171	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#fcd34d	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#d8b4fe	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#fb923c	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f87171	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#94a3b8	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#60a5fa	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#86efac	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#fcd34d	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#d8b4fe	—
text.html.markdown, punctuation.definition.list_item.markdown	#e2e8f0	—
text.html.markdown markup.inline.raw.markdown	#d8b4fe	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#64748b	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#86efac	—
markup.italic	#f87171	italic
markup.bold, markup.bold string	#f87171	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#f87171	bold
markup.underline	#fb923c	underline
markup.quote punctuation.definition.blockquote.markdown	#65737e	—
markup.quote	—	italic
string.other.link.title.markdown	#60a5fa	—
string.other.link.description.title.markdown	#d8b4fe	—
constant.other.reference.link.markdown	#fcd34d	—
markup.raw.block	#d8b4fe	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#eeffff	—
variable.language.fenced.markdown	#65737e	—
meta.separator	#65737e	bold
markup.table	#eeffff	—
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx	#e2e8f0	—
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx	#fb923c	—

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}!`;
}