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.markdownbold
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