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#474747
  • activityBar.background#3a3a3a
  • activityBar.foreground#3da2d1
  • activityBar.inactiveForeground#959595
  • activityBarBadge.background#3da2d1
  • activityBarBadge.foreground#f8f8f8
  • badge.background#cecece37
  • button.background#1b94cd75
  • button.foreground#f8f8f8
  • button.hoverBackground#24a8e590
  • descriptionForeground#959595
  • disabledForeground#959595
  • editor.background#272727
  • editor.foreground#cccccc
  • editor.lineHighlightBackground#1b95cd24
  • editorBracketHighlight.foreground1#dd7bca
  • editorBracketHighlight.foreground2#e1b657
  • editorBracketHighlight.foreground3#40b0ac
  • editorBracketHighlight.foreground4#6db05d
  • editorBracketHighlight.foreground5#ee985b
  • editorBracketHighlight.foreground6#588ee4
  • editorBracketHighlight.unexpectedBracket.foreground#d33223
  • editorBracketMatch.border#35dfd48a
  • editorGutter.background#2F2F2F
  • editorHoverWidget.background#2F2F2F
  • editorHoverWidget.border#474747
  • editorHoverWidget.foreground#cccccc
  • editorStickyScroll.background#272727
  • editorSuggestWidget.highlightForeground#e9323296
  • editorSuggestWidget.selectedBackground#1b94cd75
  • editorWidget.background#2F2F2F
  • focusBorder#24a8e590
  • foreground#cccccc
  • icon.foreground#cccccc
  • input.background#272727
  • input.border#1b94cd75
  • input.foreground#cccccc
  • input.placeholderForeground#959595
  • inputOption.activeBackground#1b94cd75
  • inputOption.activeBorder#1b94cd75
  • inputOption.hoverBackground#cecece29
  • list.activeSelectionBackground#1b94cd75
  • list.activeSelectionForeground#f8f8f8
  • list.focusBackground#1b95cd42
  • list.focusOutline#00000000
  • list.hoverBackground#cecece1a
  • list.inactiveSelectionBackground#cecece29
  • panel.background#212121
  • panelTitle.activeForeground#cccccc
  • quickInput.background#2F2F2F
  • quickInput.foreground#cccccc
  • quickInputList.focusBackground#1b94cd75
  • quickInputList.focusForeground#f8f8f8
  • scrollbarSlider.activeBackground#1b94cd75
  • scrollbarSlider.background#cecece29
  • scrollbarSlider.hoverBackground#1b95cd42
  • selection.background#1b94cd75
  • sideBar.background#272727
  • sideBar.border#3a3a3a
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#3a3a3a
  • statusBar.background#3a3a3a
  • statusBar.foreground#cccccc
  • statusBarItem.hoverBackground#cecece29
  • tab.activeBackground#1b95cd42
  • tab.activeBorder#1b94cd75
  • tab.border#3a3a3a
  • tab.inactiveBackground#2F2F2F
  • terminal.ansiBlack#353535
  • terminal.ansiBlue#458588
  • terminal.ansiBrightBlack#928374
  • terminal.ansiBrightBlue#83a598
  • terminal.ansiBrightCyan#8ec07c
  • terminal.ansiBrightGreen#b8bb26
  • terminal.ansiBrightMagenta#d3869b
  • terminal.ansiBrightRed#fb4934
  • terminal.ansiBrightWhite#ebdbb2
  • terminal.ansiBrightYellow#fabd2f
  • terminal.ansiCyan#689d6a
  • terminal.ansiGreen#98971a
  • terminal.ansiMagenta#b16286
  • terminal.ansiRed#cc241d
  • terminal.ansiWhite#a89984
  • terminal.ansiYellow#d79921
  • terminal.background#252525
  • terminal.border#212121
  • terminal.foreground#ecdbb2
  • terminal.selectionBackground#ecdab2b9
  • terminalCursor.background#272727
  • terminalCursor.foreground#ecdbb2
  • textLink.activeForeground#5fbce8
  • textLink.foreground#3da2d1
  • titleBar.activeBackground#3a3a3a
  • titleBar.activeForeground#cccccc
  • titleBar.inactiveBackground#2F2F2F
  • titleBar.inactiveForeground#cccccc
  • toolbar.activeBackground#24a8e590
  • toolbar.hoverBackground#cecece37
  • widget.border#00c3ff6a
  • widget.shadow#00c3ff36

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8c8c8citalic
constant.numeric.hex, constant.rgb-value, constant.other.color, meta.function.color#6bc1be
emphasisitalic
strongbold
invalid#d33223
constant.language.boolean.true#34b73c
constant.language.boolean.false#d33223
punctuation#e0e0e0
string#9bb572
constant.character.escape, constant.regexp, punctuation.definition.template-expression#7bc4df
constant, variable.other.constant#CF6A4C
constant.language.null, constant.language.undefined#e26868
constant.numeric#62b464
variable#E79F56
variable.other.readwrite#E79F56
variable.other.object#E79F56bold
variable.other.property, meta.object.member, meta.object-literal.key, meta.var.expr, support.variable.property#F07178
storage#509151bold
entity.name.function, support.function, support.constant.handlebars#6bc1bebold
storage.modifier#7485d0
keyword, keyword.operator.expression.typeof#7485d0
keyword.operator.new#34b73c
keyword.control.export, keyword.control.import#86D3BB
keyword.operator#e0e0e0
entity.name.selector#d33223
meta#c8c8c8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#6095c9
punctuation.definition.variable.php#53a992
keyword.operator.logical.php#7485d0
punctuation.terminator.expression.php, punctuation.definition.string.end.php, punctuation.definition.string.begin.php, keyword.operator.class.php, keyword.operator.assignment.php#c8c8c8
punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb#F07178
support.class.ruby, entity.name.type.class.ruby#F07178
entity.name.type.module.ruby#F07178
constant.language.ruby#d67c6e
variable.other.readwrite.instance.ruby#CF6A4C
keyword.operator.arithmetic.ruby, punctuation.separator.inheritance.ruby#c8c8c8
punctuation.definition.variable.ruby#c8c8c8
string.quoted.double.js#509151
support.type.object.module.js#62b464
support.type.primitive.ts, support.type.primitive.tsx#6095c9
support.type.builtin.ts, support.type.builtin.tsx#6095c9
entity.name.type.ts, entity.name.type.tsx, entity.name.type.alias.ts, entity.name.type.alias.tsx, entity.name.type.module.tsx#7bc4df
entity.name.type.interface.ts, entity.name.type.interface.tsx, entity.name.type.enum.ts, entity.name.type.enum.tsx#69afb6
entity.name.type.class.ts, entity.other.inherited-class.ts, support.class.ts#6bc1be
entity.name.type.module.ts#CF6A4C
entity.name.tag.directive.ts, entity.other.attribute-name.directive.ts#a067c6
keyword.operator.expression.delete.ts#d33223
keyword.operator.expression.instanceof.ts, keyword.operator.expression.typeof.ts, keyword.operator.expression.in.ts, keyword.operator.expression.keyof.ts#bd92ea
entity.name.tag.open.jsx, entity.name.tag.close.jsx, entity.name.tag.tsx#CF6A4C
support.class.component.open.js, support.class.component.close.js, support.class.component.open.jsx, support.class.component.close.jsx, support.class.component.tsx#F07178
entity.other.attribute-name.js, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx#E79F56
meta.jsx.children.js, JSXNested, meta.jsx.children.js.jsx#cccccc
entity.name.type.tsx, entity.name.type.interface.tsx#6095c9
entity.name.tag.svelte#CF6A4C
support.class.component.svelte#F07178
entity.other.attribute-name.svelte#E79F56
punctuation.definition.variable.svelte, punctuation.definition.tag.end.svelte, punctuation.definition.tag.begin.svelte, meta.embedded.block.svelte, meta.embedded.expression.svelte#c8c8c8
text.svelte#cccccc
entity.name.type.svelte#6095c9
source.python#E79F56
meta.function-call.python, meta.function-call.generic.python#6095c9
meta.indexed-name.python#6bc1be
constant.language.python#d33223
variable.parameter.function.python, meta.function-call.arguments.python#d33223
punctuation.python#d33223
entity.name.function.decorator.python, meta.attribute.python#dcb871
source.python variable.language.special#F07178
keyword.control#7485d0italic
variable.graphql#cd81c7
variable.parameter.graphql#7485d0
support.type.graphql, support.type.builtin.graphql, support.type.primitive.graphql#cccccc
support.type.object.graphql, support.type.enum.graphql, entity.scalar.graphql, entity.name.tag.directive.graphql, entity.name.tag.graphql, constant.character.enum.graphql#bd92ea
string.quoted.double.html#9bb572
entity.name.tag.html#CF6A4C
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#53a992
entity.other.attribute-name.html#E79F56
entity.name.tag.css, entity.other.attribute-name.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#E79F56
punctuation.definition.entity.css#cccccc
entity.name.tag.wildcard.css, entity.other.attribute-name.pseudo-element.css#F07178
support.type.property-name.css, support.type.vendored.property-name.css#6bc1be
source.css support.function.transform, source.css support.function.timing-function, source.css support.function.misc#62b464italic
support.property-value, constant.numeric.css, constant.rgb-value, support.property-value.scss, constant.rgb-value.scss, meta.property-value.css, support.constant.property-value.css#c8c8c8
keyword.other.unit#F07178
variable.css, variable.argument.css#d67c6e
keyword.other.important.css#34b73cbold
string.quoted.double.json#c8c8c8
source.json meta.structure.dictionary.json support.type.property-name.json, 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, 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#53a992
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, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E79F56
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, 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#86D3BB
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, 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#d67c6e
markup#c8c8c8
markup.underlineunderline
string.other.link.title.markdown#efefefunderline
markup.underline.link#bd92ea
markup.bold#CF6A4Cbold
markup.heading#E79F56bold
markup.italicitalic
markup.inserted#62b464
markup.deleted#F07178
markup.changed#CF6A4C
markup.punctuation.quote.beginning#7bc4df
markup.punctuation.list.beginning#7bc4df
markup.inline.raw, markup.fenced_code.block#53a992
Yum by Rio Edwards - VS Code Theme