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.background#121212
  • activityBar.foreground#24bfa5
  • activityBarBadge.background#24bfa5
  • activityBarBadge.foreground#f8fafd
  • button.background#528bff
  • debugIcon.pauseForeground#007fff
  • debugIcon.restartForeground#24bfa5
  • debugIcon.stepIntoForeground#ffd700
  • debugIcon.stepOutForeground#ffff00
  • debugIcon.stopForeground#FF6103
  • debugToolBar.background#020202
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#1d1f23
  • dropdown.border#181a1f
  • editor.background#121212
  • editor.findMatchHighlightBackground#000
  • editor.selectionBackground#3e4451
  • editorCursor.foreground#f8f8f0
  • editorError.foreground#704040
  • editorGroup.border#181a1f
  • editorGroup.emptyBackground#181a1f
  • editorGroupHeader.tabsBackground#181a1f
  • editorHoverWidget.background#181a1f
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.background#3b4048
  • editorInfo.foreground#707040
  • editorLineNumber.foreground#495162
  • editorRuler.foreground#484848
  • editorSuggestWidget.background#181a1f
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#407040
  • editorWhitespace.foreground#181a1f
  • editorWidget.background#181a1f
  • editorWidget.border#00b294
  • editorWidget.foreground#24bfa5
  • extensionButton.prominentBackground#00C957
  • extensionButton.prominentHoverBackground#00FF7F
  • focusBorder#181a1f
  • input.background#1d1f23
  • list.activeSelectionBackground#000
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#383e4a
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#36393f
  • list.hoverForeground#c0c0c0
  • list.inactiveSelectionBackground#121212
  • list.inactiveSelectionForeground#ED9121
  • panel.border#008080
  • panelTitle.activeBorder#8470FF
  • panelTitle.activeForeground#00C78C
  • panelTitle.inactiveForeground#8470FF
  • peekView.border#202020
  • peekViewEditor.background#202020
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566680
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#121212
  • sideBar.border#1d1f23
  • sideBarSectionHeader.background#000
  • sideBarSectionHeader.foreground#24bfa5
  • statusBar.background#020202
  • statusBar.debuggingBackground#483D8B
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#020202
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#121212
  • tab.activeBorderTop#00C78C
  • tab.border#181a1f
  • tab.inactiveBackground#36393f
  • titleBar.activeBackground#020202
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#020202
  • titleBar.inactiveForeground#6b717d
  • widget.shadow#000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment#5C6370italic
string#00C78C—
support.class.dart, keyword.operator.new.ts#FF9912italic
storage.modifier.ts#FF9912italic
punctuation.definition.typeparameters.begin.ts, punctuation.definition.typeparameters.end.ts#24bfa5—
keyword.operator.type.annotation.ts#ffd700—
keyword.operator.comparison.dart, keyword.operator.ternary.dart, keyword.operator.comparison.js, keyword.operator.comparison.ts, keyword.operator.relational.ts#0892d0—
keyword.operator.ternary.dart, keyword.operator.ternary.js, keyword.operator.ternary.ts#e32636—
source.dart#00C78C—
string.interpolated.double.dart#20b2aa—
keyword.operator.expression.void.js, support.type.primitive.ts#007fff—
punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc#ffff00—
punctuation.separator.comma.js, punctuation.separator.array.json, punctuation.terminator.statement.js, punctuation.separator.dictionary.pair.json, punctuation.comma.dart, punctuation.terminator.dart, punctuation.separator.comma.ts, punctuation.terminator.statement.ts#ffa500—
punctuation.definition.string.begin.json, punctuation.definition.string.end.json, punctuation.separator.dictionary.key-value.json#FF6103—
punctuation.separator.dictionary.key-value.json, punctuation.dot.dart#FF8C00—
source.json meta.structure.dictionary.json support.type.property-name.json#0892d0—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#0892d0—
string.quoted.single.python, string.quoted.multi.python, source.python#c0c0c0italic
source.python#fd5e53italic
keyword.control.flow.python, keyword#FF9912italic
punctuation.definition.string.begin.html, punctuation.definition.string.end.html, string.quoted.double.html#ffff00italic
text.html.derivative#c0c0c0italic
string.quoted.double.html#00b294italic
punctuation.separator.key-value.html#00FF7Fitalic
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts#C678DD—
string.template.js#E5C07B—
meta.template.expression.js#ABB2BF—
constant.numeric, constant.numeric.dart#A5ABAD—
string.embedded.begin, string.embedded.end#C678DD—
string.embedded#98C379—
constant.language#0892d0italic
constant.language.boolean.true.js#00C78Citalic
constant.language.boolean.false.js#4169e1italic
constant.character, constant.other#56B6C2—
variable.language#4169e1—
variable.readwrite, variable.readwrite.other.block#61AFEF—
keyword, keyword.operator.logical, keyword.operator.constructor#ff4500italic
keyword.operator#5C6370—
storage#E06C75—
storage.type#007fffitalic
variable.other.object.js, string constant.other.placeholder#f2d133italic
meta.definition.variable.js, meta.function.js#FF8C00italic
meta.function.expression.js#FF6347italic
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#61AFEF—
entity.name.type#4169e1—
variable.other.object#61AFEF—
variable.other.property, variable.other.block#daa520—
entity.other.inherited-class#98C379—
entity.name.function, support.function#8470FFitalic
variable.parameter#FF6347italic
entity.name.function-call#ABB2BF—
function.support.builtin, function.support.core#98C379—
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx#FF9912—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#0892d0italic
entity.name.tag.class, entity.name.tag.id#56B6C2—
entity.other.attribute-name#8470FF—
support.constant#FF6103—
support.type, support.variable#56B6C2—
support.dictionary.json#56B6C2—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#007fff—
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#98C379—
variable.css, variable.scss, variable.less, variable.sass#56B6C2—
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#E5C07B—
unit.css, unit.scss, unit.less, unit.sass#C678DD—
function.css, function.scss, function.less, function.sass#56B6C2—
support.other.variable—
invalid#F8F8F0italic
invalid.deprecated#F8F8F0italic
structure.dictionary.property-name.json#56B6C2—
punctuation.support.type.property-name.end.json, punctuation.support.type.property-name.begin.json#ffd700italic
support.type.property-name.json#ffa500italic
string.detected-link#61AFEF—
meta.diff, meta.diff.header#75715E—
markup.deleted#C678DD—
markup.inserted#E5C07B—
markup.changed#E5C07B—
constant.numeric.line-number.find-in-files - match#56B6C2A0—
entity.name.filename.find-in-files#E5C07B—
markup.italic, markup.italic.markdown—italic
punctuation.definition.italic.markdown#696969italic
markup.underline.link.markdown#0892d0—
markup.bold.markdown—bold
punctuation.definition.bold.markdown#696969italic
punctuation.definition.list.begin.markdown, punctuation.definition.raw.markdown, markup.fenced_code.block.markdown, punctuation.definition.bold.markdown#faa61a—
meta.paragraph.markdown#c0c0c0—
string.other.link.title.markdown#24bfa5—
markup.heading.markdown#007fffbold
punctuation.definition.heading.markdown#faa61aitalic
markup.quote.markdown#007fff—
meta.separator.markdown#C678DDbold
markup.raw.inline.markdown, markup.raw.block.markdown#56B6C2—
punctuation.definition.list_item.markdown#FFFFFFbold
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—