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#4d9375
  • activityBar.background#121212
  • activityBar.border#181818
  • activityBar.foreground#dbd7ca
  • activityBar.inactiveForeground#dedcd530
  • activityBarBadge.background#bfbaaa
  • activityBarBadge.foreground#121212
  • badge.background#dedcd590
  • badge.foreground#121212
  • breadcrumb.activeSelectionForeground#d1d5da
  • breadcrumb.focusForeground#dbd7ca
  • breadcrumb.foreground#959da5
  • breadcrumbPicker.background#121212
  • button.background#4d9375
  • button.foreground#121212
  • button.hoverBackground#4d9375
  • checkbox.background#181818
  • checkbox.border#111
  • debugToolBar.background#121212
  • descriptionForeground#dedcd590
  • diffEditor.insertedTextBackground#4d937522
  • diffEditor.removedTextBackground#ab595922
  • dropdown.background#121212
  • dropdown.border#181818
  • dropdown.foreground#dbd7ca
  • dropdown.listBackground#181818
  • editor.background#121212
  • editor.findMatchBackground#e6cc7722
  • editor.findMatchHighlightBackground#e6cc7744
  • editor.focusedStackFrameHighlightBackground#b808
  • editor.foldBackground#121212
  • 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#121212
  • editorGroupHeader.tabsBorder#181818
  • editorGutter.addedBackground#4d9375
  • editorGutter.commentRangeForeground#dedcd530
  • editorGutter.deletedBackground#cb7676
  • editorGutter.foldingControlForeground#dedcd590
  • editorGutter.modifiedBackground#6394bf
  • editorHint.foreground#4d9375
  • 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#121212
  • errorForeground#cb7676
  • focusBorder#00000000
  • foreground#dbd7ca
  • gitDecoration.addedResourceForeground#4d9375
  • 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#121212
  • list.inactiveSelectionBackground#121212
  • list.inactiveSelectionForeground#dbd7ca
  • notificationCenterHeader.background#121212
  • notificationCenterHeader.foreground#959da5
  • notifications.background#121212
  • notifications.border#181818
  • notifications.foreground#dbd7ca
  • notificationsErrorIcon.foreground#cb7676
  • notificationsInfoIcon.foreground#6394bf
  • notificationsWarningIcon.foreground#d4976c
  • panel.background#121212
  • panel.border#181818
  • panelInput.border#2f363d
  • panelTitle.activeBorder#4d9375
  • panelTitle.activeForeground#dbd7ca
  • panelTitle.inactiveForeground#959da5
  • peekViewEditor.background#121212
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#121212
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#444d56
  • pickerGroup.foreground#dbd7ca
  • problemsErrorIcon.foreground#cb7676
  • problemsInfoIcon.foreground#6394bf
  • problemsWarningIcon.foreground#d4976c
  • progressBar.background#4d9375
  • quickInput.background#121212
  • quickInput.foreground#dbd7ca
  • scrollbar.shadow#0008
  • scrollbarSlider.activeBackground#dedcd530
  • scrollbarSlider.background#dedcd510
  • scrollbarSlider.hoverBackground#dedcd530
  • settings.headerForeground#dbd7ca
  • settings.modifiedItemIndicator#4d9375
  • sideBar.background#121212
  • sideBar.border#181818
  • sideBar.foreground#bfbaaa
  • sideBarSectionHeader.background#121212
  • sideBarSectionHeader.border#181818
  • sideBarSectionHeader.foreground#dbd7ca
  • sideBarTitle.foreground#dbd7ca
  • statusBar.background#121212
  • statusBar.border#181818
  • statusBar.debuggingBackground#181818
  • statusBar.debuggingForeground#bfbaaa
  • statusBar.foreground#bfbaaa
  • statusBar.noFolderBackground#121212
  • statusBarItem.prominentBackground#181818
  • tab.activeBackground#121212
  • tab.activeBorder#181818
  • tab.activeBorderTop#dedcd590
  • tab.activeForeground#dbd7ca
  • tab.border#181818
  • tab.hoverBackground#181818
  • tab.inactiveBackground#121212
  • tab.inactiveForeground#959da5
  • tab.unfocusedActiveBorder#181818
  • tab.unfocusedActiveBorderTop#181818
  • tab.unfocusedHoverBackground#121212
  • terminal.ansiBlack#393a34
  • terminal.ansiBlue#6394bf
  • terminal.ansiBrightBlack#393a34
  • terminal.ansiBrightBlue#6394bf
  • terminal.ansiBrightCyan#5eaab5
  • terminal.ansiBrightGreen#4d9375
  • terminal.ansiBrightMagenta#db889a
  • terminal.ansiBrightRed#cb7676
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e6cc77
  • terminal.ansiCyan#5eaab5
  • terminal.ansiGreen#4d9375
  • terminal.ansiMagenta#db889a
  • terminal.ansiRed#cb7676
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#e6cc77
  • terminal.foreground#dbd7ca
  • textBlockQuote.background#121212
  • textBlockQuote.border#181818
  • textCodeBlock.background#121212
  • textLink.activeForeground#4d9375
  • textLink.foreground#4d9375
  • textPreformat.foreground#d1d5da
  • textSeparator.foreground#586069
  • titleBar.activeBackground#121212
  • titleBar.activeForeground#bfbaaa
  • titleBar.border#181818
  • titleBar.inactiveBackground#121212
  • titleBar.inactiveForeground#959da5
  • tree.indentGuidesStroke#2f363d
  • welcomePage.buttonBackground#2f363d
  • welcomePage.buttonHoverBackground#444d56

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#494e58italic
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#b89e59italic
storage.type#b46c67italic
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#e76f37italic
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#ce967cab—
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#68ad83—
entity.other.keyframe-offset.css#bdc94d—
keyword.control.require#63c57a—
keyword.control.switch#a87ea8—
keyword.control.as#a5672d—
keyword.control.flow.python, keyword.control.conditional#5bb177—
keyword.control.loop#bbb958—
keyword.control—italic
keyword.control.return, keyword.control.flow#259252italic
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#05a168bold
keyword.other—italic
support.other.variable, string.other.link#d89962—
constant.numeric#e47559—
keyword.other.unit#c56c56—
keyword.other.unit.px#3f8b85—
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#38cf4c—
constant.language.boolean.false#be7598—
keyword.other.unit—
constant.language, support.constant, constant.character, constant.escape, keyword.other, constant.other.caps#17c78c—
keyword.operator.optional, punctuation.accessor.optional#bb4d4d—
keyword.operator.arithmetic#b87e76—
keyword.operator.logical#dd982f—
keyword.operator.relational, keyword.operator.comparison#94b66e—
keyword.operator.assignment#c76f6f—
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#e68a48—
punctuation.definition.string.template#ffd6bb—
punctuation.terminator.statement#614d40—
keyword.operator.rest#d86e44—
meta.attribute string.quoted, meta.tag.attributes string.quoted#e9b066—
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#d38a6d—
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#91bda2bold
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#91946citalic underline
meta.interface.ts entity.other.inherited-class#bb5a19italic underline
meta.type.annotation string.quoted#b68145—
meta.var.expr meta.brace.round#835d31
punctuation.definition.string#aa7a43
punctuation.definition.block#8d7255
meta.arrow punctuation.definition.block#99796e
meta.objectliteral punctuation.definition.block#b97638
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#2a6d51bold
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#6dddbbitalic
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#72c58b—
support.type.vendored.property-name#70dba5—
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#53ac69—
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#99bda6—
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#88bd58—
entity.other.attribute-name#d4864d—
source.js constant.other.object.key.js string#bba38f—
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#1dc78ebold
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#00a043—
markup.inserted#C3E88D—
markup.deleted#FF5370—
markup.changed#C792EA—
string.regexp#d46fbe—
string.regexp punctuation#6c4db4—
keyword.control.anchor.regexp#55d4bf—
constant.character.numeric.regexp#e07aaa—
constant.character.escape.backslash.regexp#9e58df—
string.regexp punctuation.definition.string, string.regexp keyword.operator#7a64f7—
constant.character.escape#62a594—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFFitalic
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#77c484
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f0805e
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#cf9d8e
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#adb462
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#3fad6d
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#3aa33a
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#5ece91—
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#55c788—
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—