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.activeBorder#FFB17A
  • activityBar.background#0d0d0d
  • activityBar.border#181818
  • activityBar.foreground#dbd7ca
  • activityBar.inactiveForeground#dedcd530
  • activityBarBadge.background#bfbaaa
  • activityBarBadge.foreground#0d0d0d
  • badge.background#dedcd590
  • badge.foreground#0d0d0d
  • breadcrumb.activeSelectionForeground#d1d5da
  • breadcrumb.focusForeground#dbd7ca
  • breadcrumb.foreground#959da5
  • breadcrumbPicker.background#0d0d0d
  • button.background#FFB17A
  • button.foreground#0d0d0d
  • button.hoverBackground#E29863
  • checkbox.background#181818
  • checkbox.border#111
  • debugToolBar.background#0d0d0d
  • descriptionForeground#dedcd590
  • diffEditor.insertedTextBackground#4d937522
  • diffEditor.removedTextBackground#ab595922
  • dropdown.background#0d0d0d
  • dropdown.border#181818
  • dropdown.foreground#dbd7ca
  • dropdown.listBackground#181818
  • editor.background#0d0d0d
  • editor.findMatchBackground#e6cc7722
  • editor.findMatchHighlightBackground#e6cc7744
  • editor.focusedStackFrameHighlightBackground#b808
  • editor.foldBackground#0d0d0d
  • editor.foreground#dbd7ca
  • editor.inactiveSelectionBackground#eeeeee10
  • editor.lineHighlightBackground#181818
  • editor.selectionBackground#eeeeee10
  • editor.selectionHighlightBackground#eeeeee15
  • editor.stackFrameHighlightBackground#a707
  • editor.wordHighlightBackground#1c6b4805
  • editor.wordHighlightStrongBackground#1c6b4810
  • editorBracketHighlight.foreground1#a87839
  • editorBracketHighlight.foreground2#7fa712
  • editorBracketHighlight.foreground3#db3b26
  • editorBracketHighlight.foreground4#167e9e
  • editorBracketHighlight.foreground5#da42ac
  • editorBracketHighlight.foreground6#1f7c70
  • editorBracketHighlight.unexpectedBracket.foreground#ff3232
  • editorBracketMatch.background#4d937520
  • editorError.foreground#cb7676
  • editorGroup.border#181818
  • editorGroupHeader.tabsBackground#0d0d0d
  • editorGroupHeader.tabsBorder#181818
  • editorGutter.addedBackground#FFB17A
  • editorGutter.commentRangeForeground#dedcd530
  • editorGutter.deletedBackground#cb7676
  • editorGutter.foldingControlForeground#dedcd590
  • editorGutter.modifiedBackground#6394bf
  • editorHint.foreground#FFB17A
  • editorIndentGuide.activeBackground#ffffff30
  • editorIndentGuide.background#ffffff15
  • editorInfo.foreground#6394bf
  • editorLineNumber.activeForeground#bfbaaa
  • editorLineNumber.foreground#dedcd530
  • editorOverviewRuler.border#111
  • editorWarning.foreground#d4976c
  • editorWhitespace.foreground#ffffff15
  • editorWidget.background#0d0d0d
  • errorForeground#cb7676
  • focusBorder#00000000
  • foreground#dbd7ca
  • gitDecoration.addedResourceForeground#FFB17A
  • gitDecoration.conflictingResourceForeground#d4976c
  • gitDecoration.deletedResourceForeground#cb7676
  • gitDecoration.ignoredResourceForeground#dedcd530
  • gitDecoration.modifiedResourceForeground#6394bf
  • gitDecoration.submoduleResourceForeground#dedcd590
  • gitDecoration.untrackedResourceForeground#5eaab5
  • input.background#181818
  • input.border#181818
  • input.foreground#dbd7ca
  • input.placeholderForeground#dedcd590
  • list.activeSelectionBackground#181818
  • list.activeSelectionForeground#dbd7ca
  • list.focusBackground#181818
  • list.hoverBackground#181818
  • list.hoverForeground#dbd7ca
  • list.inactiveFocusBackground#0d0d0d
  • list.inactiveSelectionBackground#0d0d0d
  • list.inactiveSelectionForeground#dbd7ca
  • notificationCenterHeader.background#0d0d0d
  • notificationCenterHeader.foreground#959da5
  • notifications.background#0d0d0d
  • notifications.border#181818
  • notifications.foreground#dbd7ca
  • notificationsErrorIcon.foreground#cb7676
  • notificationsInfoIcon.foreground#6394bf
  • notificationsWarningIcon.foreground#d4976c
  • panel.background#0d0d0d
  • panel.border#181818
  • panelInput.border#2f363d
  • panelTitle.activeBorder#FFB17A
  • panelTitle.activeForeground#dbd7ca
  • panelTitle.inactiveForeground#959da5
  • peekViewEditor.background#0d0d0d
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#0d0d0d
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#444d56
  • pickerGroup.foreground#dbd7ca
  • problemsErrorIcon.foreground#cb7676
  • problemsInfoIcon.foreground#6394bf
  • problemsWarningIcon.foreground#d4976c
  • progressBar.background#FFB17A
  • quickInput.background#0d0d0d
  • quickInput.foreground#dbd7ca
  • scrollbar.shadow#0008
  • scrollbarSlider.activeBackground#dedcd530
  • scrollbarSlider.background#dedcd510
  • scrollbarSlider.hoverBackground#dedcd530
  • settings.headerForeground#dbd7ca
  • settings.modifiedItemIndicator#FFB17A
  • sideBar.background#0d0d0d
  • sideBar.border#181818
  • sideBar.foreground#D6DED577
  • sideBarSectionHeader.background#0d0d0d
  • sideBarSectionHeader.border#181818
  • sideBarSectionHeader.foreground#dbd7ca
  • sideBarTitle.foreground#dbd7ca
  • statusBar.background#0d0d0d
  • statusBar.border#181818
  • statusBar.debuggingBackground#181818
  • statusBar.debuggingForeground#bfbaaa
  • statusBar.foreground#bfbaaa
  • statusBar.noFolderBackground#0d0d0d
  • statusBarItem.prominentBackground#181818
  • tab.activeBackground#0d0d0d
  • tab.activeBorder#181818
  • tab.activeBorderTop#dedcd590
  • tab.activeForeground#dbd7ca
  • tab.border#181818
  • tab.hoverBackground#181818
  • tab.inactiveBackground#0d0d0d
  • tab.inactiveForeground#959da5
  • tab.unfocusedActiveBorder#181818
  • tab.unfocusedActiveBorderTop#181818
  • tab.unfocusedHoverBackground#0d0d0d
  • terminal.ansiBlack#393a34
  • terminal.ansiBlue#6394bf
  • terminal.ansiBrightBlack#393a34
  • terminal.ansiBrightBlue#6394bf
  • terminal.ansiBrightCyan#5eaab5
  • terminal.ansiBrightGreen#FFB17A
  • terminal.ansiBrightMagenta#db889a
  • terminal.ansiBrightRed#cb7676
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e6cc77
  • terminal.ansiCyan#5eaab5
  • terminal.ansiGreen#FFB17A
  • terminal.ansiMagenta#db889a
  • terminal.ansiRed#cb7676
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#e6cc77
  • terminal.foreground#dbd7ca
  • textBlockQuote.background#0d0d0d
  • textBlockQuote.border#181818
  • textCodeBlock.background#0d0d0d
  • textLink.activeForeground#E29863
  • textLink.foreground#FFB17A
  • textPreformat.foreground#d1d5da
  • textSeparator.foreground#586069
  • titleBar.activeBackground#0d0d0d
  • titleBar.activeForeground#bfbaaa
  • titleBar.border#181818
  • titleBar.inactiveBackground#0d0d0d
  • titleBar.inactiveForeground#959da5
  • tree.indentGuidesStroke#2f363d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#393939italic
comment.block.documentation storage.type.class.jsdoc#93b478italic
constant.other.php#0f9473bold
keyword.operator.class.php#ca8750
variable, string constant.other.placeholder, variable.other.property, variable.other.readwrite, support.variable.property, punctuation.definition.variable#f0ccaf
meta.object-literal.key#ca9a72
meta.brace.round#a1866f
constant.other.color#ffffff
invalid, invalid.illegal#c74017
keyword#978d7a
keyword.operator.new#EEB682italic
storage.type#E19D66italic
storage.type.enum.ts, storage.type.enum.tsx#a887af
entity.name.type.enum.ts, entity.name.type.enum.tsx#a076b9bold
entity.name.label.ts, entity.name.label.tsx#9ba58f
keyword.operator.expression.of#BBB958
storage.type.function.arrow#cc5b53
storage.type.property#e75437italic
storage.modifier#a56b5ditalic
meta.brace.square#71a773bold
storage.modifier.async#3ea072
constant.other.color, punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, keyword.other.template, keyword.other.substitution#E47559
variable.interpolation
keyword.operator.ternary#987ebb
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#95729c
keyword.control punctuation.definition.keyword.css, keyword.control, meta.tag#F0CCAF
entity.other.keyframe-offset.css#F0CCAF
keyword.control.require#F0CCAF
keyword.control.switch#a87ea8
keyword.control.as#a5672d
keyword.control.flow.python, keyword.control.conditional#84BD95
keyword.control.loop#F0CCAF
keyword.controlitalic
keyword.control.return, keyword.control.flow#F0CCAFitalic
keyword.control.trycatch#ff6219italic
support.class.builtin#37aa71bold
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, source.vue entity.name.tag, entity.name.tag.html#FFB17Abold
keyword.otheritalic
support.other.variable, string.other.link#d89962
constant.numeric#e47559
keyword.other.unit#c56c56
keyword.other.unit.px#E6663F
keyword.other.unit.em#aa865a
keyword.other.unit.rem#b8b655
constant.language.infinity#9871d6
constant.language.null#738b85
constant.language.undefined#878f8c
keyword.operator.expression.void#575757italic
constant.language.boolean.true#F67E4A
constant.language.boolean.false#F67E4A
keyword.other.unit
constant.language, support.constant, constant.character, constant.escape, keyword.other, constant.other.caps#DAC66F
keyword.operator.optional, punctuation.accessor.optional#bb4d4d
keyword.operator.arithmetic#b87e76
keyword.operator.logical#dd982f
keyword.operator.relational, keyword.operator.comparison#DF8F75
keyword.operator.assignment#DF8F75
keyword.operator.expression#ca6969italic
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#FFB17A
punctuation.definition.string.template#ffd6bb
punctuation.terminator.statement#614d40
keyword.operator.rest#d86e44
meta.attribute string.quoted, meta.tag.attributes string.quoted#da6744
support.function.construct.output#69a097italic
keyword.generator.asterisk#496affbold
support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#d1b361
entity.name.property#be9233bold
entity.name.function, meta.definition.method, meta.definition.function, variable.function, support.function, keyword.other.special-method#d85932
meta.object-literal.key entity.name.function, variable.other.constant entity.name.function, meta.field.declaration entity.name.function, meta.definition.method, meta.definition.functionbold
meta.function-call entity.name.function, meta.function-call support.function, support.function.misc.css, support.function.misc.scss#e6663fitalic
meta.function-call support.function#e05126
variable.parameter#E7997A
support.class, support.constantbold
support.class.console#616161bold
variable.other.readwrite support.class.error, support.class.error#d31121bold
meta.decorator#95b6a1italic
variable.other.constant#d6a86cbold
entity.name.type.ts, entity.name.type.tsx, meta.interface.ts entity.name.type, meta.interface.tsx entity.name.type, meta.type.declaration.ts entity.name.type, meta.type.declaration.tsx entity.name.type, meta.type.annotation.ts entity.name.type, meta.type.annotation.tsx entity.name.type, meta.type.annotation.ts meta.brace.square.ts, meta.type.annotation.tsx meta.brace.square.tsx, meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type, meta.return.type.ts entity.name.type, meta.return.type.tsx entity.name.type, new.expr.ts meta.type.annotation.ts entity.name.type.ts, new.expr.tsx meta.type.annotation.tsx entity.name.type.tsx, support.type.builtin.ts, support.type.builtin.tsx#cfa54aitalic underline
meta.type.annotation.ts meta.type.parameters.ts entity.name.type.ts, meta.type.annotation.tsx meta.type.parameters.tsx entity.name.type.tsx, meta.parameters.ts meta.type.annotation.ts meta.type.parameters.ts entity.name.type.ts, meta.parameters.tsx meta.type.annotation.tsx meta.type.parameters.tsx entity.name.type.tsx, meta.type.declaration.ts meta.type.parameters.ts entity.name.type.ts, meta.type.declaration.tsx meta.type.parameters.tsx entity.name.type.tsx, meta.interface.ts meta.type.parameters.ts entity.name.type.ts, meta.interface.tsx meta.type.parameters.tsx entity.name.type.tsx, new.expr.ts meta.type.parameters.ts entity.name.type.ts, new.expr.tsx meta.type.parameters.tsx entity.name.type.tsx, meta.objectliteral.ts meta.type.parameters.ts entity.name.type.ts, meta.objectliteral.tsx meta.type.parameters.tsx entity.name.type.tsx, meta.return.type.ts meta.type.parameters.ts entity.name.type.ts, meta.return.type.tsx meta.type.parameters.tsx entity.name.type.tsx#948B6Citalic underline
meta.interface.ts entity.other.inherited-class#da6744italic underline
meta.type.annotation string.quoted#b68145
meta.var.expr meta.brace.round#835d31
punctuation.definition.string#aa7a43
punctuation.definition.block#AB9175
meta.arrow punctuation.definition.block#99796e
meta.objectliteral punctuation.definition.block#C57E3C
meta.objectliteral meta.method.declaration punctuation.definition.block#7a5242
punctuation.section.embedded#ad6949
text.html.php.blade punctuation.section.embedded, meta.embedded.block.php punctuation.section.embedded#866d9c
punctuation.definition.binding-pattern.array#F0CCAFbold
punctuation.definition.binding-pattern.object#8d491bbold
entity.name.type.module.ts, entity.name.type.module.tsx#d1a427bold italic underline
keyword.operator.type.ts, keyword.operator.type.tsx#a3740e
meta.object.type punctuation.definition.block, meta.type.declaration meta.brace.square, punctuation.definition.typeparameters, meta.type.annotation punctuation.accessor, meta.type.annotation meta.brace.square#a57f4d
keyword.operator.type.annotation, meta.type.annotation.tsx#b68d58
meta.type.annotation meta.brace.square#d6b386
meta.type.annotation meta.field.declaration meta.definition.property variable.object.property#9b7057
support.type.primitive.ts, support.type.primitive.tsx#be7617italic underline
keyword.operator.spread#974842italic
keyword.operator.of#F0CCAFitalic
keyword.operator.expression.delete#d13c31italic
entity.name.type.class, support.class.component, entity.name.type.module, entity.other.inherited-class, new.expr.ts entity.name.type.ts, new.expr.tsx entity.name.type.tsx#e2a128bold
new.expr.ts meta.type.parameters.ts entity.name.type.ts#9b6b23italic underline
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#84BD95
meta.property-list entity.name.tag#FFB17A
support.type.vendored.property-name#F0CCAF
source.css support.constant.property-value.css, source.sass support.constant.property-value.css, source.scss support.constant.property-value.css, source.less support.constant.property-value.css, source.stylus support.constant.property-value.css, source.postcss support.constant.property-value.css#eeae94
support.constant.color.w3c-standard-color-name.css#ecc4b3
keyword.other.important#992219bold
source.css variable, source.sass variable, source.scss variable, source.less variable, source.stylus variable, source.postcss variable#ffe8cditalic
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#EBB88F
variable.other.class.jsbold
entity.name.type.instance.js#e6b515bold
variable.language.this#a37651
entity.name.method.js#82AAFFitalic
meta.decorator variable.other.readwrite, punctuation.decorator#BDB999
meta.embedded.expression variable.other.readwrite, meta.embedded.expression punctuation.section.embedded.begin, meta.embedded.expression punctuation.section.embedded.end, meta.embedded.expression#dfa57c
meta.class-method.js entity.name.function.js, variable.function.constructor#BD9D58
entity.other.attribute-name#DB7C51
source.js constant.other.object.key.js string#F0CCAF
source.vue text.html.vue-html string#d4b49a
source.directive.vue variable#e9dfcc
expression.embedded.vue variable#e9dfcc
meta.tag.metadata.doctype entity.name.tag.html, meta.tag.structure.html entity.name.tag.html, meta.tag.structure.head entity.name.tag.html, meta.tag.structure.body entity.name.tag.html, text.html.php.blade entity.name.tag.htmlbold
meta.tag.metadata.script entity.name.tag.html, meta.tag.metadata.style entity.name.tag.html, meta.tag.structure.template entity.name.tag.html
meta.jsx.children.tsx#DDCAC1
entity.other.attribute-name.class punctuation.definition.entity.css, entity.other.attribute-name.class#ff754b
entity.name.tag.reference.scss#b44529
punctuation.section.property-list#aa766e
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.css punctuation#e28f37
meta.attribute.id.html entity.other.attribute-name.html, entity.other.attribute-name.id.css punctuation.definition.entity.css, entity.other.attribute-name.id.css#E6AA43bold
meta.property-value.css support.constant#bba38f
source.css keyword.control, source.scss keyword.control, source.sass keyword.control, source.css keyword.control punctuation.definition.keyword.scss, source.scss keyword.control punctuation.definition.keyword.scss, source.sass keyword.control punctuation.definition.keyword.scss#DAC66F
markup.inserted#C3E88D
markup.deleted#FF5370
markup.changed#C792EA
string.regexp#d46fbe
string.regexp punctuation#6c4db4
keyword.control.anchor.regexp#F0CCAF
constant.character.numeric.regexp#e07aaa
constant.character.escape.backslash.regexp#DFC958
string.regexp punctuation.definition.string, string.regexp keyword.operator#F7E864
constant.character.escape#B2A667
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#E4C57Citalic
keyword.begin.blade, keyword.end.blade, keyword.blade#c25656italic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#D4B76D
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#da6744
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#DA6744
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#ca8e33
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#B4A562
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#AD883F
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#C7AA5F
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#ad4120
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#849996
text.html.markdown, punctuation.definition.list_item.markdown#f5d8c3
text.html.markdown markup.inline.raw.markdown#C792EA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#da5656
markup.italic#ddc2a8italic
markup.bold, markup.bold string#e9ded7bold
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#dfd4bfitalic bold
markup.underline#F78C6Cunderline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#CECE5E
string.other.link.description.title.markdown#C792EA
constant.other.reference.link.markdown#e4b969
markup.raw.block#C792EA
markup.raw.block.fenced.markdown#00000050
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#C7B655
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#f5d8c3
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#f5d8c3

Shiki preview

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

Loading...

Afternoon Delight - Coding Theme