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.activeBorder#EFC9A0
  • activityBar.background#180b02
  • activityBar.dropBorder#664518
  • activityBar.foreground#EFC9A0
  • activityBar.inactiveForeground#949494
  • activityBarBadge.background#EFC9A0
  • activityBarBadge.foreground#2B1608
  • badge.background#E2A6B6
  • badge.foreground#2B1608
  • breadcrumb.activeSelectionForeground#FFF2CF
  • breadcrumb.background#2e190a
  • breadcrumb.focusForeground#FFF2CF
  • breadcrumb.foreground#FFF2CF
  • breadcrumbPicker.background#0F0700
  • button.background#e2a6b6
  • button.foreground#2B1608
  • button.hoverBackground#f0bac8
  • button.secondaryBackground#442c10
  • button.secondaryForeground#FFF2CF
  • button.secondaryHoverBackground#613f19
  • charts.blue#E2A6B6
  • charts.foreground#FFF2CF
  • charts.green#E2A6B6
  • charts.lines#E2A6B6
  • charts.orange#E2A6B6
  • charts.purple#E2A6B6
  • charts.red#E2A6B6
  • charts.yellow#E2A6B6
  • checkbox.background#0F0700
  • checkbox.border#949494
  • checkbox.foreground#FFF2CF
  • debugIcon.breakpointForeground#FFF2CF
  • debugIcon.continueForeground#FFF2CF
  • debugIcon.disconnectForeground#FFF2CF
  • debugIcon.pauseForeground#FFF2CF
  • debugIcon.restartForeground#FFF2CF
  • debugIcon.startForeground#FFF2CF
  • debugIcon.stepBackForeground#FFF2CF
  • debugIcon.stepIntoForeground#FFF2CF
  • debugIcon.stepOutForeground#FFF2CF
  • debugIcon.stepOverForeground#FFF2CF
  • debugIcon.stopForeground#FFF2CF
  • debugToolBar.background#0F0700
  • debugToolBar.border#949494
  • descriptionForeground#868686
  • diffEditor.border#949494
  • diffEditor.diagonalFill#074C7626
  • diffEditor.insertedTextBackground#0F070035
  • diffEditor.insertedTextBorder#949494B0
  • diffEditor.removedTextBackground#DC3F3730
  • diffEditor.removedTextBorder#4f1310b0
  • dropdown.border#bfa88e
  • dropdown.foreground#FFF2CF
  • editor.background#0F0700
  • editor.findMatchBackground#0F0700C9
  • editor.findMatchHighlightBackground#CB97A5D6
  • editor.findMatchHighlightBorder#949494EE
  • editor.foreground#E2A6B6
  • editor.lineHighlightBackground#4D2D1160
  • editor.selectionBackground#E2A6B6
  • editor.wordHighlightBackground#E2A6B6C7
  • editor.wordHighlightStrongBackground#E2A6B6D4
  • editor.wordHighlightStrongBorder#949494CA
  • editorBracketHighlight.foreground1#FFF2CF
  • editorBracketHighlight.foreground2#FFF2CF
  • editorBracketHighlight.foreground3#FFF2CF
  • editorBracketHighlight.foreground4#FFF2CF
  • editorBracketHighlight.foreground5#FFF2CF
  • editorBracketHighlight.foreground6#FFF2CF
  • editorBracketHighlight.unexpectedBracket.foreground#FFF2CF
  • editorBracketMatch.background#0F0700DA
  • editorCursor.foreground#E2A6B6
  • editorError.foreground#E85D4A
  • editorGroup.emptyBackground#0F0700
  • editorGroupHeader.tabsBackground#4d2d10
  • editorGutter.addedBackground#EDB8C6
  • editorGutter.deletedBackground#490e0b
  • editorGutter.modifiedBackground#B96600
  • editorLineNumber.activeForeground#FFF2CF
  • editorLineNumber.foreground#FFF2CF
  • editorWarning.foreground#DCBC63
  • editorWidget.background#0F0700C9
  • editorWidget.foreground#d6caa3
  • editorWidget.resizeBorder#94949442
  • errorForeground#E85D4A
  • extensionBadge.remoteBackground#683A0F
  • extensionBadge.remoteForeground#FFF2CF
  • extensionButton.prominentBackground#683A0F
  • extensionButton.prominentForeground#FFF2CF
  • extensionButton.prominentHoverBackground#683A0F
  • extensionIcon.preReleaseForeground#FFF2CF
  • extensionIcon.starForeground#FFF2CF
  • extensionIcon.verifiedForeground#FFF2CF
  • focusBorder#CA94A2
  • foreground#FFF2CF
  • gitDecoration.addedResourceForeground#DC9237
  • gitDecoration.conflictingResourceForeground#E85D4A
  • gitDecoration.deletedResourceForeground#E85D4A
  • gitDecoration.ignoredResourceForeground#868686
  • gitDecoration.modifiedResourceForeground#B96600
  • gitDecoration.stageDeletedResourceForeground#E85D4A
  • gitDecoration.stageModifiedResourceForeground#B96600
  • gitDecoration.submoduleResourceForeground#DC9237
  • gitDecoration.untrackedResourceForeground#DC9237
  • icon.foreground#DC9237
  • input.background#6c431e
  • input.border#E2A6B6
  • input.foreground#FFF2CF
  • input.placeholderForeground#E2A6B6
  • inputOption.activeBackground#E2A6B6
  • inputOption.activeBorder#E2A6B6
  • inputOption.activeForeground#FFF2CF
  • keybindingLabel.background#0F0700
  • keybindingLabel.border#949494
  • keybindingLabel.bottomBorder#949494
  • keybindingLabel.foreground#FFF2CF
  • list.activeSelectionBackground#E2A6B6
  • list.activeSelectionForeground#2B1608
  • list.activeSelectionIconForeground#FFF2CF
  • list.dropBackground#4d2d11
  • list.errorForeground#E85D4A
  • list.filterMatchBackground#4d2d11
  • list.hoverBackground#E2A6B6
  • list.hoverForeground#2B1608
  • list.inactiveSelectionBackground#E2A6B6
  • list.inactiveSelectionForeground#2B1608
  • list.warningForeground#DCBC63
  • listFilterWidget.background#4d2d11
  • menu.background#0F0700
  • menu.separatorBackground#7c5918
  • minimap.background#0F0700a9
  • minimap.errorHighlight#58130fd5
  • minimap.findMatchHighlight#FFF2CFd5
  • minimap.selectionHighlight#FFF2CFd5
  • minimap.warningHighlight#DC5F3780
  • minimapGutter.addedBackground#EDB8C6
  • minimapGutter.deletedBackground#3b0b09
  • minimapGutter.modifiedBackground#B96600e3
  • minimapSlider.activeBackground#764f076c
  • minimapSlider.background#0F07006e
  • minimapSlider.hoverBackground#76550783
  • notificationCenter.border#949494
  • notificationCenterHeader.background#0F0700
  • notificationCenterHeader.foreground#FFF2CF
  • notificationLink.foreground#FFF2CF
  • notifications.background#0F0700
  • notifications.foreground#FFF2CF
  • notificationsErrorIcon.foreground#E85D4A
  • notificationsInfoIcon.foreground#FFF2CF
  • notificationsWarningIcon.foreground#DCBC63
  • notificationToast.border#949494
  • panel.border#DD879E
  • panelTitle.activeForeground#FFF2CF
  • panelTitle.inactiveForeground#C9AF83
  • peekViewEditor.matchHighlightBackground#180b02
  • peekViewEditor.matchHighlightBorder#949494
  • peekViewResult.background#0F0700
  • peekViewResult.matchHighlightBackground#180b02
  • pickerGroup.foreground#FFF2CF
  • scrollbarSlider.activeBackground#e2a6b6
  • scrollbarSlider.background#0F0700
  • scrollbarSlider.hoverBackground#e2a6b6
  • sideBar.background#0F0700
  • sideBar.border#6e4f08
  • sideBar.foreground#D9B98A
  • sideBarSectionHeader.background#0F0700
  • sideBarSectionHeader.border#664518
  • statusBar.background#E2A6B6
  • statusBar.debuggingBackground#E2A6B6
  • statusBar.foreground#2B1608
  • statusBar.noFolderBackground#0F0700
  • statusBarItem.activeBackground#E2A6B6
  • statusBarItem.errorBackground#E85D4A
  • statusBarItem.remoteBackground#0F0700
  • tab.activeBackground#E2A6B6
  • tab.activeForeground#2B1608
  • tab.inactiveBackground#4d2d10
  • tab.inactiveForeground#E2C9A0
  • terminal.ansiBlack#0F0700
  • terminal.ansiBlue#A07F4D
  • terminal.ansiBrightBlack#949494
  • terminal.ansiBrightBlue#926E39
  • terminal.ansiBrightCyan#926E39
  • terminal.ansiBrightGreen#926E39
  • terminal.ansiBrightMagenta#B96600
  • terminal.ansiBrightRed#F27960
  • terminal.ansiBrightWhite#FFF2CF
  • terminal.ansiBrightYellow#DCBC63
  • terminal.ansiCyan#926E39
  • terminal.ansiGreen#926E39
  • terminal.ansiMagenta#B96600
  • terminal.ansiRed#E85D4A
  • terminal.ansiWhite#FFF2CF
  • terminal.ansiYellow#DCBC63
  • terminal.background#0F0700
  • terminal.foreground#E2A6B6
  • terminal.selectionBackground#DD879E
  • terminalCursor.foreground#E2A6B6
  • textLink.activeForeground#FFF2CFe6
  • textLink.foreground#FFF2CF
  • titleBar.activeBackground#180b02
  • titleBar.activeForeground#FFF2CF
  • titleBar.inactiveBackground#180b02
  • titleBar.inactiveForeground#FFF2CF
  • welcomePage.progress.foreground#DC9237
  • welcomePage.tileBackground#0F0700
  • welcomePage.tileHoverBackground#E2A6B6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#949494italic
comment.block.preprocessor#949494
comment.documentation, comment.block.documentation#949494
invalid.illegal#E85D4A
keyword.operator#B98800
storage#C1602E
storage.type, support.type#B98800
constant.language, support.constant, variable.language#DC9237
variable, support.variable#D9B060
entity.name.function, support.function#E0B23Abold
entity.name.type.namespace, meta.body.function.definition.cpp#5C3A20
entity.other.inherited-class, support.class#C97F3Abold
entity.name.exception#E85D4A
entity.name.sectionbold
constant.numeric, constant.character, keyword, constant#DC9237
text.html.derivative#B98800
meta.tag.metadata#DC5F37
meta.tag.inline.a.start.html#B98800
constant.character.escape#DC9237
string.regexp#DC9237
constant.other.symbol#DC9237
punctuation.definition.string#B98800
meta.embedded.block.php, string.quoted.double.cpp#B98800
meta.embedded.line.php, punctuation.section.embedded, string.quoted.double.json.comments#DC9237
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#DC9237
punctuation, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#D9713F
meta.tag, variable.other.property.js#D9713F
entity.name.tag#D9713F
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#DC5F37italic
constant.character.entity, punctuation.definition.entity#E2A6B6bold
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#E2A6B6
meta.property-name, support.type.property-name#C9924A
meta.property-value, meta.property-value constant.other, string.template.js, support.constant.property-value#C9924A
keyword.other.importantbold
markup.changed#DC9237
markup.deleted#E85D4A
markup.italicitalic
markup.error#E85D4A
markup.inserted#DC9237
meta.link.reference.markdown, meta.link.inline.markdown#E2A6B6
markup.output, markup.raw#DC9237
markup.prompt#DC9237
markup.heading#DC5F37
markup.boldbold
markup.traceback#DC9237
markup.underlineunderline
markup.quote#B96600
markup.list, punctuation.definition.list, punctuation.definition.quote#B96600
markup.bold, markup.italic#DC9237
markup.inline.raw#DC9237
meta.paragraph.markdown#DC9237
string.other.link.description.markdown, string.other.link.title.markdown#DC9237
meta.diff.range, meta.diff.index, meta.separator#B96600
meta.diff.header.from-file#B96600
meta.diff.header.to-file#B96600
meta.function-call.php#B98800
keyword.operator.pattern.css, entity.other.attribute-name.pseudo-class.css, meta.at-rule.import.css, string.quoted.single.php, variable.other.constant.js#DC9237
dark autumn rose by Mary - VS Code Theme