Skip to main content
Coding 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#222223
  • activityBar.border#222223
  • activityBar.foreground#E6E6E6
  • activityBarBadge.background#19f9d8
  • activityBarBadge.foreground#242526
  • badge.background#6FC1FF
  • badge.foreground#242526
  • button.background#45A9F9
  • button.foreground#FFFFFF
  • button.hoverBackground#676B79
  • diffEditor.insertedTextBackground#19f9d866
  • diffEditor.removedTextBackground#FF4B8266
  • editor.background#292A2B
  • editor.findMatchBackground#B084EB90
  • editor.findMatchHighlightBackground#FFB86C40
  • editor.foreground#E6E6E6
  • 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.selectedBackground#19f9d899
  • editorWarning.border#292A2B
  • editorWarning.foreground#FFCC95
  • editorWhitespace.foreground#3E4250
  • editorWidget.background#2a2c2d
  • editorWidget.border#373B41
  • errorForeground#FF4B82
  • extensionButton.prominentBackground#45A9F9
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#676B79
  • foreground#E6E6E6
  • gitDecoration.ignoredResourceForeground#757575
  • list.activeSelectionBackground#292A2B
  • list.activeSelectionForeground#19f9d8
  • list.focusBackground#292A2B
  • list.focusForeground#19f9d8
  • list.highlightForeground#6FC1FF
  • list.hoverBackground#292A2B
  • list.hoverForeground#CDCDCD
  • list.inactiveSelectionBackground#292A2B
  • list.inactiveSelectionForeground#19f9d8
  • merge.currentContentBackground#B084EB40
  • merge.currentHeaderBackground#B084EB90
  • merge.incomingContentBackground#FFB86C40
  • merge.incomingHeaderBackground#45A9F990
  • progressBar.background#B084EB
  • scrollbar.shadow#222223
  • scrollbarSlider.activeBackground#757575
  • scrollbarSlider.background#373B4199
  • scrollbarSlider.hoverBackground#757575
  • sideBar.background#242526
  • sideBar.border#222223
  • sideBar.foreground#BBBBBB
  • statusBar.background#222223
  • statusBar.debuggingBackground#B084EB
  • statusBar.debuggingForeground#E6E6E6
  • statusBar.foreground#E6E6E6
  • statusBar.noFolderBackground#242526
  • statusBar.noFolderForeground#E6E6E6
  • tab.activeBackground#292A2B
  • tab.activeBorder#19f9d8
  • tab.activeForeground#19f9d8
  • tab.inactiveBackground#242526
  • tab.inactiveForeground#E6E6E6
  • terminal.ansiBlue#45A9F9
  • terminal.ansiBrightBlack#757575
  • terminal.ansiBrightBlue#6FC1FF
  • terminal.ansiBrightCyan#BCAAFE
  • terminal.ansiBrightGreen#19f9d8
  • terminal.ansiBrightMagenta#FF9AC1
  • terminal.ansiBrightRed#FF2C6D
  • terminal.ansiBrightWhite#E6E6E6
  • terminal.ansiBrightYellow#FFCC95
  • terminal.ansiCyan#B084EB
  • terminal.ansiGreen#19f9d8
  • terminal.ansiMagenta#FF75B5
  • terminal.ansiRed#FF2C6D
  • terminal.ansiWhite#CDCDCD
  • terminal.ansiYellow#FFB86C
  • terminalCursor.background#E6E6E6
  • terminalCursor.foreground#FF4B82
  • titleBar.activeBackground#242526
  • titleBar.activeForeground#E6E6E6
  • titleBar.inactiveBackground#242526
  • titleBar.inactiveForeground#E6E6E6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#676B79italic
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.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#19f9d8italic
meta.source.handlebars entity.name.tag#6FC1FF
punctuation.definition.expression, punctuation.definition.subexpression, punctuation.definition.block.unescaped, punctuation.definition.tag#FFCC95italic
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#FF75B5italic
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#FF9AC1italic
punctuation.definition.italic.markdown#FF75B5italic
markup.inserted#19f9d8
punctuation.definition.heading#19f9d8
entity.name.section.markdown#BBBBBB
markup.quote#FFB86C
markup.inline.raw#19f9d8italic
beginning.punctuation.definition.list#FF75B5
markup.fenced_code.block.markdown punctuation.definition.markdown#757575
fenced_code.block.language#BBBBBBitalic
string.other.link#BBBBBBnormal
meta.link.inline.markdown#45A9F9italic
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.jsitalic
support.class.console.jsitalic
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#FF75B5normal
string.regexp keyword.operator#FF9AC1
comment.block.documentationnormal
entity.name.type.instance.jsdoc punctuation.definition#FFCC95italic
entity.name.type.instance.jsdoc#CDCDCDitalic
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...

Panda Theme - Coding Theme