Skip to main content
CodingTheme

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#1B1E2B
  • activityBar.foreground#A6ACCD
  • activityBarBadge.background#FFCC66
  • activityBarBadge.foreground#000
  • badge.background#fbbd42
  • badge.foreground#000
  • button.background#fbbd42
  • button.foreground#000
  • button.hoverBackground#FFCC66
  • debugExceptionWidget.background#FF9F2E60
  • debugExceptionWidget.border#FF9F2E60
  • diffEditor.insertedTextBackground#29BF1220
  • diffEditor.removedTextBackground#F21B3F20
  • dropdown.background#1B1E2B
  • dropdown.border#363c49
  • dropdown.foreground#A6ACCD
  • editor.background#292D3E
  • editor.findMatchBackground#f39d12d7
  • editor.findMatchHighlightBackground#59b8b377
  • editor.foreground#A6ACCD
  • editor.hoverHighlightBackground#373941
  • editor.lineHighlightBackground#ff9d2e0b
  • editor.lineHighlightBorder#2e323d
  • editor.rangeHighlightBackground#372F3C
  • editor.selectionBackground#2ba7ff25
  • editor.selectionHighlightBackground#4F435580
  • editor.wordHighlightBackground#4F4355
  • editor.wordHighlightStrongBackground#db45a280
  • editorCodeLens.foreground#746f77
  • editorCursor.foreground#FFCC00
  • editorError.foreground#d4503f
  • editorGroup.dropBackground#292D3E
  • editorGroup.emptyBackground#292D3E
  • editorGroupHeader.tabsBackground#292D3E
  • editorGutter.addedBackground#9BC53DBB
  • editorGutter.deletedBackground#FC644DBB
  • editorGutter.modifiedBackground#5BC0EBBB
  • editorHoverWidget.background#1B1E2B
  • editorHoverWidget.border#f39d12d7
  • editorIndentGuide.activeBackground#f39d12d7
  • editorIndentGuide.background#333844
  • editorLineNumber.foreground#746f77
  • editorLink.activeForeground#3B79C7
  • editorOverviewRuler.border#1B1D23
  • editorRuler.foreground#4F4355
  • editorSuggestWidget.background#20232A
  • editorSuggestWidget.border#372F3C
  • editorSuggestWidget.selectedBackground#373941
  • editorWarning.foreground#FF9F2E
  • editorWhitespace.foreground#333844
  • editorWidget.background#292D3E
  • editorWidget.foreground#A6ACCD
  • errorForeground#d4503f
  • focusBorder#FFCC00
  • foreground#D5CED9
  • input.background#1B1E2B
  • input.foreground#A6ACCD
  • input.placeholderForeground#746f77
  • inputOption.activeBorder#C668BA
  • inputValidation.errorBackground#d4503f
  • inputValidation.errorBorder#d4503f
  • inputValidation.infoBackground#3b6599
  • inputValidation.infoBorder#3b6599
  • inputValidation.warningBackground#ee9e3d
  • inputValidation.warningBorder#ee9e3d
  • list.activeSelectionBackground#292D3E
  • list.activeSelectionForeground#fff
  • list.dropBackground#292D3E
  • list.focusBackground#292D3E
  • list.focusForeground#eee
  • list.hoverBackground#1B1E2B
  • list.hoverForeground#eee
  • list.inactiveSelectionBackground#292D3E
  • list.inactiveSelectionForeground#FFCC00
  • menu.background#292D3E
  • menu.selectionBackground#1B1E2B
  • merge.currentContentBackground#F9267240
  • merge.currentHeaderBackground#F92672
  • merge.incomingContentBackground#3B79C740
  • merge.incomingHeaderBackground#3B79C7BB
  • peekView.border#262931
  • peekViewEditor.background#2A2C32
  • peekViewEditor.matchHighlightBackground#FF9F2E60
  • peekViewResult.background#2A2C32
  • peekViewResult.matchHighlightBackground#FF9F2E60
  • peekViewResult.selectionBackground#1B1E2B
  • peekViewTitle.background#1B1E2B
  • peekViewTitleDescription.foreground#78747a
  • progressBar.background#C668BA
  • scrollbar.shadow#25282F
  • scrollbarSlider.activeBackground#3A3F4CCC
  • scrollbarSlider.background#4A5F4B77
  • scrollbarSlider.hoverBackground#3a3f4c
  • selection.background#292D3E
  • sideBar.background#1B1E2B
  • sideBar.foreground#A6ACCD
  • sideBarSectionHeader.background#1B1E2B
  • sideBarSectionHeader.foreground#A6ACCD
  • sideBarTitle.foreground#FFCC00
  • statusBar.background#1B1E2B
  • statusBar.debuggingBackground#ff24deaf
  • statusBar.foreground#A6ACCD
  • statusBar.noFolderBackground#1B1E2B
  • statusBarItem.activeBackground#f39d12d7
  • statusBarItem.hoverBackground#f39d12af
  • statusBarItem.prominentBackground#f39d12af
  • statusBarItem.prominentHoverBackground#f39d12d7
  • tab.activeBackground#292D3E
  • tab.activeBorder#FFCC00
  • tab.activeForeground#FFCC00
  • tab.border#15232D
  • tab.inactiveBackground#292D3E
  • tab.inactiveForeground#a59f9f
  • terminal.ansiBlue#7cb7ff
  • terminal.ansiBrightBlue#7cb7ff
  • terminal.ansiBrightCyan#00e8c6
  • terminal.ansiBrightGreen#96E072
  • terminal.ansiBrightMagenta#ff00aa
  • terminal.ansiBrightRed#ee5d43
  • terminal.ansiBrightYellow#FFE66D
  • terminal.ansiCyan#00e8c6
  • terminal.ansiGreen#96E072
  • terminal.ansiMagenta#ff00aa
  • terminal.ansiRed#ee5d43
  • terminal.ansiYellow#FFE66D
  • terminal.background#011224
  • terminalCursor.background#23262E
  • terminalCursor.foreground#FFE66D
  • titleBar.activeBackground#1B1E2B
  • widget.shadow#14151A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis#FF0000bold
strongbold
header#BD93F9
meta.diff, meta.diff.header#6272A4
markup.inserted#50FA7B
markup.deleted#FF5555
markup.changed#FFB86C
invalid.deprecated#F8F8F2underline italic
entity.name.filename#F1FA8C
markup.error#FF5555
comment, punctuation.definition.comment#656869italic
variable, string constant.other.placeholder#F96C75
variable.other.readwrite.js#A6ACCDitalic
string.unquoted.js#A6ACCD
constant.other.color#ffffff
invalid, invalid.illegal, invalid.broken#FF5370
invalid.unimplemented#ffffff
invalid.deprecated#ffffff
keyword, storage.type, storage.modifier#B97CE2
storage.type, keyword.control#B97CE2italic
keyword.control.loop.js#FF5D8Fbold
variable.other.object.js#A6ACCD
variable.other.property.js#ff5d8f
keyword.operator, constant.other.color, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#89DDFF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#f07178
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level#61AFEFitalic bold
support.other.variable, string.other.link#f07178
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit#f4bd58
constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#8dc8e8
string.quoted.double.js, string.quoted.single.js, string.quoted.template.js#98C379
entity.name.directive.restructuredtext, markup.quote#F1FA8Citalic
entity.name.class, entity.name.type.class, support.type.object.dom.js, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FFCB6B
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#A6ACCD
variable.other.class.js#FFCB6B
entity.name.module.js, variable.import.parameter.js#FF5370
variable.language#FF5370italic
entity.name.method.js#82AAFF
meta.class-method.js entity.name.function.js, variable.function.constructor#82AAFFitalic bold
entity.other.attribute-name#c085e8
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCB6Bitalic
string.quoted.double.html#98C379
text.html.derivative#A6ACCD
entity.other.attribute-name.class#FFCB6B
constant.numeric.css#F07178
source.sass keyword.control#82AAFF
keyword.control.at-rule.media.css, punctuation.definition.keyword.css#B97CE2
markup.inserted#C3E88D
markup.deleted#FF5370
markup.changed#C792EA
string.regexp#99ff89
constant.character.escape#89DDFF
*url*, *link*, *uri*#6fc9ecunderline
meta.attribute.href.html, meta.tag.metadata.link.void.html, meta.attribute.src.html#6fc9ec
constant.numeric.line-number.find-in-files - match#C17E70
entity.name.filename.find-in-files#C3E88D
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
variable.other.property.static.js#A6ACCDitalic
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#C3E88D
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#C792EA
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#f07178
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#82AAFF
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#b8c170
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#FF5370
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#FFCB6B
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#FFCB6B
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#C792EA
meta.structure.dictionary.json, support.type.property-name.json#FF5D8F
meta.structure.dictionary.json#C792EA
meta.structure.dictionary.value.json#80c152
text.html.markdown, punctuation.definition.list_item.markdown#A6ACCD
text.html.markdown markup.raw.inline#C792EA
text.html.markdown punctuation.definition.raw.markdown#65737e
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#C3E88D
markup.italic#61AFEFitalic
markup.bold, markup.bold string#61AFEFbold
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 stringbold italic
markup.underline#61AFEFunderline
markup.strike
entity.name.section.markdown#ee9e3d
markup.quote punctuation.definition.blockquote.markdown#65737e
markup.quoteitalic
string.other.link.title.markdown#82AAFF
string.other.link.description.title.markdown#C792EA
constant.other.reference.link.markdown#FFCB6B
markup.raw.block#C792EA
markup.raw.block.fenced.markdown
punctuation.definition.fenced.markdown
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#eeffff
variable.language.fenced.markdown#65737e
text.html.markdown punctuation.definition#546E7A
text.html.markdown meta.disable-markdown punctuation.definition#89DDFF
meta.separator#65737ebold
markup.table#eeffff
acejump.label.blue#ffffff
acejump.label.green#ffffff
acejump.label.orange#ffffff
acejump.label.purple#ffffff
sublimelinter.mark.warning#FFCB6B
sublimelinter.gutter-mark#ffffff
sublimelinter.mark.error#FF5370
sublimelinter.annotations
markup.ignored.git_gutter#65737e
markup.untracked.git_gutter#65737e
markup.inserted.git_gutter#C3E88D
markup.changed.git_gutter#FFCB6B
markup.deleted.git_gutter#FF5370
brackethighlighter.default#B2CCD6
brackethighlighter.quote#C3E88D
brackethighlighter.unmatched#FF5370
entity.name.type.class, entity.name.class#8BE9FD
keyword.expressions-and-types.swift , keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, symbol in $this, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#BD93F9italic
entity.other.inherited, class#8BE9FDitalic
entity.name.function-meta.function-call.generic, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method - call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix#50FA7B
entity.name.variable.parameter, meta.at - rule.function variable, function params, meta.at - rule.mixin variable# Sass mixin params, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#FFB86Citalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#50FA7Bitalic
meta.decorator variable.other.object#50FA7B
keyword, punctuation.definition.keyword#FF79C6
keyword.control.new, keyword.operator.newbold
meta.selector#FF79C6
string.quoted.single.ts, string.quoted.double.ts, string.template.ts#98C379
meta.import.ts, variable.other.readwrite.alias.ts#A6ACCD
variable.other.constant.ts#bbb2fc
variable.other.readwrite.ts#A6ACCD
variable.other.object.ts#FFCB6B
constant.other.character-class.range.regexp, constant.other.character-class.regexp, keyword.other.ts#FF5D8F
punctuation.definition.range.regexp#99FF89
constant.numeric.decimal.ts#ffff5d
support.type.primitive.ts#FFCB6B
entity.name.type.ts#fb87d6
entity.name.type.alias.ts#fb87d6
variable.object.property.ts#A6ACCD
variable.parameter.ts#54f1ff

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Italic - Bold Theme Pro by JoeApl - VS Code Theme