Skip to main content
Coding Theme

Color themes

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.control—italic
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.other—italic
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.function—bold
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.constant—bold
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.js—bold
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.html—bold
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.quote—italic
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—