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#151818
  • activityBar.border#1d252555
  • activityBar.foreground#cfb5a9
  • activityBar.inactiveForeground#cfb5a977
  • activityBarBadge.background#5f3f16
  • badge.background#123525
  • badge.foreground#e0cbc1
  • button.background#4fac8a31
  • button.foreground#f0dbd1
  • checkbox.background#4fac8a31
  • checkbox.border#4fac8a33
  • descriptionForeground#cfb5a998
  • diffEditor.insertedTextBackground#3bab881c
  • diffEditor.insertedTextBorder#3bab8848
  • diffEditor.removedTextBackground#b424242a
  • diffEditor.removedTextBorder#b4242448
  • dropdown.background#1c302d
  • dropdown.border#4fac8a33
  • dropdown.foreground#cfb5a9
  • editor.background#1E2122
  • editor.findMatchBackground#d475f12a
  • editor.findMatchHighlightBackground#ce0d9e33
  • editor.findMatchHighlightBorder#d857ad33
  • editor.foreground#cfb5a9
  • editor.lineHighlightBackground#cfb5a908
  • editor.lineHighlightBorder#0000
  • editor.selectionBackground#10a55f21
  • editor.selectionHighlightBackground#31925d27
  • editor.wordHighlightBackground#db7f3333
  • editor.wordHighlightStrongBackground#db923349
  • editorCursor.background#31925d55
  • editorCursor.foreground#32bb70
  • editorError.foreground#ff440b
  • editorGroup.border#cfb5a933
  • editorGroup.dropBackground#32bb6615
  • editorGroupHeader.tabsBackground#1E2122
  • editorGutter.addedBackground#0b5c26
  • editorGutter.commentRangeForeground#57514d
  • editorGutter.deletedBackground#72403f
  • editorGutter.modifiedBackground#145e4b
  • editorHint.border#21b39a
  • editorInfo.border#1ea050
  • editorLineNumber.activeForeground#31925d
  • editorLineNumber.foreground#cfb5a93b
  • editorLink.activeForeground#20dda1
  • editorOverviewRuler.addedForeground#0b5c26
  • editorOverviewRuler.modifiedForeground#1d796c
  • editorSuggestWidget.foreground#cfb5a9
  • editorSuggestWidget.highlightForeground#2e9c60
  • editorSuggestWidget.selectedBackground#31925d33
  • editorWarning.foreground#ffaa0b
  • editorWhitespace.foreground#cfb5a913
  • editorWidget.background#26292b
  • editorWidget.border#3c4444
  • editorWidget.foreground#cfb5a9
  • focusBorder#9c542a
  • foreground#cfb5a9
  • gitDecoration.addedResourceForeground#1db129
  • gitDecoration.conflictingResourceForeground#c26d54
  • gitDecoration.deletedResourceForeground#72403f
  • gitDecoration.modifiedResourceForeground#488582
  • input.background#4fac8a0e
  • input.border#4fac8a33
  • input.foreground#cfb5a9
  • list.activeSelectionBackground#50bb8644
  • list.activeSelectionForeground#fff8f5
  • list.dropBackground#31925d13
  • list.errorForeground#f15c48
  • list.filterMatchBackground#0eff7a2c
  • list.focusBackground#3BAB8725
  • list.focusForeground#e9ded9
  • list.highlightForeground#3BAB87
  • list.hoverBackground#1e4e4352
  • list.inactiveSelectionBackground#cfb5a911
  • list.inactiveSelectionForeground#cfb5a9
  • list.invalidItemForeground#b8980a
  • list.warningForeground#b8820c
  • listFilterWidget.background#033f2c
  • listFilterWidget.noMatchesOutline#ce4235
  • listFilterWidget.outline#00000000
  • menu.background#0b1314
  • menu.foreground#cfb5a9
  • menu.selectionBackground#3BAB8755
  • menu.selectionForeground#cfb5a9
  • menu.separatorBackground#cfb5a907
  • merge.incomingContentBackground#da652123
  • merge.incomingHeaderBackground#da65214b
  • minimap.findMatchHighlight#31925d2a
  • minimap.selectionHighlight#31925d2a
  • notifications.background#2d3535
  • notifications.border#203333
  • notifications.foreground#cfb5a9
  • panel.background#1E2122
  • panelTitle.activeForeground#cfb5a9
  • panelTitle.inactiveForeground#cfb5a966
  • peekView.border#31925d99
  • peekViewEditor.background#31925d10
  • peekViewEditor.matchHighlightBackground#ff6d0b44
  • peekViewResult.background#10492a4f
  • peekViewResult.fileForeground#cfb5a9
  • peekViewResult.lineForeground#cfb5a909
  • peekViewTitle.background#31925d22
  • peekViewTitleLabel.foreground#cfb5a9
  • pickerGroup.foreground#62a893
  • progressBar.background#31925d
  • scrollbarSlider.activeBackground#cfb5a910
  • scrollbarSlider.background#cfb5a913
  • scrollbarSlider.hoverBackground#cfb5a917
  • selection.background#4fac8a99
  • settings.headerForeground#e7d4cb
  • settings.modifiedItemIndicator#31925d
  • sideBar.background#1d2020
  • sideBar.border#0000
  • sideBar.foreground#86776f
  • sideBarSectionHeader.background#131516
  • sideBarSectionHeader.border#0000
  • sideBarTitle.foreground#cfb5a9
  • statusBar.background#111616
  • statusBar.debuggingBackground#071114
  • statusBar.foreground#cfb5a9
  • statusBar.noFolderBackground#071114
  • statusBarItem.prominentBackground#3BAB87
  • statusBarItem.prominentHoverBackground#3BAB87dd
  • statusBarItem.remoteBackground#3BAB87
  • tab.activeBackground#252829
  • tab.activeForeground#f0e1db
  • tab.border#1E2122
  • tab.inactiveBackground#16191a
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#3465a5
  • terminal.ansiBrightBlack#151616
  • terminal.ansiBrightBlue#3a89d3
  • terminal.ansiBrightCyan#1bdfbe
  • terminal.ansiBrightGreen#1b9e47
  • terminal.ansiBrightMagenta#ff246d
  • terminal.ansiBrightRed#d43e2a
  • terminal.ansiBrightWhite#fae8e0
  • terminal.ansiBrightYellow#ff9b18
  • terminal.ansiCyan#08a087
  • terminal.ansiGreen#068020
  • terminal.ansiMagenta#c40b48
  • terminal.ansiRed#b61702
  • terminal.ansiWhite#cfb5a9
  • terminal.ansiYellow#d37d0d
  • terminal.background#1E2122
  • terminal.foreground#cfb5a9
  • terminal.selectionBackground#31925d2d
  • terminalCursor.background#31925d55
  • terminalCursor.foreground#31925d
  • textLink.activeForeground#ff6d0b
  • textLink.foreground#b95715
  • textPreformat.foreground#ee6f58
  • titleBar.activeBackground#1E2122
  • titleBar.activeForeground#cfb5a9
  • titleBar.inactiveBackground#333b3d
  • titleBar.inactiveForeground#cfb5a9
  • tree.indentGuidesStroke#cfb5a918
  • widget.shadow#151c1d98

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#635c5citalic
comment.block.documentation storage.type.class.jsdoc#aa9d83italic
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#dbba9f
meta.object-literal.key#c0a085—
meta.brace.round#a1866f—
constant.other.color#ffffff—
invalid, invalid.illegal#E14446—
keyword#8f8a81—
keyword.operator.new#9e8e62italic
storage.type#c07570italic
storage.type.enum.ts#8b788f—
entity.name.type.enum.ts#8b7499bold
keyword.operator.expression.of#BBB958—
storage.type.function.arrow#af453d
storage.type.property#ff701ditalic
storage.modifier#a3685aitalic
meta.brace.square#71a773bold
storage.modifier.async#289b65italic bold
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#ac826eab—
keyword.operator.ternary#8c63c0—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#8e7b92—
keyword.control punctuation.definition.keyword.css, keyword.control, meta.tag#76ad83—
keyword.control.require#63c57a—
keyword.control.switch#8f718f—
keyword.control.as#8b5624—
keyword.control.flow.python, keyword.control.conditional#5bb177—
keyword.control.loop#bbb958—
keyword.control—italic
keyword.control.return, keyword.control.flow#01a151italic
keyword.control.trycatch#db523aitalic
support.class.builtin#43ac77bold
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, source.vue entity.name.tag, entity.name.tag.html#13a570bold
keyword.other—italic
support.other.variable, string.other.link#e29d9e—
constant.numeric#d1735b—
keyword.other.unit#a35440—
keyword.other.unit.px#457e79—
keyword.other.unit.em#a18767—
keyword.other.unit.rem#ca931b—
constant.language.infinity#8569b3italic
constant.language.null#67726fitalic
constant.language.undefined#616b68italic
keyword.operator.expression.void#575757italic
constant.language.boolean.true#35ac45italic
constant.language.boolean.false#96687fitalic
keyword.other.unit—italic
constant.language, support.constant, constant.character, constant.escape, keyword.other, constant.other.caps#2db889—
keyword.operator.optional, punctuation.accessor.optional#914848—
keyword.operator.arithmetic#b87e76—
keyword.operator.logical#c58c37—
keyword.operator.relational, keyword.operator.comparison#94b66e—
keyword.operator.assignment#b45f5f—
keyword.operator.expression#914848italic
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#d87c3a—
punctuation.definition.string.template#ffd6bb—
punctuation.terminator.statement#614d40—
keyword.operator.rest#d86e44—
meta.attribute string.quoted, meta.tag.attributes string.quoted#e2b376—
support.function.construct.output#69a097italic
keyword.generator.asterisk#7367ddbold
support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#a8a769—
entity.name.property#be9233bold
entity.name.function, meta.definition.method, meta.definition.function, variable.function, support.function, keyword.other.special-method#c5512e—
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#d3491fitalic
meta.function-call support.function#d35d3a—
variable.parameter#ce8365—
support.class, support.constant—bold
support.class.console#747070bold
variable.other.readwrite support.class.error, support.class.error#d32e11bold
meta.decorator#7ea08bitalic
variable.other.constant#88b99bbold
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#c29a46italic 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#858356underline italic
meta.interface.ts entity.other.inherited-class#bb5a19underline italic
meta.type.annotation string.quoted#b68145—
meta.var.expr meta.brace.round#835d31
punctuation.definition.string#aa7a43
punctuation.definition.block#635546
meta.arrow punctuation.definition.block#6b5750
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#9d82b4
punctuation.definition.binding-pattern.array#145037bold
punctuation.definition.binding-pattern.object#8d491bbold
entity.name.type.module.ts, entity.name.type.module.tsx#d1a427italic bold 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#b68d58
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#997a51
support.type.primitive.ts, support.type.primitive.tsx#a8660eitalic underline
keyword.operator.spread#974842italic
keyword.operator.of#71c7aditalic
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#ca8a12bold
new.expr.ts meta.type.parameters.ts entity.name.type.ts#9b6b23underline italic
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#8fb49a—
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#dfbdb0
support.constant.color.w3c-standard-color-name.css#cca596—
keyword.other.important#992219bold
source.css variable, source.sass variable, source.scss variable, source.less variable, source.stylus variable, source.postcss variable#ece0c9italic
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#53ac69—
variable.other.class.js—bold
entity.name.type.instance.js#cca115bold
variable.language.this#b38967italic
entity.name.method.js#82AAFFitalic
meta.decorator variable.other.readwrite, punctuation.decorator#7ea08b—
meta.embedded.expression variable.other.readwrite, meta.embedded.expression punctuation.section.embedded.begin, meta.embedded.expression punctuation.section.embedded.end, meta.embedded.expression#bba38f
meta.class-method.js entity.name.function.js, variable.function.constructor#88bd58—
entity.other.attribute-name#d68d59—
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—italic
meta.jsx.children.tsx#DDCAC1—
entity.other.attribute-name.class punctuation.definition.entity.css, entity.other.attribute-name.class#dd7251—
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#cf812e—
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#038539—
markup.inserted#C3E88D—
markup.deleted#FF5370—
markup.changed#C792EA—
string.regexp#bb75ac—
string.regexp punctuation#5f4a92—
keyword.control.anchor.regexp#5dbdad—
constant.character.numeric.regexp#e07aaa—
constant.character.escape.backslash.regexp#9e58df—
string.regexp punctuation.definition.string, string.regexp keyword.operator#614bdf—
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#ac5757italic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json string#d87034—
source.json meta.structure.dictionary.json support.type.property-name.json#76b379
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c28c7b
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#cfb5a9—
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#dfd4bfbold
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—
punctuation.definition.fenced.markdown#00000050—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#cfb5a9—
variable.language.fenced.markdown#65737E—
meta.separator#65737Ebold
markup.table#cfb5a9—
Paddy Medium Old by autogibbon - VS Code Theme