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.activeBorder#213A30
  • activityBar.background#F3F5EC
  • activityBar.foreground#4E8A3C
  • activityBarBadge.background#4E8A3C
  • activityBarBadge.foreground#F3F5EC
  • editor.background#F3F5EC
  • editor.foreground#213A30
  • editor.lineHighlightBackground#E0E6D266
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#E0E6D2
  • editorCursor.foreground#213A30
  • editorGroupHeader.tabsBackground#ECEFE2
  • editorGroupHeader.tabsBorder#00000000
  • editorIndentGuide.activeBackground1#213A30
  • editorIndentGuide.background1#E0E6D2
  • editorWhitespace.foreground#E0E6D2
  • list.activeSelectionBackground#E0E6D2
  • list.activeSelectionForeground#213A30
  • list.highlightForeground#4E8A3C
  • list.hoverBackground#E0E6D266
  • menu.background#F3F5EC
  • menu.foreground#213A30
  • menu.selectionBackground#E0E6D2
  • menu.selectionForeground#213A30
  • menubar.selectionBackground#E0E6D2
  • menubar.selectionForeground#213A30
  • sideBar.background#ECEFE2
  • sideBar.border#00000000
  • sideBar.foreground#213A30
  • sideBarTitle.foreground#213A30
  • statusBar.background#F3F5EC
  • statusBar.border#00000000
  • statusBar.foreground#213A30
  • statusBarItem.hoverBackground#E0E6D2
  • tab.activeBackground#F3F5EC
  • tab.activeBorder#213A30
  • tab.activeForeground#213A30
  • tab.border#00000000
  • tab.inactiveBackground#ECEFE2
  • tab.inactiveForeground#7A8A7E
  • terminal.ansiBlack#213A30
  • terminal.ansiBlue#2F5F52
  • terminal.ansiBrightBlack#7A8A7E
  • terminal.ansiBrightBlue#2F5F52
  • terminal.ansiBrightCyan#2F5F52
  • terminal.ansiBrightGreen#5E9A4B
  • terminal.ansiBrightMagenta#9C6239
  • terminal.ansiBrightRed#B34733
  • terminal.ansiBrightWhite#F3F5EC
  • terminal.ansiBrightYellow#9C7B24
  • terminal.ansiCyan#2F5F52
  • terminal.ansiGreen#4E8A3C
  • terminal.ansiMagenta#9C6239
  • terminal.ansiRed#B34733
  • terminal.ansiWhite#F3F5EC
  • terminal.ansiYellow#A98A2E
  • terminal.background#F3F5EC
  • terminal.foreground#213A30
  • titleBar.activeBackground#F3F5EC
  • titleBar.activeForeground#213A30
  • titleBar.border#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.section.markdown heading.1.markdown, heading.1.markdown entity.name.section.markdown, heading.1.markdown, entity.name.section.markdown#4E8A3Cbold
punctuation.definition.heading.markdown heading.2.markdown, heading.2.markdown punctuation.definition.heading.markdown, heading.2.markdown#5E9A4Bbold
punctuation.definition.heading.markdown heading.3.markdown, heading.3.markdown punctuation.definition.heading.markdown, heading.3.markdown#5A7A3Ebold
heading.4.markdown#5A7A3Ebold
heading.5.markdown#A98A2Ebold
heading.6.markdown#7A8A7Ebold
markup.strong, markup.bold, markup.strong.markdown, markup.bold.markdown#9C6239bold
comment, punctuation.definition.comment, string.quoted.docstring#7A8A7Eitalic
support.type.property-name.json, source.json meta.structure.dictionary.json support.type.property-name.json#A98A2E
variable, variable.other, support.variable, identifier, variable.parameter, variable.other.property, variable.other.object.property, meta.object-literal.key, entity.name.variable.field#213A30
variable.parameter#213A30italic
keyword, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.declaration, keyword.function, punctuation.accessor, storage.type, storage.modifier, storage.type.function, keyword.declaration.function, storage.type.class, storage.type.struct, storage.type.enum, storage.type.interface, entity.name.namespace, support.other.namespace, support.type.object.module, variable.other.object.package, variable.other.constant.package#5A7A3E
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.repeat, keyword.control.import, keyword.control.from, keyword.control.export, keyword.operator#4E8A3C
string, punctuation.definition.string, string.template#7A4A28
entity.name.function, support.function, variable.function, entity.name.method#9C6239
entity.name.type, support.type, support.class#A98A2E
entity.other.attribute-name#A98A2E
constant.numeric, constant.language, constant.character, constant.other, number, boolean#4E8A3C
variable.other.constant#A98A2E
punctuation, meta.brace, meta.brace.round, meta.brace.square, meta.brace.curly, punctuation.definition.parameters, punctuation.terminator, punctuation.section, punctuation.separator#213A30
entity.name.tag.html, entity.name.tag.xml, entity.name.tag.builtin, punctuation.definition.tag#4E8A3C
entity.name.tag, support.class.component#A98A2E
entity.other.attribute-name, entity.other.attribute-name.html#5A7A3E
string.quoted.double.html, string.quoted.single.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#7A4A28
markup.link, markup.underline.link, meta.link.inline.markdown#5E9A4B
markup.inline.raw, markup.fenced_code.block#A98A2E
markup.italic, punctuation.definition.italic.markdown#5A7A3Eitalic
markup.bold, punctuation.definition.bold.markdown#5E9A4Bbold