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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, meta.tag#676b6c
keyword, storage, constant, support, entity.name, meta.property-value, punctuation.definition.entity, punctuation.definition.tag#7e6f94
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#7587a6
variable.other.property, meta.property.object#7587a6
keyword.operator, punctuation, meta.brace, meta.group.braces, text, meta.jsx.children.js#999e9f
meta.separator, invalid#999e9f
keyword.other, entity.name.tag.css, string.quoted, string.template, punctuation.definition.string#b0686f
variable.function, entity.name.function, meta.function-call#869c78
support.function, keyword.operator.expression#869c78italic
entity.other.attribute-nameitalic

Shiki preview

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

Loading...

Linux Terminal Flat Theme - Coding Theme