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.activeBackground#fff
  • activityBar.activeBorder#080808
  • activityBar.background#fff
  • activityBar.foreground#080808
  • activityBar.inactiveForeground#ccc
  • activityBarBadge.background#080808
  • activityBarBadge.foreground#fefefe
  • breadcrumb.activeSelectionForeground#080808
  • breadcrumb.background#ffffff
  • breadcrumb.focusForeground#323232
  • breadcrumb.foreground#808080
  • breadcrumbPicker.background#eee
  • editor.background#fff
  • editor.findMatchBackground#00000099
  • editor.findMatchHighlightBackground#ddd
  • editor.foldBackground#f5f8fa
  • editor.foreground#080808
  • editor.lineHighlightBackground#fafafa
  • editor.selectionBackground#08080816
  • editorBracketMatch.border#080808
  • editorCursor.foreground#080808
  • editorError.background#ff2e2e40
  • editorError.border#ff2e2e
  • editorError.foreground#080808
  • editorGroupHeader.tabsBackground#fff
  • editorGutter.addedBackground#56d68c
  • editorGutter.background#fff
  • editorGutter.deletedBackground#f35858
  • editorGutter.foldingControlForeground#6b6a6d
  • editorGutter.modifiedBackground#f7f899
  • editorHoverWidget.background#eee
  • editorHoverWidget.border#ccc
  • editorHoverWidget.foreground#080808
  • editorIndentGuide.activeBackground#aaa
  • editorIndentGuide.background#eee
  • editorLineNumber.activeForeground#aaa
  • editorLineNumber.foreground#ddd
  • editorSuggestWidget.background#fafafa
  • editorSuggestWidget.border#ccc
  • editorSuggestWidget.foreground#080808
  • editorSuggestWidget.highlightForeground#000
  • editorSuggestWidget.selectedBackground#eee
  • foreground#080808
  • list.activeSelectionBackground#080808
  • list.activeSelectionForeground#fff
  • list.focusBackground#080808
  • list.focusForeground#fff
  • list.focusOutline#080808
  • list.hoverBackground#bbb
  • list.hoverForeground#080808
  • minimap.background#ffffff
  • minimap.selectionHighlight#080808
  • sash.hoverBorder#080808
  • scrollbar.shadow#cecece03
  • scrollbarSlider.activeBackground#aaa
  • scrollbarSlider.background#eee
  • scrollbarSlider.hoverBackground#ccc
  • sideBar.background#fff
  • sideBar.foreground#080808
  • sideBarSectionHeader.background#eee
  • sideBarSectionHeader.foreground#080808
  • sideBarTitle.foreground#aaa
  • statusBar.background#080808
  • statusBar.debuggingBackground#ccc
  • statusBar.debuggingForeground#080808
  • statusBar.foreground#fefefe
  • statusBarItem.hoverBackground#161616
  • tab.activeBackground#fff
  • tab.activeBorderTop#000
  • tab.activeForeground#080808
  • tab.border#fff
  • tab.hoverBackground#eee
  • tab.hoverForeground#888
  • tab.inactiveBackground#fff
  • tab.inactiveForeground#aaa
  • terminal.ansiBlack#080808
  • terminal.ansiBlue#281c6d
  • terminal.ansiCyan#8cebe3
  • terminal.ansiGreen#172e23
  • terminal.ansiMagenta#700070
  • terminal.ansiRed#ad0000
  • terminal.ansiWhite#ddd
  • terminal.ansiYellow#c2b608
  • terminal.background#ffffff
  • terminal.border#aaa
  • terminal.foreground#080808
  • terminal.selectionBackground#08080856
  • terminalCursor.foreground#080808
  • titleBar.activeBackground#fff
  • titleBar.activeForeground#080808
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#ccc
  • widget.shadow#08080808

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.line.double-slash, comment.line.double-slash.js, comment.line.double-slash.jsx, comment.line.double-slash.ts, comment.line.double-slash.tsx, comment.block, comment.block.documentation, punctuation.definition.comment#ccc
entity.name.tag.html#080808bold
punctuation.definition.tag, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#222
entity.other.attribute-name.html, text.html.basic entity.other.attribute-name.html#777
meta.attribute.content.html, meta.attribute.unrecognized.role.html, string.quoted.double.html, string.quoted.single.html#172e23
text.html.derivative#080808
punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.separator.key-value.html#172e23
constant.character#242424bold
punctuation.definition.entity.html#080808
punctuation.definition.comment.html#ccc
comment.block.html#ccc
source.css, source.sass#080808
comment.block.css, comment.block.scss, comment.block.sass, comment.block.documentation.scss, comment.block.documentation.sass, comment.line.scss, comment.line.sass#ccc
entity.name.tag.wildcard.css, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#000bold
entity.other.attribute-name.id.css#ff8e8e
entity.name.tag.css#000
entity.other.attribute-name.pseudo-element.css#626969bold
entity.other.attribute-name.class, entity.other.attribute-name.class.css#000bold
entity.other.attribute-name.pseudo-class.css#222bold
entity.other.attribute-name.css, entity.other.attribute-name.attribute.scss, entity.other.attribute-selector.sass#437878
punctuation.definition.entity.begin.bracket.square.css, punctuation.definition.entity.end.bracket.square.css, punctuation.definition.attribute-selector.begin.bracket.square.scss, punctuation.definition.attribute-selector.end.bracket.square.scss#589e9e
meta.attribute-selector.scss#72b97b
keyword.operator.combinator.css#ff8e8e
support.type.property-name.css#777
support.constant.property-value.css, support.constant.media.css#356161bold
string.quoted.single.css, string.quoted.single.scss, string.quoted.double.css, string.quoted.double.scss#172e23
constant.numeric.css#281c6d
keyword.other.unit.px.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.vh.css, keyword.other.unit.vw.css, keyword.control.unit.css.sass, keyword.other.unit.percentage.css#333
variable.css, variable.scss#000bold
variable.argument.css#f00bold
support.function.misc.css, support.function.misc.scss, entity.name.function, support.function.calc.css, support.function.url.css#000bold
punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.section.function.scss, entity.name.function.close#000bold
keyword.control.at-rule#5f6f81bold
keyword.operator.logical.and.media.css#626969
meta.at-rule.media.header.css#5f6f81
keyword.other.important.css, keyword.other.important.scss, keyword.other.default.scss#000bold
punctuation.definition.entity.css, punctuation.separator.key-value.css, punctuation.terminator.rule.css#000bold
constant.other.color.rgb-value.hex.css#7b80a8bold
support.constant.color.w3c-standard-color-name.css, support.constant.color.w3c-extended-color-name.css#ad919abold
comment.punctuation.comma.sass#4f5757
keyword.operator.logical.js, keyword.operator.logical.jsx, keyword.operator.logical.ts, keyword.operator.logical.tsx, keyword.operator.comparison.js, keyword.operator.comparison.jsx, keyword.operator.comparison.ts, keyword.operator.comparison.tsx, keyword.operator.assignment.js, keyword.operator.assignment.jsx, keyword.operator.assignment.ts, keyword.operator.assignment.tsx, keyword.operator.ternary.js, keyword.operator.ternary.jsx, keyword.operator.ternary.ts, keyword.operator.ternary.tsx, storage.type.function.arrow.js, storage.type.function.arrow.jsx, storage.type.function.arrow.ts, storage.type.function.arrow.tsx, meta.arrow.js, meta.arrow.jsx, meta.arrow.ts, meta.arrow.tsx, keyword.operator.optional.js, keyword.operator.optional.jsx, keyword.operator.optional.ts, keyword.operator.optional.tsx, punctuation.terminator.statement.js, punctuation.terminator.statement.jsx, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx#03312b
punctuation.definition.block.js, punctuation.definition.block.jsx, punctuation.definition.block.ts, punctuation.definition.block.tsx, meta.brace.round.js, meta.brace.round.jsx, meta.brace.round.ts, meta.brace.round.tsx, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.begin.jsx, punctuation.definition.parameters.begin.ts, punctuation.definition.parameters.begin.tsx, punctuation.definition.parameters.end.js, punctuation.definition.parameters.end.jsx, punctuation.definition.parameters.end.ts, punctuation.definition.parameters.end.tsx, meta.brace.square.js, meta.brace.square.jsx, meta.brace.square.ts, meta.brace.square.tsx, punctuation.section.embedded.begin.js, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.begin.ts, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.js, punctuation.section.embedded.end.jsx, punctuation.section.embedded.end.ts, punctuation.section.embedded.end.tsx, punctuation.definition.binding-pattern.array.js, punctuation.definition.binding-pattern.array.jsx, punctuation.definition.binding-pattern.array.ts, punctuation.definition.binding-pattern.array.tsx, punctuation.definition.binding-pattern.object.js, punctuation.definition.binding-pattern.object.jsx, punctuation.definition.binding-pattern.object.ts, punctuation.definition.binding-pattern.object.tsx#000
storage.type, storage.type.js, storage.type.jsx, storage.type.ts, storage.type.tsx, storage.type.function#000bold
support.variable.property.js, support.variable.property.jsx, support.variable.property.ts, support.variable.property.tsx#000bold
constant.language.boolean.true.js, constant.language.boolean.true.jsx, constant.language.boolean.true.ts, constant.language.boolean.true.tsx, constant.language.boolean.false.js, constant.language.boolean.false.jsx, constant.language.boolean.false.ts, constant.language.boolean.false.tsx#161616bold
constant.language.null.js, constant.language.null.jsx, constant.language.null.ts, constant.language.null.tsx, constant.language.undefined.js, constant.language.undefined.jsx, constant.language.undefined.ts, constant.language.undefined.tsx#000underline
keyword.operator.expression.void.js, keyword.operator.expression.voidjsx, keyword.operator.expression.void.ts, keyword.operator.expression.void.tsx#000underline
storage.modifier.async.js, storage.modifier.async.jsx, storage.modifier.async.ts, storage.modifier.async.tsx#000bold
keyword.control.conditional.js, keyword.control.conditional.jsx, keyword.control.conditional.ts, keyword.control.conditional.tsx, keyword.control.trycatch.js, keyword.control.trycatch.jsx, keyword.control.trycatch.ts, keyword.control.trycatch.tsx, keyword.control.switch.js, keyword.control.switch.jsx, keyword.control.switch.ts, keyword.control.switch.tsx, keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.jsx, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx, storage.type.function.js, storage.type.function.jsx, storage.type.function.ts, storage.type.function.tsx#000bold
keyword.control.loop.js, keyword.control.loop.jsx, keyword.control.loop.ts, keyword.control.loop.tsx, keyword.control.loop.js, keyword.operator.expression.of.js, keyword.operator.expression.of.jsx, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx#000bold
keyword.control.flow.js, keyword.control.flow.jsx, keyword.control.flow.ts, keyword.control.flow.tsx#000underline
variable.language.this.js, variable.language.this.jsx, variable.language.this.ts, variable.language.this.tsx#333bold
variable.language.super.js, variable.language.super.jsx, variable.language.super.ts, variable.language.super.tsx#000bold
keyword.operator.new.js, keyword.operator.new.jsx, keyword.operator.new.ts, keyword.operator.new.tsx#000underline
keyword.control.import.js, keyword.control.import.jsx, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.jsx, keyword.control.from.ts, keyword.control.from.tsx, keyword.control.as.js, keyword.control.as.jsx, keyword.control.as.ts, keyword.control.as.tsx, keyword.control.export.js, keyword.control.export.jsx, keyword.control.export.ts, keyword.control.export.tsx, keyword.control.default.js, keyword.control.default.jsx, keyword.control.default.ts, keyword.control.default.tsx, storage.modifier.js, storage.modifier.jsx, storage.modifier.ts, storage.modifier.tsx#000bold
constant.language.import-export-all.js, constant.language.import-export-all.jsx, constant.language.import-export-all.ts, constant.language.import-export-all.tsx#000bold
variable, string constant.other.placeholder#000
entity.name.function, entity.name.function.js, entity.name.function.jsx, entity.name.function.ts, entity.name.function.tsx, meta.function-call, meta.function-call.js, meta.function-call.jsx, meta.function-call.ts, meta.function-call.tsx#080808bold
storage.type.class.js, storage.type.class.jsx, storage.type.class.ts, storage.type.class.tsx#000bold
entity.name.type.class.js, entity.name.type.class.jsx, entity.name.type.class.ts, entity.name.type.class.tsx, entity.other.inherited-class.js, entity.other.inherited-class.jsx, entity.other.inherited-class.ts, entity.other.inherited-class.tsx#080808bold
string.quoted.single.js, string.quoted.single.jsx, string.quoted.single.ts, string.quoted.single.tsx, string.quoted.double.js, string.quoted.double.jsx, string.quoted.double.ts, string.quoted.double.tsx, string.template.js, string.template.jsx, string.template.ts, string.template.tsx#172e23
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.jsx, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.begin.tsx, punctuation.definition.template-expression.end.js, punctuation.definition.template-expression.end.jsx, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.tsx#080808bold
constant.numeric.decimal.js, constant.numeric.decimal.jsx, constant.numeric.decimal.ts, constant.numeric.decimal.tsx#281c6d
entity.name.tag.js, entity.name.tag.jsx, entity.name.tag.ts, entity.name.tag.tsx#080808bold
punctuation.definition.tag.begin.js.jsx, punctuation.definition.tag.end.js.jsx#404040
entity.other.attribute-name.js, entity.other.attribute-name.jsx, entity.other.attribute-name.ts, entity.other.attribute-name.tsx#777
support.type.primitive.ts, support.type.primitive.tsx#484848bold
storage.type.namespace.ts, storage.type.namespace.tsx, storage.type.type.ts, storage.type.type.tsx#363b3bbold
entity.name.type.module.ts, entity.name.type.module.tsx, entity.name.type.ts, entity.name.type.tsx#000bold
entity.name.type.alias.ts, entity.name.type.alias.tsx#ffbfa6
support.type.property-name.json
source.json meta.structure.dictionary.json support.type.property-name.json#000
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#484848
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#808080
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#000
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#484848
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#808080
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#000
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#484848
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#808080
string.quoted.double.json#172e23
constant.numeric.json#281c6d
constant.language.json#080808bold
punctuation.definition.array.begin.json, punctuation.definition.array.end.json#444
punctuation.separator.dictionary.key-value.json, punctuation.support.type.property-name.begin.json, punctuation.separator.dictionary.pair.json, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.support.type.property-name.end.json#444
punctuation.separator.array.json#CCC
text.html.markdown, punctuation.definition.list_item.markdown#b8b8b8
text.html.markdown markup.inline.raw.markdown, markup.inline.raw.string.markdown#172e23
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#b8b8b8
markdown.heading, entity.name.section.markdown, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#a4b7d1
markup.italic.markdown#ffe1e1
markup.bold, markup.bold string#ffe1e1bold
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#ffe1e1bold
markup.underline#ffe1e1underline
punctuation.definition.quote.begin.markdown#ffffff32
markup.quote.markdown#626969bold
string.other.link.title.markdown, string.other.link.description.markdown#ff8e8e
string.other.link.description.title.markdown#ff8e8e
constant.other.reference.link.markdown, markup.underline.link.markdown, markup.underline.link.image.markdown#FFBFBF
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#a4b7d1
punctuation.definition.list.begin.markdown#ffffff32
markup.list.numbered.markdown, markup.list.unnumbered.markdown#c7a688
punctuation.definition.markdown#ffffff32
meta.separator#ffe1e1bold
string.unquoted.plain.out.yaml#7b7b7b