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#00cecb
  • activityBar.activeFocusBorder#00cecb
  • activityBar.background#1f2937
  • activityBar.foreground#00cecb
  • activityBar.inactiveForeground#6e737c
  • activityBarBadge.background#00cecb
  • activityBarBadge.foreground#1f2937
  • badge.background#00cecb
  • badge.foreground#1f2937
  • breadcrumbPicker.background#1f2937
  • button.background#1f2937
  • debugToolBar.background#1f2937
  • diffEditor.border#DADBDB09
  • diffEditor.insertedTextBackground#6BF17830
  • diffEditor.removedTextBackground#ff595e30
  • dropdown.background#1f2937
  • dropdown.listBackground#1f2937
  • editor.background#1f2937
  • editor.lineHighlightBackground#151f2a
  • editor.rangeHighlightBackground#151f2a
  • editor.selectionBackground#151f2a
  • editorCursor.background#1f2937
  • editorGroupHeader.tabsBackground#1f2937
  • editorIndentGuide.activeBackground#1f2937
  • editorIndentGuide.background#1f2937
  • editorLineNumber.foreground#6e737c
  • editorOverviewRuler.border#1f2937
  • editorSuggestWidget.background#1f2937
  • editorSuggestWidget.selectedBackground#6e737c
  • editorWidget.background#1f2937
  • editorWidget.border#1f2937
  • editorWidget.foreground#b2b2b2
  • focusBorder#00cecb
  • input.background#1f2937
  • list.activeSelectionBackground#151f2a
  • list.activeSelectionForeground#b2b2b2
  • list.focusBackground#6e737c
  • list.hoverBackground#1f2937
  • list.inactiveFocusBackground#1f2937
  • list.inactiveSelectionBackground#151f2a
  • list.inactiveSelectionForeground#b2b2b2
  • peekViewEditor.background#1f2937
  • peekViewResult.background#1f2937
  • peekViewResult.selectionBackground#1f2937
  • peekViewTitle.background#1f2937
  • scrollbar.shadow#00000000
  • sideBar.background#1f2937
  • sideBar.foreground#b2b2b2
  • sideBarSectionHeader.background#151f2a
  • sideBarSectionHeader.border#151f2a
  • statusBar.background#1f2937
  • statusBar.debuggingBackground#00cecb
  • statusBar.debuggingForeground#1f2937
  • statusBar.foreground#b2b2b2
  • statusBar.noFolderBackground#1f2937
  • statusBarItem.prominentBackground#1f2937
  • tab.activeBackground#151f2a
  • tab.border#1f2937
  • tab.inactiveBackground#1f2937
  • titleBar.activeBackground#1f2937
  • titleBar.inactiveBackground#1f2937
  • walkThrough.embeddedEditorBackground#1f2937
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, meta.tag#6e737c
keyword, storage, constant, support, entity.name, meta.property-value, punctuation.definition.entity, punctuation.definition.tag#9e85b2
variable, punctuation.definition.variable, support.other.namespace, support.class, support.type.property-name, meta.property-name, meta.instance.constructor, meta.object-literal.key, entity.other.inherited-class, entity.name.type.class, entity.other.attribute-name#75b0ca
variable.other.property, meta.property.object#75b0ca
keyword.operator, punctuation, meta.brace, meta.group.braces, text, meta.jsx.children.js#b2b2b2
meta.separator, invalid#b2b2b2
keyword.other, entity.name.tag.css, string.quoted, string.template, punctuation.definition.string#d97e7e
variable.function, entity.name.function, meta.function-call#8fc182
support.function, keyword.operator.expression#8fc182italic
entity.other.attribute-nameitalic

Shiki preview

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

Loading...