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.background#141517
  • activityBar.border#00000060
  • activityBar.foreground#d4dce4
  • activityBar.inactiveForeground#939da5
  • activityBarBadge.background#569CD6
  • activityBarBadge.foreground#141517
  • button.background#569CD6
  • button.foreground#141517
  • checkbox.background#569CD6
  • checkbox.foreground#141517
  • dropdown.background#141517
  • dropdown.listBackground#252526
  • editor.background#141517
  • editor.foreground#939da5
  • editor.lineHighlightBorder#939da515
  • editor.selectionBackground#204062
  • editor.selectionHighlightBorder#939da5
  • editor.wordHighlightBackground#939da530
  • editorCursor.background#252526
  • editorCursor.foreground#939da5
  • editorGroup.border#00000060
  • editorGroup.dropBackground#535d7530
  • editorGroupHeader.noTabsBackground#1B202a
  • editorGroupHeader.tabsBackground#141517
  • editorGroupHeader.tabsBorder#00000060
  • editorIndentGuide.activeBackground#939da550
  • editorIndentGuide.background#939da520
  • editorLineNumber.activeForeground#d4dce4
  • editorLineNumber.foreground#707a84
  • editorSuggestWidget.selectedBackground#141517
  • editorSuggestWidget.selectedForeground#d4dce4
  • editorWidget.background#252526
  • editorWidget.border#707a84
  • extensionButton.prominentBackground#d4dce4
  • extensionButton.prominentForeground#141517
  • focusBorder#707a84
  • gitDecoration.addedResourceForeground#437644
  • gitDecoration.conflictingResourceForeground#C67A2F
  • gitDecoration.deletedResourceForeground#9F3434
  • gitDecoration.ignoredResourceForeground#505050
  • gitDecoration.modifiedResourceForeground#4C8F4C
  • gitDecoration.renamedResourceForeground#218585
  • gitDecoration.stageDeletedResourceForeground#B23F3E
  • gitDecoration.stageModifiedResourceForeground#3659B0
  • gitDecoration.submoduleResourceForeground#905458
  • gitDecoration.untrackedResourceForeground#4689B0
  • input.background#252526
  • list.activeSelectionBackground#252526
  • list.dropBackground#252526
  • list.focusBackground#252526
  • list.focusOutline#707a84
  • list.hoverBackground#252526
  • panelTitle.activeForeground#d4dce4
  • panelTitle.inactiveForeground#939da5
  • quickInput.background#141517
  • quickInput.foreground#939da5
  • quickInputList.focusBackground#252526
  • quickInputList.focusForeground#d4dce4
  • selection.background#89ddff40
  • settings.textInputBackground#141517
  • sideBar.background#141517
  • sideBar.border#00000060
  • sideBar.foreground#939da5
  • sideBarSectionHeader.background#252526
  • sideBarTitle.foreground#939da5
  • statusBar.background#141517
  • statusBar.debuggingBackground#ffa763
  • statusBar.debuggingForeground#141517
  • statusBar.foreground#939da5
  • statusBar.noFolderBackground#89ddff
  • statusBar.noFolderForeground#141517
  • statusBarItem.remoteBackground#4649FF
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#141517
  • tab.activeBorderTop#9ece6a
  • tab.activeForeground#bbbbbb
  • tab.border#00000060
  • tab.hoverBackground#252526
  • tab.inactiveBackground#141517
  • tab.inactiveForeground#939da5
  • textLink.foreground#89ddff
  • titleBar.activeBackground#141517
  • titleBar.activeForeground#939da5
  • titleBar.border#00000060
  • titleBar.inactiveBackground#252526
  • toolbar.hoverBackground#707a8430
  • widget.shadow#141517

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.operator.new, keyword.operator.logical#ba8ef7
comment#229977
comment.line.shebang#ff8ad1
variable, string constant.other.placeholder#14b8a6
invalid, invalid.illegal#f43f5e
keyword, storage.type, storage.modifier#ba8ef7
keyword.operator#14b8a6
keyword.control#ba8ef7
constant.language, variable.other.property#ffa763
punctuation.definition.template-expression, punctuation.definition.typeparameters, meta.template.expression#14b8a6
punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#14b8a6
support.function.builtin#89ddff
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#f43f5e
support.class.component#ba8ef7
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#f7768e
punctuation.definition.arguments, meta.function-call#14b8a6
punctuation.accessor.js, punctuation.parenthesis#14b8a6
variable.other#14b8a6
constant.numeric#89ddff
support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, variable.parameter#14b8a6
support.variable.property#ffa763
string, markup.heading, markup.inserted.git_gutter, string.unquoted.label.js#81CA91
meta.return.type#f7768e
support.type#14b8a6
keyword.other.unit.px.css, support.constant.color.w3c-standard-color-name.css, keyword.other.unit.s.css, support.constant.property-value.css, meta.property-value.css#ffa763
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#14b8a6
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#14b8a6
variable.language#14b8a6
entity.name.method.js#14b8a6
meta.class-method.js entity.name.function.js, variable.function.constructor#f7768e
storage.type.function.arrow#14b8a6
support.type, support.type.primitive, support.type.sys-types#89ddff
entity.other.attribute-name#ffa763
entity.other.attribute-name.html, entity.other.attribute-name#ffa763
entity.other.attribute-name.class#ffa763
entity.other.attribute-name.id.css#ff8ad1
markup.inserted#C3E88D
markup.deleted#f43f5e
markup.changed#C792EA
string.regexp#56adb7
constant.character.escape#89ddff
*url*, *link*, *uri*underline
tag.decorator.js, tag.decorator.js punctuation.definition.tag.js#89ddff
source.js constant.other.object.key.js string.unquoted.label.js#b15e7c
source.json meta.structure.dictionary.json support.type.property-name.json#ba8ef7
text.html.markdown, punctuation.definition.list_item.markdown#14b8a6
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#81CA91
markup.bold, markup.bold string#ba8ef7bold
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#ba8ef7bold
markup.underline#14b8a6underline
markup.quote punctuation.definition.blockquote.markdown#14b8a6
string.other.link.title.markdown#89ddff
string.other.link.description.title.markdown#ba8ef7
constant.other.reference.link.markdown#f7768e
markup.raw.block#ba8ef7
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#14b8a6
variable.language.fenced.markdown#14b8a6
meta.separator#8796b0bold
markup.table#14b8a6
entity.name.type.class#f43f5e
support.type.object.module#ba8ef7
constant.language.boolean#ba8ef7

Shiki preview

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

Loading...