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#012622
  • activityBar.border#203B27
  • activityBar.foreground#D7B377
  • activityBarBadge.background#1446A0
  • badge.background#1446A0
  • diffEditor.insertedTextBackground#25453140
  • diffEditor.removedLineBackground#BA160C40
  • diffEditor.removedTextBackground#BA160C40
  • diffEditor.unchangedRegionBackground#012622
  • dropdown.background#254531
  • dropdown.border#7B7554
  • editor.background#1B2D2A
  • editor.findMatchBackground#BA160C
  • editor.findMatchHighlightBackground#1446A0a0
  • editor.foreground#EFEFEFD0
  • editor.hoverHighlightBackground#5C80BC60
  • editor.lineHighlightBackground#012622
  • editor.lineHighlightBorder#8F754F80
  • editor.rangeHighlightBorder#8F754F
  • editor.selectionBackground#BA160C70
  • editor.selectionHighlightBackground#1446A070
  • editor.wordHighlightBackground#C2C8DF20
  • editorCursor.foreground#fe820f
  • editorGroupHeader.noTabsBackground#012622
  • editorGroupHeader.tabsBackground#012622
  • editorInlayHint.background#254531a0
  • editorInlayHint.foreground#EFEFEFb0
  • editorLineNumber.activeForeground#fe820f
  • editorStickyScroll.background#01262280
  • editorStickyScrollHover.background#254531
  • editorSuggestWidget.focusHighlightForeground#C492B1
  • editorSuggestWidget.foreground#eeffffc0
  • editorSuggestWidget.highlightForeground#88C0D0
  • editorWidget.background#012622f0
  • focusBorder#7B7554
  • gitDecoration.modifiedResourceForeground#BEFFC7
  • gitDecoration.stageModifiedResourceForeground#0FFF95
  • gitDecoration.untrackedResourceForeground#CBEFB6
  • input.background#254531
  • input.border#7B7554
  • input.placeholderForeground#eeffff80
  • inputOption.activeBackground#012622
  • inputOption.activeForeground#D7B377
  • keybindingLabel.border#7B7554
  • keybindingLabel.bottomBorder#7B7554
  • list.focusHighlightForeground#C492B1
  • list.highlightForeground#88C0D0
  • list.hoverBackground#2E2F2F
  • list.hoverForeground#eeffff
  • list.inactiveSelectionBackground#003B36
  • markdown.extension.editor.codeSpan.background#012622
  • markdown.extension.editor.codeSpan.border#84A07C80
  • menu.background#012622
  • minimap.background#1B2D2Ad0
  • panelTitle.activeBorder#D7B377
  • panelTitle.activeForeground#D7B377
  • peekViewEditor.background#012622
  • peekViewResult.background#254531
  • quickInputList.focusBackground#004346
  • settings.focusedRowBackground#012622
  • settings.rowHoverBackground#1F3330
  • sideBar.background#254531
  • sideBarSectionHeader.background#012622
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#012622
  • statusBar.foreground#D7B377
  • statusBar.noFolderBackground#254531
  • tab.activeBackground#012622
  • tab.activeBorder#D7B377
  • tab.activeModifiedBorder#1446A0
  • tab.inactiveBackground#012622
  • tab.inactiveModifiedBorder#1446A0
  • textLink.activeForeground#D7B377
  • textLink.foreground#BEFFC7d0
  • textPreformat.foreground#F78C6C
  • titleBar.activeBackground#012622
  • titleBar.activeForeground#D7B377

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7E846Bitalic
comment.block—
variable.language.self.rust#4CB5AE—
constant.other.color, constant.other.color.rgb-value.hex.css#BFBDC1—
invalid, invalid.illegal#FF5370—
keyword.control#65E2BA—
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#C2C8DF—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison, keyword.operator.ternary, storage.type.function.arrow, punctuation.definition.parameters.end.tsx, meta.parameters.tsx, meta.arrow.tsx#C2C8DF—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#EF8B8B—
entity.name.function, variable.function, support.function, keyword.other.special-method, keyword.cmake#9CCAFF—
constant.numeric, constant.language#D4A7CE—
variable.parameter#D9E5FFD0italic
storage.modifier.java#DDA77B—
storage.type.java, storage.type.primitive.java#C08497—
punctuation.support.type.property-name.begin.json.comments, punctuation.support.type.property-name.end.json.comments, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, support.type.property-name.json, meta.object-literal.key.tsx, meta.object-literal.key.jsx#D7B377—
punctuation.definition.array.begin.json.comments, punctuation.definition.array.end.json.comments#F2E2BA—
string.quoted.double.c, string.source.cmake, string.quoted.multi.python, string.quoted.single.python, string.quoted.double.rust, punctuation.definition.string, string.quoted.docstring.multi.python, string.quoted.double.scss#A4DAA8—
punctuation.definition.string.begin.html, punctuation.definition.string.end.html, meta.structure.array.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, string.quoted.double.json.comments, punctuation.definition.string.begin.json.comments, punctuation.definition.string.end.json.comments, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx, punctuation.definition.tag.begin.jsx, punctuation.definition.tag.end.jsx#BFBDC1—
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#BFBDC1—
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#B2CCD6—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF5370—
variable.language#FF5370italic
entity.name.method.js, meta.class-method.js entity.name.function.js, variable.function.constructor, source.sass keyword.control, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, entity.name.section.markdown, support.type.property-name.table.toml#9CCAFF—
entity.other.attribute-name#79A9D1—
entity.other.attribute-name.class, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCB6Bitalic
markup.inserted#C3E88D—
markup.deleted#FF5370—
markup.changed#C792EA—
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.ini#C7BBAD—
punctuation.definition.table.toml#F2E2BA—
markup.strikethrough.markdown, punctuation.definition.strikethrough.markdown#f45b58—
punctuation.definition.bold.markdown, markup.bold.markdown—bold
punctuation.definition.italic.markdown, markup.italic.markdown—italic
markup.underline.link.markdown, markup.underline.link.image.markdown#BEFFC7D0—
markup.raw.block.markdown, markup.inline.raw.string.markdown#F78C6C—
punctuation.definition.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.quote.end.markdown, fenced_code.block.language.markdown#F2E2BA—
meta.paragraph.markdown | markup.quote.markdown#B2CCD6—
punctuation.definition.heading.markdown, punctuation.definition.list.begin.markdown, markup.heading.setext, meta.separator.markdown#F2E2BA—
string.other.link.title.markdown#B48EAD—
markup.italic#f07178italic
markup.bold, markup.bold string—bold
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—bold
markup.quote punctuation.definition.blockquote.markdown#65737E—
markup.quote—italic
string.other.link.description.title.markdown#C792EA—
constant.other.reference.link.markdown#FFCB6B—
markup.raw.block#C792EA—
markup.raw.block.fenced.markdown#00000050—
punctuation.definition.fenced.markdown#00000050—
markup.raw.block.fenced.markdown, markup.table, punctuation.definition.list_item.markdown, punctuation.section.class.end, text.html.markdown, variable.language.fenced.markdown, variable#EEFFFFd0—
variable.language.fenced.markdown#65737E—
storage.type.function.python#E5C880—