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.strikethroughstrikethrough
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.htmlbold
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.htmlitalic
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