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#1c6b48
  • activityBar.background#ffffff
  • activityBar.border#f0f0f0
  • activityBar.foreground#393a34
  • activityBar.inactiveForeground#393a3450
  • activityBarBadge.background#4e4f47
  • activityBarBadge.foreground#ffffff
  • badge.background#393a3490
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#586069
  • breadcrumb.focusForeground#393a34
  • breadcrumb.foreground#6a737d
  • breadcrumbPicker.background#ffffff
  • button.background#1c6b48
  • button.foreground#ffffff
  • button.hoverBackground#1c6b48
  • checkbox.background#f5f5f5
  • checkbox.border#d1d5da
  • debugToolBar.background#ffffff
  • descriptionForeground#393a3490
  • diffEditor.insertedTextBackground#1c6b4815
  • diffEditor.removedTextBackground#ab595910
  • dropdown.background#ffffff
  • dropdown.border#f0f0f0
  • dropdown.foreground#393a34
  • dropdown.listBackground#f5f5f5
  • editor.background#ffffff
  • editor.findMatchBackground#e6cc7744
  • editor.findMatchHighlightBackground#e6cc7766
  • editor.focusedStackFrameHighlightBackground#fff5b1
  • editor.foldBackground#ffffff
  • editor.foreground#393a34
  • editor.inactiveSelectionBackground#22222210
  • editor.lineHighlightBackground#f5f5f5
  • editor.selectionBackground#22222210
  • editor.selectionHighlightBackground#22222215
  • editor.stackFrameHighlightBackground#fffbdd
  • 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#1c6b4820
  • editorError.foreground#ab5959
  • editorGroup.border#f0f0f0
  • editorGroupHeader.tabsBackground#ffffff
  • editorGroupHeader.tabsBorder#f0f0f0
  • editorGutter.addedBackground#1c6b48
  • editorGutter.commentRangeForeground#393a3450
  • editorGutter.deletedBackground#ab5959
  • editorGutter.foldingControlForeground#393a3490
  • editorGutter.modifiedBackground#296aa3
  • editorHint.foreground#1c6b48
  • editorIndentGuide.activeBackground#00000030
  • editorIndentGuide.background#00000015
  • editorInfo.foreground#296aa3
  • editorLineNumber.activeForeground#4e4f47
  • editorLineNumber.foreground#393a3450
  • editorOverviewRuler.border#fff
  • editorWarning.foreground#a65e2b
  • editorWhitespace.foreground#00000015
  • editorWidget.background#ffffff
  • errorForeground#ab5959
  • focusBorder#00000000
  • foreground#393a34
  • gitDecoration.addedResourceForeground#1c6b48
  • gitDecoration.conflictingResourceForeground#a65e2b
  • gitDecoration.deletedResourceForeground#ab5959
  • gitDecoration.ignoredResourceForeground#393a3450
  • gitDecoration.modifiedResourceForeground#296aa3
  • gitDecoration.submoduleResourceForeground#393a3490
  • gitDecoration.untrackedResourceForeground#2993a3
  • input.background#f5f5f5
  • input.border#f0f0f0
  • input.foreground#393a34
  • input.placeholderForeground#393a3490
  • list.activeSelectionBackground#f5f5f5
  • list.activeSelectionForeground#393a34
  • list.focusBackground#f5f5f5
  • list.hoverBackground#f5f5f5
  • list.hoverForeground#393a34
  • list.inactiveFocusBackground#ffffff
  • list.inactiveSelectionBackground#ffffff
  • list.inactiveSelectionForeground#393a34
  • notificationCenterHeader.background#ffffff
  • notificationCenterHeader.foreground#6a737d
  • notifications.background#ffffff
  • notifications.border#f0f0f0
  • notifications.foreground#393a34
  • notificationsErrorIcon.foreground#ab5959
  • notificationsInfoIcon.foreground#296aa3
  • notificationsWarningIcon.foreground#a65e2b
  • panel.background#ffffff
  • panel.border#f0f0f0
  • panelInput.border#e1e4e8
  • panelTitle.activeBorder#1c6b48
  • panelTitle.activeForeground#393a34
  • panelTitle.inactiveForeground#6a737d
  • peekViewEditor.background#ffffff
  • peekViewResult.background#ffffff
  • pickerGroup.border#e1e4e8
  • pickerGroup.foreground#393a34
  • problemsErrorIcon.foreground#ab5959
  • problemsInfoIcon.foreground#296aa3
  • problemsWarningIcon.foreground#a65e2b
  • progressBar.background#1c6b48
  • quickInput.background#ffffff
  • quickInput.foreground#393a34
  • scrollbar.shadow#6a737d33
  • scrollbarSlider.activeBackground#393a3450
  • scrollbarSlider.background#393a3410
  • scrollbarSlider.hoverBackground#393a3450
  • settings.headerForeground#393a34
  • settings.modifiedItemIndicator#1c6b48
  • sideBar.background#ffffff
  • sideBar.border#f0f0f0
  • sideBar.foreground#4e4f47
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#f0f0f0
  • sideBarSectionHeader.foreground#393a34
  • sideBarTitle.foreground#393a34
  • statusBar.background#ffffff
  • statusBar.border#f0f0f0
  • statusBar.debuggingBackground#f5f5f5
  • statusBar.debuggingForeground#4e4f47
  • statusBar.foreground#4e4f47
  • statusBar.noFolderBackground#ffffff
  • statusBarItem.prominentBackground#f5f5f5
  • tab.activeBackground#ffffff
  • tab.activeBorder#f0f0f0
  • tab.activeBorderTop#393a3490
  • tab.activeForeground#393a34
  • tab.border#f0f0f0
  • tab.hoverBackground#f5f5f5
  • tab.inactiveBackground#ffffff
  • tab.inactiveForeground#6a737d
  • tab.unfocusedActiveBorder#f0f0f0
  • tab.unfocusedActiveBorderTop#f0f0f0
  • tab.unfocusedHoverBackground#ffffff
  • terminal.ansiBlack#121212
  • terminal.ansiBlue#296aa3
  • terminal.ansiBrightBlack#121212
  • terminal.ansiBrightBlue#296aa3
  • terminal.ansiBrightCyan#2993a3
  • terminal.ansiBrightGreen#1c6b48
  • terminal.ansiBrightMagenta#b05a78
  • terminal.ansiBrightRed#ab5959
  • terminal.ansiBrightWhite#dbd7ca
  • terminal.ansiBrightYellow#bda437
  • terminal.ansiCyan#2993a3
  • terminal.ansiGreen#1c6b48
  • terminal.ansiMagenta#b05a78
  • terminal.ansiRed#ab5959
  • terminal.ansiWhite#dbd7ca
  • terminal.ansiYellow#bda437
  • terminal.foreground#393a34
  • textBlockQuote.background#ffffff
  • textBlockQuote.border#f0f0f0
  • textCodeBlock.background#ffffff
  • textLink.activeForeground#1c6b48
  • textLink.foreground#1c6b48
  • textPreformat.foreground#586069
  • textSeparator.foreground#d1d5da
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#4e4f47
  • titleBar.border#f5f5f5
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#6a737d
  • tree.indentGuidesStroke#e1e4e8
  • welcomePage.buttonBackground#f6f8fa
  • welcomePage.buttonHoverBackground#e1e4e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a1a1a1italic
comment.block.documentation storage.type.class.jsdoc#e94949italic
constant.other.php#0f9473bold
keyword.operator.class.php#a55c20—
variable, string constant.other.placeholder, variable.other.property, variable.other.readwrite, support.variable.property, punctuation.definition.variable#302121
meta.object-literal.key#5a5a5a—
meta.brace.round#978473—
constant.other.color#080101—
invalid, invalid.illegal#ff2225—
keyword#796641—
keyword.operator.new#b68500italic
storage.type#c54646italic
storage.type.enum.ts, storage.type.enum.tsx#6a3d74—
entity.name.type.enum.ts, entity.name.type.enum.tsx#5f4072bold
entity.name.label.ts, entity.name.label.tsx#778369—
keyword.operator.expression.of#888734—
storage.type.function.arrow#ed143d
storage.type.property#ff4444italic
storage.modifier#7a4b3fitalic
meta.brace.square#6a886b—
storage.modifier.async#14a86f—
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#966146—
variable.interpolation—
keyword.operator.ternary#d089ff—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#a66fb3—
keyword.control punctuation.definition.keyword.css, keyword.control, meta.tag#359259—
entity.other.keyframe-offset.css#bdc94d—
keyword.control.require#63c57a—
keyword.control.switch#bd4eae—
keyword.control.as#946438—
keyword.control.flow.python, keyword.control.conditional#008b92—
keyword.control.loop#a3a111—
keyword.control—italic
keyword.control.return, keyword.control.flow#299200italic
keyword.control.trycatch#f31a1aitalic
support.class.builtin#48b17abold
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, source.vue entity.name.tag, entity.name.tag.html#019c63bold
keyword.other—italic
support.other.variable, string.other.link#0a1e27—
constant.numeric#be5828—
keyword.other.unit#bd472a—
keyword.other.unit.px#1b776f—
keyword.other.unit.em#8a612e—
keyword.other.unit.rem#a5a31a—
constant.language.infinity#5411c0—
constant.language.null#728681—
constant.language.undefined#678379—
keyword.operator.expression.void#575757italic
constant.language.boolean.true#0fb459—
constant.language.boolean.false#8f6278—
keyword.other.unit—
constant.language, support.constant, constant.character, constant.escape, keyword.other, constant.other.caps#00885b—
keyword.operator.optional, punctuation.accessor.optional#cc3535—
keyword.operator.arithmetic#a14033—
keyword.operator.logical#df8805—
keyword.operator.relational, keyword.operator.comparison#80a357—
keyword.operator.assignment#ac5050—
keyword.operator.expression#b65e5eitalic
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#e46330—
punctuation.definition.string.template#1d1f86—
punctuation.terminator.statement#a1a1a1—
keyword.operator.rest#b34a20—
meta.attribute string.quoted, meta.tag.attributes string.quoted#e08721—
support.function.construct.output#469285italic
keyword.generator.asterisk#4d7cffbold
support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#b68b2d—
entity.name.property#b68419bold
entity.name.function, meta.definition.method, meta.definition.function, variable.function, support.function, keyword.other.special-method#f83030—
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#e21515italic
meta.function-call support.function#d35d3a—
variable.parameter#b17056—
support.class, support.constant—bold
support.class.console#616161bold
variable.other.readwrite support.class.error, support.class.error#f00000bold
meta.decorator#51a06fitalic
variable.other.constant#4aa895bold
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#cc9c35italic 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#8c9441italic underline
meta.interface.ts entity.other.inherited-class#bb5a19italic underline
meta.type.annotation string.quoted#a77032—
meta.var.expr meta.brace.round#696969
punctuation.definition.string#c48f53
punctuation.definition.block#a18567
meta.arrow punctuation.definition.block#505050
meta.objectliteral punctuation.definition.block#b8793f
meta.objectliteral meta.method.declaration punctuation.definition.block#835e50
punctuation.section.embedded#aa6241
text.html.php.blade punctuation.section.embedded, meta.embedded.block.php punctuation.section.embedded#6c488b
punctuation.definition.binding-pattern.array#5f99818ebold
punctuation.definition.binding-pattern.object#bd845ebold
entity.name.type.module.ts, entity.name.type.module.tsx#caa849bold 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#aa7f47
keyword.operator.type.annotation, meta.type.annotation.tsx#aa7a3c
meta.type.annotation meta.brace.square#ad7d3e
meta.type.annotation meta.field.declaration meta.definition.property variable.object.property#9c7542
support.type.primitive.ts, support.type.primitive.tsx#c49353italic underline
keyword.operator.spread#c46c65italic
keyword.operator.of#4ead91italic
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#dfa300bold
new.expr.ts meta.type.parameters.ts entity.name.type.ts#bb9761italic 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#396b5f—
meta.property-list entity.name.tag#00b170—
support.type.vendored.property-name#1e9b5c—
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#2b3b3f
support.constant.color.w3c-standard-color-name.css#161c3d—
keyword.other.important#f12f21bold
source.css variable, source.sass variable, source.scss variable, source.less variable, source.stylus variable, source.postcss variable#000000italic
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#1f8338—
variable.other.class.js—bold
entity.name.type.instance.js#b48c07bold
variable.language.this#b39985—
entity.name.method.js#305bb8italic
meta.decorator variable.other.readwrite, punctuation.decorator#5a8a6c—
meta.embedded.expression variable.other.readwrite, meta.embedded.expression punctuation.section.embedded.begin, meta.embedded.expression punctuation.section.embedded.end, meta.embedded.expression#423926
meta.class-method.js entity.name.function.js, variable.function.constructor#659438—
entity.other.attribute-name#ac5330—
source.js constant.other.object.key.js string#8b5b33—
source.vue text.html.vue-html string#0c1f2c—
source.directive.vue variable#040a14—
expression.embedded.vue variable#050d1a—
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#0d081b—
entity.other.attribute-name.class punctuation.definition.entity.css, entity.other.attribute-name.class#C07938—
entity.name.tag.reference.scss#d86f55—
punctuation.section.property-list#7e524b—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.css punctuation#855018—
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#098d61bold
meta.property-value.css support.constant#0b1e29—
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#01913d—
markup.inserted#5c7a2f—
markup.deleted#d11f3d—
markup.changed#72349b—
string.regexp#e42ebc—
string.regexp punctuation#7341e7—
keyword.control.anchor.regexp#07af93—
constant.character.numeric.regexp#e07aaa—
constant.character.escape.backslash.regexp#9e58df—
string.regexp punctuation.definition.string, string.regexp keyword.operator#745cff—
constant.character.escape#62a594—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#687eaditalic
keyword.begin.blade, keyword.end.blade, keyword.blade#ac5757italic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#f04d4d
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7c4a3a
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#627177
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#c48d3c
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#818821
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#279c58
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#177c17
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#59807a
text.html.markdown, punctuation.definition.list_item.markdown#1a3c42—
text.html.markdown markup.inline.raw.markdown#7532a1—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#476074—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#b61c1c—
markup.italic#062835italic
markup.bold, markup.bold string#0e323dbold
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#163836italic bold
markup.underline#c54017underline
markup.quote punctuation.definition.blockquote.markdown#65737E—
markup.quote—italic
string.other.link.title.markdown#359661—
string.other.link.description.title.markdown#734194—
constant.other.reference.link.markdown#b67806—
markup.raw.block#753f99—
markup.raw.block.fenced.markdown#00000050—
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#ed143d—
punctuation.definition.fenced.markdown#00000050—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#0e1725—
variable.language.fenced.markdown#344857—
meta.separator#65737Ebold
markup.table#1d3844—