Skip to main content
CodingTheme

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#e7e7e7
  • activityBarBadge.foreground#2D3033
  • bade.background#e7e7e7
  • badge.foreground#2D3033
  • button.background#e7e7e7
  • button.foreground#2D3033
  • button.hoverBackground#f2f2f2
  • editor.background#ffffff
  • editor.foreground#2D3033
  • editor.invisibles#DDDDDD
  • editor.lineHighlightBackground#FDF7DDBB
  • editor.rangeHighlightBackground#FDF7DD
  • editor.selectionBackground#d0d0d0
  • editorCursor.foreground#333333
  • editorLineNumber.foreground#d0d0d0
  • editorLink.activeForeground#80A4BE
  • editorOverviewRuler.wordHighlightStrongForeground#FAEBAF
  • editorWhitespace.foreground#eeeeee
  • list.activeSelectionBackground#e7e7e7
  • list.inactiveSelectionBackground#d0d0d0
  • peekViewResult.fileForeground#2D3033
  • peekViewResult.lineForeground#2D3033
  • sideBar.foreground#2D3033
  • statusBar.background#e7e7e7
  • statusBar.foreground#2D3033
  • statusBar.noFolderBackground#e7e7e7
  • statusBar.noFolderForeground#2D3033
  • statusBarItem.activeBackground#f2f2f2
  • statusBarItem.hoverBackground#f2f2f2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
source#2D3033
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.separator.list.comma.css, constant.language.empty-list.haskell#2D3033
comment#93A1A1italic
punctuation.parens.ellipses.elm#639999
string#89995E
string.regexp, variable, record.name, support.other.variable, string.other.link, support.variable.property, support.type.property-name.json#CC5C52
keyword.operator.class, source.php.embedded.line, constant.type-constructor#639999
record.accessor, support.variable.dom, support.variable.property.dom, variable.other.object, variable.other.object.property, variable.other.property, markup.inline.raw.string.markdown#42B24D
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, punctuation.section.embedded, keyword.other.unit, support.module#DE9E59
keyword.operator, constant.other.color#82B9BB
entity.name.function, meta.function-call, support.function, keyword.other.special-method, meta.block-level#80A4BE
keyword, storage, storage.type, declaration.tag, beginning.punctuation.definition.quote.markdown, meta.directive.vue, markup.italic.markdown#A184CE
entity.name.tag, markup.heading.markdown#CE5C39
meta.tag.inline.any, meta.tag.any.html, meta.tag.other.html, meta.tag.block.any.html#8E7808
entity.name.type.module, entity.name.type, markup.bold.markdown, meta.at-rule.extend, punctuation.definition.entity.css, entity.other.attribute-name.class#DB8734
entity.name.type, keyword.operator.new, variable.language.thisbold
meta.separator#2D3033
invalid.deprecated#D63F37
invalid.illegal#B3362D

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...