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#E0EAEB
  • activityBar.foreground#2A2E1D
  • activityBar.inactiveForeground#616453
  • activityBarBadge.background#0176A6
  • activityBarBadge.foreground#FFFFFF
  • button.background#0176A6
  • button.foreground#FFFFFF
  • button.hoverBackground#005F8F
  • diffEditor.insertedTextBackground#8D830820
  • diffEditor.removedTextBackground#EE322920
  • dropdown.background#E3EBED
  • dropdown.border#B8C0B4
  • dropdown.foreground#2A2E1D
  • editor.background#E8F0F2
  • editor.findMatchBackground#D1A60860
  • editor.findMatchHighlightBackground#D1A60830
  • editor.foreground#2A2E1D
  • editor.inactiveSelectionBackground#C0CCD4
  • editor.lineHighlightBackground#00000000
  • editor.selectionBackground#B0C4D0
  • editorBracketMatch.background#D1A60840
  • editorBracketMatch.border#D1A608
  • editorCursor.foreground#2A2E1D
  • editorGroupHeader.tabsBackground#E0EAEB
  • editorIndentGuide.activeBackground1#A0A8B0
  • editorIndentGuide.background1#D4DCDE
  • editorLineNumber.activeForeground#2A2E1D
  • editorLineNumber.foreground#7A8279
  • editorSuggestWidget.background#E3EBED
  • editorSuggestWidget.border#B8C0B4
  • editorSuggestWidget.selectedBackground#E0EAEB
  • editorWhitespace.foreground#B8C0B4
  • editorWidget.background#E8F0F2
  • editorWidget.border#B8C0B4
  • focusBorder#0176A6
  • gitDecoration.addedResourceForeground#8D8308
  • gitDecoration.deletedResourceForeground#EE3229
  • gitDecoration.ignoredResourceForeground#7A8279
  • gitDecoration.modifiedResourceForeground#D1A608
  • gitDecoration.untrackedResourceForeground#8D8308
  • input.background#E3EBED
  • input.border#B8C0B4
  • input.foreground#2A2E1D
  • input.placeholderForeground#7A8279
  • inputOption.activeBorder#0176A6
  • list.activeSelectionBackground#B0C4D0
  • list.activeSelectionForeground#2A2E1D
  • list.focusBackground#C0CCD4
  • list.hoverBackground#E0EAEB
  • list.inactiveSelectionBackground#D4DCDE
  • list.inactiveSelectionForeground#2A2E1D
  • peekView.border#0176A6
  • peekViewEditor.background#F0F2F4
  • peekViewResult.background#E8F0F2
  • peekViewTitle.background#E0EAEB
  • scrollbar.shadow#00000010
  • scrollbarSlider.activeBackground#444E4390
  • scrollbarSlider.background#7A827950
  • scrollbarSlider.hoverBackground#61645370
  • sideBar.background#E0EAEB
  • sideBar.foreground#2A2E1D
  • sideBarSectionHeader.background#E0EAEB
  • sideBarSectionHeader.foreground#2A2E1D
  • sideBarTitle.foreground#2A2E1D
  • statusBar.background#E0EAEB
  • statusBar.foreground#2A2E1D
  • statusBar.noFolderBackground#E0EAEB
  • statusBarItem.hoverBackground#C5CCD4
  • tab.activeBackground#E8F0F2
  • tab.activeForeground#2A2E1D
  • tab.border#D4DCDE
  • tab.inactiveBackground#E0EAEB
  • tab.inactiveForeground#616453
  • terminal.ansiBlack#2A2E1D
  • terminal.ansiBlue#0176A6
  • terminal.ansiBrightBlack#444E43
  • terminal.ansiBrightBlue#0176A6
  • terminal.ansiBrightCyan#179F90
  • terminal.ansiBrightGreen#8D8308
  • terminal.ansiBrightMagenta#3A4364
  • terminal.ansiBrightRed#EF0E0E
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#D1A608
  • terminal.ansiCyan#179F90
  • terminal.ansiGreen#8D8308
  • terminal.ansiMagenta#3A4364
  • terminal.ansiRed#EE3229
  • terminal.ansiWhite#E8F0F2
  • terminal.ansiYellow#D1A608
  • terminal.background#E8F0F2
  • terminal.foreground#2A2E1D
  • titleBar.activeBackground#E0EAEB
  • titleBar.activeForeground#2A2E1D
  • titleBar.inactiveBackground#E0EAEB
  • titleBar.inactiveForeground#616453

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A8279italic
string, string.quoted#8D8308
constant.numeric#D1A608
constant.language, constant.character, constant.other#EE3229
keyword, storage.type, storage.modifier#0176A6
keyword.operator#444E43
entity.name.function, meta.function-call, support.function#3A4364
entity.name.class, entity.name.type.class, support.class#D1A608
entity.name.type, support.type#D1A608
variable, variable.other#179F90
variable.other.property, support.variable.property#EE3229
variable.parameter#D5590B
entity.name.tag#EE3229
entity.other.attribute-name#D1A608
punctuation#444E43
variable.other.php#179F90
punctuation.definition.variable.php#179F90
entity.name.namespace, entity.name.type.namespace#444E43
variable.language.this, variable.language.self#0176A6italic
Beggars by VheissuLabs - VS Code Theme