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.activeBorder#4D5BFC
  • activityBar.activeFocusBorder#49DCB1
  • activityBar.background#120E1D
  • activityBar.foreground#F9F9F9
  • activityBarBadge.background#4D5BFC
  • activityBarBadge.foreground#120E1D
  • badge.background#4D5BFC
  • badge.foreground#120E1D
  • button.background#CCFF66
  • button.foreground#120E1D80
  • button.hoverBackground#00D0FF
  • diffEditor.insertedTextBackground#00D0FF33
  • dropdown.background#120E1D90
  • dropdown.border#F9F9F922
  • dropdown.foreground#F9F9F999
  • editor.background#120E1D
  • editor.findMatchBackground#00D0FF66
  • editor.findMatchHighlightBackground#F9F9F922
  • editor.foreground#F8F8F8
  • editor.hoverHighlightBackground#F9F9F922
  • editor.inactiveSelectionBackground#717DFF39
  • editor.lineHighlightBackground#F9F9F907
  • editor.lineHighlightBorder#F9F9F904
  • editor.selectionBackground#717DFF39
  • editor.selectionHighlightBackground#717DFF39
  • editor.selectionHighlightBorder#717DFF39
  • editor.wordHighlightBackground#120E1D00
  • editor.wordHighlightStrongBackground#120E1D
  • editor.wordHighlightStrongBorder#F9F9F980
  • editorCodeLens.foreground#F9F9F966
  • editorCursor.foreground#F9F9F9
  • editorError.foreground#DB5461
  • editorGroup.border#120E1D80
  • editorGroup.emptyBackground#120E1D80
  • editorGroupHeader.tabsBackground#120E1D
  • editorGutter.addedBackground#CCFF66
  • editorGutter.deletedBackground#DB5461
  • editorGutter.modifiedBackground#00D0FF
  • editorHoverWidget.background#120E1D
  • editorHoverWidget.border#120E1D90
  • editorIndentGuide.background1#F9F9F922
  • editorLineNumber.foreground#F9F9F933
  • editorLink.activeForeground#00D0FF
  • editorOverviewRuler.addedForeground#CCFF6600
  • editorOverviewRuler.border#F9F9F900
  • editorOverviewRuler.bracketMatchForeground#00D0FF00
  • editorOverviewRuler.deletedForeground#F9F9F900
  • editorOverviewRuler.errorForeground#DB5461
  • editorOverviewRuler.infoForeground#49DCB100
  • editorOverviewRuler.modifiedForeground#00D0FF00
  • editorOverviewRuler.warningForeground#4D5BFC
  • editorRuler.foreground#F9F9F966
  • editorSuggestWidget.background#120E1D
  • editorSuggestWidget.border#000000
  • editorSuggestWidget.foreground#EEEEEE
  • editorSuggestWidget.highlightForeground#4D5BFC
  • editorSuggestWidget.selectedBackground#EEEEEE10
  • editorWarning.foreground#4D5BFC
  • editorWhitespace.foreground#F9F9F966
  • editorWidget.background#120E1D
  • editorWidget.border#00D0FF00
  • errorForeground#DB5461
  • extensionButton.prominentBackground#CCFF66
  • extensionButton.prominentForeground#120E1D90
  • extensionButton.prominentHoverBackground#00D0FF
  • focusBorder#4D5BFC
  • input.background#120E1D90
  • input.border#4D5BFC
  • input.foreground#EEEEEE
  • input.placeholderForeground#F9F9F966
  • inputOption.activeBackground#120E1D00
  • inputOption.activeBorder#4D5BFC
  • inputValidation.errorBackground#120E1D90
  • inputValidation.errorBorder#DB5461
  • inputValidation.infoBackground#120E1D90
  • inputValidation.infoBorder#4D5BFC
  • inputValidation.warningBackground#120E1D90
  • inputValidation.warningBorder#4D5BFC
  • list.activeSelectionBackground#F9F9F920
  • list.activeSelectionForeground#F9F9F9
  • list.errorForeground#DB5461
  • list.focusBackground#F9F9F922
  • list.focusForeground#EEEEEE
  • list.highlightForeground#F9F9F9
  • list.hoverBackground#F9F9F910
  • list.inactiveSelectionBackground#F9F9F922
  • list.inactiveSelectionForeground#EEEEEE
  • list.warningForeground#4D5BFC
  • minimapSlider.activeBackground#F9F9F950
  • minimapSlider.background#F9F9F920
  • minimapSlider.hoverBackground#F9F9F940
  • panel.background#120E1D
  • panel.border#F9F9F920
  • panelTitle.activeBorder#4D5BFC
  • pickerGroup.border#120E1D00
  • pickerGroup.foreground#00D0FF
  • progressBar.background#CCFF66
  • scrollbar.shadow#F9F9F980
  • scrollbarSlider.activeBackground#F9F9F970
  • scrollbarSlider.background#F9F9F910
  • scrollbarSlider.hoverBackground#F9F9F960
  • sideBar.background#120E1D
  • sideBar.border#F9F9F920
  • sideBar.foreground#F9F9F990
  • sideBarSectionHeader.background#F9F9F909
  • sideBarSectionHeader.foreground#F9F9F9
  • sideBarTitle.foreground#EEEEEE
  • statusBar.background#120E1D
  • statusBar.debuggingBackground#120E1D90
  • statusBar.foreground#F9F9F990
  • statusBar.noFolderBackground#120E1D90
  • statusBarItem.hoverBackground#F9F9F933
  • tab.activeBackground#120E1D
  • tab.activeBorder#4D5BFC
  • tab.activeBorderBottom#4D5BFC
  • tab.activeForeground#F9F9F9
  • tab.border#F9F9F900
  • tab.hoverBackground#120E1D
  • tab.inactiveBackground#120E1D
  • tab.inactiveForeground#F9F9F950
  • tab.lastPinnedBorder#F9F9F920
  • terminal.background#120E1D
  • titleBar.activeBackground#120E1D90
  • titleBar.activeForeground#F9F9F999
  • titleBar.inactiveBackground#120E1D90
  • titleBar.inactiveForeground#F9F9F999
  • tree.indentGuidesStroke#F9F9F920
  • widget.shadow#120E1D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment#666666
string#49DCB1
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts#DB5461
string.template.js, variable.parameter.js#49DCB1
meta.template.expression.js#EEEEEE
constant.numeric#4D5BFC
string.embedded.begin, string.embedded.end#4D5BFC
string.embedded#CCFF66
constant.language#4D5BFC
constant.character, constant.other#4D5BFC
variable.language#4D5BFC
variable.readwrite, variable.readwrite.other.block#DB5461
variable.other.object.js, meta.function-call.js, meta.object-literal.key.js, meta.tag.attributes.js, variable.other.readwrite.js, variable.other.readwrite.jsx, variable.other.readwrite.tsx#EEEEEE
entity.name.variable, entity.name.variable.local, meta.object-literal.key, variable.object.constant, variable.object.property, variable.other.alias, variable.other.constant, variable.other.object, variable.other.property, variable.other.readwrite, variable.parameter, support.variable#EEEEEE
keyword.other.base, keyword.other.this, variable.other.object.property, variable.language.base, variable.language.this#EEEEEE
support.variable.UnityEngine#EEEEEE
keyword, keyword.operator, keyword.operator.logical, keyword.operator.constructor#EE964B
storage.modifier.async.js, keyword.control.flow.js#EE964B
storage#49DCB1
storage.type#FF5FA7
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#00D0FF
variable.other.property, variable.other.block#00D0FF
entity.other.inherited-class#CCFF66
entity.name.function, support.function#CCFF66
variable.parameter#FF5FA7
entity.name.function-call#EEEEEE
function.support.builtin, function.support.core#CCFF66
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx#FF5FA7
entity.name.tag.class, entity.name.tag.id#FF5FA7
entity.other.attribute-name#CCFF66
support.constant#4D5BFC
support.type, support.variable#FF5FA7
support.dictionary.json#DB5461
source.json meta.structure.dictionary.json string.quoted.double.json punctuation.definition.string#FF5FA7
source.json string.quoted.double.json#EEEEEE
source.json meta.structure.dictionary.json support.type.property-name.json#49DCB1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#CCFF66
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#CCFF66
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#CCFF66
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#CCFF66
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#4D5BFC
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#CCFF66
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#00D0FF
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#FF5FA7
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, punctuation.section.property-list.begin.bracket.curly.css#CCFF66
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass, entity.name.tag.css#00D0FF
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#49DCB1
variable.css, variable.scss, variable.less, variable.sass, entity.name.tag.css#FF5FA7
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string, support.constant.property-value.css#EE964B
unit.css, unit.scss, unit.less, unit.sass, keyword.other.unit.percentage.css, constant.numeric.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.rem.css#49DCB1
constant.numeric.css, constant.numeric.scss, constant.numeric.less, constant.numeric.sass#EE964B
support.type.property-name.css.color, meta.property-name.css support.type.property-name.css#EE964B
function.css, function.scss, function.less, function.sass#CCFF66
support.other.variable#00D0FF
invalid#F8F8F8
invalid.deprecated#F8F8F8
string.detected-link#00D0FF
meta.diff, meta.diff.header#00D0FF
markup.deleted#DB5461
markup.inserted#49DCB1
markup.changed#49DCB1
constant.numeric.line-number.find-in-files - match#00D0FF
entity.name.filename.find-in-files#49DCB1
markup.normal, markup.normal.markdown#49DCB1
punctuation.definition.normal.markdown#F9F9F960
fenced_code.block.language.markdown#FF5FA7
markup.underline.link.markdown#4D5BFC
markup.bold.markdownbold
punctuation.definition.bold.markdown#F9F9F960
keyword.control#FF5FA7
markup.heading.markdown, entity.name.section.markdown#CCFF66bold
punctuation.definition.heading.markdown#49DCB1
markup.quote.markdown#CCFF66
meta.separator.markdown#DB5461bold
markup.raw.inline.markdown, markup.raw.block.markdown, markup.inline.raw.string.markdown, string.other.link.title.markdown#00D0FF
punctuation.definition.list_item.markdown#F8F8F8bold
keyword.operator.assignment.python#EEEEEE
meta.function-call.generic.python, meta.function-call.python, meta.function-call.arguments.python, meta.function-call.python#CCFF66
keyword.operator.other.elixir#49DCB1
variable.other.constant.elixir#49DCB1
constant.other.symbol.elixir#00D0FF
parameter.variable.function.elixir#EE964B
source.elixir entity.name.function#49DCB1
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#00D0FF
variable.other.constant.elixir#49DCB1
source.elixir.punctuation.binary.elixir#00D0FF
keyword.control.svelte#4D5BFC
punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.definition.array.begin.json, punctuation.definition.array.end.json#49DCB1
punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#49DCB1
support.class.component.tsx, support.class.component.jsx#00D0FF
variable.other.php, variable.language.php#DB5461
meta.function-call.php, meta.function-call.object.php#CCFF66
variable.other.readwrite.instance.ruby#DB5461
constant.language.symbol.ruby#4D5BFC
support.function.go#CCFF66
meta.attribute.rust#4D5BFC
Hexxa Theme by Diogo Moretti - VS Code Theme