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.activeBorder#00000000
  • activityBar.background#ebebeb
  • activityBar.border#cfcfcf
  • activityBar.foreground#000000
  • activityBarBadge.background#3584E4
  • breadcrumb.background#e1e1e1
  • button.background#3584E4
  • button.border#3584E4
  • button.hoverBackground#4990e7
  • commandCenter.background#d9d9d9
  • commandCenter.border#00000000
  • editor.background#ffffff
  • editorBracketMatch.background#cfcfcf80
  • editorBracketMatch.border#cfcfcf
  • editorGroup.border#cfcfcf
  • editorGroupHeader.border#cfcfcf
  • editorGroupHeader.tabsBackground#e1e1e1
  • editorGroupHeader.tabsBorder#cfcfcf
  • editorGutter.addedBackground#33D17A
  • editorGutter.deletedBackground#C01C28
  • editorGutter.modifiedBackground#62A0EA
  • editorIndentGuide.activeBackground#cfcfcf99
  • editorIndentGuide.background#cfcfcf80
  • editorLineNumber.foreground#32323280
  • editorRuler.foreground#cfcfcf80
  • focusBorder#5f7999
  • gitDecoration.addedResourceForeground#26A269dd
  • gitDecoration.deletedResourceForeground#F66151dd
  • gitDecoration.ignoredResourceForeground#77767B
  • gitDecoration.modifiedResourceForeground#E66100dd
  • gitDecoration.renamedResourceForeground#26A269dd
  • gitDecoration.stageDeletedResourceForeground#F66151dd
  • gitDecoration.stageModifiedResourceForeground#E66100dd
  • gitDecoration.untrackedResourceForeground#26A269dd
  • input.background#e6e6e6
  • list.activeSelectionBackground#1C71D8
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • list.focusHighlightForeground#ffffff
  • list.highlightForeground#000000
  • list.hoverBackground#ececec
  • list.inactiveSelectionBackground#e6e6e6
  • panel.background#fafafa
  • panel.border#cfcfcf
  • panelSectionHeader.background#00000000
  • panelSectionHeader.border#cfcfcf
  • panelTitle.activeBorder#323232
  • panelTitle.activeForeground#323232
  • scrollbar.shadow#00000000
  • sideBar.background#fafafa
  • sideBar.border#cfcfcf
  • sideBar.foreground#323232
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#cfcfcf
  • statusBar.background#1C71D8
  • statusBar.border#cfcfcf
  • statusBar.debuggingBackground#C64600
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#613583
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.remoteBackground#1F7F56
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#ebebeb
  • tab.border#cfcfcf
  • tab.hoverBackground#dcdcdc
  • tab.inactiveBackground#e1e1e1
  • titleBar.activeBackground#ebebeb
  • titleBar.border#cfcfcf
  • tree.indentGuidesStroke#cfcfcf99
  • widget.shadow#00000022
  • window.activeBorder#cfcfcf

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
, meta.embedded, variable, meta.tag.attributes punctuation.section.embedded, keyword.operator, storage.type.function.arrow, keyword.control.flow.block-scalar.literal, keyword.control.flow.block-scalar.folded, storage.modifier.chomping-indicator, storage.type.string, string.quoted.byte.raw, meta.macro.rules entity.name.function.macro.rust#504E55
constant.numeric.binary, constant.numeric.octal, constant.numeric.hex, keyword.other.unit.binary, keyword.other.unit.octal, keyword.other.unit.hexadecimal, keyword.other.unit.imaginary, keyword.other.unit.exponent#4E57BA
constant.language.boolean, constant.language.bool#4E57BA
comment, entity.other.document.begin.yaml, entity.other.document.end.yaml#77767B
constant.language, string.quoted.single.char, support.type.property-name, support.constant.property-value.css, source.css keyword.other.unit#4E57BA
constant.numeric, constant.numeric entity.name.type.numeric#4E57BA
comment.block.documentation#504E55
constant.numeric.float#4E57BA
#1C71D8
markup.heading.markdown#218787bold
keyword, keyword.operator.new, keyword.operator.logical.python, source.js keyword.operator.expression, source.ts keyword.operator.expression, storage.modifier, storage.type.class, storage.type.function, entity.name.tag.yaml, source.js storage.type, source.ts storage.type, source.tsx storage.type, source.rust storage.type#C64600bold
constant.numeric#4E57BA
#4E57BA
meta.preprocessor, meta.preprocessor keyword.control, punctuation.decorator, meta.decorator entity.name.function, entity.name.function.decorator, keyword.control.at-rule.media, constant.character.entity, punctuation.section.embedded, punctuation.definition.template-expression#C64600
comment.line.number-sign.shebang#77767Bbold
constant.character.escape#ED333B
string#218787
markup.bold.markdownbold
storage.type, entity.name.type, entity.name.namespace, keyword.type.cs, support.type, support.class.builtin, support.class.promise#218787bold
meta.preprocessor.cs#5E5C64
constant.other.placeholder#4E57BA
source.c storage.modifier#218787bold
source.c storage.type#218787bold
entity.other.attribute-name.id.css#218787bold
support.type.property-name.css#C64600
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css, meta.selector.css punctuation.section.function#4E57BAbold
meta.selector.css keyword.operator, entity.other.attribute-name.css#C64600bold
support.type.vendored.property-name.css#D38B09
markup.inserted.diff#26A1A2
markup.changed#E66100
meta.diff.header#4E57BA
meta.diff.range#D38B09
markup.deleted.diff#F66151
constant.other.placeholder.go#4E57BA
support.function.builtin.python#1C71D8
entity.name.type.class.python#218787bold
keyword.control.import.python#E01B24
meta.attribute.rust, meta.attribute.rust keyword.operator#4E57BA
entity.name.type.lifetime.rust#C64600
entity.name.function.macro#4E57BA
meta.tag entity.other.attribute-name, meta.tag keyword.operator.assignment, punctuation.separator.key-value.html, punctuation.separator.key-value.svelte, text.xml meta.tag#C64600
meta.tag string#4E57BA
entity.name.tag, support.class.component.svelte, punctuation.definition.tag#218787
text.xml meta.tag.preprocessor entity.name.tag, text.xml meta.tag.preprocessor punctuation.definition.tag#D38B09bold
markup.italic.markdownitalic
markup.strikethrough.markdownstrikethrough

Shiki preview

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

Loading...