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.activeBackground#0002
  • activityBar.activeBorder#0009
  • activityBar.activeFocusBorder#777
  • activityBar.background#fafafa
  • activityBar.border#777
  • activityBar.foreground#000
  • activityBar.inactiveForeground#0009
  • activityBarBadge.background#fff
  • activityBarBadge.foreground#000
  • badge.foreground#000
  • button.background#ddd
  • button.foreground#000
  • checkbox.border#777
  • contrastBorder#777
  • dropdown.border#777
  • editor.background#fff
  • editor.foreground#000
  • editor.hoverHighlightBackground#0001
  • editor.inactiveSelectionBackground#0001
  • editor.lineHighlightBackground#0001
  • editor.selectionBackground#ee7a
  • editor.selectionHighlightBackground#0004
  • editorGroup.border#777
  • editorGroupHeader.border#777
  • editorGroupHeader.noTabsBackground#fafafa
  • editorGroupHeader.tabsBackground#fafafa
  • editorGroupHeader.tabsBorder#777
  • editorGutter.addedBackground#163
  • editorGutter.deletedBackground#c00
  • editorGutter.modifiedBackground#04a
  • editorIndentGuide.activeBackground#0004
  • editorIndentGuide.background#0002
  • editorRuler.foreground#0004
  • editorSuggestWidget.border#777
  • editorWidget.background#fafafa
  • editorWidget.border#777
  • editorWidget.resizeBorder#ddd
  • focusBorder#777
  • foreground#000
  • gitDecoration.addedResourceForeground#385
  • gitDecoration.conflictingResourceForeground#f00
  • gitDecoration.deletedResourceForeground#c00
  • gitDecoration.ignoredResourceForeground#0009
  • gitDecoration.modifiedResourceForeground#750
  • gitDecoration.submoduleResourceForeground#04a
  • gitDecoration.untrackedResourceForeground#163
  • input.background#fff
  • input.border#777
  • input.foreground#000
  • input.placeholderForeground#000
  • inputOption.activeBorder#777
  • list.activeSelectionBackground#ee7
  • list.activeSelectionForeground#000
  • list.focusBackground#0002
  • list.hoverBackground#0001
  • list.inactiveSelectionBackground#0001
  • menu.border#777
  • menu.selectionBorder#777
  • menubar.selectionBorder#777
  • notificationCenter.border#777
  • notifications.background#fafafa
  • notifications.border#777
  • notificationToast.border#777
  • panel.background#fff
  • panel.border#777
  • panelInput.border#777
  • quickInput.background#fafafa
  • scrollbar.shadow#0004
  • searchEditor.textInputBorder#777
  • selection.background#ee7a
  • settings.checkboxBorder#777
  • settings.dropdownBorder#777
  • settings.dropdownListBorder#777
  • settings.textInputBorder#777
  • sideBar.background#fafafa
  • sideBar.border#777
  • sideBar.foreground#000
  • sideBarSectionHeader.background#ddd
  • sideBarSectionHeader.border#777
  • statusBar.background#ddd
  • statusBar.border#777
  • statusBar.debuggingBackground#ee7
  • statusBar.foreground#000
  • statusBar.noFolderBackground#fff
  • tab.activeBackground#fff
  • tab.activeBorder#fff
  • tab.activeBorderTop#777
  • tab.activeForeground#000
  • tab.border#777
  • tab.hoverBackground#ee7
  • tab.inactiveBackground#fafafa
  • tab.inactiveForeground#0009
  • tab.unfocusedActiveBorder#fff
  • tab.unfocusedActiveBorderTop#777
  • terminal.ansiBlack#eee
  • terminal.ansiBlue#04a
  • terminal.ansiBrightBlack#ddd
  • terminal.ansiBrightBlue#05c
  • terminal.ansiBrightCyan#288
  • terminal.ansiBrightGreen#385
  • terminal.ansiBrightMagenta#80a
  • terminal.ansiBrightRed#f00
  • terminal.ansiBrightWhite#333
  • terminal.ansiBrightYellow#da0
  • terminal.ansiCyan#166
  • terminal.ansiGreen#163
  • terminal.ansiMagenta#607
  • terminal.ansiRed#c00
  • terminal.ansiWhite#222
  • terminal.ansiYellow#c90
  • terminal.background#fff
  • terminal.foreground#000
  • terminalCursor.background#fff
  • terminalCursor.foreground#000
  • titleBar.border#777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid#e22bold underline
markup.inserted.diff#163
markup.deleted.diff#c00
string, constant, entity.name.import#900
meta.paragraph, string.unquoted.argument, constant.other.option, punctuation.definition.logical-expression, punctuation.definition.dictionary, punctuation.definition.array, punctuation.definition.evaluation, meta#000
keyword, fenced_code.block.language, punctuation.separator, constant.character.escape, constant.other.placeholder#805
entity, storage, support, markup.heading, punctuation.definition.heading, entity.name.section#408
variable, entity.name, meta.attribute, markup.inline.raw#028
entity.name.function, support.function, meta.function-call, meta.function, entity.name.command#058
comment, punctuation.definition.comment#055
markup.underlineunderline
markup.italicitalic
keyword.operator#000none
keyword, strong, emphasis, markup.bold, entity.name.type.org, entity.name.function.org, entity.other.attribute-name.orgbold