Tokyo Panda
Publisher: effordDevThemes in package: 1
A VS Code Theme (mix of Tokyo Night + Panda Theme)
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#16161e
- activityBar.border#16161e
- activityBar.foreground#ff3bbe
- activityBarBadge.background#19f9d8
- activityBarBadge.foreground#242526
- badge.background#6FC1FF
- badge.foreground#242526
- button.background#ff3bbe
- button.foreground#FFFFFF
- button.hoverBackground#ff4bbe
- diffEditor.insertedTextBackground#19f9d866
- diffEditor.removedTextBackground#FF4B8266
- editor.background#1a1b26
- editor.findMatchBackground#B084EB90
- editor.findMatchHighlightBackground#FFB86C40
- editor.foreground#a9b1d6
- editor.inactiveSelectionBackground#FFB86C40
- editor.lineHighlightBackground#31353a
- editor.selectionBackground#FFB86C40
- editor.selectionHighlightBackground#FFB86C40
- editor.wordHighlightBackground#FFCC9560
- editor.wordHighlightStrongBackground#FF9AC170
- editorBracketMatch.border#19f9d8
- editorCodeLens.foreground#FFB86C40
- editorCursor.foreground#FF4B82
- editorError.border#292A2B
- editorError.foreground#FF4B82
- editorGutter.addedBackground#19f9d8
- editorGutter.deletedBackground#FF4B82
- editorGutter.modifiedBackground#FFCC95
- editorHoverWidget.background#31353a
- editorOverviewRuler.addedForeground#19f9d8
- editorOverviewRuler.border#00000000
- editorOverviewRuler.deletedForeground#FF4B82
- editorOverviewRuler.errorForeground#FF4B82
- editorOverviewRuler.infoForeground#6FC1FF
- editorOverviewRuler.modifiedForeground#FFCC95
- editorOverviewRuler.warningForeground#FFCC95
- editorRuler.foreground#B084EB60
- editorSuggestWidget.background#344255
- editorSuggestWidget.focusHighlightForeground#234099
- editorSuggestWidget.foreground#1a1b26
- editorSuggestWidget.highlightForeground#1a1b26
- editorSuggestWidget.selectedBackground#19f9d8
- editorSuggestWidget.selectedForeground#1a1b26
- editorWarning.border#292A2B
- editorWarning.foreground#FFCC95
- editorWhitespace.foreground#3E4250
- editorWidget.background#B084EB
- editorWidget.border#B084EB
- errorForeground#FF4B82
- extensionButton.prominentBackground#ff3bbe
- extensionButton.prominentForeground#FFFFFF
- extensionButton.prominentHoverBackground#676B79
- foreground#E6E6E6
- gitDecoration.ignoredResourceForeground#757575
- list.activeSelectionBackground#1a1b26
- list.activeSelectionForeground#19f9d8
- list.focusBackground#B084EB
- list.focusForeground#1a1b26
- list.highlightForeground#6FC1FF
- list.hoverBackground#B084EB
- list.hoverForeground#1a1b26
- list.inactiveSelectionBackground#1a1b26
- list.inactiveSelectionForeground#19f9d8
- merge.currentContentBackground#B084EB40
- merge.currentHeaderBackground#B084EB90
- merge.incomingContentBackground#FFB86C40
- merge.incomingHeaderBackground#45A9F990
- notificationCenterHeader.background#101014
- notificationLink.foreground#6183bb
- notifications.background#101014
- notificationsErrorIcon.foreground#bb616b
- notificationsInfoIcon.foreground#0da0ba
- notificationsWarningIcon.foreground#bba461
- progressBar.background#B084EB
- scrollbar.shadow#1a1b26
- scrollbarSlider.activeBackground#757575
- scrollbarSlider.background#373B4199
- scrollbarSlider.hoverBackground#757575
- sideBar.background#16161e
- sideBar.border#1a1b26
- sideBar.foreground#dec5ff
- statusBar.background#B084EB
- statusBar.debuggingBackground#000
- statusBar.debuggingForeground#E6E6E6
- statusBar.foreground#dec5ff
- statusBar.noFolderBackground#242526
- statusBar.noFolderForeground#E6E6E6
- tab.activeBackground#1a1b26
- tab.activeBorder#19f9d8
- tab.activeForeground#19f9d8
- tab.inactiveBackground#232433
- tab.inactiveForeground#dec5ff
- terminal.ansiBlack#111111
- terminal.ansiBlue#bbdaff
- terminal.ansiBrightBlack#333333
- terminal.ansiBrightBlue#80baff
- terminal.ansiBrightCyan#78ffff
- terminal.ansiBrightGreen#3affc4
- terminal.ansiBrightMagenta#d778ff
- terminal.ansiBrightRed#ff7882
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#ffe580
- terminal.ansiCyan#99ffff
- terminal.ansiGreen#d1f1a9
- terminal.ansiMagenta#ebbbff
- terminal.ansiRed#ff9da4
- terminal.ansiWhite#cccccc
- terminal.ansiYellow#ffeead
- terminal.background#16161e
- terminal.border#dec5ff
- terminal.foreground#dec5ff
- terminal.selectionBackground#B084EB
- terminalCursor.background#E6E6E6
- terminalCursor.foreground#FF4B82
- titleBar.activeBackground#16161e
- titleBar.activeForeground#E6E6E6
- titleBar.inactiveBackground#242526
- titleBar.inactiveForeground#E6E6E6
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment | #676B79 | italic |
| keyword | #FF75B5 | — |
| keyword.control, keyword.operator.new | #FF75B5 | — |
| keyword.operator | #E6E6E6 | — |
| keyword.operator.logical, keyword.operator.comparison | #FFCC95 | — |
| keyword.operator.misc, keyword.operator.sigil | #FF75B5 | — |
| storage | #FFB86C | — |
| constant | #FFB86C | — |
| constant.character.escape | #45A9F9 | — |
| variable | #E6E6E6 | — |
| variable.parameter | #BBBBBB | — |
| meta.object-binding-pattern-variable.js variable | #FFCC95 | — |
| variable.other.constant, variable.language.this, variable.interpolation | #FF9AC1 | — |
| variable.other.object | #FF9AC1 | — |
| variable.other.object.apex | #A9B1D6 | — |
| variable.other.property | #E6E6E6 | — |
| invalid.illegal | — | — |
| invalid.deprecated | — | — |
| string | #19f9d8 | — |
| punctuation.definition.template-expression | #FFCC95 | — |
| support | #FFCC95 | — |
| support.class | #FFCC95 | — |
| support.type.object.module.js | #B084EB | — |
| support.function | #6FC1FF | — |
| entity.name.function | #6FC1FF | — |
| entity.other.inherited-class | #FF9AC1 | — |
| entity.name.tag.yaml | #FFCC95 | — |
| meta.decorator punctuation.decorator | #FFB86C | — |
| meta.decorator variable | #6FC1FF | — |
| keyword.other.special-method | #45A9F9 | — |
| keyword.control.at-rule | #B084EB | — |
| keyword.other.important | #FF4B82 | — |
| variable.interpolation | #FF75B5 | — |
| entity.name.type | #19f9d8 | italic |
| meta.source.handlebars entity.name.tag | #6FC1FF | — |
| punctuation.definition.expression, punctuation.definition.subexpression, punctuation.definition.block.unescaped, punctuation.definition.tag | #FFCC95 | italic |
| entity.name.function.expression | #FF75B5 | — |
| entity.unescaped.expression | #B084EB | — |
| constant.other.symbol | #19f9d8 | — |
| entity.expression variable.parameter.name | #FFB86C | — |
| entity.expression variable.parameter.value | #6FC1FF | — |
| entity.expression support.function.builtin | #FF9AC1 | — |
| entity.name.tag.html | #FFCC95 | — |
| entity.other.attribute-name.handlebars | #FFCC95 | — |
| support.class.component | #FF75B5 | italic |
| meta.tag.js entity.name.tag | #FFCC95 | — |
| entity.other.attribute-name | #FFB86C | — |
| markup.bold | #FFB86C | — |
| punctuation.definition.bold.markdown | #FFCC95 | — |
| markup.changed | #FF75B5 | — |
| markup.deleted | #FF2C6D | — |
| markup.italic | #FF9AC1 | italic |
| punctuation.definition.italic.markdown | #FF75B5 | italic |
| markup.inserted | #19f9d8 | — |
| punctuation.definition.heading | #19f9d8 | — |
| entity.name.section.markdown | #BBBBBB | — |
| markup.quote | #FFB86C | — |
| markup.inline.raw | #19f9d8 | italic |
| beginning.punctuation.definition.list | #FF75B5 | — |
| markup.fenced_code.block.markdown punctuation.definition.markdown | #757575 | — |
| fenced_code.block.language | #BBBBBB | italic |
| string.other.link | #BBBBBB | normal |
| meta.link.inline.markdown | #45A9F9 | italic |
| text.html.markdown punctuation.definition.string | #FFCC95 | — |
| entity.name.type.class.js | #6FC1FF | — |
| keyword.control.as.js | #FF9AC1 | — |
| keyword.control.from.js | #FF9AC1 | — |
| keyword.control.export.js | #B084EB | — |
| variable.language.this.js | — | italic |
| support.class.console.js | — | italic |
| entity.name.tag.js, support.class.component.js | #FF2C6D | — |
| variable.language.super.js | #45A9F9 | — |
| meta.tag.structure.any.html, meta.tag.other.html, entity.name.tag.html, meta.tag.metadata.script.html, entity.name.tag.jade | #FF2C6D | — |
| entity.name.tag.inline.any.html, entity.name.tag.other.html, entity.name.tag.block.any.html, entity.name.tag.localname.xml | #FF2C6D | — |
| entity.name.tag.xml, meta.tag.xml | #FF2C6D | — |
| source.vue, entity.name.tag.pug, meta.tag.other | #FF2C6D | — |
| text.pug | #FFFFFF | — |
| entity.name.tag.css | #FF2C6D | — |
| support.type.property-name.css | #E6E6E6 | — |
| variable.scss | #FF9AC1 | — |
| entity.name.tag.reference.scss | #FF2C6D | — |
| keyword.other.unit.rem.css, keyword.other.unit.vh.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.deg.css, keyword.other.unit.percentage.css | #FFB86C | — |
| string.regexp | #6FC1FF | — |
| string.regexp keyword, string.regexp keyword.control | #FF75B5 | normal |
| string.regexp keyword.operator | #FF9AC1 | — |
| comment.block.documentation | — | normal |
| entity.name.type.instance.jsdoc punctuation.definition | #FFCC95 | italic |
| entity.name.type.instance.jsdoc | #CDCDCD | italic |
| comment.block storage | #FFCC95 | — |
| comment.block storage.custom, variable.other.jsdoc, variable.other.jsdoc punctuation.definition.string | #FF9AC1 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...