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#070d0b
  • activityBar.foreground#34d399
  • activityBar.inactiveForeground#3b574c
  • activityBarBadge.background#059669
  • activityBarBadge.foreground#ffffff
  • badge.background#059669
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#10b981
  • breadcrumb.focusForeground#34d399
  • breadcrumb.foreground#6ee7b780
  • button.background#10b981
  • button.foreground#022c22
  • button.hoverBackground#059669
  • dropdown.background#12201b
  • dropdown.border#10b98160
  • dropdown.foreground#ecfdf5
  • editor.background#0c1411
  • editor.findMatchBackground#05966970
  • editor.findMatchHighlightBackground#10b98135
  • editor.foreground#ecfdf5
  • editor.inactiveSelectionBackground#14352a40
  • editor.selectionBackground#05966940
  • editor.selectionHighlightBackground#10b98125
  • editor.wordHighlightBackground#34d39930
  • editorCursor.foreground#34d399
  • editorGroupHeader.border#10b981
  • editorGroupHeader.tabsBackground#101c18
  • editorLineNumber.activeForeground#10b981
  • editorLineNumber.foreground#375045
  • focusBorder#10b981
  • foreground#ecfdf5
  • gitDecoration.deletedResourceForeground#f87171
  • gitDecoration.modifiedResourceForeground#fbbf24
  • gitDecoration.untrackedResourceForeground#34d399
  • input.background#12201b
  • input.border#10b98160
  • input.foreground#ecfdf5
  • input.placeholderForeground#6ee7b780
  • list.activeSelectionBackground#16382c
  • list.activeSelectionForeground#34d399
  • list.hoverBackground#162822
  • list.inactiveSelectionBackground#162822
  • sideBar.background#080e0c
  • sideBar.border#162822
  • sideBar.foreground#a7f3d0
  • sideBarSectionHeader.background#101c18
  • sideBarSectionHeader.foreground#34d399
  • sideBarTitle.foreground#ffffff
  • statusBar.background#064e3b
  • statusBar.debuggingBackground#d97706
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ecfdf5
  • statusBar.noFolderBackground#070d0b
  • statusBarItem.hoverBackground#047857
  • tab.activeBackground#0c1411
  • tab.activeBorder#10b981
  • tab.activeForeground#34d399
  • tab.border#162822
  • tab.hoverBackground#162822
  • tab.inactiveBackground#101c18
  • tab.inactiveForeground#6ee7b780
  • terminal.ansiBlack#0c1411
  • terminal.ansiBlue#38bdf8
  • terminal.ansiBrightBlack#4b6357
  • terminal.ansiBrightBlue#60a5fa
  • terminal.ansiBrightCyan#5eead4
  • terminal.ansiBrightGreen#34d399
  • terminal.ansiBrightMagenta#e879f9
  • terminal.ansiBrightRed#ef4444
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f59e0b
  • terminal.ansiCyan#2dd4bf
  • terminal.ansiGreen#10b981
  • terminal.ansiMagenta#c084fc
  • terminal.ansiRed#f87171
  • terminal.ansiWhite#ecfdf5
  • terminal.ansiYellow#fbbf24
  • terminal.background#0c1411
  • terminal.foreground#ecfdf5
  • terminalCursor.foreground#34d399
  • titleBar.activeBackground#080e0c
  • titleBar.activeForeground#a7f3d0
  • titleBar.inactiveBackground#0c1411
  • titleBar.inactiveForeground#3b574c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4d685citalic
variable, string constant.other.placeholder#38bdf8
constant.other.color#ffffff
invalid, invalid.illegal#f87171
keyword, storage.type, storage.modifier#34d399
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#fb923c
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#f87171
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#10b981
meta.block variable.other#ffffff
support.other.variable, string.other.link#67e8f9
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#fbbf24
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#a3e635
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#2dd4bf
support.type#38bdf8
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#4ade80
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#10b981
variable.language#38bdf8italic
entity.name.method.js#10b981italic
meta.class-method.js entity.name.function.js, variable.function.constructor#10b981
entity.other.attribute-name#2dd4bf
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#fbbf24italic
entity.other.attribute-name.class#4ade80
source.sass keyword.control#38bdf8
markup.inserted#34d399
markup.deleted#f87171
markup.changed#fbbf24
string.regexp#2dd4bf
constant.character.escape#2dd4bf
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#2dd4bfitalic
source.js constant.other.object.key.js string.unquoted.label.js#fb923citalic
source.json meta.structure.dictionary.json support.type.property-name.json#34d399
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#38bdf8
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#fbbf24
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#a3e635
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#fb923c
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#2dd4bf
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#4ade80
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#f472b6
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#facc15
text.html.markdown, punctuation.definition.list_item.markdown#ecfdf5
text.html.markdown markup.inline.raw.markdown#2dd4bf
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#4d685c
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#34d399
markup.italic#fb923citalic
markup.bold, markup.bold string#34d399bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#fb923cbold
markup.underline#38bdf8underline
markup.quote punctuation.definition.blockquote.markdown#4d685c
markup.quoteitalic
string.other.link.title.markdown#38bdf8
string.other.link.description.title.markdown#34d399
constant.other.reference.link.markdown#fbbf24
markup.raw.block#2dd4bf
markup.raw.block.fenced.markdown#ffffff15
punctuation.definition.fenced.markdown#ffffff15
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#ecfdf5
variable.language.fenced.markdown#4d685c
meta.separator#4d685cbold
markup.table#ecfdf5