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#fff2
  • activityBar.activeBorder#fffb
  • activityBar.activeFocusBorder#000
  • activityBar.background#1a1a1a
  • activityBar.border#000
  • activityBar.foreground#fff
  • activityBar.inactiveForeground#fff9
  • activityBarBadge.background#161616
  • activityBarBadge.foreground#fff
  • badge.foreground#fff
  • button.background#242424
  • button.foreground#fff
  • checkbox.border#000
  • contrastBorder#000
  • dropdown.border#000
  • editor.background#161616
  • editor.foreground#fff
  • editor.hoverHighlightBackground#fff2
  • editor.inactiveSelectionBackground#fff2
  • editor.lineHighlightBackground#fff2
  • editor.selectionBackground#fff4
  • editor.selectionHighlightBackground#fff4
  • editorGroup.border#000
  • editorGroupHeader.border#000
  • editorGroupHeader.noTabsBackground#1a1a1a
  • editorGroupHeader.tabsBackground#1a1a1a
  • editorGroupHeader.tabsBorder#000
  • editorGutter.addedBackground#6ba
  • editorGutter.deletedBackground#c00
  • editorGutter.modifiedBackground#9cf
  • editorIndentGuide.activeBackground#fff4
  • editorIndentGuide.background#fff2
  • editorRuler.foreground#fff4
  • editorSuggestWidget.border#000
  • editorWidget.background#1a1a1a
  • editorWidget.border#000
  • editorWidget.resizeBorder#242424
  • focusBorder#000
  • foreground#fff
  • gitDecoration.addedResourceForeground#8ec
  • gitDecoration.conflictingResourceForeground#f00
  • gitDecoration.deletedResourceForeground#c00
  • gitDecoration.ignoredResourceForeground#fffb
  • gitDecoration.modifiedResourceForeground#ec0
  • gitDecoration.submoduleResourceForeground#9cf
  • gitDecoration.untrackedResourceForeground#6ba
  • input.background#161616
  • input.border#000
  • input.foreground#fff
  • input.placeholderForeground#fff
  • inputOption.activeBorder#000
  • list.activeSelectionBackground#fff4
  • list.activeSelectionForeground#fff
  • list.focusBackground#fff2
  • list.hoverBackground#fff2
  • list.inactiveSelectionBackground#fff2
  • menu.border#000
  • menu.selectionBorder#000
  • menubar.selectionBorder#000
  • notificationCenter.border#000
  • notifications.background#1a1a1a
  • notifications.border#000
  • notificationToast.border#000
  • panel.background#161616
  • panel.border#000
  • panelInput.border#000
  • quickInput.background#1a1a1a
  • scrollbar.shadow#0004
  • searchEditor.textInputBorder#000
  • selection.background#fff4
  • settings.checkboxBorder#000
  • settings.dropdownBorder#000
  • settings.dropdownListBorder#000
  • settings.textInputBorder#000
  • sideBar.background#1a1a1a
  • sideBar.border#000
  • sideBar.foreground#fff
  • sideBarSectionHeader.background#242424
  • sideBarSectionHeader.border#000
  • statusBar.background#242424
  • statusBar.border#000
  • statusBar.debuggingBackground#fff4
  • statusBar.foreground#fff
  • statusBar.noFolderBackground#161616
  • tab.activeBackground#161616
  • tab.activeBorder#161616
  • tab.activeBorderTop#000
  • tab.activeForeground#fff
  • tab.border#000
  • tab.hoverBackground#fff4
  • tab.inactiveBackground#1a1a1a
  • tab.inactiveForeground#fffb
  • tab.unfocusedActiveBorder#161616
  • tab.unfocusedActiveBorderTop#000
  • terminal.ansiBlack#222
  • terminal.ansiBlue#9cf
  • terminal.ansiBrightBlack#333
  • terminal.ansiBrightBlue#bdf
  • terminal.ansiBrightCyan#5ee
  • terminal.ansiBrightGreen#8ec
  • terminal.ansiBrightMagenta#faf
  • terminal.ansiBrightRed#f00
  • terminal.ansiBrightWhite#f3f3f3
  • terminal.ansiBrightYellow#fe0
  • terminal.ansiCyan#4bb
  • terminal.ansiGreen#6ba
  • terminal.ansiMagenta#d9f
  • terminal.ansiRed#c00
  • terminal.ansiWhite#ddd
  • terminal.ansiYellow#ec0
  • terminal.background#161616
  • terminal.foreground#fff
  • terminalCursor.background#161616
  • terminalCursor.foreground#fff
  • titleBar.border#000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid#e22bold underline
markup.inserted.diff#6ba
markup.deleted.diff#c00
string, constant, entity.name.import#bdf
meta.paragraph, string.unquoted.argument, constant.other.option, punctuation.definition.logical-expression, punctuation.definition.dictionary, punctuation.definition.array, punctuation.definition.evaluation, meta#fff
keyword, fenced_code.block.language, punctuation.separator, constant.character.escape, constant.other.placeholder#ecf
entity, storage, support, markup.heading, punctuation.definition.heading, entity.name.section#cbf
variable, entity.name, meta.attribute, markup.inline.raw#9bf
entity.name.function, support.function, meta.function-call, meta.function, entity.name.command#8ec
comment, punctuation.definition.comment#999
markup.underlineunderline
markup.italicitalic
keyword.operator#fffnone
strong, emphasis, markup.bold, entity.name.type.org, entity.name.function.org, entity.other.attribute-name.orgbold
Moin Theme by nwwdles - VS Code Theme