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#ffdbf5
  • activityBar.foreground#007554
  • button.background#007554
  • button.foreground#ffdbf5
  • checkbox.border#007554
  • debugIcon.breakpointForeground#ff7893
  • debugIcon.startForeground#ff7893
  • dropdown.background#d8f2eb
  • dropdown.border#9378ff
  • dropdown.foreground#9378ff
  • dropdown.listBackground#d8f2eb
  • editor.background#ffebed
  • editor.selectionBackground#ff80e390
  • editor.selectionHighlightBackground#ff789375
  • editor.wordHighlightBackground#ff789375
  • editorBracketMatch.background#3dffdc30
  • editorBracketMatch.border#ff80e3
  • editorCursor.background#ff0000
  • editorGroup.dropBackground#ff80e350
  • editorGroupHeader.tabsBackground#ebebf7
  • editorIndentGuide.activeBackground#00755490
  • editorIndentGuide.background#ff789398
  • editorInlayHint.background#ffdbf5
  • editorInlayHint.foreground#ffdbf5
  • editorInlayHint.parameterForeground#ebebf7
  • editorInlayHint.typeBackground#ffb19c
  • editorInlayHint.typeForeground#ffb19c
  • editorOverviewRuler.background#fff8ed
  • editorOverviewRuler.border#ff789380
  • editorOverviewRuler.bracketMatchForeground#00755490
  • editorOverviewRuler.findMatchForeground#ff789395
  • editorOverviewRuler.selectionHighlightForeground#ff80e395
  • editorOverviewRuler.warningForeground#f50a0a98
  • editorOverviewRuler.wordHighlightForeground#3dffdc85
  • editorOverviewRuler.wordHighlightStrongForeground#9a0fd685
  • input.background#ffdbf5
  • input.border#d10d99
  • input.foreground#9a0fd6
  • inputOption.activeBackground#ebebf7
  • inputOption.activeBorder#24a0e3
  • list.activeSelectionBackground#c9edff
  • list.activeSelectionForeground#ff7893
  • list.activeSelectionIconForeground#eedfc4
  • list.focusBackground#ffa8d1
  • list.focusOutline#13baba
  • list.hoverBackground#c9edff50
  • list.inactiveSelectionBackground#ff80e335
  • minimap.background#ffdbf5
  • minimap.selectionHighlight#ffebed
  • minimap.warningHighlight#ff0000
  • minimapSlider.activeBackground#9378ff90
  • minimapSlider.background#9378ff55
  • minimapSlider.hoverBackground#9378ff70
  • scrollbar.shadow#d8f2eb35
  • scrollbarSlider.activeBackground#9378ff85
  • scrollbarSlider.background#9378ff45
  • scrollbarSlider.hoverBackground#9378ff75
  • sideBar.background#fff8ed
  • sideBar.border#c9fffb
  • sideBar.foreground#13baba
  • sideBarSectionHeader.background#9378ff30
  • statusBar.background#b3dbff
  • statusBar.debuggingBackground#ff80e3
  • statusBar.foreground#9a0fd6
  • statusBar.noFolderBackground#d8f2eb
  • tab.inactiveBackground#ebebf7
  • textLink.activeForeground#b3dbff
  • titleBar.activeBackground#ffb8cf
  • titleBar.activeForeground#91000a
  • toolbar.activeBackground#febed3
  • toolbar.hoverBackground#febed3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#ff80e3italic
variable.other.constant, meta.definition.variable, meta.var-single-variable.expr, meta.var.expr#f76fa5
comment.block.preprocessor#3dffdc
comment.documentation, comment.block.documentation#007554
invalid.illegal#c92053
keyword.operator#9a0fd6
keyword, storage#9a0fd6
storage.type, support.type#9a0fd6
constant.language, support.constant, variable.language#94b30c
variable, support.variable#c20c27
entity.name.type, entity.other.inherited-class, support.class#9378ffbold
constant.numeric, constant.character, constant#24a0e3
string#d97f09
source.python#d10d99
meta.block.cpp, meta.body.function.definition.cpp, meta.function.definition.cpp, source.cpp#d10d99
entity.name.namespace.cpp, meta.using-namespace.cpp#f50a0a
entity.name.variable.parameter.cs, source.cs#d10d99
meta.method.body.java, meta.method.java, meta.class.body.java, meta.class.java, source.java#d10d99
entity.name.function, support.function#13bababold
entity.name.exception#91000a
entity.name.sectionbold
constant.character.escape#abb2ed
string.regexp#4B83CD
constant.other.symbol#13baba
punctuation#000000
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#f50a0a
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#13baba
entity.name.tag#d10d99
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#24a0e3italic
constant.character.entity, punctuation.definition.entity#ff80e3
text.html.derivative#9a0fd6
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#9378ff
meta.property-name, support.type.property-name#d10d99
meta.property-value, meta.property-value constant.other, support.constant.property-value#13baba
keyword.other.importantbold
markup.changed#156d75
markup.deleted#156d75
markup.italicitalic
markup.error#91000a
markup.inserted#9a0fd6
meta.link#4B83CD
markup.output, markup.raw#9378ff
markup.prompt#9378ff
markup.heading#d10d99
markup.boldbold
markup.traceback#c20c27
markup.underlineunderline
markup.quote#c92053
markup.list#4B83CD
markup.bold, markup.italic#94b30c
markup.inline.raw#13baba
meta.diff.range, meta.diff.index, meta.separator#ff80e3
meta.diff.header.from-file#ff80e3
meta.diff.header.to-file#ff80e3