Skip to main content
CodingTheme

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#131117
  • activityBar.dropBackground#2a2732
  • activityBar.foreground#e7e5ea
  • activityBarBadge.background#434555
  • activityBarBadge.foreground#ffffff
  • badge.background#434555
  • badge.foreground#ffffff
  • button.background#434555
  • button.foreground#b6d3e3
  • button.hoverBackground#686868
  • debugExceptionWidget.background#686868
  • debugExceptionWidget.border#1f1e24
  • debugToolBar.background#2a2732
  • descriptionForeground#d8dee9e6
  • diffEditor.insertedTextBackground#81a1c133
  • diffEditor.removedTextBackground#bf616a4d
  • dropdown.background#2a2732
  • dropdown.border#2a2732
  • dropdown.foreground#b6d3e3
  • editor.background#1f1e24
  • editor.findMatchBackground#88c0d033
  • editor.findMatchHighlightBackground#88c0d033
  • editor.findRangeHighlightBackground#88c0d033
  • editor.foreground#b6d3e3
  • editor.hoverHighlightBackground#2a2732
  • editor.inactiveSelectionBackground#434c5ecc
  • editor.lineHighlightBackground#2a2732
  • editor.lineHighlightBorder#2a2732
  • editor.rangeHighlightBackground#434c5e52
  • editor.selectionBackground#434c5ecc
  • editor.selectionHighlightBackground#434c5ecc
  • editor.wordHighlightBackground#81a1c166
  • editor.wordHighlightStrongBackground#81a1c199
  • editorBracketMatch.background#2e344000
  • editorBracketMatch.border#5a7491
  • editorCodeLens.foreground#686868
  • editorCursor.foreground#b6d3e3
  • editorError.border#bf616a00
  • editorError.foreground#c35066
  • editorGroup.border#3b425201
  • editorGroup.dropBackground#3b425299
  • editorGroup.emptyBackground#1f1e24
  • editorGroupHeader.noTabsBackground#1f1e24
  • editorGroupHeader.tabsBackground#1f1e24
  • editorGroupHeader.tabsBorder#131117
  • editorGutter.addedBackground#75bc77
  • editorGutter.background#1f1e24
  • editorGutter.deletedBackground#c35066
  • editorGutter.modifiedBackground#f0c06b
  • editorHint.border#ebcb8b00
  • editorHint.foreground#f0c06b
  • editorHoverWidget.background#2a2732
  • editorHoverWidget.border#2a2732
  • editorIndentGuide.activeBackground#535261
  • editorIndentGuide.background#32323a
  • editorLineNumber.activeForeground#a1a6a8
  • editorLineNumber.foreground#48464e
  • editorLink.activeForeground#5a7491
  • editorMarkerNavigation.background#5e81acc0
  • editorMarkerNavigationError.background#bf616ac0
  • editorMarkerNavigationWarning.background#ebcb8bc0
  • editorOverviewRuler.addedForeground#75bc77
  • editorOverviewRuler.border#2a2732
  • editorOverviewRuler.currentContentForeground#2a2732
  • editorOverviewRuler.deletedForeground#c35066
  • editorOverviewRuler.errorForeground#c35066
  • editorOverviewRuler.findMatchForeground#88c0d066
  • editorOverviewRuler.incomingContentForeground#2a2732
  • editorOverviewRuler.infoForeground#75bc77
  • editorOverviewRuler.modifiedForeground#f0c06b
  • editorOverviewRuler.rangeHighlightForeground#88c0d066
  • editorOverviewRuler.selectionHighlightForeground#88c0d066
  • editorOverviewRuler.warningForeground#f0c06b
  • editorOverviewRuler.wordHighlightForeground#88c0d066
  • editorOverviewRuler.wordHighlightStrongForeground#88c0d066
  • editorRuler.foreground#434555
  • editorSuggestWidget.background#1f1e24
  • editorSuggestWidget.border#2a2732
  • editorSuggestWidget.foreground#b6d3e3
  • editorSuggestWidget.highlightForeground#5a7491
  • editorSuggestWidget.selectedBackground#434555
  • editorWarning.border#ebcb8b00
  • editorWarning.foreground#f0c06b
  • editorWhitespace.foreground#4c566ab3
  • editorWidget.background#1f1e24
  • editorWidget.border#2a2732
  • errorForeground#c35066
  • extensionBadge.remoteBackground#ff0000
  • extensionBadge.remoteForeground#ff0000
  • extensionButton.prominentBackground#434555
  • extensionButton.prominentForeground#b6d3e3
  • extensionButton.prominentHoverBackground#686868
  • focusBorder#2a2732
  • foreground#e5eff0
  • gitDecoration.conflictingResourceForeground#5e81ac
  • gitDecoration.deletedResourceForeground#c35066
  • gitDecoration.ignoredResourceForeground#d8dee966
  • gitDecoration.modifiedResourceForeground#f0c06b
  • gitDecoration.submoduleResourceForeground#82b9d8
  • gitDecoration.untrackedResourceForeground#75bc77
  • input.background#2a2732
  • input.border#2a2732
  • input.foreground#b6d3e3
  • input.placeholderForeground#d8dee999
  • inputOption.activeBackground#5e81ac
  • inputOption.activeBorder#5e81ac
  • inputValidation.errorBackground#c35066
  • inputValidation.errorBorder#c35066
  • inputValidation.infoBackground#75bc77
  • inputValidation.infoBorder#75bc77
  • inputValidation.warningBackground#d08770
  • inputValidation.warningBorder#d08770
  • list.activeSelectionBackground#5a7491
  • list.activeSelectionForeground#1f1e24
  • list.dropBackground#88c0d099
  • list.errorForeground#c35066
  • list.focusBackground#88c0d099
  • list.focusForeground#b6d3e3
  • list.highlightForeground#5a7491
  • list.hoverBackground#2a2732
  • list.hoverForeground#ffffff
  • list.inactiveFocusBackground#434c5ecc
  • list.inactiveSelectionBackground#434555
  • list.inactiveSelectionForeground#b6d3e3
  • list.warningForeground#f0c06b
  • merge.border#131117
  • merge.currentContentBackground#81a1c14d
  • merge.currentHeaderBackground#81a1c166
  • merge.incomingContentBackground#8fbcbb4d
  • merge.incomingHeaderBackground#8fbcbb66
  • minimap.findMatchHighlight#5a7491
  • notificationCenter.border#131117
  • notificationCenterHeader.background#1f1e24
  • notificationCenterHeader.foreground#5a7491
  • notificationLink.foreground#5a7491
  • notifications.background#2a2732
  • notifications.border#1f1e24
  • notifications.foreground#b6d3e3
  • notificationToast.border#131117
  • panel.background#1f1e24
  • panel.border#2a2732
  • panelTitle.activeBorder#d8d8d8
  • panelTitle.activeForeground#d8d8d8
  • panelTitle.inactiveForeground#8a99a1
  • peekView.border#686868
  • peekViewEditor.background#1f1e24
  • peekViewEditor.matchHighlightBackground#88c0d04d
  • peekViewEditorGutter.background#1f1e24
  • peekViewResult.background#1f1e24
  • peekViewResult.fileForeground#5a7491
  • peekViewResult.lineForeground#d8dee966
  • peekViewResult.matchHighlightBackground#88c0d0cc
  • peekViewResult.selectionBackground#434555
  • peekViewResult.selectionForeground#b6d3e3
  • peekViewTitle.background#2a2732
  • peekViewTitleDescription.foreground#b6d3e3
  • peekViewTitleLabel.foreground#5a7491
  • pickerGroup.border#2a2732
  • pickerGroup.foreground#5a7491
  • progressBar.background#5a7491
  • scrollbar.shadow#000000a6
  • scrollbarSlider.activeBackground#8e8e915b
  • scrollbarSlider.background#7474757e
  • scrollbarSlider.hoverBackground#8e8e9183
  • selection.background#434c5e
  • sideBar.background#17161b
  • sideBar.border#18171c
  • sideBar.foreground#d8d8d8
  • sideBarSectionHeader.background#131117
  • sideBarSectionHeader.border#18171c
  • sideBarSectionHeader.foreground#c8c7ca
  • sideBarTitle.foreground#c8c7ca
  • statusBar.background#18171c
  • statusBar.border#18171c
  • statusBar.debuggingBackground#5e81ac
  • statusBar.debuggingForeground#c8c7ca
  • statusBar.foreground#c8c7ca
  • statusBar.noFolderBackground#2a2732
  • statusBar.noFolderForeground#c8c7ca
  • statusBarItem.activeBackground#686868
  • statusBarItem.hoverBackground#18171c
  • statusBarItem.prominentBackground#2a2732
  • statusBarItem.prominentHoverBackground#18171c
  • tab.activeBackground#1f1e24
  • tab.activeBorderTop#88c0d000
  • tab.activeForeground#b5b4b7
  • tab.border#131117
  • tab.hoverBackground#1f1e24
  • tab.hoverBorder#88c0d000
  • tab.inactiveBackground#17161b
  • tab.inactiveForeground#535256
  • tab.unfocusedActiveBorder#88c0d000
  • tab.unfocusedActiveBorderTop#88c0d000
  • tab.unfocusedActiveForeground#d8dee999
  • tab.unfocusedHoverBackground#242328
  • tab.unfocusedHoverBorder#88c0d000
  • tab.unfocusedInactiveForeground#d8dee966
  • terminal.ansiBlack#2a2732
  • terminal.ansiBlue#366db8
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#3688f7
  • terminal.ansiBrightCyan#82b9d8
  • terminal.ansiBrightGreen#75bc77
  • terminal.ansiBrightMagenta#ca61b2
  • terminal.ansiBrightRed#d76979
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f0c06b
  • terminal.ansiCyan#5a7491
  • terminal.ansiGreen#608867
  • terminal.ansiMagenta#8f64cb
  • terminal.ansiRed#c35066
  • terminal.ansiWhite#d8d8d8
  • terminal.ansiYellow#cda55e
  • terminal.background#1f1e24
  • terminal.foreground#b6d3e3
  • textBlockQuote.background#2a2732
  • textBlockQuote.border#75bc77
  • textCodeBlock.background#686868
  • textLink.activeForeground#5a7491
  • textLink.foreground#5a7491
  • textPreformat.foreground#82b9d8
  • textSeparator.foreground#ffffff
  • titleBar.activeBackground#1f1e24
  • titleBar.activeForeground#b6d3e3
  • titleBar.border#2e344000
  • titleBar.inactiveBackground#1f1e24
  • titleBar.inactiveForeground#d8dee966
  • tree.indentGuidesStroke#616e88
  • walkThrough.embeddedEditorBackground#1f1e24
  • welcomePage.buttonBackground#434555
  • welcomePage.buttonHoverBackground#686868
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#63616eitalic
constant.character#ba9f7e
constant.character.escape#ba9f7e
constant.language#a1a6a8
constant.numeric#bd7b6f
constant.regexp#f0c06b
entity.name.class, entity.name.type.class#4b8bc8
entity.name.function#4b8bc8
entity.name.tag#4b8bc8
entity.other.attribute-name#82b9d8
entity.other.inherited-class#82b9d8bold
invalid.deprecated#b6d3e3
invalid.illegal#b6d3e3
keyword.other#d957b6
keyword.control#d957b6
keyword.storage#d957b6
keyword.operator#604f75
markup.heading#ffffff
markup.bold, strongbold
markup.italic, emphasisitalic
markup.bold markup.italic, markup.italic markup.bolditalic bold
markup.underlineunderline
markup.bold markup.underline, markup.underline markup.boldbold underline
markup.italic markup.underline, markup.underline markup.italicitalic underline
markup.bold markup.italic markup.underline, markup.italic markup.bold markup.underline, markup.bold markup.underline markup.italic, markup.italic markup.underline markup.bold, markup.underline markup.italic markup.bold, markup.underline markup.bold markup.italicitalic bold underline
markup.changed#f0c06b
markup.deleted#c35066
markup.inserted#75bc77
meta.preprocessor#5E81AC
punctuation.definition.tag#75bc77
punctuation.section#72badb
punctuation.section.embedded.begin, punctuation.section.embedded.end#75bc77
punctuation.terminator#75bc77
punctuation.definition.variable#72badb
storage#75bc77
string#6b7e8f
string.regexp#f0c06b
support.class#75bc77
support.constant#75bc77
support.function#4b8bc8
support.function.macro#ba9f7e
support.function.construct#4b8bc8
support.type#0088ff
support.type.exception#9760d1bold
token.debug-token#ca61b2
token.error-token#c35066
token.info-token#5a7491
token.warn-token#f0c06b
variable.other#b6d3e3
variable.language#75bc77
variable.parameter#b6d3e3
source.css constant.other.color.rgb-value#ca61b2
source.css meta.property-value#5a7491
source.css keyword.control.at-rule.media, source.css keyword.control.at-rule.media punctuation.definition.keyword#D08770
source.css punctuation.definition.keyword#75bc77
source.css support.type.property-name#b6d3e3
source.diff meta.diff.range.context#82b9d8
source.diff meta.diff.header.from-file#82b9d8
source.diff punctuation.definition.from-file#82b9d8
source.diff punctuation.definition.range#82b9d8
source.diff punctuation.definition.separator#75bc77
entity.name.type.module.elixir#82b9d8
variable.other.readwrite.module.elixir#b6d3e3bold
constant.other.symbol.elixir#b6d3e3bold
variable.other.constant.elixir#82b9d8
source.go constant.other.placeholder.go#f0c06b
source.java comment.block.documentation.javadoc punctuation.definition.entity.html#75bc77
source.java constant.other#b6d3e3
source.java keyword.other.documentation#82b9d8
source.java keyword.other.documentation.author.javadoc#82b9d8
source.java keyword.other.documentation.directive, source.java keyword.other.documentation.custom#82b9d8
source.java keyword.other.documentation.see.javadoc#82b9d8
source.java meta.method-call meta.method#5a7491
source.java meta.tag.template.link.javadoc, source.java string.other.link.title.javadoc#82b9d8
source.java meta.tag.template.value.javadoc#5a7491
source.java punctuation.definition.keyword.javadoc#82b9d8
source.java punctuation.definition.tag.begin.javadoc, source.java punctuation.definition.tag.end.javadoc#616E88
source.java storage.modifier.import#82b9d8
source.java storage.modifier.package#82b9d8
source.java storage.type#82b9d8
source.java storage.type.annotation#D08770
source.java storage.type.generic#82b9d8
source.java storage.type.primitive#75bc77
source.js punctuation.decorator, source.js meta.decorator variable.other.readwrite, source.js meta.decorator entity.name.function#D08770
source.js meta.object-literal.key#5a7491
source.js storage.type.class.jsdoc#82b9d8
source.js string.quoted.template punctuation.quasi.element.begin, source.js string.quoted.template punctuation.quasi.element.end, source.js string.template punctuation.definition.template-expression#75bc77
source.js string.quoted.template meta.method-call.with-arguments#ffffff
source.js string.template meta.template.expression support.variable.property, source.js string.template meta.template.expression variable.other.object#b6d3e3
source.js support.type.primitive#75bc77
source.js variable.other.object#b6d3e3
source.js variable.other.readwrite.alias#82b9d8
text.html.basic constant.character.entity.html#f0c06b
text.html.basic constant.other.inline-data#D08770italic
text.html.basic meta.tag.sgml.doctype#5E81AC
text.html.basic punctuation.definition.entity#75bc77
source.properties entity.name.section.group-title.ini#5a7491
source.properties punctuation.separator.key-value.ini#75bc77
text.html.markdown markup.fenced_code.block#6b7e8f
text.html.markdown markup.fenced_code.block punctuation.definition#6b7e8f
beginning.punctuation.definition.list.markdown, punctuation.definition.list.begin.markdown#4b8bc8
text.html.markdown markup.inline.raw, text.html.markdown markup.inline.raw punctuation.definition.raw#6b7e8f
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.heading.markdown#6b7e8f
text.html.markdown markup.underline.link#61afef
text.html.markdown beginning.punctuation.definition.list#5a7491
text.html.markdown markup.quote#ba9f7e
text.html.markdown beginning.punctuation.definition.quote#ba9f7e
text.html.markdown punctuation.definition.heading#b6d3e3
text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string#5a7491
text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title#ffffff
source.perl punctuation.definition.variable#b6d3e3
source.php meta.function-call, source.php meta.function-call.object#5a7491
source.python entity.name.function.decorator, source.python meta.function.decorator support.type#D08770
source.python meta.function-call.generic#4b8bc8
source.python support.type#5a7491
source.python variable.parameter.function.language#b6d3e3
source.python meta.function.parameters variable.parameter.function.language.special.self#75bc77
source.css.scss punctuation.definition.interpolation.begin.bracket.curly, source.css.scss punctuation.definition.interpolation.end.bracket.curly#75bc77
source.css.scss variable.interpolation#b6d3e3italic
source.ts punctuation.decorator, source.ts meta.decorator variable.other.readwrite, source.ts meta.decorator entity.name.function, source.tsx punctuation.decorator, source.tsx meta.decorator variable.other.readwrite, source.tsx meta.decorator entity.name.function#D08770
source.ts meta.object-literal.key, source.tsx meta.object-literal.key#b6d3e3
source.ts meta.object-literal.key entity.name.function, source.tsx meta.object-literal.key entity.name.function#5a7491
source.ts support.class, source.ts support.type, source.ts entity.name.type, source.ts entity.name.class, source.tsx support.class, source.tsx support.type, source.tsx entity.name.type, source.tsx entity.name.class#82b9d8
source.ts support.constant.math, source.ts support.constant.dom, source.ts support.constant.json, source.tsx support.constant.math, source.tsx support.constant.dom, source.tsx support.constant.json#82b9d8
source.ts support.variable, source.tsx support.variable#b6d3e3
text.xml entity.name.tag.namespace#82b9d8
text.xml keyword.other.doctype#5E81AC
text.xml meta.tag.preprocessor entity.name.tag#5E81AC
text.xml string.unquoted.cdata, text.xml string.unquoted.cdata punctuation.definition.string#D08770italic
source.yaml entity.name.tag#82b9d8

Shiki preview

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

Loading...

Papaya Theme by fethalen - VS Code Theme