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#5e6ad2
  • activityBar.background#1f2023
  • activityBar.border#2e2f33
  • activityBar.foreground#c1c3c8
  • activityBarBadge.background#5e6ad2
  • badge.background#5e6ad2
  • button.background#5e6ad2
  • button.hoverBackground#727ee6
  • contrastBorder#3c3e44
  • diffEditor.insertedTextBackground#85c75e26
  • diffEditor.removedTextBackground#e6292926
  • dropdown.background#292a2e
  • dropdown.border#3c3e44
  • editor.background#1f2023
  • editor.foreground#c1c3c8
  • editor.hoverHighlightBackground#46484e
  • editor.lineHighlightBackground#292a2e
  • editor.lineHighlightBorder#292a2e
  • editor.selectionBackground#5163f961
  • editor.selectionHighlightBackground#4456ec3b
  • editor.wordHighlightBackground#ffffff00
  • editor.wordHighlightBorder#5163f9ff
  • editor.wordHighlightStrongBackground#ffffff00
  • editor.wordHighlightStrongBorder#5163f9ff
  • editorCursor.foreground#c9d5ff
  • editorGroupHeader.border#292a2e
  • editorGroupHeader.tabsBackground#1f2023
  • editorGroupHeader.tabsBorder#2e2f33
  • editorIndentGuide.activeBackground#595c64
  • editorIndentGuide.background#3c3e44
  • editorLineNumber.activeForeground#c1c3c8
  • editorLineNumber.foreground#4f5259
  • editorRuler.foreground#46484e
  • editorSuggestWidget.highlightForeground#8793fb
  • editorSuggestWidget.selectedBackground#323439
  • editorWhitespace.foreground#46484e
  • editorWidget.background#292a2e
  • errorForeground#eb5757
  • focusBorder#5e6ad2
  • foreground#c1c3c8
  • gitDecoration.conflictingResourceForeground#F2994A
  • gitDecoration.deletedResourceForeground#eb5757
  • gitDecoration.ignoredResourceForeground#595c64
  • gitDecoration.modifiedResourceForeground#26B5CE
  • gitDecoration.untrackedResourceForeground#4CB782
  • icon.foreground#c1c3c8
  • input.background#323439
  • input.border#46484e
  • inputOption.activeBackground#5e6ad2
  • inputValidation.errorBorder#eb5757
  • list.activeSelectionBackground#323439
  • list.activeSelectionForeground#9ba7ff
  • list.focusBackground#323439
  • list.hoverBackground#323439
  • list.inactiveSelectionBackground#2e2f33
  • list.inactiveSelectionForeground#9ba7ff
  • panel.border#2e2f33
  • panelTitle.activeBorder#5e6ad2
  • peekViewEditor.background#292a2e
  • progressBar.background#727ee6
  • selection.background#5e6ad2
  • sideBar.background#1f2023
  • sideBar.border#2e2f33
  • sideBarSectionHeader.background#323439
  • statusBar.foreground#c1c3c8
  • tab.activeBackground#2e2f33
  • tab.activeBorderTop#5e6ad2
  • tab.border#2e2f33
  • tab.inactiveBackground#1f2023
  • terminal.ansiBrightGreen#a2d484
  • terminal.ansiCyan#26B5CE
  • terminal.ansiGreen#4CB782
  • terminal.ansiMagenta#cba0ff
  • terminal.ansiRed#eb5757
  • terminal.ansiYellow#ffcc6d
  • terminalCursor.foreground#c9d5ff
  • titleBar.activeBackground#292a2e
  • titleBar.inactiveBackground#292a2e
  • tree.indentGuidesStroke#4f5259
  • tree.tableColumnsBorder#4f5259

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.block, comment.line, punctuation.definition.comment#8b8e98italic
variable, variable.other, variable.parameter, entity.name.variable, string constant.other.placeholder, source.vue meta.object.member.ts meta.object.member.ts#e1e2e5
variable.parameter#e1e2e5
constant.other.class, variable.other.property, variable.other.object.property#f3b7e9
invalid, invalid.illegal#eb5757
keyword, storage.type, storage.modifier, meta storage.type#7e89ecitalic
keyword.definition#8e82f8
keyword.operator.comparison, keyword.operator.logical#a89fff
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#5da6b8
keyword.operator#5da6b8
punctuation.definition.binding-pattern.object.js#5da6b8
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#74829e
text.html, meta.jsx.children.js#bdc4cc
keyword.control, entity.name.type.namespace, keyword.other, meta.directive support.function#beb7ffitalic
keyword.control.flow, keyword.control.export, keyword.control.return, meta.function.closure, keyword.control.import, keyword.control.from, keyword.control.as, keyword.other.namespaceitalic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#83acf8
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#1abdda
meta.function entity.name.function, meta.method entity.name.method, meta.method.declaration entity.name.function, meta.definition.method entity.name.function#61e6fd
support.other.variable, string.other.link#88e6d6
constant.numeric, constant.language, support.constant, constant.character, constant.escape, support.constant.property-value#97D484
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#ffd18b
string punctuation.definition.string#ffcb8b9d
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#88e6d6
support.type, meta.return.type, entity.name.type, meta.use.php#88e6d6italic
meta.type.tuple meta.braceitalic
entity.other.inherited-class, support.orther.namespace.use, support.other.namespace#9ebecc
variable.language, variable.language.this, meta variable.language.this#a8f2ffitalic
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#cba0ffitalic
entity.other.attribute-name.class, entity.other.attribute-name.id, entity.name.tag.css#cba0ff
markup.inserted#a2d484
markup.deleted#eb5757
markup.changed#26B5CE
*url*, *link*, *uri*underline
keyword.control.at-rule#1abddaitalic
entity.name.tag.reference#5fdfff
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#b1c5ca
keyword.other.unit#59b13e
source.env#ffd18b
text.html.markdown, string.other.link.title.markdown#e1e2e5
markup.underline.link.markdown#88e6d6
markup.fenced_code.block.markdown#ffd18b

Shiki preview

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

Loading...