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#141010
  • activityBar.border#362B2D
  • activityBar.foreground#E8A0B8
  • activityBar.inactiveForeground#625B5C
  • activityBarBadge.background#E8A0B8
  • activityBarBadge.foreground#141010
  • badge.background#E8A0B8
  • badge.foreground#141010
  • breadcrumb.focusForeground#E9E2E3
  • breadcrumb.foreground#9F8489
  • button.background#E8A0B8
  • button.foreground#141010
  • button.hoverBackground#F2C9D7
  • diffEditor.insertedTextBackground#A8D8B81A
  • diffEditor.removedTextBackground#E88A801A
  • dropdown.background#141010
  • dropdown.border#362B2D
  • dropdown.foreground#E9E2E3
  • editor.background#1A1415
  • editor.foreground#E9E2E3
  • editor.lineHighlightBackground#1F191A99
  • editor.selectionBackground#362B2D99
  • editor.selectionHighlightBackground#362B2D66
  • editor.wordHighlightBackground#362B2D66
  • editorBracketMatch.background#362B2D
  • editorBracketMatch.border#E8A0B8
  • editorCursor.foreground#E8A0B8
  • editorError.foreground#E88A80
  • editorGroupHeader.tabsBackground#1F191A
  • editorGroupHeader.tabsBorder#362B2D
  • editorHoverWidget.background#1F191A
  • editorHoverWidget.border#362B2D
  • editorIndentGuide.activeBackground1#454041
  • editorIndentGuide.background1#251D1E
  • editorInfo.foreground#A8C0E8
  • editorLineNumber.activeForeground#E8A0B8
  • editorLineNumber.foreground#524C4D
  • editorRuler.foreground#251D1E
  • editorSuggestWidget.background#1F191A
  • editorSuggestWidget.selectedBackground#362B2D
  • editorWarning.foreground#E8C07A
  • editorWhitespace.foreground#2E2426
  • editorWidget.background#1F191A
  • editorWidget.border#362B2D
  • focusBorder#524C4D
  • foreground#D0C3C5
  • gitDecoration.addedResourceForeground#A8D8B8
  • gitDecoration.deletedResourceForeground#E88A80
  • gitDecoration.ignoredResourceForeground#625B5C
  • gitDecoration.modifiedResourceForeground#E8C07A
  • gitDecoration.untrackedResourceForeground#A8D8B8
  • input.background#141010
  • input.border#362B2D
  • input.foreground#E9E2E3
  • inputOption.activeBorder#E8A0B8
  • list.activeSelectionBackground#362B2D
  • list.activeSelectionForeground#E9E2E3
  • list.highlightForeground#E8A0B8
  • list.hoverBackground#251D1E
  • list.inactiveSelectionBackground#251D1E
  • menu.background#1F191A
  • menu.foreground#E9E2E3
  • menubar.selectionBackground#362B2D
  • minimap.background#1A1415
  • notifications.background#1F191A
  • notifications.border#362B2D
  • panel.background#1F191A
  • panel.border#362B2D
  • panelTitle.activeForeground#E9E2E3
  • panelTitle.inactiveForeground#9F8489
  • peekView.border#E8A0B8
  • peekViewEditor.background#141010
  • peekViewResult.background#1F191A
  • scrollbarSlider.activeBackground#524C4DCC
  • scrollbarSlider.background#362B2D99
  • scrollbarSlider.hoverBackground#454041CC
  • selection.background#362B2D
  • sideBar.background#1F191A
  • sideBar.border#362B2D
  • sideBar.foreground#D0C3C5
  • sideBarSectionHeader.background#141010
  • sideBarSectionHeader.foreground#D0C3C5
  • sideBarTitle.foreground#9F8489
  • statusBar.background#141010
  • statusBar.border#362B2D
  • statusBar.debuggingBackground#E8C07A
  • statusBar.debuggingForeground#141010
  • statusBar.foreground#D0C3C5
  • statusBar.noFolderBackground#141010
  • tab.activeBackground#1A1415
  • tab.activeBorderTop#E8A0B8
  • tab.activeForeground#E9E2E3
  • tab.border#362B2D
  • tab.inactiveBackground#1F191A
  • tab.inactiveForeground#9F8489
  • terminal.ansiBlack#251D1E
  • terminal.ansiBlue#A8C0E8
  • terminal.ansiBrightBlack#625B5C
  • terminal.ansiBrightBlue#D0DDF3
  • terminal.ansiBrightCyan#C0DEDB
  • terminal.ansiBrightGreen#CBE8D5
  • terminal.ansiBrightMagenta#E4CEED
  • terminal.ansiBrightRed#F0B2AB
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F2C9D7
  • terminal.ansiCyan#9FCCC8
  • terminal.ansiGreen#A8D8B8
  • terminal.ansiMagenta#D0A8E0
  • terminal.ansiRed#E88A80
  • terminal.ansiWhite#E9E2E3
  • terminal.ansiYellow#E8A0B8
  • terminal.background#141010
  • terminal.foreground#D0C3C5
  • titleBar.activeBackground#141010
  • titleBar.activeForeground#E9E2E3
  • titleBar.border#362B2D
  • titleBar.inactiveBackground#141010
  • titleBar.inactiveForeground#9F8489
  • widget.shadow#0000004D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#785E63italic
string, string.quoted, punctuation.definition.string#A8D8B8
string.regexp#9FCCC8
constant.numeric, constant.language, keyword.other.unit#E8C07A
constant.character.escape#D0A8E0
variable, variable.other.readwrite, meta.definition.variable.name#E9E2E3
variable.parameter#D0C3C5
variable.language, variable.other.constant#D0A8E0
keyword, keyword.control, storage, storage.type, storage.modifier#E8A0B8bold
keyword.operator#C0AFB2
entity.name.function, support.function, meta.function-call#A8C0E8
entity.name.class, entity.name.type, support.class, support.type#DCB4C0
entity.name.tag#E8A0B8
entity.other.attribute-name#A8D8B8
support.constant, support.variable#D0A8E0
punctuation, meta.brace#AC9599
markup.heading#E8A0B8bold
markup.bold#E9E2E3bold
markup.italic#E9E2E3italic
markup.inline.raw, markup.raw#A8D8B8
markup.underline.link#A8C0E8underline
invalid, invalid.illegal#E88A80
meta.diff.header, meta.diff.range#A8C0E8
markup.inserted#A8D8B8
markup.deleted#E88A80
support.type.property-name.json, support.type.property-name#E8A0B8