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#0c1018
  • activityBar.border#3f3f3f
  • activityBar.foreground#d0d0d9
  • activityBar.inactiveForeground#96969d
  • activityBarBadge.background#9b5528
  • activityBarBadge.foreground#e0e0e9
  • badge.background#9b5528
  • badge.foreground#e0e0e9
  • breadcrumb.activeSelectionForeground#d0d0d9
  • breadcrumb.focusForeground#d0d0d9
  • breadcrumb.foreground#96969d
  • breadcrumbPicker.background#0c1018
  • button.background#0c1018
  • button.border#9b5528
  • button.foreground#9b5528
  • button.hoverBackground#32373c
  • debugToolBar.background#0c1018
  • debugToolBar.border#3f3f3f
  • diffEditor.insertedTextBackground#29583633
  • diffEditor.removedTextBackground#65202033
  • dropdown.background#0c1018
  • dropdown.border#3f3f3f
  • dropdown.foreground#d0d0d9
  • editor.background#0c1018
  • editor.findMatchBackground#3c5082
  • editor.findMatchHighlightBackground#3c5082
  • editor.foreground#d0d0d9
  • editor.hoverHighlightBackground#463264
  • editor.inactiveSelectionBackground#32373c
  • editor.lineHighlightBackground#191923
  • editor.selectionBackground#173d59
  • editor.wordHighlightBackground#463264
  • editor.wordHighlightStrongBackground#463264
  • editorBracketMatch.background#326146
  • editorBracketMatch.border#326146
  • editorCursor.foreground#55a5ff
  • editorGroup.border#3f3f3f
  • editorGroupHeader.tabsBackground#0c1018
  • editorGutter.background#0c1018
  • editorHoverWidget.background#0c1018
  • editorHoverWidget.border#3f3f3f
  • editorIndentGuide.activeBackground#636669
  • editorIndentGuide.background#393b40
  • editorLineNumber.activeForeground#999999
  • editorLineNumber.foreground#555555
  • editorRuler.foreground#636669
  • editorSuggestWidget.background#0c1018
  • editorSuggestWidget.border#3f3f3f
  • editorSuggestWidget.foreground#d0d0d9
  • editorSuggestWidget.selectedBackground#32373c
  • editorWidget.background#0c1018
  • editorWidget.border#3f3f3f
  • extensionButton.prominentBackground#0c1018
  • extensionButton.prominentForeground#9b5528
  • extensionButton.prominentHoverBackground#32373c
  • gitDecoration.addedResourceForeground#98d280
  • gitDecoration.conflictingResourceForeground#ff7373
  • gitDecoration.deletedResourceForeground#ff757f
  • gitDecoration.ignoredResourceForeground#555555
  • gitDecoration.modifiedResourceForeground#ffe169
  • gitDecoration.untrackedResourceForeground#98d280
  • input.background#0c1018
  • input.border#3f3f3f
  • input.foreground#d0d0d9
  • input.placeholderForeground#96969d
  • inputOption.activeBorder#9b5528
  • list.activeSelectionBackground#32373c
  • list.activeSelectionForeground#e0e0e9
  • list.focusBackground#32373c
  • list.highlightForeground#9b5528
  • list.hoverBackground#32373c
  • list.inactiveSelectionBackground#32373c
  • list.inactiveSelectionForeground#e0e0e9
  • menu.background#0c1018
  • menu.foreground#d0d0d9
  • menu.selectionBackground#32373c
  • menu.selectionForeground#e0e0e9
  • menubar.selectionBackground#32373c
  • menubar.selectionForeground#e0e0e9
  • merge.currentContentBackground#20557233
  • merge.currentHeaderBackground#2055724d
  • merge.incomingContentBackground#913f3f33
  • merge.incomingHeaderBackground#913f3f4d
  • notificationCenter.border#3f3f3f
  • notificationCenterHeader.background#0c1018
  • notifications.background#0c1018
  • notifications.border#3f3f3f
  • notifications.foreground#d0d0d9
  • notificationToast.border#3f3f3f
  • panel.background#0c1018
  • panel.border#3f3f3f
  • panelTitle.activeBorder#9b5528
  • panelTitle.activeForeground#d0d0d9
  • panelTitle.inactiveForeground#96969d
  • peekView.border#3f3f3f
  • peekViewEditor.background#0c1018
  • peekViewEditorGutter.background#0c1018
  • peekViewResult.background#0c1018
  • peekViewResult.fileForeground#d0d0d9
  • peekViewResult.lineForeground#96969d
  • peekViewResult.matchHighlightBackground#3c5082
  • peekViewResult.selectionBackground#32373c
  • peekViewResult.selectionForeground#e0e0e9
  • peekViewTitle.background#141518
  • peekViewTitleDescription.foreground#96969d
  • peekViewTitleLabel.foreground#d0d0d9
  • quickInput.background#0c1018
  • quickInput.foreground#d0d0d9
  • scrollbar.shadow#212121
  • scrollbarSlider.activeBackground#4d4e51
  • scrollbarSlider.background#4d4e5190
  • scrollbarSlider.hoverBackground#4d4e51b0
  • settings.headerForeground#d0d0d9
  • settings.modifiedItemIndicator#9b5528
  • sideBar.background#0c1018
  • sideBar.border#3f3f3f
  • sideBar.foreground#d0d0d9
  • sideBarSectionHeader.background#0c1018
  • sideBarSectionHeader.foreground#d0d0d9
  • sideBarTitle.foreground#d0d0d9
  • statusBar.background#0c1018
  • statusBar.border#3f3f3f
  • statusBar.debuggingBackground#5a9e5e
  • statusBar.debuggingForeground#d0d0d9
  • statusBar.foreground#d0d0d9
  • statusBar.noFolderBackground#0c1018
  • tab.activeBackground#32373c
  • tab.activeBorderTop#9b5528
  • tab.activeForeground#d0d0d9
  • tab.border#3f3f3f
  • tab.inactiveBackground#0c1018
  • tab.inactiveForeground#96969d
  • terminal.ansiBlack#0c1018
  • terminal.ansiBlue#61afff
  • terminal.ansiBrightBlack#555555
  • terminal.ansiBrightBlue#61afff
  • terminal.ansiBrightCyan#17bbdd
  • terminal.ansiBrightGreen#98d280
  • terminal.ansiBrightMagenta#e18cf5
  • terminal.ansiBrightRed#ff7373
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffe169
  • terminal.ansiCyan#17bbdd
  • terminal.ansiGreen#98d280
  • terminal.ansiMagenta#e18cf5
  • terminal.ansiRed#ff757f
  • terminal.ansiWhite#d0d0d9
  • terminal.ansiYellow#ffe169
  • terminal.background#0c1018
  • terminal.foreground#d0d0d9
  • titleBar.activeBackground#0c1018
  • titleBar.activeForeground#d0d0d9
  • titleBar.border#3f3f3f
  • titleBar.inactiveBackground#0c1018
  • titleBar.inactiveForeground#96969d
  • tree.indentGuidesStroke#3f3f3f
  • walkThrough.embeddedEditorBackground#141518
  • welcomePage.background#0c1018
  • welcomePage.buttonBackground#0c1018
  • welcomePage.buttonHoverBackground#32373c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#808080italic
string, string.quoted, string.template#98d280
constant.numeric#26d2ff
constant.language.boolean#ffe169
constant, constant.language, constant.character#98d280
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof#e18cf5
storage, storage.type, storage.modifier#e18cf5
entity.name.function, meta.function-call, support.function, keyword.other.special-method#ffe169
entity.name.class, entity.name.type.class, support.class#ffe169
entity.name.type.interface#ffe169
entity.name.type, support.type#ffe169
variable, variable.other#d0d0d9
variable.parameter#61afff
variable.other.property, variable.other.object.property, variable.other.constant.property, support.variable.property#ff7373
variable.language.this, variable.language.super#ff7373
entity.other.attribute-name#ffe169
entity.name.tag, meta.tag.tsx, meta.tag.sgml#ff7373
keyword.operator#d0d0d9
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array#d0d0d9
support.type.property-name.css, support.type.vendored.property-name.css#d0d0d9
support.constant.property-value.css, support.constant.font-name.css, support.constant.media.css, support.constant.color.css#d0d0d9
support.function.css#61afff
constant.other.color.css, constant.other.color.rgb-value.hex.css#17bbdd
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#17bbdd
support.type.property-name.json#ff7373
markup.heading, markup.heading entity.name#50b4bebold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.fenced_code.block#98d280
markup.underline.link#61afff
invalid, invalid.illegal#dd3962
invalid.deprecated#b9c3cdstrikethrough
constant.character.escape#17bbdd
string.regexp#17bbdd
meta.decorator, meta.decorator punctuation.decorator#ffe169
punctuation.definition.template-expression, meta.template.expression#ff7373
meta.diff.header#61afff
markup.deleted#ff7373
markup.inserted#98d280
markup.changed#ffe169
meta.tag.tsx#898989
entity.other.attribute-name#17bbdd
JD's Abyss by Jean-Denis Boivin - VS Code Theme