Skip to main content
Coding Theme

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.background#070E1B
  • activityBar.border#050A14
  • activityBar.dropBackground#050A14
  • activityBar.foreground#616C84
  • activityBar.inactiveForeground#3D485F
  • activityBarBadge.background#ecc48d
  • activityBarBadge.foreground#332D0F
  • badge.background#1B273E
  • badge.foreground#D6D9E0
  • breadcrumb.activeSelectionForeground#D6D9E0
  • breadcrumb.background#0E1729
  • breadcrumb.focusForeground#BBC1CD
  • breadcrumb.foreground#A2AABB
  • breadcrumbPicker.background#162137
  • button.background#ecc48d
  • button.foreground#332D0F
  • button.hoverBackground#ecc48d
  • debugExceptionWidget.background#162137
  • debugExceptionWidget.border#162137
  • debugToolBar.background#162137
  • debugToolBar.border#162137
  • descriptionForeground#758096
  • diffEditor.border#0A1222
  • diffEditor.insertedTextBackground#BBD99E1A
  • diffEditor.removedTextBackground#f870861A
  • dropdown.background#121C30
  • dropdown.border#162137
  • dropdown.foreground#D6D9E0
  • dropdown.listBackground#121C30
  • editor.background#0E1729
  • editor.findMatchBackground#404D66E6
  • editor.findMatchBorder#26334CE6
  • editor.findMatchHighlightBackground#404D66E6
  • editor.findRangeHighlightBackground#404D66E6
  • editor.focusedStackFrameHighlightBackground#1B273E
  • editor.foreground#D6D9E0
  • editor.hoverHighlightBackground#26334CE6
  • editor.inactiveSelectionBackground#26334CB3
  • editor.lineHighlightBackground#121C30
  • editor.rangeHighlightBackground#26334CE6
  • editor.selectionBackground#26334CCC
  • editor.selectionForeground#F2F2F2
  • editor.selectionHighlightBackground#26334CCC
  • editor.selectionHighlightBorder#26334CCC
  • editor.snippetFinalTabstopHighlightBackground#26334CE6
  • editor.snippetFinalTabstopHighlightBorder#26334CE6
  • editor.snippetTabstopHighlightBackground#26334CE6
  • editor.snippetTabstopHighlightBorder#26334CE6
  • editor.stackFrameHighlightBackground#162137
  • editor.wordHighlightBackground#26334CE6
  • editor.wordHighlightBorder#26334CE6
  • editor.wordHighlightStrongBackground#26334CE6
  • editor.wordHighlightStrongBorder#26334CE6
  • editorBracketMatch.background#26334CCC
  • editorBracketMatch.border#26334CCC
  • editorCodeLens.foreground#A2AABB
  • editorCursor.background#332D0F
  • editorCursor.foreground#ecc48d
  • editorError.foreground#f87086
  • editorGroup.border#0A1222
  • editorGroup.dropBackground#0A1222CC
  • editorGroup.emptyBackground#0E1729
  • editorGroup.focusedEmptyBorder#162137
  • editorGroupHeader.noTabsBackground#0E1729
  • editorGroupHeader.tabsBackground#0A1222
  • editorGroupHeader.tabsBorder#0E1729
  • editorGutter.addedBackground#BBD99E
  • editorGutter.background#0E1729
  • editorGutter.commentRangeForeground#8A94A8
  • editorGutter.deletedBackground#F2B09A
  • editorGutter.modifiedBackground#8EACE3
  • editorHint.foreground#c792ea
  • editorHoverWidget.background#162137
  • editorHoverWidget.border#1B273E
  • editorIndentGuide.activeBackground#26334C
  • editorIndentGuide.background#202C45
  • editorInfo.foreground#92D8E6
  • editorLineNumber.activeForeground#A2AABB
  • editorLineNumber.foreground#4E5A71
  • editorLink.activeForeground#ecc48d
  • editorMarkerNavigation.background#162137
  • editorMarkerNavigationError.background#1B273E
  • editorMarkerNavigationInfo.background#1B273E
  • editorMarkerNavigationWarning.background#1B273E
  • editorOverviewRuler.addedForeground#BBD99E
  • editorOverviewRuler.border#0A1222
  • editorOverviewRuler.bracketMatchForeground#c792ea
  • editorOverviewRuler.commonContentForeground#26334C
  • editorOverviewRuler.currentContentForeground#8EACE3
  • editorOverviewRuler.deletedForeground#F2B09A
  • editorOverviewRuler.errorForeground#f87086
  • editorOverviewRuler.findMatchForeground#26334CCC
  • editorOverviewRuler.incomingContentForeground#BBD99E
  • editorOverviewRuler.infoForeground#92D8E6
  • editorOverviewRuler.modifiedForeground#8EACE3
  • editorOverviewRuler.rangeHighlightForeground#26334CCC
  • editorOverviewRuler.selectionHighlightForeground#26334CCC
  • editorOverviewRuler.warningForeground#ecc48d
  • editorOverviewRuler.wordHighlightForeground#26334CCC
  • editorOverviewRuler.wordHighlightStrongForeground#26334CCC
  • editorPane.background#0E1729
  • editorRuler.foreground#202C45
  • editorSuggestWidget.background#162137
  • editorSuggestWidget.border#1B273E
  • editorSuggestWidget.foreground#BBC1CD
  • editorSuggestWidget.highlightForeground#ecc48d
  • editorSuggestWidget.selectedBackground#202C45
  • editorUnnecessaryCode.opacity#D6D9E0CC
  • editorWarning.foreground#ecc48d
  • editorWhitespace.foreground#4E5A71
  • editorWidget.background#162137
  • editorWidget.border#1B273E
  • editorWidget.resizeBorder#162137
  • errorForeground#f87086
  • extensionButton.prominentBackground#8EACE3
  • extensionButton.prominentForeground#0F2234
  • extensionButton.prominentHoverBackground#ACD1F5
  • focusBorder#26334C
  • foreground#BBC1CD
  • gitDecoration.addedResourceForeground#BBD99E
  • gitDecoration.conflictingResourceForeground#f87086
  • gitDecoration.deletedResourceForeground#f87086
  • gitDecoration.ignoredResourceForeground#616C84
  • gitDecoration.modifiedResourceForeground#8EACE3
  • gitDecoration.submoduleResourceForeground#8A94A8
  • gitDecoration.untrackedResourceForeground#BBD99E
  • input.background#121C30
  • input.border#162137
  • input.foreground#BBC1CD
  • input.placeholderForeground#8A94A8
  • inputOption.activeBorder#8EACE3
  • inputValidation.errorBackground#f87086
  • inputValidation.errorBorder#f87086
  • inputValidation.errorForeground#330F0F
  • inputValidation.infoBackground#8EACE3
  • inputValidation.infoBorder#8EACE3
  • inputValidation.infoForeground#0F2234
  • inputValidation.warningBackground#ecc48d
  • inputValidation.warningBorder#ecc48d
  • inputValidation.warningForeground#332D0F
  • list.activeSelectionBackground#1B273E
  • list.activeSelectionForeground#D6D9E0
  • list.dropBackground#070E1B
  • list.errorForeground#f87086
  • list.focusBackground#121C30
  • list.focusForeground#BBC1CD
  • list.highlightForeground#ecc48d
  • list.hoverBackground#121C30
  • list.hoverForeground#BBC1CD
  • list.inactiveFocusBackground#0E1729
  • list.inactiveSelectionBackground#162137
  • list.inactiveSelectionForeground#BBC1CD
  • list.invalidItemForeground#f87086
  • list.warningForeground#ecc48d
  • listFilterWidget.background#1B273E
  • listFilterWidget.noMatchesOutline#f87086
  • listFilterWidget.outline#202C45
  • menu.background#162137
  • menu.foreground#BBC1CD
  • menu.selectionBackground#202C45
  • menu.selectionBorder#202C45
  • menu.selectionForeground#D6D9E0
  • menu.separatorBackground#26334C
  • menubar.selectionBackground#0E1729
  • menubar.selectionBorder#0E1729
  • menubar.selectionForeground#A2AABB
  • merge.border#26334C00
  • merge.commonContentBackground#202C451A
  • merge.commonHeaderBackground#202C4533
  • merge.currentContentBackground#8EACE31A
  • merge.currentHeaderBackground#8EACE333
  • merge.incomingContentBackground#BBD99E1A
  • merge.incomingHeaderBackground#BBD99E33
  • notificationCenter.border#1B273E
  • notificationCenterHeader.background#1B273E
  • notificationCenterHeader.foreground#A2AABB
  • notificationLink.foreground#ecc48d
  • notifications.background#162137
  • notifications.border#1B273E
  • notifications.foreground#A2AABB
  • notificationToast.border#1B273E
  • panel.background#0A1222
  • panel.border#070E1B
  • panel.dropBackground#070E1BB3
  • panelTitle.activeBorder#ecc48d
  • panelTitle.activeForeground#D6D9E0
  • panelTitle.inactiveForeground#A2AABB
  • peekView.border#1B273E
  • peekViewEditor.background#162137
  • peekViewEditor.matchHighlightBackground#26334CE6
  • peekViewEditor.matchHighlightBorder#26334CE6
  • peekViewEditorGutter.background#162137
  • peekViewResult.background#162137
  • peekViewResult.fileForeground#8A94A8
  • peekViewResult.lineForeground#8A94A8
  • peekViewResult.matchHighlightBackground#26334CE6
  • peekViewResult.selectionBackground#26334CCC
  • peekViewResult.selectionForeground#D6D9E0
  • peekViewTitle.background#162137
  • peekViewTitleDescription.foreground#8A94A8
  • peekViewTitleLabel.foreground#BBC1CD
  • pickerGroup.border#121C30
  • pickerGroup.foreground#616C84
  • progressBar.background#ecc48d
  • scrollbar.shadow#0A1222
  • scrollbarSlider.activeBackground#26334C99
  • scrollbarSlider.background#26334C80
  • scrollbarSlider.hoverBackground#26334C66
  • selection.background#26334CCC
  • settings.checkboxBackground#121C30
  • settings.checkboxBorder#162137
  • settings.checkboxForeground#BBC1CD
  • settings.dropdownBackground#121C30
  • settings.dropdownBorder#162137
  • settings.dropdownForeground#BBC1CD
  • settings.dropdownListBorder#162137
  • settings.headerForeground#D6D9E0
  • settings.modifiedItemIndicator#ecc48d
  • settings.numberInputBackground#121C30
  • settings.numberInputBorder#162137
  • settings.numberInputForeground#BBC1CD
  • settings.textInputBackground#121C30
  • settings.textInputBorder#162137
  • settings.textInputForeground#BBC1CD
  • sideBar.background#0A1222
  • sideBar.border#070E1B
  • sideBar.dropBackground#070E1BB3
  • sideBar.foreground#8A94A8
  • sideBarSectionHeader.background#0A1222
  • sideBarSectionHeader.border#050A14
  • sideBarSectionHeader.foreground#758096
  • sideBarTitle.foreground#758096
  • statusBar.background#070E1B
  • statusBar.border#050A14
  • statusBar.debuggingBackground#070E1B
  • statusBar.debuggingBorder#050A14
  • statusBar.debuggingForeground#758096
  • statusBar.foreground#758096
  • statusBar.noFolderBackground#070E1B
  • statusBar.noFolderBorder#050A14
  • statusBar.noFolderForeground#758096
  • statusBarItem.activeBackground#0A1222
  • statusBarItem.hostBackground#0A1222
  • statusBarItem.hoverBackground#0E1729
  • statusBarItem.prominentBackground#050A14
  • statusBarItem.prominentHoverBackground#0E1729
  • tab.activeBackground#0E1729
  • tab.activeBorderTop#ecc48d
  • tab.activeForeground#D6D9E0
  • tab.activeModifiedBorder#162137
  • tab.border#070E1B
  • tab.hoverBackground#121C30
  • tab.hoverBorder#162137
  • tab.inactiveBackground#0A1222
  • tab.inactiveForeground#A2AABB
  • tab.inactiveModifiedBorder#121C30
  • tab.unfocusedActiveBorderTop#26334C
  • tab.unfocusedActiveForeground#BBC1CD
  • tab.unfocusedActiveModifiedBorder#121C30
  • tab.unfocusedHoverBackground#121C30
  • tab.unfocusedHoverBorder#162137
  • tab.unfocusedInactiveForeground#8A94A8
  • tab.unfocusedInactiveModifiedBorder#0E1729
  • terminal.ansiBlack#2E384D
  • terminal.ansiBlue#8EACE3
  • terminal.ansiBrightBlack#3D485F
  • terminal.ansiBrightBlue#ACD1F5
  • terminal.ansiBrightCyan#A5E0EC
  • terminal.ansiBrightGreen#C9E2AF
  • terminal.ansiBrightMagenta#CCB3FF
  • terminal.ansiBrightRed#FFB3B3
  • terminal.ansiBrightWhite#F2F2F2
  • terminal.ansiBrightYellow#ecc48d
  • terminal.ansiCyan#92D8E6
  • terminal.ansiGreen#BBD99E
  • terminal.ansiMagenta#c792ea
  • terminal.ansiRed#f87086
  • terminal.ansiWhite#D6D9E0
  • terminal.ansiYellow#ecc48d
  • terminal.background#0A1222
  • terminal.border#070E1B
  • terminal.foreground#D6D9E0
  • terminal.selectionBackground#26334C80
  • terminalCursor.background#332D0F
  • terminalCursor.foreground#ecc48d
  • textBlockQuote.background#121C30
  • textBlockQuote.border#8EACE380
  • textCodeBlock.background#162137
  • textLink.activeForeground#ecc48d
  • textLink.foreground#ecc48d
  • textPreformat.foreground#8EACE3
  • textSeparator.foreground#26334C
  • titleBar.activeBackground#070E1B
  • titleBar.activeForeground#758096
  • titleBar.border#050A14
  • titleBar.inactiveBackground#070E1B
  • titleBar.inactiveForeground#616C84
  • walkThrough.embeddedEditorBackground#0A1222
  • welcomePage.background#0E1729
  • welcomePage.buttonBackground#121C30
  • welcomePage.buttonHoverBackground#162137
  • widget.shadow#0A122280

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file#a2bffc
markup.deleted.diff#EF535090
markup.inserted.diff#addb67ff
Global settings#ced2d6
comment#596378italic
string#c792ea
string.quoted, variable.other.readwrite.js#ecc48d
support.constant.math, support.type#ced2d6
constant.numeric, constant.character.numeric#F78C6C
constant.language, punctuation.definition.constant, variable.other.constant#ced2d6
constant.character, constant.other, constant.language.undefined#ffa7c4
constant.character.escape#ffa7c4
string.regexp, string.regexp keyword.other#7986E7
meta.function punctuation.separator.comma#c792ea
variable#ced2d6
punctuation.accessor, keyword#c792eaitalic
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx#ffa7c4
storage.type, storage.modifier#ffa7c4italic
storage.type.function.arrow.js
entity.name.class, meta.class entity.name.type.class#ffcb8b
entity.other.inherited-class#ced2d6
entity.name.function#8EACE3
punctuation.definition.tag, meta.tag#c792ea
entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#ffa7c4
entity.other.attribute-name#c792eaitalic
entity.name.tag.custom#ced2d6
support.constant.meta.property-value#ffa7c4
support.class#8EACE3
support.variable.dom#ced2d6
invalid#ced2d6
invalid.deprecated#ced2d6
keyword.operator#c792ea
keyword.operator.relational#c792ea
keyword.operator.assignment#c792ea
keyword.operator.arithmetic#c792ea
keyword.operator.bitwise#c792ea
keyword.operator.increment#c792ea
keyword.operator.ternary#c792ea
comment.line.double-slash#596378
object#cdebf7
constant.language.null#f87086
meta.brace#c792ea
meta.delimiter.period#c792ea
punctuation.definition.string#c792ea
punctuation.definition.string.begin.markdown#f87086
constant.language.boolean#f87086
object.comma#ced2d6
variable.parameter.function#ffa7c4
variable.parameter.jsitalic
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#80CBC4
meta.property-list entity.name.tag.reference#57eaf1
constant.other.color.rgb-value punctuation.definition.constant#ffa7c4
constant.other.color#FFEB95
keyword.other.unit#FFEB95
meta.selector#c792ea
entity.other.attribute-name.id#FAD430
meta.property-name#80CBC4
entity.name.tag.doctype, meta.tag.sgml.doctype#c792ea
punctuation.definition.parameters#c792ea
punctuation.definintion.string#c792ea
keyword.control.operator#ffa7c4
keyword.operator.logical#c792ea
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#ced2d6
variable.other.object.property#ced2d6
variable.other.object.js
keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx#ffa7c4italic
keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts#c792eaitalic
keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control, keyword.other#ffa7c4italic
message.error#ffa7c4
support.function#8EACE3
invalid.broken#020e14
invalid.unimplemented#ced2d6
invalid.illegal#ced2d6
variable.language#ffa7c4
support.variable.property#ffa7c4
variable.function#ced2d6
variable.interpolation#ec5f67
meta.function-call#8EACE3
meta.array, meta.object#ced2d6
punctuation.section.embedded#c792ea
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, punctuation.terminator.statement, punctuation.definition.block, punctuation.separator.comma, punctuation.separator.parameter, punctuation.separator.key-value#c792ea
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#c792ea
string.template meta.template.expression#7986E7
string.template punctuation.definition.string#c792ea
italic#c792eaitalic
bold#c792eabold
quote#697098
raw#80CBC4
variable.assignment.coffee#31e1eb
variable.parameter.function.coffee#ced2d6
variable.assignment.coffee#ffa7c4
variable.other.readwrite.cs#ced2d6
entity.name.type.class.cs, storage.type.cs#8EACE3
entity.name.type.namespace.cs#B2CCD6
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css#ff6363
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#ffa7c4
keyword.other.unit.css#FFEB95
meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js#ffa7c4
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#8EACE3
source.elixir entity.name.function#c792ea
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#8EACE3
source.elixir punctuation.definition.string#c792ea
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#c792ea
source.elixir .punctuation.binary.elixir#c792ea
constant.keyword.clojure#ffa7c4
source.go meta.function-call.go#DDDDDD
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go#c792eaitalic
source.go constant.language.go, source.go constant.other.placeholder.go#f87086
entity.name.function.preprocessor.cpp, entity.scope.name.cpp#ffa7c4ff
meta.namespace-block.cpp#e0dec6
storage.type.language.primitive.cpp#f87086
meta.preprocessor.macro.cpp#ced2d6
variable.parameter#ffcb8b
variable.other.readwrite.powershell#8EACE3
support.function.powershell#ffa7c4ff
entity.other.attribute-name.id.html#c792ea
punctuation.definition.tag.html#c792ea
meta.tag.sgml.doctype.html#c792ea
meta.class entity.name.type.class.js#ffcb8b
meta.method.declaration storage.type.js#ffa7c4italic
terminator.js#c792ea
meta.js punctuation.definition.js#c792ea
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#5f7e97
variable.other.jsdoc, variable.other.phpdoc#78ccf0
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#ced2d6
variable.parameter.function.js#7986E7
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#ced2d6
variable.js, variable.other.js#ced2d6
entity.name.type.js, entity.name.type.module.js#ffcb8b
support.class.js#8EACE3
support.type.property-name.json#c792ea
support.constant.json#ced2d6
meta.structure.dictionary.value.json string.quoted.double#ecc48d
string.quoted.double.json punctuation.definition.string.json#80CBC4
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#f87086
variable.other.object.js#ffa7c4
variable.other.ruby#ced2d6
entity.name.type.class.ruby#ecc48d
constant.language.symbol.hashkey.ruby#ffa7c4
constant.language.symbol.ruby#ffa7c4
entity.name.tag.less#ffa7c4
keyword.other.unit.css#FFEB95
meta.attribute-selector.less entity.other.attribute-name.attribute#ffa7c4
markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#82b1ff
markup.italic.markdown#c792eaitalic
markup.bold.markdown#c792eabold
markup.quote.markdown#697098
markup.inline.raw.markdown#80CBC4
markup.underline.link.markdown, markup.underline.link.image.markdown#ff869a
string.other.link.title.markdown, string.other.link.description.markdown#ced2d6
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#82b1ff
punctuation.definition.metadata.markdown#ffa7c4
beginning.punctuation.definition.list.markdown#82b1ff
markup.inline.raw.string.markdown#c792ea
variable.other.php, variable.other.property.php#bec5d4
support.class.php#ffcb8b
meta.function-call.php punctuation#ced2d6
variable.other.global.php#c792ea
variable.other.global.php punctuation.definition.variable#c792ea
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape#596378
constant.language.python#f87086
variable.parameter.function.python, meta.function-call.arguments.python#8EACE3
meta.function-call.python, meta.function-call.generic.python#B2CCD6
punctuation.python#ced2d6
entity.name.function.decorator.python#c792ea
source.python variable.language.special#8EACE3
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#c792ea
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#ffa7c4
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#bec5d4
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#ffa7c4
entity.name.tag.scss, entity.name.tag.sass#ffa7c4
keyword.other.unit.scss, keyword.other.unit.sass#FFEB95
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#ced2d6
entity.name.type.ts, entity.name.type.tsx#ffcb8b
support.class.node.ts, support.class.node.tsx#ffa7c4
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#ced2d6
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#ced2d6
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#8EACE3
meta.tag.js meta.jsx.children.tsx#8EACE3
entity.name.tag.yaml#ffa7c4
variable.other.readwrite.js, variable.parameter#ced2d6
support.class.component.js, support.class.component.tsx#ffa7c4
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#ced2d6
meta.class entity.name.type.class.tsx#ffcb8b
entity.name.type.tsx, entity.name.type.module.tsx#ffcb8b
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#8EACE3
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, meta.brace, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.relational, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.type, keyword.operator, keyword, punctuation.definintion.string, punctuation, variable.other.readwrite.js, source.css, string.quoted

Shiki preview

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

Loading...