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.

  • activityBar.activeBorder#6e79d6
  • activityBar.background#FBFBFB
  • activityBar.border#edeef1
  • activityBar.foreground#5d6a7e
  • activityBarBadge.background#6e79d6
  • badge.background#6e79d6
  • button.background#6e79d6
  • button.hoverBackground#5a67d0
  • contrastBorder#dde1e6
  • diffEditor.insertedTextBackground#25630026
  • diffEditor.removedTextBackground#eb141426
  • dropdown.background#f2f3f5
  • dropdown.border#dde1e6
  • editor.background#FBFBFB
  • editor.foreground#5d6a7e
  • editor.hoverHighlightBackground#d3d7de
  • editor.lineHighlightBackground#f2f3f5
  • editor.lineHighlightBorder#f2f3f5
  • editor.selectionBackground#6474fa42
  • editor.selectionHighlightBackground#5767ed1c
  • editor.wordHighlightBackground#ffffff00
  • editor.wordHighlightBorder#6474faff
  • editor.wordHighlightStrongBackground#ffffff00
  • editor.wordHighlightStrongBorder#6474faff
  • editorCursor.foreground#3b459e
  • editorGroupHeader.border#f2f3f5
  • editorGroupHeader.tabsBackground#FBFBFB
  • editorGroupHeader.tabsBorder#edeef1
  • editorIndentGuide.activeBackground#bec5cf
  • editorIndentGuide.background#dde1e6
  • editorLineNumber.activeForeground#5d6a7e
  • editorLineNumber.foreground#c9ced7
  • editorRuler.foreground#d3d7de
  • editorSuggestWidget.highlightForeground#4654cb
  • editorSuggestWidget.selectedBackground#e8eaee
  • editorWhitespace.foreground#d3d7de
  • editorWidget.background#f2f3f5
  • errorForeground#ef4343
  • focusBorder#6e79d6
  • foreground#5d6a7e
  • gitDecoration.conflictingResourceForeground#d36300
  • gitDecoration.deletedResourceForeground#ef4343
  • gitDecoration.ignoredResourceForeground#bec5cf
  • gitDecoration.modifiedResourceForeground#028fa8
  • gitDecoration.untrackedResourceForeground#139655
  • icon.foreground#5d6a7e
  • input.background#e8eaee
  • input.border#d3d7de
  • inputOption.activeBackground#6e79d6
  • inputValidation.errorBorder#ef4343
  • list.activeSelectionBackground#e8eaee
  • list.activeSelectionForeground#3745c1
  • list.focusBackground#e8eaee
  • list.hoverBackground#e8eaee
  • list.inactiveSelectionBackground#edeef1
  • list.inactiveSelectionForeground#3745c1
  • panel.border#edeef1
  • panelTitle.activeBorder#6e79d6
  • peekViewEditor.background#f2f3f5
  • progressBar.background#5a67d0
  • selection.background#6e79d6
  • sideBar.background#FBFBFB
  • sideBar.border#edeef1
  • sideBarSectionHeader.background#e8eaee
  • statusBar.foreground#5d6a7e
  • tab.activeBackground#edeef1
  • tab.activeBorderTop#6e79d6
  • tab.border#edeef1
  • tab.inactiveBackground#FBFBFB
  • terminal.ansiBrightGreen#389600
  • terminal.ansiCyan#028fa8
  • terminal.ansiGreen#139655
  • terminal.ansiMagenta#a55bff
  • terminal.ansiRed#ef4343
  • terminal.ansiYellow#b47500
  • terminalCursor.foreground#3b459e
  • titleBar.activeBackground#f2f3f5
  • titleBar.inactiveBackground#f2f3f5
  • tree.indentGuidesStroke#c9ced7
  • tree.tableColumnsBorder#c9ced7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.block, comment.line, punctuation.definition.comment#8b96a9normal
variable, variable.other, variable.parameter, entity.name.variable, string constant.other.placeholder, source.vue meta.object.member.ts meta.object.member.ts#46505f
variable.parameter#46505f
constant.other.class, variable.other.property, variable.other.object.property#c638a2
invalid, invalid.illegal#ef4343
keyword, storage.type, storage.modifier, meta storage.type#6976efnormal
keyword.definition#7d6ffc
keyword.operator.comparison, keyword.operator.logical#7c6fff
keyword.operator.logical.soilunset
constant.other.color, punctuation, keyword.other.template, keyword.other.substitution, meta.brace, punctuation.support.type.property-name, expression.embbeded punctuation.definition.tag.begin.html, expression.embbeded punctuation.definition.tag.end.html#218faa
keyword.operator#218faa
punctuation.definition.binding-pattern.object.js#218faa
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#74829e
text.html, meta.jsx.children.js#4585ce
keyword.control, entity.name.type.namespace, keyword.other, meta.directive support.function#7b6dffnormal
keyword.control.flow, keyword.control.export, keyword.control.return, meta.function.closure, keyword.control.import, keyword.control.from, keyword.control.as, keyword.other.namespacenormal
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#3f6cbf
meta.method.declaration meta.function-call entity.name.function, meta.method-call entity.name.function, meta.function-call entity.name.function, variable.function, support.function, entity.name.function, keyword.other.special-method#009FC7
meta.function entity.name.function, meta.method entity.name.method, meta.method.declaration entity.name.function, meta.definition.method entity.name.function#009FC7
support.other.variable, string.other.link#3faa9c
constant.numeric, constant.language, support.constant, constant.character, constant.escape, support.constant.property-value#c56c00
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#50a810
string punctuation.definition.string#4fa810ab
entity.name, entity.name.type.class, support.type, support.class, new.expr meta.function-call entity.name.function, markup.changed.git_gutter, support.type.sys-types, support.constant, entity.name.type.namespace, meta.tag.custom entity.name.tag.html, source.vue invalid.illegal.unrecognized-tag.html#3faa9c
support.type, meta.return.type, entity.name.type, meta.use.php#3faa9cnormal
meta.type.tuple meta.bracenormal
entity.other.inherited-class, support.orther.namespace.use, support.other.namespace#098cc6
variable.language, variable.language.this, meta variable.language.this#008fa8normal
entity.other.attribute-name, meta entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name, meta.directive.vue keyword.control, meta.directive entity.name.type#a55bffnormal
entity.other.attribute-name.class, entity.other.attribute-name.id, entity.name.tag.css#a55bff
markup.inserted#389600
markup.deleted#ef4343
markup.changed#028fa8
*url*, *link*, *uri*underline
keyword.control.at-rule#009FC7normal
entity.name.tag.reference#008db1
support.type.property-name.json, meta.objectliteral, source.vue meta.object.member.ts meta.object.member.ts meta.object.member.ts, 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, entity.name.tag.yaml#738083
keyword.other.unit#ca691b
source.env#50a810
text.html.markdown, string.other.link.title.markdown#46505f
markup.underline.link.markdown#3faa9c
markup.fenced_code.block.markdown#50a810

Shiki preview

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

Loading...

Linear Theme by pabue - VS Code Theme