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#F0629222
  • activityBar.background#fff6f9
  • activityBar.border#F0629244
  • activityBar.foreground#F06292
  • activityBar.inactiveForeground#111633
  • activityBarBadge.background#F06292
  • breadcrumb.activeSelectionForeground#111633
  • breadcrumb.focusForeground#111633
  • breadcrumb.foreground#111633cc
  • breadcrumbPicker.background#eff7fe
  • button.background#F06292
  • button.foreground#ffffff
  • button.hoverBackground#F06292
  • checkbox.border#F0629244
  • descriptionForeground#11163380
  • diffEditor.insertedTextBackground#34d05822
  • diffEditor.removedTextBackground#d73a4922
  • dropdown.background#fff8fa
  • dropdown.border#F0629244
  • dropdown.foreground#111633
  • dropdown.listBackground#fff8fa
  • editor.background#fffafc
  • editor.findMatchBackground#F0629266
  • editor.findMatchHighlightBackground#F0629244
  • editor.focusedStackFrameHighlightBackground#F06292
  • editor.foldBackground#fafbfc8e
  • editor.foreground#111633
  • editor.inactiveSelectionBackground#fff3f720
  • editor.lineHighlightBackground#F0629211
  • editor.selectionBackground#F0629244
  • editor.selectionHighlightBackground#F0629244
  • editor.selectionHighlightBorder#F0629244
  • editor.stackFrameHighlightBackground#F0629244
  • editor.wordHighlightBackground#34d05800
  • editor.wordHighlightBorder#F0629244
  • editor.wordHighlightStrongBackground#34d05800
  • editor.wordHighlightStrongBorder#24943e50
  • editorBracketMatch.background#F0629244
  • editorBracketMatch.border#F0629244
  • editorCursor.foreground#F06292
  • editorGroup.border#F0629244
  • editorGroupHeader.tabsBackground#fff6f9
  • editorGroupHeader.tabsBorder#F0629244
  • editorGutter.addedBackground#F06292
  • editorGutter.deletedBackground#F06292
  • editorGutter.modifiedBackground#F06292
  • editorIndentGuide.activeBackground#F06292
  • editorIndentGuide.background#11163340
  • editorLineNumber.activeForeground#111633
  • editorLineNumber.foreground#11163380
  • editorWhitespace.foreground#11163340
  • editorWidget.background#fff8fb
  • errorForeground#F06292
  • focusBorder#11163340
  • foreground#111633
  • gitDecoration.addedResourceForeground#F06292
  • gitDecoration.conflictingResourceForeground#F06292
  • gitDecoration.deletedResourceForeground#F06292
  • gitDecoration.ignoredResourceForeground#11163380
  • gitDecoration.modifiedResourceForeground#F06292
  • gitDecoration.submoduleResourceForeground#11163380
  • gitDecoration.untrackedResourceForeground#F06292
  • input.background#fff3f7
  • input.border#F0629244
  • input.foreground#111633
  • input.placeholderForeground#F06292aa
  • list.activeSelectionBackground#F06292
  • list.activeSelectionForeground#eee
  • list.activeSelectionIconForeground#eee
  • list.focusBackground#F0629220
  • list.hoverBackground#F0629210
  • list.hoverForeground#111633
  • list.inactiveFocusBackground#F0629220
  • list.inactiveSelectionBackground#F0629220
  • list.inactiveSelectionForeground#111633
  • menu.background#fff
  • menu.border#F06292
  • notificationCenterHeader.background#F0629220
  • notificationCenterHeader.foreground#111633
  • notifications.background#fff
  • notifications.border#F06292
  • notifications.foreground#111633
  • notificationsErrorIcon.foreground#F06292
  • notificationsInfoIcon.foreground#F06292
  • notificationsWarningIcon.foreground#F06292
  • notificationToast.border#F06292
  • panel.background#fff7fa
  • panel.border#F0629244
  • panelInput.border#F0629244
  • panelTitle.activeForeground#111633
  • panelTitle.inactiveForeground#58616c
  • pickerGroup.border#F0629244
  • pickerGroup.foreground#111633
  • progressBar.background#F06292
  • quickInput.background#fff
  • quickInput.foreground#111633
  • scrollbar.shadow#F0629244
  • scrollbarSlider.activeBackground#F0629244
  • scrollbarSlider.background#F0629210
  • scrollbarSlider.hoverBackground#F0629224
  • settings.headerForeground#111633
  • settings.modifiedItemIndicator#F06292
  • sideBar.background#fff8fb
  • sideBar.border#F0629244
  • sideBar.foreground#111633
  • sideBarSectionHeader.background#F0629211
  • sideBarSectionHeader.border#F0629244
  • sideBarSectionHeader.foreground#111633
  • sideBarTitle.foreground#111633
  • statusBar.background#F0629210
  • statusBar.border#F0629244
  • statusBar.debuggingBackground#F06292
  • statusBar.debuggingForeground#fff3f7
  • statusBar.foreground#111633
  • statusBar.noFolderBackground#ffffff
  • statusBarItem.prominentBackground#ffebf2
  • tab.activeBackground#fff3f7
  • tab.activeBorder#F0629244
  • tab.activeBorderTop#F06292
  • tab.activeForeground#111633
  • tab.border#F0629244
  • tab.hoverBackground#ffeff4
  • tab.inactiveBackground#fff3f7
  • tab.inactiveForeground#111633bb
  • tab.unfocusedActiveBorder#F0629244
  • tab.unfocusedActiveBorderTop#F06292
  • tab.unfocusedHoverBackground#F0629244
  • terminal.foreground#0f3057
  • textBlockQuote.background#F0629244
  • textBlockQuote.border#F0629244
  • textCodeBlock.background#F0629244
  • textLink.activeForeground#F06292
  • textLink.foreground#F06292
  • textPreformat.foreground#111633
  • textSeparator.foreground#111633
  • titleBar.activeBackground#fff6f9
  • titleBar.activeForeground#111633
  • titleBar.border#F0629244
  • titleBar.inactiveBackground#fff6f980
  • titleBar.inactiveForeground#111633a4
  • tree.indentGuidesStroke#F0629233

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#AAAAAAitalic
comment.block.preprocessor#AAAAAA
comment.documentation, comment.block.documentation#009688
invalid.illegal#a72020
keyword.operator#777777
keyword, storage#3360ad
storage.type, support.type#7B1FA2
constant.language, support.constant, variable.language#795548
variable, support.variable#7B1FA2
entity.name.function, support.function#795548bold
entity.name.type, entity.other.inherited-class, support.class#7B1FA2bold
entity.name.exception#a72020
entity.name.sectionbold
constant.numeric, constant.character, constant#607D8B
string#e24747
constant.character.escape#777777
string.regexp#3360ad
constant.other.symbol#795548
punctuation#777777
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#AAAAAA
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#119a8c
entity.name.tag#2a3ea5
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#e37900italic
constant.character.entity, punctuation.definition.entity#795548
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#607D8B
meta.property-name, support.type.property-name#AB6526
meta.property-value, meta.property-value constant.other, support.constant.property-value#009688
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#660000
markup.inserted#000000
meta.link#3360ad
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#AA3731
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#7A3E9D
markup.list#3360ad
markup.bold, markup.italic#009688
markup.inline.raw#795548
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343