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.

  • activityBarBadge.background#FAF8F5
  • diffEditor.insertedTextBackground#e8f4ea
  • diffEditor.removedTextBackground#f7e7e5
  • editor.background#FAF8F5
  • editor.findMatchBackground#E5DDCB
  • editor.findMatchHighlightBackground#E5DDCB
  • editor.foreground#896724
  • editor.lineHighlightBackground#F3EFE7
  • editor.renderLineHighlight#F3EFE7
  • editor.selectionBackground#E5DDCB
  • editor.selectionHighlightBackground#E5DDCB
  • editor.wordHighlightBackground#E5DDCB
  • editor.wordHighlightStrongBackground#E5DDCB
  • editorBracketMatch.background#E5DDCB
  • editorCodeLens.foreground#EAE1D2
  • editorCursor.foreground#896724
  • editorGroup.border#fdfcfa
  • editorGroup.dropBackground#ffffff00
  • editorGroup.emptyBackground#fdfcfa
  • editorGroupHeader.tabsBackground#fefdfd
  • editorGroupHeader.tabsBorder#FAF8F5
  • editorIndentGuide.activeBackground#fefdfd
  • editorIndentGuide.background#fefdfd
  • editorLineNumber.activeForeground#EAE1D2
  • editorLineNumber.foreground#EAE1D2
  • editorRuler.foreground#EAE1D2
  • editorWhitespace.foreground#EAE1D2
  • gitDecoration.addedResourceForeground#43d08a
  • gitDecoration.deletedResourceForeground#e05252
  • gitDecoration.modifiedResourceForeground#e0c285
  • gitDecoration.untrackedResourceForeground#43d08a
  • panel.background#fdfcfa
  • panel.border#fdfcfa
  • panelTitle.activeBorder#447EBB
  • panelTitle.activeForeground#896724
  • panelTitle.inactiveForeground#EAE1D2
  • prompt.background#fdfcfa
  • prompt.border#fefdfd
  • prompt.foreground#896724
  • prompt.inputBackground#FAF8F5
  • prompt.inputBorder#fefdfd
  • prompt.inputForeground#896724
  • scollbar.shadow#ffffff00
  • selection.background#E5DDCB
  • sideBar.background#fefdfd
  • sidebar.border#fefdfd
  • sideBar.foreground#896724
  • sidebar.selectionBackground#E5DDCB
  • sidebar.selectionForeground#896724
  • sideBarSectionHeader.background#fefdfd
  • sideBarSectionHeader.foreground#896724
  • sideBarTitle.foreground#896724
  • statusBar.background#fdfcfa
  • statusBar.foreground#896724
  • tab.activeBackground#fefdfd
  • tab.activeForeground#896724
  • tab.border#FAF8F5
  • tab.inactiveBackground#fefdfd
  • tab.inactiveForeground#896724
  • terminal.ansiBlack#282c34
  • terminal.ansiBlue#61afef
  • terminal.ansiBrightBlack#282c34
  • terminal.ansiBrightBlue#61afef
  • terminal.ansiBrightCyan#56b6c2
  • terminal.ansiBrightGreen#98c379
  • terminal.ansiBrightMagenta#c678dd
  • terminal.ansiBrightRed#e06c75
  • terminal.ansiBrightWhite#dcdfe4
  • terminal.ansiBrightYellow#e5c07b
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#dcdfe4
  • terminal.ansiYellow#e5c07b
  • terminal.background#fdfcfa
  • terminal.foreground#896724
  • widget.shadow#ffffff00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation, expression#B6ad9a
comment, punctuation.definition.comment#B6ad9aitalic
variable, string constant.other.placeholder#718ecd
constant.other.color#896724
invalid, invalid.illegal#896724
keyword, storage.type.js, storage.type.function.js, variable.other.flowtype.js, storage.type.extends.js, storage.type.function.js, storage.type.class.js, meta.class.tsx#B6ad9a
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, meta.brace.square.tsx, meta.type.tuple.tsx, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#B6ad9a
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#896724
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#896724
meta.block variable.other#718ecd
support.other.variable, string.other.link#718ecd
variable.parameter, keyword.other.unit, keyword.other, meta.object-literal.key.tsx, meta.object.member.tsx#896724
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, constant.numeric, constant.language, support.constant, constant.character, constant.escape#065289
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#065289
support.type#065289
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#2d2006
variable.language#B6ad9aitalic
entity.name.method.js#2d2006italic
meta.class-method.js entity.name.function.js, variable.function.constructor#2d2006
entity.other.attribute-name#2d2006
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#2d2006italic
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#065289italic
source.js constant.other.object.key.js string.unquoted.label.js#065289italic
meta.jsx.children.tsx, entity.name.tag.tsx#2d2006
entity.other.attribute-name.tsx#896724
meta.brace.round.ts#B6ad9a
storage.type.tsx, meta.var.expr.tsx, keyword.control, keyword.control.import.tsx, keyword.control.from.tsx, storage.type.type.tsx, meta.type.declaration.tsx, meta.import.tsx#B29762
keyword.other.debugger#447EBBbold
variable, variable.parameter.tsx, variable.object.property.tsx, variable.other.constant.tsx, variable.other.object.tsx, variable.other#718ecd