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#101820
  • activityBar.border#404850
  • breadcrumbPicker.border#404850
  • chat.avatarBorder#404850
  • chat.requestBorder#404850
  • chat.responseBorder#404850
  • contrastBorder#404850
  • debugConsole.border#404850
  • debugExceptionWidget.border#404850
  • debugToolBar.border#404850
  • diffEditor.border#404850
  • dropdown.border#404850
  • editor.background#101820
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#8884
  • editor.selectionBackground#8888
  • editorCursor.foreground#ffffff
  • editorGroupHeader.border#404850
  • editorGroupHeader.tabsBackground#101820
  • editorGroupHeader.tabsBorder#0000
  • editorOverviewRuler.background#101820
  • editorWhitespace.foreground#8886
  • focusBorder#404850
  • inlineChat.border#404850
  • inlineChat.shadow#404850
  • input.border#404850
  • merge.border#404850
  • mergeEditor.change.border#404850
  • mergeEditor.conflict.border#404850
  • mergeEditor.conflict.handledFocused.border#404850
  • mergeEditor.conflict.handledUnfocused.border#404850
  • mergeEditor.conflict.unhandledFocused.border#404850
  • mergeEditor.conflict.unhandledUnfocused.border#404850
  • notificationCenter.border#404850
  • notifications.border#404850
  • notificationToast.border#404850
  • panel.border#404850
  • panelSection.border#404850
  • panelSectionHeader.border#404850
  • panelTitle.activeBorder#404850
  • pickerGroup.border#404850
  • quickInput.background#101820
  • sideBar.background#101820
  • sideBar.border#404850
  • sideBarSectionHeader.border#404850
  • sideBarTitle.foreground#404850
  • statusBar.background#101820
  • statusBar.border#404850
  • tab.activeBackground#202830
  • tab.activeBorder#404850
  • tab.activeForeground#fff
  • tab.inactiveBackground#101820
  • tab.inactiveForeground#888
  • terminal.border#404850
  • testing.message.error.border#404850
  • testing.message.info.border#404850
  • testing.message.warning.border#404850
  • titleBar.activeBackground#101820
  • titleBar.inactiveBackground#101820
  • walkthrough.step.border#404850
  • welcomePage.border#404850
  • widget.border#404850

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#ffffff
comment, punctuation.definition.comment#88bb88
meta.jsx.children#00ddcc
variable#ffffff
meta.object.member#00bbaa
keyword, storage.type, storage.modifier#dd88ff
keyword.operator, constant.other.color, punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#00ffff
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#Ee6666
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level#00bbff
support.other.variable, string.other.link#FF7777
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit#ff8800
punctuation.definition.string, string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#88ff88
entity.name.class, entity.name.type.class, support.class, markup.changed.git_gutter#ffcc33
support.type, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php#FFFF00bold
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#EC5F67
variable.language#EC5F67italic
entity.name.method.js#D8DEE9
meta.class-method.js entity.name.function.js, variable.function.constructor#D8DEE9
entity.other.attribute-name#ff22bb
markup.inserted#99C794
markup.deleted#EC5F67
markup.changed#BB80B3
string.regexp#44bbbb
constant.character.escape#44bbbb
*url*, *link*, *uri*underline
constant.numeric.line-number.find-in-files - match#AB7967
entity.name.filename.find-in-files#99C794
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#6699CCitalic
source.js constant.other.object.key.js string.unquoted.label.js#EC5F67italic
paiva-it-theme by Paiva IT - VS Code Theme