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#223c44
  • activityBar.border#192d34
  • activityBar.dropBackground#62b1cb40
  • activityBar.foreground#adc8d1
  • activityBarBadge.background#2f7289
  • activityBarBadge.foreground#e1f7ff
  • badge.background#2f7289
  • badge.foreground#e1f7ff
  • breadcrumbPicker.background#121d21
  • button.background#2f7289
  • button.foreground#e1f7ff
  • button.hoverBackground#36829b
  • debugExceptionWidget.background#121d21
  • debugExceptionWidget.border#121d21
  • debugToolBar.background#121d21
  • debugToolBar.border#192d34
  • descriptionForeground#a5d8e9
  • diffEditor.insertedTextBackground#2f7289
  • diffEditor.insertedTextBorder#2f7289
  • diffEditor.removedTextBackground#2f7289
  • diffEditor.removedTextBorder#2f7289
  • dropdown.background#223c44
  • dropdown.border#192d34
  • dropdown.foreground#e1f7ff
  • editor.background#192d34
  • editor.findMatchBackground#33596680
  • editor.findMatchHighlightBackground#3d687680
  • editor.foreground#adc8d1
  • editor.hoverHighlightBackground#335966
  • editor.inactiveSelectionBackground#467686
  • editor.lineHighlightBackground#223c44
  • editor.rangeHighlightBackground#223c44
  • editor.selectionBackground#223c44
  • editor.selectionHighlightBackground#223c44
  • editor.wordHighlightBackground#223c44
  • editor.wordHighlightStrongBackground#223c44
  • editorBracketMatch.background#121d21
  • editorBracketMatch.border#467686
  • editorCodeLens.foreground#adc8d1
  • editorCursor.background#192d34
  • editorCursor.foreground#499fbc
  • editorError.foreground#36829b
  • editorGroup.background#467686
  • editorGroup.border#121d21
  • editorGroup.dropBackground#cbbb4d40
  • editorGroupHeader.noTabsBackground#223c44
  • editorGroupHeader.tabsBackground#223c44
  • editorGroupHeader.tabsBorder#121d21
  • editorGutter.addedBackground#223c44
  • editorGutter.background#121d2164
  • editorGutter.deletedBackground#84740b
  • editorGutter.modifiedBackground#3e91ac
  • editorHoverWidget.background#121d21
  • editorHoverWidget.border#121d21
  • editorIndentGuide.activeBackground#335966
  • editorIndentGuide.background#223c44
  • editorLineNumber.activeForeground#7ba8b7
  • editorLineNumber.foreground#335966E6
  • editorMarkerNavigation.background#223c44
  • editorMarkerNavigationError.background#2f7289
  • editorMarkerNavigationWarning.background#3e91ac
  • editorOverviewRuler.commonContentForeground#499fbc
  • editorOverviewRuler.currentContentForeground#499fbc
  • editorOverviewRuler.incomingContentForeground#499fbc
  • editorRuler.foreground#adc8d1
  • editorSuggestWidget.background#223c44
  • editorSuggestWidget.border#121d21
  • editorSuggestWidget.foreground#d5d4cd
  • editorSuggestWidget.highlightForeground#ffeb66
  • editorSuggestWidget.selectedBackground#121d21
  • editorWarning.foreground#3e91ac
  • editorWhitespace.foreground#467686
  • editorWidget.background#121d21
  • editorWidget.border#121d21
  • errorForeground#2f7289
  • extensionButton.prominentBackground#2f7289
  • extensionButton.prominentForeground#e1f7ff
  • extensionButton.prominentHoverBackground#2f7289
  • focusBorder#33596680
  • foreground#adc8d1
  • gitDecoration.addedResourceForeground#7dc2d9
  • gitDecoration.conflictingResourceForeground#3e91ac
  • gitDecoration.deletedResourceForeground#84740b
  • gitDecoration.ignoredResourceForeground#335966
  • gitDecoration.modifiedResourceForeground#cbbb4d
  • gitDecoration.untrackedResourceForeground#fafaf9
  • input.background#223c44
  • input.border#335966
  • input.foreground#a5d8e9
  • input.placeholderForeground#adc8d1
  • inputOption.activeBorder#cbbb4d
  • inputValidation.errorBackground#2f7289
  • inputValidation.errorBorder#2f7289
  • inputValidation.infoBackground#192d34
  • inputValidation.infoBorder#36829b
  • inputValidation.warningBackground#3e91ac
  • inputValidation.warningBorder#3e91ac
  • list.activeSelectionBackground#335966BF
  • list.activeSelectionForeground#a5d8e9
  • list.dropBackground#cbbb4d40
  • list.errorForeground#499fbc
  • list.focusBackground#223c44
  • list.focusForeground#d6c65c
  • list.highlightForeground#d6c65c
  • list.hoverBackground#223c44
  • list.hoverForeground#d6c65c
  • list.inactiveSelectionBackground#223c44
  • list.inactiveSelectionForeground#508495
  • list.invalidItemForeground#499fbc
  • list.warningForeground#499fbc
  • merge.currentHeaderBackground#467686
  • merge.incomingHeaderBackground#36829b
  • meta.objectliteral.js#36829b
  • notificationLink.foreground#cbbb4d
  • notifications.background#121d21
  • notifications.foreground#a5d8e9
  • panel.background#121d21
  • panel.border#121d21
  • panel.dropBackground#62b1cb40
  • panelTitle.activeBorder#3d6876
  • panelTitle.activeForeground#e1f7ff
  • panelTitle.inactiveForeground#508495
  • peekView.border#223c44
  • peekViewEditor.background#192d34
  • peekViewEditor.matchHighlightBackground#2f7289
  • peekViewResult.background#192d34
  • peekViewResult.fileForeground#7ba8b7
  • peekViewResult.lineForeground#3d6876
  • peekViewResult.matchHighlightBackground#2f7289
  • peekViewResult.selectionBackground#223c44
  • peekViewResult.selectionForeground#adc8d1
  • peekViewTitle.background#121d21
  • peekViewTitleDescription.foreground#508495
  • peekViewTitleLabel.foreground#7ba8b7
  • pickerGroup.border#121d21
  • pickerGroup.foreground#a5d8e9
  • progress.background#467686
  • progressBar.background#3e91ac
  • punctuation.definition.generic.begin.html#499fbc
  • scrollbar.shadow#121d21
  • scrollbarSlider.activeBackground#3d6876
  • scrollbarSlider.background#223c44
  • scrollbarSlider.hoverBackground#335966
  • selection.background#3e91ac
  • sideBar.background#121d21
  • sideBar.border#192d3480
  • sideBar.dropBackground#62b1cb40
  • sideBar.foreground#508495
  • sideBarSectionHeader.background#223c44
  • sideBarSectionHeader.foreground#adc8d1
  • sideBarTitle.foreground#adc8d1
  • source.elm#467686
  • statusBar.background#192d34
  • statusBar.border#223c44
  • statusBar.debuggingBackground#192d34
  • statusBar.debuggingBorder#192d34
  • statusBar.foreground#467686
  • statusBar.noFolderBackground#192d34
  • statusBar.noFolderBorder#223c44
  • statusBarItem.activeBackground#467686
  • statusBarItem.hoverBackground#223c44
  • statusBarItem.prominentBackground#223c44
  • statusBarItem.prominentHoverBackground#223c44
  • string.quoted.single.js#ffeb66
  • tab.activeBackground#192d34
  • tab.activeBorder#121d21
  • tab.activeForeground#e1f7ff
  • tab.border#192d34
  • tab.hoverBackground#192d34
  • tab.inactiveBackground#223c44
  • tab.inactiveForeground#508495
  • tab.unfocusedActiveBorder#508495
  • tab.unfocusedActiveForeground#508495
  • tab.unfocusedInactiveForeground#508495
  • terminal.ansiBlack#223c44
  • terminal.ansiBlue#3e91ac
  • terminal.ansiBrightBlack#467686
  • terminal.ansiBrightBlue#7ba8b7
  • terminal.ansiBrightCyan#adc8d1
  • terminal.ansiBrightGreen#467686
  • terminal.ansiBrightMagenta#36829b
  • terminal.ansiBrightRed#8d8c81
  • terminal.ansiBrightWhite#e1f7ff
  • terminal.ansiBrightYellow#508495
  • terminal.ansiCyan#cbbb4d
  • terminal.ansiGreen#2f7289
  • terminal.ansiMagenta#499fbc
  • terminal.ansiRed#2f7289
  • terminal.ansiWhite#a5d8e9
  • terminal.ansiYellow#3e91ac
  • terminal.background#121d21
  • terminal.foreground#adc8d1
  • terminalCursor.background#192d34
  • terminalCursor.foreground#36829b
  • textLink.activeForeground#cbbb4d
  • textLink.foreground#cbbb4d
  • titleBar.activeBackground#192d34
  • titleBar.activeForeground#a5d8e9
  • titleBar.inactiveBackground#121d21
  • walkThrough.embeddedEditorBackground#121d21
  • welcomePage.buttonBackground#121d21
  • welcomePage.buttonHoverBackground#121d21
  • widget.shadow#121d21

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#adc8d1italic
meta.embedded, source.groovy.embedded#adc8d1
comment, punctuation.definition.comment#335966italic
variable, string constant.other.placeholder#2f7289
constant.other.color#e1f7ff
invalid, invalid.illegal#e1f7ff
keyword, punctuation.accessor, storage.type#ffeb66
storage.modifier, constant.keyword.clojure#b7a21a
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, meta.function punctuation.separator.comma, punctuation.definition.string, punctuation.definition.parameters, punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list, meta.array, source.elixir punctuation.definition.string, string.quoted.double.json punctuation.definition.string.json#3d6876
keyword.control, constant.other.color, keyword.other.template, keyword.other.substitution#d6c65c
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#2f7289
meta.function-call, variable.function, support.function, keyword.other.debugger, keyword.other.special-method, entity.name.function.clojure#e1f7ff
meta.block variable.other#adc8d1
support.other.variable, string.other.link#ffeb66
constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#e9d763
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#3e91acnormal
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#9f9d93
support.type#cbbb4d
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#62b1cb
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#2f7289
variable.other.global.safer.php#62b1cb
variable.language#ffeb66italic
entity.name.method.js#36829bitalic
meta.class-method.js entity.name.function.js, variable.function.constructor, keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts#c4b031
storage.type.function.arrow.js, storage.type.function.arrow.js.jsx, storage.type.function.arrow.ts, storage.type.function.arrow.tsx, storage.type.function.arrow.coffee, keyword.operator.assignment, keyword.operator.comparison#ffeb66
entity.name.function.go, source.go keyword.control.loop.go#e1f7ff
meta.class.ts entity.name.type.class, meta.class.tsx entity.name.type.class, meta.class meta.function-call variable.function.ts, meta.class meta.function-call variable.function.tsx, source.ts keyword.control.loop.ts, source.tsx keyword.control.loop.tsx, source.ts meta.interface.ts entity.name.type.interface.ts, source.tsx meta.interface.tsx entity.name.type.interface.tsx, source.ts meta.type.declaration.ts entity.name.type.ts, source.tsx meta.type.declaration.tsx entity.name.type.tsx#e1f7ff
meta.method.identifier.java entity.name.function.java, meta.method.identifier.java storage.type.generic.java, meta.class meta.function-call variable.function.java, source.java keyword.control.loop.java, storage.type.function.arrow.java, meta.class.identifier.java entity.name.type.class.java#e1f7ff
meta.method.identifier.cs entity.name.function.cs, meta.method.identifier.cs storage.type.generic.cs, meta.class meta.function-call variable.function.cs, source.cs keyword.control.loop.cs, storage.type.function.arrow.cs, meta.class.identifier.cs entity.name.type.class.cs, source.cs entity.name.function.cs, source.cs entity.name.type.class.cs#e1f7ff
source.elixir entity.name.function.elixir, entity.name.type.module.elixir#e1f7ff
keyword.control.flow.js, keyword.control.flow.js.jsx, keyword.control.trycatch.js, keyword.control.trycatch.js.jsx, source.js meta.group.braces.curly.js keyword.control.loop.js, source.js.jsx meta.group.braces.curly.js.jsx keyword.control.loop.js.jsx, source.js meta.export.default.js keyword.control.default.js, source.js.jsx meta.export.default.js.jsx keyword.control.default.js.jsx, keyword.control.switch.js, keyword.control.switch.js.jsx#ffeb66
keyword.control.flow.coffee, keyword.control.trycatch.coffee, source.coffee meta.group.braces.curly.coffee keyword.control.loop.coffee, source.coffee meta.export.default.coffee keyword.control.default.coffee, keyword.control.switch.coffee#ffeb66
keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.trycatch.ts, keyword.control.trycatch.tsx, source.ts meta.group.braces.curly.ts keyword.control.loop.ts, source.tsx meta.group.braces.curly.tsx keyword.control.loop.tsx, source.ts meta.export.default.ts keyword.control.default.ts, source.tsx meta.export.default.tsx keyword.control.default.tsx, keyword.control.switch.ts, keyword.control.switch.tsx#ffeb66
keyword.control.flow.php, keyword.control.trycatch.php, source.php meta.group.braces.curly.php keyword.control.loop.php, keyword.control.switch.php#ffeb66
source.shell meta.scope.while-loop.shell keyword.control.shell, source.shell meta.scope.for-in-loop.shell keyword.control.shell#ffeb66italic
source.shell meta.scope.while-loop.shell meta.scope.if-block.shell keyword.control.shell, source.shell meta.scope.for-in-loop.shell meta.scope.if-block.shell keyword.control.shell#ffeb66italic
keyword.control.flow.java, keyword.control.trycatch.java, source.java meta.group.braces.curly.java keyword.control.loop.java, keyword.control.switch.java#ffeb66
source.cs keyword.control.flow, keyword.control.trycatch.cs, source.cs meta.group.braces.curly.cs keyword.control.loop.cs, source.cs keyword.control.switch.cs#ffeb66
keyword.control.elixir#ffeb66italic
keyword.control.java#ffeb66italic
meta.tag.preprocessor.xml#ffeb66
meta.tag.preprocessor.xml entity.other.attribute-name#d5d4cd
keyword.operator.assignment#ffeb66
keyword.operator.logical.js, keyword.operator.logical.js.jsx#ffeb66
keyword.operator.logical.coffee#ffeb66
keyword.operator.logical.ts, keyword.operator.logical.tsx#ffeb66
source.go keyword.operator.assignment.go#ffeb66normal
source.php keyword.operator, punctuation.separator.inheritance.php#ffeb66
source.shell meta.scope.logical-expression.shell#ffeb66
entity.other.attribute-name#499fbcitalic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#7dc2d9
text.html.basic#a5d8e9
entity.other.attribute-name.class#e1f7ff
source.sass keyword.control#36829b
markup.inserted#7a7971
markup.deleted#2f7289italic
markup.deleted.diff#2f7289
markup.inserted.diff#7a7971italic
markup.changed#499fbcitalic
string.regexp#cbbb4d
constant.character.escape#cbbb4d
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#2f7289italic
source.js constant.other.object.key.js string.unquoted.label.js#2f7289italic
support.type.property-name.json#36829b
support.constant.json#7a7971
meta.structure.dictionary.value.json string.quoted.double#d6c65c
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ffeb66
source.json meta.structure.dictionary.json support.type.property-name.json#e1f7ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7dc2d9
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#62b1cb
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#499fbc
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#3e91ac
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#36829b
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#2f7289
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#2f7289
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#2f7289
text.html.markdown, punctuation.definition.list_item.markdown#e1f7ff
beginning.punctuation.definition.list.markdown#ffeb66
text.html.markdown markup.inline.raw.markdown#499fbc
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#7ba8b7
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading1, markup.heading.markdown, entity.name, entity.name.section.markdown, heading.1.markdown#ffeb66
markup.heading.markdown punctuation.definition.heading.markdown#a5d8e9
markup.italic.markdownitalic
markup.bold, markup.bold string#8d8c81bold
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#8d8c81bold
markup.underline#a5d8e9underline
markup.strikestrike
markup.quote punctuation.definition.blockquote.markdown#192d34
markup.quote.markdown#a5d8e9italic
beginning.punctuation.definition.quote.markdown#84740b
meta.paragraph.markdown#a5d8e9
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#7dc2d9
markup.quoteitalic
string.other.link.title.markdown#ffeb66
markup.underline.link.markdown#7dc2d9
string.other.link.description.title.markdown#499fbc
constant.other.reference.link.markdown#9f9d93
markup.raw.block#499fbc
markup.raw.block.fenced.markdown#192d3450
punctuation.definition.fenced.markdown#192d3450
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#e1f7ff
variable.language.fenced.markdown#7ba8b7
meta.separator#7ba8b7bold
markup.table#e1f7ff
token.info-token#3e91ac
token.warn-token#8d8c81
token.error-token#2f7289
token.debug-token#499fbc
string, string.quoted#ffeb66
meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js#7dc2d9
support.constant.math#7a7971
string.regexp#7a7971
constant.numeric, constant.character.numeric#e9d763
variable.language, variable.other#ffeb66
variable.language.this.js, variable.language.this.php#ffeb66italic
keyword#7a7971
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#e9d763italic
storage.type.class.js#ffeb66
entity.name.class, meta.class entity.name.type.class#a5d8e9
entity.name.type#adc8d1
entity.name.function#62b1cb
punctuation.definition.variable#adc8d1
punctuation.section.embedded.begin, punctuation.section.embedded.end#3d6876
constant.language, punctuation.definition.constant, variable.other.constant, meta.preprocessor#e1f7ff
support.function.construct, keyword.other.new#978611
constant.character, constant.other#ffeb66
constant.character.escape#8d8c81
string.regexp, string.regexp keyword.other#7ba8b7
entity.other.inherited-class#a5d8e9
entity.name.tag#e1f7ff
punctuation.definition.tag, meta.tag#508495
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#e1f7ff
entity.other.attribute-name#e1f7ffitalic
entity.name.tag.custom#3e91ac
support.function#7dc2d9
punctuation.separator.continuation#2f7289
invalid.broken#121d21
invalid.unimplemented#e1f7ff
invalid.illegal#e1f7ff
support.type, support.class#cbbb4d
support.variable.dom#ffeb66
support.type.exception#8d8c81
support.other.variable
invalid#e1f7ff
invalid.deprecated#8d8c81
keyword.operator#cbbb4dnormal
keyword.operator.relational#499fbcitalic
keyword.operator.assignment#ffeb66
keyword.operator.arithmetic#62b1cb
keyword.operator.bitwise#499fbc
keyword.operator.increment#499fbc
keyword.operator.ternary#499fbc
comment.line.double-slash#467686
object#3e91ac
constant.language.null#e1f7ff
meta.brace#467686
meta.delimiter.period#a5d8e9italic
constant.language.boolean#c4b031
object.comma#e1f7ff
variable.parameter.function#cbbb4d
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#9f9d93
meta.property-list entity.name.tag.reference#3e91ac
constant.other.color.rgb-value punctuation.definition.constant#8d8c81
meta.selector#499fbcitalic
entity.other.attribute-name.id#d6c65c
meta.property-name#cbbb4d
entity.name.tag.doctype, meta.tag.sgml.doctype#467686italic
keyword.control.operator#cbbb4d
keyword.operator.logical#499fbc
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#7dc2d9
variable.other.object.property#a5d8e9italic
meta.function-call.js.jsx entity.name.function.js.jsx#499fbc
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#a5d8e9
keyword.operator.comparison, 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#ffeb66italic
variable.interpolation#2f7289
support.variable.property#cbbb4d
string.template meta.template.expression#2f7289
string.template punctuation.definition.string#a5d8e9
italic#499fbcitalic
bold#7a7971bold
quote#467686italic
raw#adc8d1
variable.assignment.coffee#cbbb4d
variable.parameter.function.coffee#a5d8e9
variable.assignment.coffee#7a7971
variable.other.readwrite.cs#a5d8e9
entity.name.type.class.cs, storage.type.cs#36829b
entity.name.type.namespace.cs#adc8d1
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css#e1f7ff
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#e1f7ff
keyword.other.unit.css, keyword.other.unit.px.css, keyword.other.unit.vw.css, keyword.other.unit.vh.css, keyword.other.unit.ch.css, keyword.other.unit.ex.css, keyword.other.unit.percentage.css, keyword.other.unit.rem.css, keyword.other.unit.em.css#b7a21a
keyword.control.at-rule.media.css#e9d763
entity.other.attribute-name.id, punctuation.definition.entity.css#ffeb66
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#36829b
source.elixir entity.name.function#7a7971
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#3e91ac
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#7a7971
source.elixir .punctuation.binary.elixir#499fbcitalic
source.go meta.function-call.go#adc8d1
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#499fbcitalic
source.go constant.language.go, source.go constant.other.placeholder.go#2f7289
meta.class entity.name.type.class, entity.global.clojure#e1f7ff
meta.method.declaration storage.type.js, meta.symbol.clojure#7dc2d9
terminator.js#a5d8e9
meta.js punctuation.definition.js#a5d8e9
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#467686
variable.other.jsdoc, variable.other.phpdoc#cbbb4d
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#a5d8e9
variable.parameter.function.js#36829b
variable.js, variable.other.js#a5d8e9
entity.name.type.js, entity.name.type.module.js#c4b031
support.class.js#a5d8e9
variable.other.ruby#a5d8e9
entity.name.type.class.ruby#62b1cb
constant.language.symbol.hashkey.ruby#36829b
meta.attribute-selector.less entity.other.attribute-name.attribute#3e91ac
variable.other.php, variable.other.property.php#a5d8e9
support.class.php#62b1cb
meta.function-call.php punctuation#a5d8e9
variable.other.global.php#499fbc
variable.other.global.php punctuation.definition.variable#499fbc
constant.language.python#499fbc
variable.parameter.function.python, meta.function-call.arguments.python#36829b
meta.function-call.python, meta.function-call.generic.python#a5d8e9
punctuation.python#a5d8e9
entity.name.function.decorator.python#2f7289
source.python variable.language.special#36829b
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#7dc2d9
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#e1f7ff
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#36829b
entity.name.tag.scss, entity.name.tag.sass#e1f7ff
keyword.other.unit.scss, keyword.other.unit.sass#978611
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#a5d8e9
entity.name.type.ts, entity.name.type.tsx#36829b
support.class.node.ts, support.class.node.tsx#36829b
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#467686
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#a5d8e9
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#36829b
meta.tag.js meta.jsx.children.tsx#36829b
entity.name.tag.yaml#a5d8e9
variable.other.readwrite.js, variable.parameter#a5d8e9
support.class.component.js, support.class.component.tsx#e1f7ff
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#a5d8e9
entity.name.type.tsx, entity.name.type.module.tsx#c4b031
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#7dc2d9
meta.diff, meta.diff.header#a5d8e9italic
markup.deleted#a5d8e9
markup.changed#a5d8e9
markup.inserted#a5d8e9
markup.quote#2f7289italic
markup.list#a5d8e9
markup.bold, markup.italic#a5d8e9
markup.inline.raw#ffeb66
markup.heading.setext#3e91ac

Shiki preview

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

Loading...