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#141820
  • activityBarBadge.background#4B76CF
  • activityBarBadge.foreground#ffffff
  • diffEditor.insertedTextBackground#66f0c213
  • dropdown.background#141820
  • editor.background#212836
  • editor.foreground#ced6e6
  • editor.lineHighlightBackground#99bbff0a
  • editor.selectionBackground#e6eeff21
  • editor.wordHighlightBackground#343F56
  • editorCursor.foreground#fff
  • editorGroup.border#1A1F2E
  • editorGroupHeader.tabsBackground#1C212E
  • editorGutter.addedBackground#308E68
  • editorGutter.modifiedBackground#938464
  • editorIndentGuide.background#97a7c826
  • editorLineNumber.activeForeground#818ca6
  • editorLineNumber.foreground#3D4D67
  • editorSuggestWidget.background#141820
  • editorWhitespace.foreground#3b3a32
  • editorWidget.background#141820
  • foreground#818CA6
  • gitDecoration.ignoredResourceForeground#3D4D67
  • gitDecoration.modifiedResourceForeground#E3C18A
  • gitDecoration.untrackedResourceForeground#70CA8E
  • input.background#141820
  • input.border#1A1F2E
  • input.foreground#818CA6
  • input.placeholderForeground#3D4D67
  • list.activeSelectionBackground#4B76CF
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#3D4D67
  • list.hoverBackground#141820
  • list.inactiveSelectionBackground#303B50
  • list.inactiveSelectionForeground#D5D9E2
  • panel.background#1C212E
  • panel.border#1A1F2E
  • pickerGroup.foreground#FFE792
  • scrollbar.shadow#11141a11
  • scrollbarSlider.activeBackground#ffffff22
  • scrollbarSlider.background#ffffff11
  • scrollbarSlider.hoverBackground#ffffff22
  • sideBar.background#1C212E
  • sideBarSectionHeader.background#141820
  • sideBarTitle.foreground#fff
  • statusBar.background#212836
  • statusBar.border#1A1F2E
  • statusBar.foreground#818CA6
  • statusBar.noFolderBackground#212836
  • tab.activeBackground#212836
  • tab.activeBorder#fff
  • tab.border#1C212E
  • tab.inactiveBackground#212836
  • tab.inactiveForeground#818CA6
  • tab.unfocusedInactiveForeground#818CA6
  • terminal.background#1C212E
  • titleBar.activeBackground#1C212E
  • titleBar.activeForeground#818CA6
  • titleBar.inactiveBackground#1C212E
  • titleBar.inactiveForeground#818CA6
  • widget.shadow#11141ab3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#97a7c8ff—
comment#667fa3—
string, meta.object-literal.key.tsx#d9dfeb—
support.variable.dom.js, support.variable.dom.ts#59f2f7—
punctuation.separator.key-value#e5e9f1—
variable.other.constant.js, variable.other.constant.object.js, variable.other.constant.property.js, variable.other.constant.ts, variable.other.constant.object.ts, variable.other.constant.property.ts#969eba—
constant.numeric#58b4ff—
constant.language#edc1f9—
constant.character, constant.other#9485e0—
variable#B7C6DA—
keyword#E95293—
storage#FF5BA2—
storage.type#a68192—
storage.type.function.arrow#a69c14—
entity.name.class#82C600—
entity.other.inherited-class#e2c6a5—
variable.parameter#fac0f1—
entity.name.tag#bdf5de—
string.quoted.double.json, #CFCDB8—
entity.other.attribute-name.class.css, keyword.other.unit.px.css, #748CAB—
entity.other.attribute-name.html#CFCDB8—
entity.other.attribute-name.js, entity.other.attribute-name.ts#efc79de0—
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element #efc79de0—
meta.tag.other, entity.name.tag.style, entity.name.tag.script, meta.tag.block.script, source.js.embedded punctuation.definition.tag.html, source.ts.embedded punctuation.definition.tag.html, source.css.embedded punctuation.definition.tag.html#E26674—
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts#e9a9e4e8—
variable.language.this.js, variable.language.this.ts,#eab780—
variable.argument#e36085—
entity.other.attribute-name.id.css#e87d9b—
entity.name.function.js, entity.name.function.ts, entity.name.function.method.js, entity.name.function.method.ts, entity.name.accessor.js, entity.name.accessor.ts, entity.name.class.js, entity.name.class.ts, entity.name.function.tsx, entity.name.function.method.tsx, entity.name.accessor.tsx, entity.name.class.tsx#b3bbc9—
support.class.builtin.js, entity.name.type.class.js, support.class.builtin.ts, entity.name.type.class.ts#adaefc—
variable.parameter.js, constant.other.object.key.js, variable.other.readwrite.js, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js, meta.object-literal.key.js, meta.array.literal.js, meta.brace.round.js, punctuation.definition.block.js, meta.objectliteral.js, variable.parameter.ts, constant.other.object.key.ts, variable.other.readwrite.ts, punctuation.definition.parameters.begin.ts, punctuation.definition.parameters.end.ts, meta.object-literal.key.ts, meta.array.literal.ts, meta.brace.round.ts, punctuation.definition.block.ts, meta.objectliteral.ts#79B6C1—
variable.parameter.js, variable.parameter.ts#ffc078—
variable.parameter.js, constant.other.object.key.js, variable.other.readwrite.js, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js, meta.array.literal.js, meta.brace.round.js, punctuation.definition.block.js, meta.objectliteral.js, variable.parameter.ts, constant.other.object.key.ts, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, punctuation.definition.parameters.begin.ts, punctuation.definition.parameters.end.ts, meta.array.literal.ts, meta.brace.round.ts, meta.objectliteral.ts, variable.other.constant.tsx, variable.other.readwrite.tsx, variable.other.object.tsx#6dccafc0—
constant.language.boolean.false.js, constant.language.boolean.true.js, constant.language.boolean.false.ts, constant.language.boolean.true.ts, constant.language.boolean.false.tsx#eab780—
support.variable.property.dom.js, entity.name.type.new.js, support.variable.property.dom.ts, entity.name.type.new.ts#e76572—
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#C48FB1—
meta.tag string -source -punctuation, text source text meta.tag string -punctuation#82BAF2—
punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html#D0B344—
meta.toc-list.id#88F2AF—
string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, string.quoted.double.handlebars#79b6c1—
entity.other.attribute-name.id#85AC3A—
support.type.property-name.css#c6ccd8—
punctuation.section.property-list.begin.bracket.curly.scss#D9DFEB—
support.type.object.module#A6588A—
entity.other.attribute-name.id#F2BCC2—
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#ffffff—
support.constant.vendored.property-value.css#f184f1—
support.function#C48FB1—
keyword.operator.new#f7b2f1—
keyword.control.from#e9baf5—
keyword.other.important#e9baf5—
keyword.other.unit#748CAB—
keyword.control.at-rule.media.scss#4a83ce—
support.constant.media.css#e765cb—
keyword.operator.logical.scss#e4b6da—
keyword.control.operator.css.scss#9dc3f5—
entity.name.tag.reference.scss#9dc3f5—
entity.name.tag.css#b7c2cf—
variable.parameter.url.css#f9f6fc73—
support.constant#E76572—
support.type, support.class, #93d0e7—
entity.name.type.module.tsx#42b0cc—
meta.type.annotation.tsx#82c8da—
meta.type.parameters.tsx#afccd3—
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array#d8d8d8—
none#d8d8d8—
keyword.operator#d0d8e3—
variable, meta.selector.css#e7838e—
variable.other.env#da69b8—
source.env#758bb7—
keyword.operator.assignment.#D0D8E3—
keyword.operator.logical#f2bcc2—
keyword.control.export#a6588a—
keyword.control.default#c48fb1—
entity.name.function, meta.require, support.function.any-method#79B6C1—
support.class, entity.name.class, entity.name.type.class#E76572—
support.class.component, meta.tag.without-attributes.js, meta.block.js, meta.function.js, source.js, meta.tag.without-attributes.ts, meta.block.ts, meta.function.ts, source.ts#5887a6—
entity.name.tag.js, meta.tag.without-attributes.js, meta.block.js, meta.function.js, source.js, entity.name.tag.ts, meta.tag.without-attributes.ts, meta.block.ts, meta.function.expression.tsx, source.ts, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx, punctuation.definition.block.ts, variable.object.property.ts, variable.object.property.tsx, entity.other.attribute-name.tsx#bfe1e1—
meta.jsx.children.js, meta.jsx.children.tsx, meta.tsx.children.ts, meta.tsx.children.tsx,#e7e7e7—
variable.other.object.property#748cab—
variable.other.property#efaeb5—
meta.class#f8f8f8—
keyword.other.special-method#7cafc2—
storage#ba8baf—
constant.numeric#EAB780—
constant.numeric.decimal#e7acff—
none#dc9656—
none#dc9656—
constant#dc9656—
invalid.deprecated#ffffff—
meta.diff, meta.diff.header#655c2d—
markup.deleted#FF5BA2—
markup.inserted#82C600—
markup.changed#ffff63—
entity.name.filename.find-in-files#ffff63—
token.info-token#6796e6—
token.warn-token#cd9731—
token.error-token#f44747—
token.debug-token#b267e6—
keyword, keyword.control.export.tsx, keyword.control.default.tsx, keyword.control.from.ts, keyword.control.from.tsx, keyword.control.export.ts, keyword.control.default.ts, keyword.control.from.ts#ffcad4—
Premium dark theme by doVa - VS Code Theme