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#20262A
  • activityBar.foreground#E8DCC0
  • activityBar.inactiveForeground#5A6B62
  • activityBarBadge.background#9ECE6A
  • activityBarBadge.foreground#20262A
  • breadcrumb.activeSelectionForeground#9ECE6A
  • breadcrumb.focusForeground#E8DCC0
  • breadcrumb.foreground#5A6B62
  • breadcrumbPicker.background#20262A
  • diffEditor.insertedTextBackground#9ECE6A22
  • diffEditor.removedTextBackground#FF6B7022
  • editor.background#272E33
  • editor.findMatchBackground#9ECE6A55
  • editor.findMatchHighlightBackground#9ECE6A25
  • editor.foreground#E8DCC0
  • editor.lineHighlightBackground#2E363B
  • editor.selectionBackground#3E4B47
  • editor.selectionHighlightBackground#3E4B4780
  • editor.wordHighlightBackground#3E4B4750
  • editorCursor.foreground#9ECE6A
  • editorGroupHeader.tabsBackground#20262A
  • editorIndentGuide.activeBackground1#5CD8E0
  • editorIndentGuide.background1#3A454A
  • editorLineNumber.activeForeground#E8DCC0
  • editorLineNumber.foreground#5A6B62
  • editorWhitespace.foreground#3A454A
  • focusBorder#5CD8E0
  • gitDecoration.addedResourceForeground#9ECE6A
  • gitDecoration.deletedResourceForeground#FF6B70
  • gitDecoration.modifiedResourceForeground#FFCB6B
  • list.activeSelectionBackground#3E4B47
  • list.activeSelectionForeground#9ECE6A
  • list.highlightForeground#5CD8E0
  • list.hoverBackground#2E363B
  • scrollbarSlider.background#3A454A80
  • scrollbarSlider.hoverBackground#3A454AC0
  • sideBar.background#232A2E
  • sideBar.foreground#B9C4BC
  • sideBarSectionHeader.background#20262A
  • sideBarTitle.foreground#A9B7AE
  • statusBar.background#20262A
  • statusBar.debuggingBackground#FF7AC6
  • statusBar.debuggingForeground#20262A
  • statusBar.foreground#B9C4BC
  • statusBar.noFolderBackground#20262A
  • tab.activeBackground#272E33
  • tab.activeForeground#E8DCC0
  • tab.border#1B2023
  • tab.inactiveBackground#20262A
  • tab.inactiveForeground#5A6B62
  • terminal.ansiBlue#5CD8E0
  • terminal.ansiCyan#5CD8E0
  • terminal.ansiGreen#9ECE6A
  • terminal.ansiMagenta#FF7AC6
  • terminal.ansiRed#FF6B70
  • terminal.ansiYellow#FFCB6B
  • terminal.background#272E33
  • terminal.foreground#E8DCC0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A9B92italic
variable, string constant.other.placeholder#E8DCC0
constant.other.color#F5F0DC
invalid, invalid.illegal#FF6B70
keyword, storage.type, storage.modifier#FF7AC6
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#5CD8E0
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FF9E5E
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#5FE0A8
meta.block variable.other#FF9E5E
support.other.variable, string.other.link#FF9E5E
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#FFAE7A
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#9ECE6A
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#FFCB6B
support.type#A9C4C9
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#A9C4C9
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF6B70
variable.language#FF6B70italic
entity.name.method.js#5FE0A8italic
meta.class-method.js entity.name.function.js, variable.function.constructor#5FE0A8
entity.other.attribute-name#FF7AC6
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCB6Bitalic
entity.other.attribute-name.class#FFCB6B
source.sass keyword.control#5FE0A8
markup.inserted#9ECE6A
markup.deleted#FF6B70
markup.changed#FF7AC6
string.regexp#5CD8E0
constant.character.escape#5CD8E0
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#5FE0A8italic
source.js constant.other.object.key.js string.unquoted.label.js#FF6B70italic
source.json meta.structure.dictionary.json support.type.property-name.json#FF7AC6
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFCB6B
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#FFAE7A
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#FF6B70
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#E8A87C
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#5FE0A8
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#FF9E5E
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#FF7AC6
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#9ECE6A
text.html.markdown, punctuation.definition.list_item.markdown#E8DCC0
text.html.markdown markup.inline.raw.markdown#FF7AC6
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#7C8F87
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#9ECE6A
markup.italic#FF9E5Eitalic
markup.bold, markup.bold string#FF9E5Ebold
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#FF9E5Ebold
markup.underline#FFAE7Aunderline
markup.quote punctuation.definition.blockquote.markdown#7C8F87
markup.quoteitalic
string.other.link.title.markdown#5FE0A8
string.other.link.description.title.markdown#FF7AC6
constant.other.reference.link.markdown#FFCB6B
markup.raw.block#FF7AC6
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#E8DCC0
variable.language.fenced.markdown#7C8F87
meta.separator#7C8F87bold
markup.table#E8DCC0
entity.other.attribute-name.table.toml, entity.name.section.toml, support.type.property-name.table.toml, punctuation.definition.table.toml#FF7AC6bold
variable.key.toml, keyword.key.toml, support.type.property-name.toml, support.type.property-name.table.array.toml#5CD8E0
string.quoted.single.toml, string.quoted.double.toml, string.quoted.triple.single.toml, string.quoted.triple.double.toml#9ECE6A
entity.name.tag.yaml, attribute-name.yaml#5CD8E0
punctuation.definition.block.sequence.item.yaml#FF7AC6
Yeoji Forest (여지의 숲) by buddham-hq - VS Code Theme