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#353535
  • activityBar.foreground#ffffff
  • activityBarBadge.background#3655b5
  • button.background#565656
  • dropdown.background#525252
  • editor.background#242424
  • editor.foreground#c5c8c6
  • editor.lineHighlightBackground#303030
  • editor.selectionBackground#676b7180
  • editor.selectionHighlightBackground#575b6180
  • editor.wordHighlightBackground#4747a180
  • editor.wordHighlightStrongBackground#6767ce80
  • editorCursor.foreground#c07020
  • editorGroupHeader.tabsBackground#282828
  • editorIndentGuide.activeBackground1#707057
  • editorIndentGuide.background1#505037
  • editorLineNumber.activeForeground#949494
  • editorWhitespace.foreground#505037
  • focusBorder#3655b5
  • inputOption.activeBorder#3655b5
  • list.activeSelectionBackground#707070
  • list.highlightForeground#e58520
  • list.hoverBackground#444444
  • list.inactiveSelectionBackground#4e4e4e
  • menu.background#272727
  • menu.foreground#cccccc
  • minimap.selectionHighlight#676b7180
  • panelTitle.activeForeground#ffffff
  • peekView.border#3655b5
  • pickerGroup.foreground#b0b0b0
  • ports.iconRunningProcessForeground#cccccc
  • quickInputList.focusBackground#707070
  • sideBar.background#272727
  • sideBarSectionHeader.background#505050
  • statusBar.background#505050
  • statusBar.debuggingBackground#505050
  • statusBar.noFolderBackground#505050
  • statusBarItem.remoteBackground#3655b5
  • tab.border#303030
  • tab.inactiveBackground#404040
  • tab.inactiveForeground#d8d8d8
  • tab.lastPinnedBorder#505050
  • terminal.ansiBlack#1e1e1e
  • terminal.ansiBlue#6a7ec8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#819aff
  • terminal.ansiBrightCyan#66d9ef
  • terminal.ansiBrightGreen#a6e22e
  • terminal.ansiBrightMagenta#ae81ff
  • terminal.ansiBrightRed#f92672
  • terminal.ansiBrightWhite#f8f8f2
  • terminal.ansiBrightYellow#e2e22e
  • terminal.ansiCyan#56adbc
  • terminal.ansiGreen#86b42b
  • terminal.ansiMagenta#8c6bc8
  • terminal.ansiRed#c4265e
  • terminal.ansiWhite#e3e3dd
  • terminal.ansiYellow#b3b42b
  • terminal.inactiveSelectionBackground#676b7140
  • titleBar.activeBackground#505050

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#f2f8f7—
comment#88846F—
string#E6DB74—
punctuation.definition.template-expression, punctuation.section.embedded#F92672—
meta.template.expression#F8F8F2—
constant.numeric#AE81FF—
constant.language#AE81FF—
constant.character, constant.other#AE81FF—
variable#F8F8F2
keyword#F92672—
storage#F92672
storage.type#66D9EFitalic
entity.name.tag#F92672
invalid#F44747
invalid.deprecated#F44747—
meta.structure.dictionary.json string.quoted.double.json#CFCFC2—
meta.diff, meta.diff.header#75715E—
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—
variable.language#FD971F—
string#dfb054italic
constant.numeric#FFFF00—
storage.type#F92672—
entity.name.function#A6E22Eitalic
entity.name.type.class#5ce77f—
meta.object-literal.key, variable.other.property, variable.object.property, variable.other.constant.property, punctuation.accessor.optional, string.json#E48B1Ditalic
variable.parameter, variable.language.this#AE81FFitalic
keyword.control.trycatch, keyword.control.export, keyword.control.import, keyword.control.from, constant.language.boolean, constant.language.undefined, constant.language.null#6C5CE7bold italic
meta.type.annotation.ts, meta.type.declaration.ts, meta.type.parameters.ts, meta.return.type.ts, support.type.primitive.ts, support.type.builtin.ts, meta.type.declaration.ts variable.other.readwrite.ts, meta.type.annotation.tsx, meta.type.declaration.tsx, meta.type.parameters.tsx, meta.return.type.tsx, support.type.primitive.tsx, support.type.builtin.tsx, meta.type.declaration.tsx variable.other.readwrite.tsx, storage.type.class.jsdoc, entity.name.type.instance.jsdoc#23A697italic
meta.type.declaration.ts entity.name.type, meta.type.parameters.ts entity.name.type, meta.type.annotation.ts entity.name.type, meta.return.type.ts entity.name.type, meta.type.declaration.ts entity.name.type.alias, meta.type.parameters.ts entity.name.type.interface, meta.type.annotation.ts entity.name.type.enum, meta.return.type.ts entity.name.type.module, meta.type.declaration.tsx entity.name.type, meta.type.parameters.tsx entity.name.type, meta.type.annotation.tsx entity.name.type, meta.return.type.tsx entity.name.type, meta.type.declaration.tsx entity.name.type.alias, meta.type.parameters.tsx entity.name.type.interface, meta.type.annotation.tsx entity.name.type.enum, meta.return.type.tsx entity.name.type.module#23A697italic
meta.class.ts storage.modifier.ts, meta.interface.ts storage.modifier.ts, meta.decorator.ts, meta.return.type.ts keyword.operator.expression.in.ts, meta.return.type.ts keyword.operator.expression.typeof.ts, meta.return.type.ts storage.modifier.ts, meta.type.annotation.ts keyword.operator.expression.in.ts, meta.type.annotation.ts keyword.operator.expression.typeof.ts, meta.type.annotation.ts storage.modifier.ts, meta.type.declaration.ts keyword.operator.expression.in.ts, meta.type.declaration.ts keyword.operator.expression.typeof.ts, meta.type.declaration.ts storage.modifier.ts, meta.type.parameters.ts keyword.operator.expression.in.ts, meta.type.parameters.ts keyword.operator.expression.typeof.ts, meta.type.parameters.ts storage.modifier.ts, keyword.control.as.ts, keyword.control.satisfies.ts, keyword.operator.expression.infer.ts, keyword.operator.expression.is.ts, keyword.operator.expression.keyof.ts, keyword.operator.type.asserts.ts, punctuation.decorator.ts, entity.name.function.decorator.ts, meta.interface.tsx storage.modifier.tsx, meta.class.tsx storage.modifier.tsx, meta.decorator.tsx, meta.return.type.tsx keyword.operator.expression.in.tsx, meta.return.type.tsx keyword.operator.expression.typeof.tsx, meta.return.type.tsx storage.modifier.tsx, meta.type.annotation.tsx keyword.operator.expression.in.tsx, meta.type.annotation.tsx keyword.operator.expression.typeof.tsx, meta.type.annotation.tsx storage.modifier.tsx, meta.type.declaration.tsx keyword.operator.expression.in.tsx, meta.type.declaration.tsx keyword.operator.expression.typeof.tsx, meta.type.declaration.tsx storage.modifier.tsx, meta.type.parameters.tsx keyword.operator.expression.in.tsx, meta.type.parameters.tsx keyword.operator.expression.typeof.tsx, meta.type.parameters.tsx storage.modifier.tsx, keyword.control.as.tsx, keyword.control.satisfies.tsx, keyword.operator.expression.infer.tsx, keyword.operator.expression.is.tsx, keyword.operator.expression.keyof.tsx, keyword.operator.type.asserts.tsx, punctuation.decorator.tsx, entity.name.function.decorator.tsx#6b9d8ee0italic bold
meta.type.declaration.ts keyword.operator.type.ts, meta.type.declaration.ts keyword.operator.ternary.ts, meta.type.declaration.ts keyword.operator.optional.ts, meta.type.declaration.ts keyword.operator.assignment.ts, meta.type.parameters.ts keyword.operator.type.ts, meta.type.parameters.ts keyword.operator.ternary.ts, meta.type.parameters.ts keyword.operator.optional.ts, meta.type.parameters.ts keyword.operator.assignment.ts, meta.type.annotation.ts keyword.operator.type.ts, meta.type.annotation.ts keyword.operator.ternary.ts, meta.type.annotation.ts keyword.operator.optional.ts, meta.type.annotation.ts keyword.operator.assignment.ts, meta.return.type.ts keyword.operator.type.ts, meta.return.type.ts keyword.operator.ternary.ts, meta.return.type.ts keyword.operator.optional.ts, meta.return.type.ts keyword.operator.assignment.ts, meta.field.declaration.ts keyword.operator.type.ts, meta.field.declaration.ts keyword.operator.ternary.ts, meta.field.declaration.ts keyword.operator.optional.ts, meta.field.declaration.ts keyword.operator.assignment.ts, keyword.operator.type.annotation.ts, meta.type.declaration.tsx keyword.operator.type.tsx, meta.type.declaration.tsx keyword.operator.ternary.tsx, meta.type.declaration.tsx keyword.operator.optional.tsx, meta.type.declaration.tsx keyword.operator.assignment.tsx, meta.type.parameters.tsx keyword.operator.type.tsx, meta.type.parameters.tsx keyword.operator.ternary.tsx, meta.type.parameters.tsx keyword.operator.optional.tsx, meta.type.parameters.tsx keyword.operator.assignment.tsx, meta.type.annotation.tsx keyword.operator.type.tsx, meta.type.annotation.tsx keyword.operator.ternary.tsx, meta.type.annotation.tsx keyword.operator.optional.tsx, meta.type.annotation.tsx keyword.operator.assignment.tsx, meta.return.type.tsx keyword.operator.type.tsx, meta.return.type.tsx keyword.operator.ternary.tsx, meta.return.type.tsx keyword.operator.optional.tsx, meta.return.type.tsx keyword.operator.assignment.tsx, meta.field.declaration.tsx keyword.operator.type.tsx, meta.field.declaration.tsx keyword.operator.ternary.tsx, meta.field.declaration.tsx keyword.operator.optional.tsx, meta.field.declaration.tsx keyword.operator.assignment.tsx, keyword.operator.type.annotation.tsx, entity.name.type.parameter, variable.other.jsdoc#6FA7B4bold italic
storage.type.type.ts, storage.type.interface.ts, storage.type.enum.ts, storage.type.namespace.ts, meta.var.expr.ts storage.modifier.ts, storage.type.type.tsx, storage.type.interface.tsx, storage.type.enum.tsx, storage.type.namespace.tsx, meta.var.expr.tsx storage.modifier.tsx#6B9D8Ebold
entity.other.attribute-name.tsx, entity.other.attribute-name.js.jsx#9CDCFE
support.class.component.tsx, support.class.component.jsx, support.class.component.js.jsx#A6E22E
entity.name.tag.tsx, entity.name.tag.js.jsx#0091ffbold
meta.import string#9CDCFEitalic
markup.deleted#F92672—
markup.inserted#A6E22E—
markup.changed#E6DB74—
markup.strikethrough—strikethrough
heading.1.markdown, markup.heading.atx.1.mdx#9CDCFEbold underline
heading.2.markdown, markup.heading.atx.2.mdx#9cdcfee8bold underline
heading.3.markdown, markup.heading.atx.3.mdx#9cdcfebeitalic bold underline
heading.4.markdown, markup.heading.atx.4.mdx#9cdcfec5italic bold
meta.paragraph.markdown, meta.paragraph.mdx#b2b5b4
markup.quote.markdown#5cc1ff77italic
markup.bold.markdown#5cc1ffbold
markup.italic.markdown#5cc1ffitalic
markup.inline.raw#99c7e4
markup.list.unnumbered.markdown, markup.list.numbered.markdown#5cc1ffcc—
punctuation.definition.list.begin.markdown#5cc1ffee—
string.other.link.title.markdown,string.other.link.description.markdown#5cc1ffee—
markup.underline.link.markdown, markup.underline.link.image.markdown, string.other.link.destination.mdx#5cc1ff88—
punctuation.definition.heading.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.raw.markdown, punctuation.definition.strikethrough.markdown, meta.separator.markdown, markup.fenced_code.block.markdown punctuation.definition.markdown, markup.fenced_code.block.markdown fenced_code.block.language.markdown, punctuation.definition.metadata.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown, punctuation.definition.heading.mdx, meta.separator.mdx, string.other.begin.link.mdx, string.other.begin.image.mdx, string.other.begin.mdx, string.other.end.mdx, string.other.begin.footnote.mdx, string.other.end.footnote.mdx, entity.name.identifier.mdx, punctuation.definition.quote.begin.mdx, variable.ordered.list.mdx, variable.unordered.list.mdx, string.other.number.mdx, string.other.strikethrough.mdx, string.other.emphasis.underscore.mdx, string.other.strong.asterisk.mdx, string.other.begin.code.mdx, string.other.end.code.mdx, string.other.begin.code.fenced.mdx, string.other.end.code.fenced.mdx#0091ffbold italic
entity.other.attribute-name#9CDCFE
entity.name.tag#0091ff—
meta.tag.structure.div.start.html entity.name.tag.html, meta.tag.structure.div.end.html entity.name.tag.html, meta.tag.structure.section.start.html entity.name.tag.html, meta.tag.structure.section.end.html entity.name.tag.html, meta.tag.structure.article.start.html entity.name.tag.html, meta.tag.structure.article.end.html entity.name.tag.html, meta.tag.structure.header.start.html entity.name.tag.html, meta.tag.structure.header.end.html entity.name.tag.html, meta.tag.structure.footer.start.html entity.name.tag.html, meta.tag.structure.footer.end.html entity.name.tag.html, meta.tag.structure.nav.start.html entity.name.tag.html, meta.tag.structure.nav.end.html entity.name.tag.html, meta.tag.structure.aside.start.html entity.name.tag.html, meta.tag.structure.aside.end.html entity.name.tag.html, meta.tag.structure.main.start.html entity.name.tag.html, meta.tag.structure.main.end.html entity.name.tag.html, meta.tag.structure.figure.start.html entity.name.tag.html, meta.tag.structure.figure.end.html entity.name.tag.html—bold
meta.tag.structure.p.start.html entity.name.tag.html, meta.tag.structure.p.end.html entity.name.tag.html, meta.tag.structure.h1.start.html entity.name.tag.html, meta.tag.structure.h1.end.html entity.name.tag.html, meta.tag.structure.h2.start.html entity.name.tag.html, meta.tag.structure.h2.end.html entity.name.tag.html, meta.tag.structure.h3.start.html entity.name.tag.html, meta.tag.structure.h3.end.html entity.name.tag.html, meta.tag.structure.h4.start.html entity.name.tag.html, meta.tag.structure.h4.end.html entity.name.tag.html, meta.tag.structure.h5.start.html entity.name.tag.html, meta.tag.structure.h5.end.html entity.name.tag.html, meta.tag.structure.h6.start.html entity.name.tag.html, meta.tag.structure.h6.end.html entity.name.tag.html, meta.tag.structure.span.start.html entity.name.tag.html, meta.tag.structure.span.end.html entity.name.tag.html, meta.tag.structure.a.start.html entity.name.tag.html, meta.tag.structure.a.end.html entity.name.tag.html, meta.tag.structure.strong.start.html entity.name.tag.html, meta.tag.structure.strong.end.html entity.name.tag.html, meta.tag.structure.em.start.html entity.name.tag.html, meta.tag.structure.em.end.html entity.name.tag.html, meta.tag.structure.b.start.html entity.name.tag.html, meta.tag.structure.b.end.html entity.name.tag.html, meta.tag.structure.i.start.html entity.name.tag.html, meta.tag.structure.i.end.html entity.name.tag.html, meta.tag.structure.u.start.html entity.name.tag.html, meta.tag.structure.u.end.html entity.name.tag.html, meta.tag.structure.small.start.html entity.name.tag.html, meta.tag.structure.small.end.html entity.name.tag.html, meta.tag.structure.mark.start.html entity.name.tag.html, meta.tag.structure.mark.end.html entity.name.tag.html—italic
meta.tag.metadata.title.start.html entity.name.tag.html, meta.tag.metadata.title.end.html entity.name.tag.html, meta.tag.metadata.meta.void.html entity.name.tag.html, meta.tag.metadata.link.void.html entity.name.tag.html, meta.tag.metadata.style.start.html entity.name.tag.html, meta.tag.metadata.style.end.html entity.name.tag.html, meta.tag.metadata.base.start.html entity.name.tag.html, meta.tag.metadata.noscript.start.html entity.name.tag.html, meta.tag.metadata.noscript.end.html entity.name.tag.html#6C5CE7bold italic
meta.tag.metadata.doctype.html entity.name.tag.html, meta.tag.structure.html.start.html entity.name.tag.html, meta.tag.structure.html.end.html entity.name.tag.html, meta.tag.structure.head.start.html entity.name.tag.html, meta.tag.structure.head.end.html entity.name.tag.html, meta.tag.structure.body.start.html entity.name.tag.html, meta.tag.structure.body.end.html entity.name.tag.html#6C5CE7bold
meta.tag.metadata.style.start.html entity.name.tag.html, meta.tag.metadata.style.end.html entity.name.tag.html, meta.tag.metadata.script.start.html entity.name.tag.html, meta.tag.metadata.script.end.html entity.name.tag.html#5ce77fitalic
support.type.property-name.css, punctuation.terminator.rule.css#9CDCFEitalic
meta.selector entity.other.attribute-name#E48B1D
meta.selector entity.name.tag#6C5CE7bold
Sidev Monokai Dim TS by slavko.ivanovic - VS Code Theme