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#E4DDD0
  • activityBar.foreground#2A332E
  • activityBar.inactiveForeground#7A7060
  • activityBarBadge.background#3D661F
  • activityBarBadge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#3D661F
  • breadcrumb.focusForeground#2A332E
  • breadcrumb.foreground#7A7060
  • breadcrumbPicker.background#E4DDD0
  • diffEditor.insertedTextBackground#3D661F22
  • diffEditor.removedTextBackground#AD1F2422
  • editor.background#F4F0E8
  • editor.findMatchBackground#4D7A2744
  • editor.findMatchHighlightBackground#4D7A2722
  • editor.foreground#2A332E
  • editor.lineHighlightBackground#EBE4D6
  • editor.selectionBackground#C2DACE
  • editor.selectionHighlightBackground#C2DACE80
  • editor.wordHighlightBackground#C2DACE50
  • editorCursor.foreground#2D6112
  • editorGroupHeader.tabsBackground#E4DDD0
  • editorHoverWidget.background#E8E2D5FA
  • editorHoverWidget.border#00727D88
  • editorHoverWidget.foreground#1E2621
  • editorIndentGuide.activeBackground1#00727D
  • editorIndentGuide.background1#DCD2C0
  • editorLineNumber.activeForeground#2A332E
  • editorLineNumber.foreground#948A78
  • editorSuggestWidget.background#E8E2D5FA
  • editorSuggestWidget.border#00727D88
  • editorSuggestWidget.foreground#1E2621
  • editorSuggestWidget.highlightForeground#A81E61
  • editorSuggestWidget.selectedBackground#C2DACE
  • editorSuggestWidget.selectedForeground#004D34
  • editorWhitespace.foreground#C2B8A4
  • focusBorder#00727D
  • gitDecoration.addedResourceForeground#3D661F
  • gitDecoration.deletedResourceForeground#AD1F24
  • gitDecoration.modifiedResourceForeground#9E6B00
  • list.activeSelectionBackground#C2DACE
  • list.activeSelectionForeground#2A332E
  • list.highlightForeground#00727D
  • list.hoverBackground#EBE4D6
  • scrollbarSlider.background#C2B8A480
  • scrollbarSlider.hoverBackground#C2B8A4C0
  • sideBar.background#EBE5D8
  • sideBar.foreground#354039
  • sideBarSectionHeader.background#E4DDD0
  • sideBarTitle.foreground#2A332E
  • statusBar.background#E4DDD0
  • statusBar.debuggingBackground#A81E61
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#354039
  • statusBar.noFolderBackground#E4DDD0
  • tab.activeBackground#F4F0E8
  • tab.activeForeground#2A332E
  • tab.border#D5CEBF
  • tab.inactiveBackground#E4DDD0
  • tab.inactiveForeground#7A7060
  • terminal.ansiBlue#00727D
  • terminal.ansiCyan#00727D
  • terminal.ansiGreen#3D661F
  • terminal.ansiMagenta#A81E61
  • terminal.ansiRed#AD1F24
  • terminal.ansiYellow#9E6B00
  • terminal.background#F4F0E8
  • terminal.foreground#2A332E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable.language.register.hun-asm, variable.other.register, variable.parameter.register, variable.language#8C3A00bold
keyword.operator.word, keyword.control.assembly, entity.name.function.mnemonic, keyword.other.mnemonic#006E47bold
comment, punctuation.definition.comment#63756Aitalic
string constant.other.placeholder#2A332E
constant.other.color#B55A00
invalid, invalid.illegal#AD1F24
keyword, storage.type, storage.modifier#006E47bold
keyword.control, punctuation, meta.tag, punctuation.definition.tag, punctuation.section.embedded#506355
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#B84A00
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#006E47
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit#A81E61bold
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading#3D661F
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, entity.name.label#00727D
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#006A73
markup.inserted#3D661F
markup.deleted#AD1F24
markup.changed#A81E61
source.json meta.structure.dictionary.json support.type.property-name.json#A81E61
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9E6B00
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#B54500
text.html.markdown, punctuation.definition.list_item.markdown#2A332E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#3D661Fbold
string.other.link.title.markdown#006E47
entity.other.attribute-name.table.toml, entity.name.section.toml, support.type.property-name.table.toml, punctuation.definition.table.toml#A81E61bold
variable.key.toml, keyword.key.toml, support.type.property-name.toml, entity.name.tag.yaml, attribute-name.yaml#00727D
string.quoted.single.toml, string.quoted.double.toml#3D661F
Yeoji Forest (여지의 숲) by buddham-hq - VS Code Theme