Cooler Panda
Publisher: Matthew JusticeThemes in package: 1
A theme inspired by Panda Syntax but favoring cooler tones (TS Supported)
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#212121
- activityBar.border#101010
- activityBar.foreground#eeffff
- activityBarBadge.background#5dd4c7
- activityBarBadge.foreground#000000
- badge.background#88c0d0
- badge.foreground#000000
- button.background#616161
- contrastBorder#00000050
- debugToolBar.background#212121
- diffEditor.insertedTextBackground#5dd4c766
- diffEditor.removedTextBackground#e6789e66
- dropdown.background#212121
- dropdown.border#ffffff10
- editor.background#212121
- editor.findMatchBackground#0e687c7b
- editor.findMatchHighlightBackground#0e687c7b
- editor.foreground#d8dee9
- editor.inactiveSelectionBackground#0e687c7b
- editor.lineHighlightBackground#00000050
- editor.selectionBackground#0e687c7b
- editor.selectionHighlightBackground#0e687c7b
- editor.wordHighlightBackground#b09fc360
- editor.wordHighlightStrongBackground#e6a6c770
- editorBracketMatch.background#b48ead
- editorBracketMatch.border#212121
- editorCodeLens.foreground#8d9eea40
- editorCursor.foreground#e6789e
- editorError.foreground#bf616a
- editorGroup.border#101010
- editorGroupHeader.tabsBackground#212121
- editorGutter.addedBackground#00000050
- editorGutter.deletedBackground#00000050
- editorGutter.modifiedBackground#00000050
- editorHoverWidget.background#212121
- editorHoverWidget.border#ffffff10
- editorIndentGuide.background1#42424270
- editorLineNumber.foreground#424242
- editorLink.activeForeground#eeffff
- editorMarkerNavigation.background#eeffff05
- editorOverviewRuler.addedForeground#5dd4c7
- editorOverviewRuler.border#212121
- editorOverviewRuler.deletedForeground#e6789e
- editorOverviewRuler.errorForeground#e6789e
- editorOverviewRuler.infoForeground#8dc9eb
- editorOverviewRuler.modifiedForeground#b09fc3
- editorOverviewRuler.warningForeground#b09fc3
- editorRuler.foreground#42424270
- editorSuggestWidget.background#212121
- editorSuggestWidget.border#ffffff10
- editorSuggestWidget.foreground#eeffff
- editorSuggestWidget.highlightForeground#8fbcbb
- editorSuggestWidget.selectedBackground#00000050
- editorWarning.foreground#a3be8c
- editorWhitespace.foreground#eeffff10
- editorWidget.background#212121
- errorForeground#e6789e
- extensionButton.prominentBackground#a3be8c
- extensionButton.prominentHoverBackground#c3e88d
- focusBorder#ffffff00
- foreground#eeffff
- gitDecoration.modifiedResourceForeground#a4eeff
- gitDecoration.untrackedResourceForeground#afb9ff
- input.background#ffffff05
- input.border#ffffff10
- input.foreground#eeffff
- input.placeholderForeground#eeffff60
- inputOption.activeBackground#0e687c7b
- inputValidation.errorBorder#bf616a
- inputValidation.infoBorder#81a1c1
- inputValidation.warningBorder#ebcb8b
- list.activeSelectionBackground#212121
- list.activeSelectionForeground#5dd4c7
- list.errorForeground#afb9ff
- list.focusBackground#00000050
- list.focusForeground#eeffff
- list.highlightForeground#88c0d0
- list.hoverBackground#212121
- list.hoverForeground#d8dee9
- list.inactiveSelectionBackground#00000020
- list.inactiveSelectionForeground#5dd4c7
- list.warningForeground#a4eeff
- menu.border#00000050
- merge.currentContentBackground#c5a5e140
- merge.currentHeaderBackground#c5a5e190
- merge.incomingContentBackground#8d9eea40
- merge.incomingHeaderBackground#73b9e890
- panel.background#00000050
- panel.border#101010
- panelTitle.activeBorder#0e687c7b
- panelTitle.activeForeground#eeffff
- peekView.border#00000030
- peekViewEditor.background#eeffff05
- peekViewEditor.matchHighlightBackground#61616150
- peekViewEditorGutter.background#eeffff05
- peekViewResult.background#eeffff05
- peekViewResult.matchHighlightBackground#61616150
- peekViewTitle.background#eeffff05
- peekViewTitleDescription.foreground#eeffff60
- pickerGroup.foreground#88c0d0
- progressBar.background#88c0d0
- quickInput.background#212121
- quickInput.foreground#eeffff
- quickInputList.focusBackground#00000050
- quickInputList.focusForeground#88c0d0
- quickInputTitle.background#ffffff1b
- scrollbar.shadow#21212100
- scrollbarSlider.activeBackground#88c0d0
- scrollbarSlider.background#00000050
- scrollbarSlider.hoverBackground#00000030
- selection.background#eeffff
- sideBar.background#1a1a1a
- sideBar.border#101010
- sideBar.foreground#ffffff
- sideBarSectionHeader.background#212121
- sideBarTitle.foreground#eeffff
- statusBar.background#00000050
- statusBar.border#101010
- statusBar.debuggingBackground#b48ead
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#ffffff
- statusBar.noFolderBackground#212121
- tab.activeBorder#0e687c7b
- tab.activeForeground#5dd4c7
- tab.border#1c1c1c
- tab.hoverBackground#42424210
- tab.inactiveBackground#212121
- tab.inactiveForeground#616161
- tab.unfocusedActiveBorder#4a4a4a
- tab.unfocusedActiveForeground#eeffff
- terminal.ansiBlack#2a2a2a
- terminal.ansiBlue#92a3ff
- terminal.ansiBrightBlack#4f5051
- terminal.ansiBrightBlue#92a3ff
- terminal.ansiBrightCyan#4db8c4
- terminal.ansiBrightGreen#4dd9bf
- terminal.ansiBrightMagenta#b794d1
- terminal.ansiBrightRed#e6789e
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#4dd9bf
- terminal.ansiCyan#4db8c4
- terminal.ansiGreen#4dd9bf
- terminal.ansiMagenta#b794d1
- terminal.ansiRed#e6789e
- terminal.ansiWhite#d8dee9
- terminal.ansiYellow#4dd9bf
- terminal.background#151515
- terminal.border#101010
- terminal.foreground#d8dee9
- terminalCursor.background#e6e6e6
- terminalCursor.foreground#e6789e
- textLink.activeForeground#eeffff
- textLink.foreground#88c0d0
- titleBar.activeBackground#00000050
- titleBar.activeForeground#ffffff
- titleBar.border#101010
- titleBar.inactiveBackground#212121
- titleBar.inactiveForeground#4a4a4a
- tree.inactiveIndentGuidesStroke#313131
- tree.indentGuidesStroke#5ae4ca
- widget.shadow#00000030
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment | #4f5051 | italic |
| keyword | #a890ca | — |
| keyword.control, keyword.operator.new | #a890ca | — |
| keyword.operator | #2bd6ec | — |
| keyword.operator.logical, keyword.operator.comparison | #2bd6ec | — |
| storage | #9daeff | — |
| constant | #9daeff | — |
| constant.character.escape | #2bd6ec | — |
| variable | #daeeed | — |
| variable.parameter | #b4fae8 | — |
| meta.object-binding-pattern-variable.js variable | #daeeed | — |
| variable.other.constant, variable.language.this, variable.interpolation | #daeeed | — |
| variable.other.object | #daeeed | — |
| variable.other.property | #8ddfd7 | — |
| invalid.illegal | — | — |
| invalid.deprecated | — | — |
| string | #5ae4ca | — |
| punctuation.definition.template-expression | #2bd6ec | — |
| support | #9daeff | — |
| support.class | #9daeff | — |
| support.type.object.module.js | #9daeff | — |
| support.function | #76c3ff | — |
| support.function.builtin | #66aef7 | — |
| entity.name.function | #76c3ff | — |
| entity.other.inherited-class | #9daeff | — |
| entity.name.tag.yaml | #9daeff | — |
| meta.decorator punctuation.decorator | #8fa9ff | — |
| meta.decorator variable | #6bb8ff | — |
| keyword.other.special-method | #2bd6ec | — |
| keyword.control.at-rule | #9daeff | — |
| keyword.other.important | #e6789e | — |
| variable.interpolation | #a890ca | — |
| meta.source.handlebars entity.name.tag | #76c3ff | — |
| punctuation.definition.expression, punctuation.definition.subexpression, punctuation.definition.block.unescaped, punctuation.definition.tag | #2bd6ec | italic |
| entity.name.function.expression | #76c3ff | — |
| entity.unescaped.expression | #9daeff | — |
| constant.other.symbol | #5ae4ca | — |
| entity.expression variable.parameter.name | #daeeed | — |
| entity.expression variable.parameter.value | #daeeed | — |
| entity.expression support.function.builtin | #66aef7 | — |
| entity.name.tag.html | #c29fdd | — |
| entity.other.attribute-name.handlebars | #8ddfd7 | — |
| support.class.component | #9daeff | italic |
| meta.tag.js entity.name.tag | #c29fdd | — |
| entity.other.attribute-name | #8ddfd7 | — |
| markup.bold | #9daeff | — |
| punctuation.definition.bold.markdown | #a890ca | — |
| markup.changed | #a890ca | — |
| markup.deleted | #a890ca | — |
| markup.italic | #a890ca | italic |
| punctuation.definition.italic.markdown | #a890ca | italic |
| markup.inserted | #5ae4ca | — |
| punctuation.definition.heading | #5ae4ca | — |
| entity.name.section.markdown | #8ddfd7 | — |
| markup.quote | #9daeff | — |
| markup.inline.raw | #5ae4ca | italic |
| beginning.punctuation.definition.list | #a890ca | — |
| markup.fenced_code.block.markdown punctuation.definition.markdown | #757575 | — |
| fenced_code.block.language | #8ddfd7 | italic |
| string.other.link | #8ddfd7 | normal |
| meta.link.inline.markdown | #76c3ff | italic |
| text.html.markdown punctuation.definition.string | #2bd6ec | — |
| entity.name.type.class.js | #9daeff | — |
| keyword.control.as.js | #a890ca | — |
| keyword.control.from.js.jsx | #a890ca | — |
| keyword.control.export.js | #a890ca | — |
| entity.name.tag.js.jsx, support.class.component.js.jsx | #9daeff | — |
| variable.language.super.js.jsx | #a890ca | — |
| meta.tag.structure.any.html, meta.tag.other.html, entity.name.tag.html, meta.tag.metadata.script.html, entity.name.tag.jade | #c29fdd | — |
| entity.name.tag.inline.any.html, entity.name.tag.other.html, entity.name.tag.block.any.html | #c29fdd | — |
| entity.name.tag.css | #c29fdd | — |
| support.type.property-name.css | #8ddfd7 | — |
| variable.scss | #8ddfd7 | — |
| entity.name.tag.reference.scss | #c29fdd | — |
| 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 | #5ae4ca | — |
| string.regexp | #48dfc0 | — |
| string.regexp keyword, string.regexp keyword.control | #a890ca | normal |
| string.regexp keyword.operator | #2bd6ec | — |
| comment.block.documentation | — | normal |
| entity.name.type.instance.jsdoc punctuation.definition | #2bd6ec | italic |
| entity.name.type.instance.jsdoc | #CDCDCD | italic |
| comment.block storage | #9daeff | — |
| comment.block storage.custom, variable.other.jsdoc, variable.other.jsdoc punctuation.definition.string | #daeeed | — |
| token.info-token | #6796e6 | — |
| token.warn-token | #cd9731 | — |
| token.error-token | #f44747 | — |
| token.debug-token | #b267e6 | — |
| string.quoted | #5ae4ca | — |
| string.quoted.single | #5ae4ca | — |
| variable.language.super | #a890ca | — |
| keyword.operator.type | #a890ca | — |
| entity.name.tag | #c29fdd | — |
| entity.name.type | #9daeff | — |
| entity.name.type.ts | #9daeff | — |
| support.type.primitive, support.type.builtin, support.class.builtin | #a8b5ff | — |
| variable.parameter | #daeeed | — |
| keyword.control.from.tsx | #a890ca | — |
| keyword.control.export.tsx | #a890ca | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...