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.activeBackground#ffffff
  • activityBar.activeBorder#080808
  • activityBar.background#ffffff
  • activityBar.foreground#080808
  • activityBar.inactiveForeground#cccccc
  • activityBarBadge.background#080808
  • activityBarBadge.foreground#fefefe
  • breadcrumb.activeSelectionForeground#080808
  • breadcrumb.background#ffffff
  • breadcrumb.focusForeground#323232
  • breadcrumb.foreground#808080
  • breadcrumbPicker.background#eeeeee
  • editor.background#ffffff
  • editor.findMatchBackground#00000099
  • editor.findMatchHighlightBackground#dddddd
  • 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#ffffff
  • editorGutter.addedBackground#56d68c
  • editorGutter.background#ffffff
  • editorGutter.deletedBackground#f35858
  • editorGutter.foldingControlForeground#6b6a6d
  • editorGutter.modifiedBackground#f7f899
  • editorHoverWidget.background#eeeeee
  • editorHoverWidget.border#cccccc
  • editorHoverWidget.foreground#080808
  • editorIndentGuide.activeBackground#aaaaaa
  • editorIndentGuide.background#eeeeee
  • editorLineNumber.activeForeground#aaaaaa
  • editorLineNumber.foreground#dddddd
  • editorSuggestWidget.background#fafafa
  • editorSuggestWidget.border#cccccc
  • editorSuggestWidget.foreground#080808
  • editorSuggestWidget.highlightForeground#000000
  • editorSuggestWidget.selectedBackground#eeeeee
  • foreground#080808
  • list.activeSelectionBackground#080808
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#080808
  • list.focusForeground#ffffff
  • list.focusOutline#080808
  • list.hoverBackground#bbbbbb
  • list.hoverForeground#080808
  • minimap.background#ffffff
  • minimap.selectionHighlight#080808
  • sash.hoverBorder#080808
  • scrollbar.shadow#cecece03
  • scrollbarSlider.activeBackground#aaaaaa
  • scrollbarSlider.background#eeeeee
  • scrollbarSlider.hoverBackground#cccccc
  • sideBar.background#ffffff
  • sideBar.foreground#080808
  • sideBarSectionHeader.background#eeeeee
  • sideBarSectionHeader.foreground#080808
  • sideBarTitle.foreground#aaaaaa
  • statusBar.background#080808
  • statusBar.debuggingBackground#cccccc
  • statusBar.debuggingForeground#080808
  • statusBar.foreground#fefefe
  • statusBarItem.hoverBackground#161616
  • tab.activeBackground#ffffff
  • tab.activeBorderTop#000000
  • tab.activeForeground#080808
  • tab.border#ffffff
  • tab.hoverBackground#eeeeee
  • tab.hoverForeground#888888
  • tab.inactiveBackground#ffffff
  • tab.inactiveForeground#aaaaaa
  • terminal.ansiBlack#080808
  • terminal.ansiBlue#281c6d
  • terminal.ansiCyan#8cebe3
  • terminal.ansiGreen#172e23
  • terminal.ansiMagenta#700070
  • terminal.ansiRed#ad0000
  • terminal.ansiWhite#dddddd
  • terminal.ansiYellow#c2b608
  • terminal.background#ffffff
  • terminal.border#aaaaaa
  • terminal.foreground#080808
  • terminal.selectionBackground#08080856
  • terminalCursor.foreground#080808
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#080808
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#cccccc
  • 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#CCCCCC
entity.name.tag.html#080808bold
punctuation.definition.tag, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#222222
entity.other.attribute-name.html, text.html.basic entity.other.attribute-name.html#777777
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#CCCCCC
comment.block.html#CCCCCC
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#CCCCCC
entity.name.tag.wildcard.css, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#000000bold
entity.other.attribute-name.id.css#FF8E8E
entity.name.tag.css#000000
entity.other.attribute-name.pseudo-element.css#626969bold
entity.other.attribute-name.class, entity.other.attribute-name.class.css#000000bold
entity.other.attribute-name.pseudo-class.css#222222bold
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#777777
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#333333
variable.css, variable.scss#000000bold
variable.argument.css#FF0000bold
support.function.misc.css, support.function.misc.scss, entity.name.function, support.function.calc.css, support.function.url.css#000000bold
punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.section.function.scss, entity.name.function.close#000000bold
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#000000bold
punctuation.definition.entity.css, punctuation.separator.key-value.css, punctuation.terminator.rule.css#000000bold
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#000000
storage.type, storage.type.js, storage.type.jsx, storage.type.ts, storage.type.tsx, storage.type.function#000000bold
support.variable.property.js, support.variable.property.jsx, support.variable.property.ts, support.variable.property.tsx#000000bold
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#000000underline
keyword.operator.expression.void.js, keyword.operator.expression.voidjsx, keyword.operator.expression.void.ts, keyword.operator.expression.void.tsx#000000underline
storage.modifier.async.js, storage.modifier.async.jsx, storage.modifier.async.ts, storage.modifier.async.tsx#000000bold
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#000000bold
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#000000bold
keyword.control.flow.js, keyword.control.flow.jsx, keyword.control.flow.ts, keyword.control.flow.tsx#000000underline
variable.language.this.js, variable.language.this.jsx, variable.language.this.ts, variable.language.this.tsx#333333bold
variable.language.super.js, variable.language.super.jsx, variable.language.super.ts, variable.language.super.tsx#000000bold
keyword.operator.new.js, keyword.operator.new.jsx, keyword.operator.new.ts, keyword.operator.new.tsx#000000underline
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#000000bold
constant.language.import-export-all.js, constant.language.import-export-all.jsx, constant.language.import-export-all.ts, constant.language.import-export-all.tsx#000000bold
variable, string constant.other.placeholder#000000
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#000000bold
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#777777
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#000000bold
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#000000
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#000000
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#000000
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#444444
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#444444
punctuation.separator.array.json#CCCCCC
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
keyword.control.conditional.tsbold underline
entity.name.type.alias.ts#000000bold
storage.type.class.ts#000000bold underline
storage.type.namespace.ts#000000bold underline
storage.type.interface.ts#000000bold underline
storage.type.type.ts#000000bold underline
keyword.control.export.ts#000000bold underline
keyword.control.flow.ts#000000bold underline
variable.language.this.ts#999999
entity.name.function.member#000000
storage.modifier.ts#000000bold underline
entity.name.function.ts#000000
variable.other.property.ts#000000
meta.brace.round.ts#000000bold
keyword.operator.expression.is.ts#000000bold underline
variable.other.object.ts#000000
keyword.operator.logical.ts#000000bold underline
keyword.operator.comparison.ts#000000bold underline
constant.language.null.ts#000000bold
keyword.control.type.ts#000000bold underline
support.type.primitive.ts#000000bold
storage.type.function.arrow.ts#000000bold underline
storage.type.ts#000000bold underline
constant.language.boolean.false.ts#000000bold
constant.language.boolean.true.ts#000000bold
keyword.control.switch.ts#000000bold underline
keyword.control.loop.ts#000000bold underline
keyword.operator.expression.instanceof.ts#000000bold underline
punctuation.accessor.optional.ts#000000bold underline
punctuation.definition.block.ts#000000bold
keyword.control.import.ts#000000bold underline
keyword.control.from.ts#000000bold underline
keyword.operator.assignment.ts#000000bold underline
meta.brace.square.ts#000000bold
keyword.operator.definiteassignment.ts#000000bold underline
string.quoted.single.ts#077907
string.quoted.double.ts#077907
string.template.ts#077907
constant.numeric.decimal.ts#073179
constant.language.undefined.ts#000000bold
keyword.operator.expression.of.ts#000000bold underline
keyword.operator.expression.in.ts#000000bold underline
storage.type.property.ts#000000bold underline
keyword.operator.type.ts#000000bold
keyword.operator.optional.ts#000000bold underline
support.type.builtin.ts#000000bold
keyword.operator.new.ts#000000bold underline
keyword.control.as.ts#000000bold underline
variable.other.object.property.ts#000000
keyword.operator.increment.ts#000000bold underline
keyword.operator.decrement.ts#000000bold underline
keyword.control.with.ts#000000bold underline
keyword.operator.expression.import.ts#000000bold underline
keyword.operator.relational.ts#000000bold underline
storage.modifier.async.ts#000000bold underline
variable.other.constant.object.ts#000000
constant.language.import-export-all.ts#000000bold underline
punctuation.definition.binding-pattern.array.ts#000000bold
punctuation.definition.binding-pattern.object.ts#000000bold
keyword.operator.expression.typeof.ts#000000bold underline
keyword.operator.ternary.ts#000000bold underline
entity.name.type.module.ts#000000
string.regexp.ts#A85700
storage.type.function.ts#000000bold underline
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#CD3131
token.debug-token#800080
Consistently Minimal by Joachim Lindqvist - VS Code Theme