Skip to main content
Coding Theme

Color themes

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#FFC83A
  • activityBar.activeFocusBorder#64C68B
  • activityBar.background#020202
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#FFC83A
  • activityBarBadge.foreground#020202
  • badge.background#FFC83A
  • badge.foreground#020202
  • button.background#DDD14E
  • button.foreground#02020280
  • button.hoverBackground#5AC0E4
  • diffEditor.insertedTextBackground#5AC0E433
  • dropdown.background#02020290
  • dropdown.border#FFFFFF22
  • dropdown.foreground#FFFFFF99
  • editor.background#040404
  • editor.findMatchBackground#5AC0E466
  • editor.findMatchHighlightBackground#FFFFFF22
  • editor.foreground#F8F8F8
  • editor.hoverHighlightBackground#FFFFFF22
  • editor.inactiveSelectionBackground#FFFFFF20
  • editor.lineHighlightBackground#FFFFFF08
  • editor.lineHighlightBorder#FFFFFF04
  • editor.selectionBackground#FFFFFF20
  • editor.selectionHighlightBackground#FFFFFF22
  • editor.selectionHighlightBorder#FFFFFF30
  • editor.wordHighlightBackground#02020200
  • editor.wordHighlightStrongBackground#020202
  • editor.wordHighlightStrongBorder#FFFFFF80
  • editorCodeLens.foreground#FFFFFF66
  • editorCursor.foreground#FFFFFF
  • editorError.foreground#CD5353
  • editorGroup.border#02020280
  • editorGroup.emptyBackground#02020280
  • editorGroupHeader.tabsBackground#020202
  • editorGutter.addedBackground#DDD14E
  • editorGutter.deletedBackground#CD5353
  • editorGutter.modifiedBackground#5AC0E4
  • editorHoverWidget.background#111111
  • editorHoverWidget.border#02020290
  • editorIndentGuide.background#FFFFFF22
  • editorLineNumber.foreground#FFFFFF33
  • editorLink.activeForeground#5AC0E4
  • editorOverviewRuler.addedForeground#DDD14E00
  • editorOverviewRuler.border#FFFFFF00
  • editorOverviewRuler.bracketMatchForeground#5AC0E400
  • editorOverviewRuler.deletedForeground#FFFFFF00
  • editorOverviewRuler.errorForeground#CD5353
  • editorOverviewRuler.infoForeground#64C68B00
  • editorOverviewRuler.modifiedForeground#5AC0E400
  • editorOverviewRuler.warningForeground#A187D9
  • editorRuler.foreground#FFFFFF66
  • editorSuggestWidget.background#111111
  • editorSuggestWidget.border#000000
  • editorSuggestWidget.foreground#EEEEEE
  • editorSuggestWidget.highlightForeground#FFC83A
  • editorSuggestWidget.selectedBackground#EEEEEE10
  • editorWarning.foreground#A187D9
  • editorWhitespace.foreground#FFFFFF66
  • editorWidget.background#111111
  • editorWidget.border#5AC0E400
  • errorForeground#CD5353
  • extensionButton.prominentBackground#DDD14E
  • extensionButton.prominentForeground#02020290
  • extensionButton.prominentHoverBackground#5AC0E4
  • focusBorder#FFC83A
  • input.background#02020290
  • input.border#FFC83A
  • input.foreground#EEEEEE
  • input.placeholderForeground#FFFFFF66
  • inputOption.activeBackground#02020200
  • inputOption.activeBorder#FFC83A
  • inputValidation.errorBackground#02020290
  • inputValidation.errorBorder#CD5353
  • inputValidation.infoBackground#02020290
  • inputValidation.infoBorder#FFC83A
  • inputValidation.warningBackground#02020290
  • inputValidation.warningBorder#A187D9
  • list.activeSelectionBackground#FFFFFF20
  • list.activeSelectionForeground#FFFFFF
  • list.errorForeground#CD5353
  • list.focusBackground#FFFFFF22
  • list.focusForeground#EEEEEE
  • list.highlightForeground#FFFFFF
  • list.hoverBackground#FFFFFF10
  • list.inactiveSelectionBackground#FFFFFF22
  • list.inactiveSelectionForeground#EEEEEE
  • list.warningForeground#A187D9
  • minimapSlider.activeBackground#FFFFFF50
  • minimapSlider.background#FFFFFF20
  • minimapSlider.hoverBackground#FFFFFF40
  • panel.background#020202
  • panel.border#FFFFFF20
  • panelTitle.activeBorder#FFC83A
  • pickerGroup.border#02020200
  • pickerGroup.foreground#5AC0E4
  • progressBar.background#DDD14E
  • scrollbar.shadow#FFFFFF80
  • scrollbarSlider.activeBackground#FFFFFF70
  • scrollbarSlider.background#FFFFFF10
  • scrollbarSlider.hoverBackground#FFFFFF60
  • sideBar.background#020202
  • sideBar.border#FFFFFF20
  • sideBar.foreground#FFFFFF90
  • sideBarSectionHeader.background#FFFFFF09
  • sideBarSectionHeader.foreground#FFFFFF
  • sideBarTitle.foreground#EEEEEE
  • statusBar.background#020202
  • statusBar.debuggingBackground#02020290
  • statusBar.foreground#FFFFFF90
  • statusBar.noFolderBackground#02020290
  • statusBarItem.hoverBackground#FFFFFF33
  • tab.activeBackground#020202
  • tab.activeBorder#FFFFFF40
  • tab.activeForeground#FFFFFF
  • tab.border#FFFFFF00
  • tab.hoverBackground#020202
  • tab.inactiveBackground#020202
  • tab.inactiveForeground#FFFFFF50
  • terminal.background#040404
  • titleBar.activeBackground#02020290
  • titleBar.activeForeground#FFFFFF99
  • titleBar.inactiveBackground#02020290
  • titleBar.inactiveForeground#FFFFFF99
  • tree.indentGuidesStroke#FFFFFF20
  • widget.shadow#111111

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment#444444—
string#64C68B—
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts#CD5353—
string.template.js, variable.parameter.js#64C68B—
meta.template.expression.js#EEEEEE—
constant.numeric#A187D9—
string.embedded.begin, string.embedded.end#A187D9—
string.embedded#DDD14E—
constant.language#A187D9—
constant.character, constant.other#A187D9—
variable.language#A187D9—
variable.readwrite, variable.readwrite.other.block#CD5353—
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#FFC83A—
storage.modifier.async.js, keyword.control.flow.js#FFC83A—
storage#64C68B—
storage.type#DC639F—
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#5AC0E4—
variable.other.property, variable.other.block#5AC0E4—
entity.other.inherited-class#DDD14E—
entity.name.function, support.function#DDD14E—
variable.parameter#DC639F
entity.name.function-call#EEEEEE—
function.support.builtin, function.support.core#DDD14E—
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx#DC639F—
entity.name.tag.class, entity.name.tag.id#DC639F—
entity.other.attribute-name#DDD14E—
support.constant#A187D9—
support.type, support.variable#DC639F—
support.dictionary.json#CD5353—
source.json meta.structure.dictionary.json string.quoted.double.json punctuation.definition.string#DC639F—
source.json string.quoted.double.json#EEEEEE—
source.json meta.structure.dictionary.json support.type.property-name.json#64C68B—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#DDD14E—
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#DDD14E—
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#DDD14E—
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#DDD14E—
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#A187D9—
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#DDD14E—
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#5AC0E4—
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#DC639F—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, punctuation.section.property-list.begin.bracket.curly.css#DDD14E—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass, entity.name.tag.css#5AC0E4—
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#64C68B—
variable.css, variable.scss, variable.less, variable.sass, entity.name.tag.css#DC639F—
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string, support.constant.property-value.css#FFC83A—
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#64C68B—
constant.numeric.css, constant.numeric.scss, constant.numeric.less, constant.numeric.sass#FFC83A—
function.css, function.scss, function.less, function.sass#DDD14E—
support.other.variable#5AC0E4
invalid#F8F8F8—
invalid.deprecated#F8F8F8—
string.detected-link#5AC0E4—
meta.diff, meta.diff.header#5AC0E4—
markup.deleted#CD5353—
markup.inserted#64C68B—
markup.changed#64C68B—
constant.numeric.line-number.find-in-files - match#5AC0E4—
entity.name.filename.find-in-files#64C68B—
markup.normal, markup.normal.markdown#64C68B—
punctuation.definition.normal.markdown#FFFFFF60
fenced_code.block.language.markdown#DC639F—
markup.underline.link.markdown#A187D9—
markup.bold.markdown—bold
punctuation.definition.bold.markdown#FFFFFF60
keyword.control#DC639F—
markup.heading.markdown, entity.name.section.markdown#DDD14Ebold
punctuation.definition.heading.markdown#64C68B
markup.quote.markdown#DDD14E—
meta.separator.markdown#CD5353bold
markup.raw.inline.markdown, markup.raw.block.markdown, markup.inline.raw.string.markdown, string.other.link.title.markdown#5AC0E4—
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#DDD14E—
keyword.operator.other.elixir#64C68B—
variable.other.constant.elixir#64C68B—
constant.other.symbol.elixir#5AC0E4—
parameter.variable.function.elixir#FFC83A—
source.elixir entity.name.function#64C68B—
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#5AC0E4—
variable.other.constant.elixir#64C68B—
source.elixir.punctuation.binary.elixir#5AC0E4—
keyword.control.svelte#A187D9—