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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, meta.tag#969b9b
keyword, storage, constant, support, entity.name, meta.property-value, punctuation.definition.entity, punctuation.definition.tag#881391
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#0066cc
variable.other.property, meta.property.object#0066cc
keyword.operator, punctuation, meta.brace, meta.group.braces, meta.jsx.children.js#0000bb
meta.separator, invalid#0000bb
text#201a19
keyword.other, entity.name.tag.css, string.quoted, string.template, punctuation.definition.string#af1212
variable.function, entity.name.function, meta.function-call#007700
support.function, keyword.operator.expression#007700italic
entity.other.attribute-nameitalic

Shiki preview

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

Loading...

Linux Terminal Flat Theme - Coding Theme