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#1f0d13
  • activityBar.border#F0629244
  • activityBar.foreground#F06292
  • activityBar.inactiveForeground#eee
  • activityBarBadge.background#F06292
  • breadcrumb.activeSelectionForeground#ccc
  • breadcrumb.focusForeground#ccc
  • breadcrumb.foreground#aaa
  • breadcrumbPicker.background#222
  • button.background#F06292
  • button.foreground#ffffff
  • button.hoverBackground#F06292
  • checkbox.border#F0629244
  • descriptionForeground#11163380
  • diffEditor.insertedTextBackground#34d05822
  • diffEditor.removedTextBackground#d73a4922
  • dropdown.background#1f0d13
  • dropdown.border#F0629244
  • dropdown.foreground#F06292
  • dropdown.listBackground#F0629220
  • editor.background#1a0b10
  • editor.findMatchBackground#F0629266
  • editor.findMatchHighlightBackground#F0629244
  • editor.focusedStackFrameHighlightBackground#F0629244
  • editor.foldBackground#fafbfc8e
  • editor.foreground#ccc
  • 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#1f0d13
  • editorGroupHeader.tabsBorder#F0629244
  • editorGutter.addedBackground#F06292
  • editorGutter.deletedBackground#F06292
  • editorGutter.modifiedBackground#F06292
  • editorHoverWidget.background#21252b
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.activeBackground#F06292
  • editorIndentGuide.background#eeeeee40
  • editorLineNumber.activeForeground#eeeeeedd
  • editorLineNumber.foreground#eeeeee90
  • editorWhitespace.foreground#11163340
  • editorWidget.background#fff8fb
  • errorForeground#F06292
  • focusBorder#F06292
  • foreground#eee
  • gitDecoration.addedResourceForeground#F06292
  • gitDecoration.conflictingResourceForeground#F06292
  • gitDecoration.deletedResourceForeground#F06292
  • gitDecoration.ignoredResourceForeground#11163380
  • gitDecoration.modifiedResourceForeground#F06292
  • gitDecoration.submoduleResourceForeground#11163380
  • gitDecoration.untrackedResourceForeground#F06292
  • icon.foreground#eee
  • input.background#1f0d13
  • input.border#F0629244
  • input.foreground#ccc
  • input.placeholderForeground#F06292aa
  • list.activeSelectionBackground#F06292
  • list.activeSelectionForeground#eee
  • list.activeSelectionIconForeground#eee
  • list.focusBackground#F0629220
  • list.hoverBackground#F0629210
  • list.hoverForeground#eee
  • list.inactiveFocusBackground#F0629220
  • list.inactiveSelectionBackground#F0629220
  • list.inactiveSelectionForeground#eee
  • menu.background#222
  • menu.border#F06292
  • notificationCenterHeader.background#F0629220
  • notificationCenterHeader.foreground#eee
  • notifications.background#222
  • notifications.border#F06292
  • notifications.foreground#111633
  • notificationsErrorIcon.foreground#F06292
  • notificationsInfoIcon.foreground#F06292
  • notificationsWarningIcon.foreground#F06292
  • notificationToast.border#F06292
  • panel.background#1f0d13
  • panel.border#F0629244
  • panelInput.border#F0629244
  • panelTitle.activeForeground#ccc
  • panelTitle.inactiveForeground#999
  • pickerGroup.border#F0629244
  • pickerGroup.foreground#111633
  • progressBar.background#F06292
  • quickInput.background#222
  • quickInput.foreground#eee
  • scrollbar.shadow#F0629255
  • scrollbarSlider.activeBackground#F0629280
  • scrollbarSlider.background#F0629230
  • scrollbarSlider.hoverBackground#F0629244
  • settings.headerForeground#eee
  • settings.modifiedItemIndicator#F06292
  • sideBar.background#271218
  • sideBar.border#F0629244
  • sideBar.foreground#ccc
  • sideBarSectionHeader.background#271218
  • sideBarSectionHeader.border#F0629244
  • sideBarSectionHeader.foreground#eee
  • sideBarTitle.foreground#aaa
  • statusBar.background#1f0d13
  • statusBar.border#F0629244
  • statusBar.debuggingBackground#F06292
  • statusBar.debuggingForeground#aaa
  • statusBar.foreground#aaa
  • statusBar.noFolderBackground#ffffff
  • statusBarItem.prominentBackground#3a242c
  • tab.activeBackground#2a131a
  • tab.activeBorder#F0629244
  • tab.activeBorderTop#F06292
  • tab.activeForeground#aaa
  • tab.border#F0629244
  • tab.hoverBackground#3f1d27
  • tab.inactiveBackground#32151f
  • tab.inactiveForeground#aaa
  • tab.unfocusedActiveBorder#F0629244
  • tab.unfocusedActiveBorderTop#F06292
  • tab.unfocusedHoverBackground#1f0d13
  • terminal.foreground#71293f
  • textBlockQuote.background#F0629244
  • textBlockQuote.border#F0629244
  • textCodeBlock.background#F0629244
  • textLink.activeForeground#F06292
  • textLink.foreground#F06292
  • textPreformat.foreground#aaa
  • textSeparator.foreground#aaa
  • titleBar.activeBackground#1f0d13
  • titleBar.activeForeground#bbb
  • titleBar.border#F0629244
  • titleBar.inactiveBackground#1f0d13dd
  • titleBar.inactiveForeground#ccc
  • 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#71fff1
invalid.illegal#ff6f6f
keyword.operator#777777
keyword, storage#77a9ff
storage.type, support.type#db86ff
constant.language, support.constant, variable.language#ff9771
variable, support.variable#db86ff
entity.name.function, support.function#ff9973bold
entity.name.type, entity.other.inherited-class, support.class#d77bffbold
entity.name.exception#ff6969
entity.name.sectionbold
constant.numeric, constant.character, constant#607D8B
string#ff6565
constant.character.escape#777777
string.regexp#649dff
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#60d7cb
entity.name.tag#7c92ff
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#e37900italic
constant.character.entity, punctuation.definition.entity#ffb69b
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#7dabfb
meta.property-name, support.type.property-name#ffb69b
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#ff7575
markup.inserted#000000
meta.link#3360ad
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#e67f59
markup.boldbold
markup.traceback#e67f59
markup.underlineunderline
markup.quote#c183e4
markup.list#7dabfb
markup.bold, markup.italic#48d8ca
markup.inline.raw#e67f59
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343