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.background#f3f3f3
  • activityBar.border#e0e0e0
  • activityBar.foreground#3f3f3f
  • activityBarBadge.background#3f3f3f
  • activityBarBadge.foreground#f3f3f3
  • badge.background#3f3f3f
  • badge.foreground#f3f3f3
  • button.background#cccccc
  • button.hoverBackground#bbbbbb
  • contrastBorder#e0e0e0
  • debugToolBar.background#e0e0e0
  • diffEditor.insertedTextBackground#dfffd9
  • diffEditor.removedTextBackground#ffd3d3
  • dropdown.background#ffffff
  • dropdown.border#cfcfcf
  • dropdown.foreground#3f3f3f
  • editor.background#FAFAFA
  • editor.foreground#333333
  • editor.lineHighlightBackground#f0f0f0
  • editor.lineHighlightBorder#d0d0d0
  • editor.selectionBackground#c0c0c0
  • editor.selectionForeground#4f4f4f
  • editorBracketMatch.background#e0e0e0
  • editorCursor.foreground#111111
  • editorError.foreground#ff3333
  • editorGroup.border#e0e0e0
  • editorGutter.addedBackground#a3be8c10
  • editorGutter.deletedBackground#ff7a84
  • editorGutter.modifiedBackground#ebcb8b
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#e0e0e0
  • editorIndentGuide.activeBackground#cccccc
  • editorIndentGuide.background#e0e0e0
  • editorInfo.foreground#75BEFF
  • editorLineNumber.foreground#999999
  • editorLink.activeForeground#1976d2
  • editorMarkerNavigation.background#f3f3f3
  • editorSuggestWidget.background#f9f9f9
  • editorSuggestWidget.border#d0d0d0
  • editorSuggestWidget.foreground#3f3f3f
  • editorSuggestWidget.highlightForeground#79b8ff
  • editorWarning.foreground#ebcb8b
  • focusBorder#cccccc
  • foreground#333333
  • input.background#f3f3f3
  • input.border#d0d0d0
  • input.foreground#333333
  • input.placeholderForeground#999999
  • list.activeSelectionBackground#d0d0d0
  • list.activeSelectionForeground#333333
  • list.hoverBackground#e0e0e0
  • list.inactiveSelectionBackground#f0f0f0
  • minimap.background#ffffff
  • panel.background#f9f9f9
  • panel.border#e0e0e0
  • sideBar.background#f3f3f3
  • sideBar.foreground#4f4f4f
  • statusBar.background#f3f3f3
  • statusBar.foreground#333333
  • statusBarItem.remoteBackground#f3f3f3
  • statusBarItem.remoteForeground#333333
  • symbolIcon.classForeground#FF9800
  • symbolIcon.functionForeground#1976d2
  • tab.activeBackground#ffffff
  • tab.activeForeground#000000
  • tab.border#d0d0d0
  • terminal.background#ffffff
  • terminal.foreground#333333
  • titleBar.activeBackground#f3f3f3
  • titleBar.activeForeground#333333
  • titleBar.border#e0e0e0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#333333—
emphasis—italic
strong—bold
support.function, keyword.operator.accessor, meta.group.braces.round.function.arguments, meta.template.expression, markup.fenced_code meta.embedded.block#333333—
comment#888888—
constant.language, variable.language.this, variable.other.object, variable.other.class, meta.property-name, support#1976d2—
string, markup.inline#4c8bff—
keyword, storage.modifier, storage.type, storage.control.clojure, entity.name.function.clojure, punctuation.separator.key-value#1976d2—
entity.name.tag, string.quoted#a3be8c—
entity.name.tag, string.quoted, string.quoted.double, string.regexp, string.interpolated, string.template, string.unquoted.plain.out.yaml, keyword.other.template#76a34f—