Skip to main content
Coding Theme

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#202330
  • activityBar.foreground#ff928b
  • activityBarBadge.background#ff928b
  • breadcrumb.foreground#ffffff
  • button.background#fe7c8ecc
  • dropdown.background#202330
  • editor.background#202330
  • editor.foreground#fff8f8
  • editor.lineHighlightBackground#472541
  • editor.selectionBackground#472541
  • editor.selectionHighlightBackground#575b6180
  • editor.wordHighlightBackground#4747a180
  • editor.wordHighlightStrongBackground#6767ce80
  • editorBracketMatch.border#d0963a
  • editorCursor.foreground#ffedf0
  • editorError.foreground#ff62a5
  • editorGroupHeader.tabsBackground#2d2f42
  • editorWarning.foreground#3bc089
  • extensionButton.prominentBackground#fe7c8e
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#fe7c8e
  • focusBorder#fe7c8e
  • input.background#202330
  • inputOption.activeBorder#fe7c8e
  • list.activeSelectionBackground#729760
  • list.errorForeground#ff62a5
  • list.focusBackground#707070
  • list.highlightForeground#ffffff
  • list.hoverBackground#565970
  • list.inactiveSelectionBackground#729760
  • menu.separatorBackground#f3b4bf
  • notificationCenter.border#f3b4bf
  • notificationCenterHeader.background#f3b4bf
  • notificationCenterHeader.foreground#ffffff
  • notificationLink.foreground#fe7c8e
  • notifications.background#6d5d72
  • notifications.foreground#f3b4bf
  • panelTitle.activeForeground#ffffff
  • peekView.border#d0963a
  • scrollbarSlider.activeBackground#e9a6b288
  • scrollbarSlider.background#f3b4bf48
  • scrollbarSlider.hoverBackground#f3b4bf66
  • sideBar.background#2d2f42
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#202330
  • statusBar.background#ff928b
  • statusBar.debuggingBackground#f3b4bf
  • statusBar.noFolderBackground#f3b4bf
  • tab.activeBorderTop#fe7c8e
  • tab.activeForeground#fe7c8e
  • tab.border#9498a144
  • tab.inactiveBackground#2d2f42
  • tab.inactiveForeground#ffffff
  • terminal.ansiWhite#ffffff
  • titleBar.activeBackground#2d2f42

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#C5C8C6—
comment#6D7A72
string#FAE8B6
constant.numeric#FF38A2
constant.language#58B896
constant.character, constant.other#FF7F9D
keyword#FF4791
storage#FEC831
storage.type#DCBFF2italic
entity.name.class#F5A6C6underline
entity.other.inherited-class#37E884italic underline
entity.name.function#FFC85B
variable.parameter#9CD162italic
entity.name.tag#FA508C
support.function#A2C2EBbold
variable.other, variable.js, punctuation.separator.variable#EBA4AC
invalid#FFFFFF
variable.other.php, variable.other.normal#EBA4AC
variable.other.property#DCBFF2
meta.tag#FFF0F5
entity.name.tag#FA508C
meta.doctype, meta.tag.sgml-declaration.doctype, meta.tag.sgml.doctype#73B5D7
meta.tag.inline source, text.html.php.source#73B5D7
entity.other.attribute-name, meta.tag punctuation.definition.string#E6A1FF
meta.tag string -source -punctuation, text source text meta.tag string -punctuation#6089B4
punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html#D0B344
meta.toc-list.id#73B5D7—
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#FFF0F5
support.type, support.class#94AFE8italic
punctuation.definition.template-expression, punctuation.section.embedded.coffee#D08442—
meta.template.expression#C5C8C6—
punctuation.definition.string.end.php, punctuation.definition.string.begin.php#E1ECF2—
source.php.embedded.line.html#787878—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#EC9A5E
keyword.other.DML.sql#D0B344
meta.diff, meta.diff.header#E0EDDDitalic
markup.deleted#DC322F
markup.changed#E53C70
markup.inserted#219186—
markup.quote#9E6DBC—
markup.list#73B5D7—
markup.bold, markup.italic#6089B4—
markup.inline.raw#FF0080
markup.heading#D0B344—
markup.heading.setext#D0B344
token.info-token#6796E6—
token.warn-token#E5AC40—
token.error-token#F44747—
token.debug-token#B267E6—
comment#729760—
punctuation.definition.comment#729760—
string#FF928B—
meta.embedded.assembly#FF928B—
keyword - keyword.operator#CDEAC0—
keyword.control#CDEAC0—
storage#CDEAC0—
storage.type#CDEAC0—
constant.numeric#FFAC81—
entity.name.type#FEC3D6—
entity.name.class#FEC3D6—
support.type#FEC3D6—
support.class#FEC3D6—
entity.name.function#EFE9AE—
support.function#EFE9AE—
variable#9B9999—
entity.name.variable#9B9999—
Svart Dark Theme by blackscriptt - VS Code Theme