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#4a314a
  • activityBar.border#2d1f2d
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#FFFFFF80
  • activityBarBadge.background#90B0A8
  • activityBarBadge.foreground#ffffff
  • badge.background#90B0A8
  • badge.foreground#ffffff
  • button.background#4a314a
  • button.border#2d1f2d
  • button.foreground#ffffff
  • button.hoverBackground#5d3e5d
  • diffEditor.insertedLineBackground#80C0901A
  • diffEditor.insertedTextBackground#80C09033
  • diffEditor.removedLineBackground#C060801A
  • diffEditor.removedTextBackground#C0608033
  • dropdown.background#4a314a
  • dropdown.border#2d1f2d
  • dropdown.foreground#ffffff
  • dropdown.listBackground#382538
  • editor.background#382538
  • editor.findMatchBackground#90B0A8
  • editor.findMatchHighlightBackground#90B0A81A
  • editor.foreground#e0d0e0
  • editor.lineHighlightBackground#4a314a50
  • editor.selectionBackground#90B0A833
  • editor.selectionForeground#ffffff
  • editorCursor.foreground#ffffff
  • editorGroup.border#2d1f2d
  • editorGroup.dropBackground#90B0A81A
  • editorGutter.background#4a314a
  • editorLineNumber.activeForeground#ADC5BF
  • editorLineNumber.foreground#8b6b8b
  • editorWhitespace.foreground#4a314a
  • editorWidget.background#4a314a
  • editorWidget.border#2d1f2d
  • editorWidget.foreground#ffffff
  • errorForeground#ff6b6b
  • focusBorder#90B0A8
  • gitDecoration.addedResourceForeground#80C090
  • gitDecoration.conflictingResourceForeground#C0B070
  • gitDecoration.deletedResourceForeground#C06080
  • gitDecoration.ignoredResourceForeground#8b6b8b
  • gitDecoration.modifiedResourceForeground#ADC5BF
  • gitDecoration.untrackedResourceForeground#80C090
  • icon.foreground#FFFFFF
  • input.background#382538
  • input.border#2d1f2d
  • input.foreground#ffffff
  • input.placeholderForeground#8b6b8b
  • inputOption.activeBackground#90B0A8
  • inputOption.activeBorder#ffffff
  • inputOption.activeForeground#ffffff
  • inputOption.hoverBackground#90B0A81A
  • list.activeSelectionBackground#90B0A8
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#90B0A81A
  • list.errorForeground#ff6b6b
  • list.focusBackground#90B0A8
  • list.focusForeground#ffffff
  • list.highlightForeground#ADC5BF
  • list.hoverBackground#90B0A81A
  • list.inactiveSelectionBackground#4a314a
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#ADC5BF
  • menu.background#4a314a
  • menu.border#2d1f2d
  • menu.foreground#ffffff
  • menu.selectionBackground#90B0A8
  • menu.selectionForeground#ffffff
  • menubar.selectionBackground#90B0A8
  • menubar.selectionForeground#ffffff
  • panel.background#4a314a
  • panel.border#2d1f2d
  • panelTitle.activeForeground#e0d0e0
  • panelTitle.inactiveForeground#8b6b8b
  • quickInput.background#4a314a
  • quickInput.foreground#ffffff
  • quickInputList.focusBackground#90B0A8
  • quickInputList.focusForeground#ffffff
  • scrollbar.shadow#2d1f2d
  • scrollbarSlider.activeBackground#90B0A87F
  • scrollbarSlider.background#4a314a7F
  • scrollbarSlider.hoverBackground#90B0A84C
  • sideBar.background#4a314a
  • sideBar.border#2d1f2d
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#90B0A8
  • sideBarSectionHeader.foreground#ffffff
  • statusBar.background#4a314a
  • statusBar.border#2d1f2d
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#4a314a
  • tab.activeBackground#382538
  • tab.activeBorder#90B0A8
  • tab.activeForeground#ffffff
  • tab.border#2d1f2d
  • tab.inactiveBackground#4a314a
  • tab.inactiveForeground#ADC5BF
  • terminal.ansiBlack#1A0F1A
  • terminal.ansiBlue#4A5A9B
  • terminal.ansiBrightBlack#4A314A
  • terminal.ansiBrightBlue#7080C0
  • terminal.ansiBrightCyan#70C0B0
  • terminal.ansiBrightGreen#80C090
  • terminal.ansiBrightMagenta#B070C0
  • terminal.ansiBrightRed#C06080
  • terminal.ansiBrightWhite#E0D0E0
  • terminal.ansiBrightYellow#C0B070
  • terminal.ansiCyan#4A9B8A
  • terminal.ansiGreen#5A8A6A
  • terminal.ansiMagenta#8A4A9B
  • terminal.ansiRed#9B3A56
  • terminal.ansiWhite#ADC5BF
  • terminal.ansiYellow#8A7A4A
  • terminal.background#382538
  • terminal.foreground#e0d0e0
  • titleBar.activeBackground#90B0A8
  • titleBar.activeForeground#ffffff
  • titleBar.border#2d1f2d
  • titleBar.inactiveBackground#4a314a
  • titleBar.inactiveForeground#ADC5BF
  • toolbar.hoverBackground#90B0A81A
  • toolbar.hoverOutline#90B0A8
  • window.activeBorder#90B0A8
  • window.inactiveBorder#2d1f2d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9080A0italic
string, constant.other.symbol#A8C8A0
constant.numeric, constant.language, constant.character, constant.other#C0A870
keyword, storage.type, storage.modifier#D0A8D8bold
entity.name.function, support.function#80B8C8
variable, support.variable, entity.name.variable#e0d0e0
entity.name.type, support.type, support.class#90B8D0
markup.heading, entity.name.section#ADC5BFbold
markup.italicitalic
markup.boldbold
markup.inline.raw, markup.fenced_code.block#90B0A8
variable.parameter#ADC5BFitalic
variable.language#ADC5BFbold
meta.object-literal.key#70C0B0
invalid.illegal#C06080bold
keyword.operator#D0A8D8
entity.name.tag, entity.name.tag.html, entity.name.tag.xml#80B8C8
entity.other.attribute-name, entity.other.attribute-name.html#C0A870
support.type.property-name, support.type.property-name.css, support.type.property-name.less, support.type.property-name.scss#ADC5BF
string.regexp, constant.regexp#A8C8A0
meta.decorator, entity.name.function.decorator, punctuation.decorator#70C0B0
entity.name.namespace, entity.name.type.namespace, entity.name.module#90B8D0

Shiki preview

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

Loading...