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#1B2A25
  • activityBar.border#DCE6E422
  • activityBar.foreground#ECF3F1
  • activityBar.inactiveForeground#ECF3F199
  • activityBarBadge.background#FDB05E
  • activityBarBadge.foreground#1B2A25
  • button.background#FDB05E
  • button.foreground#1B2A25
  • button.hoverBackground#FFE6CC
  • button.secondaryBackground#315047
  • button.secondaryForeground#ECF3F1
  • button.secondaryHoverBackground#3A5450
  • descriptionForeground#DCE6E4B3
  • disabledForeground#ECF3F180
  • dropdown.background#1B2A25
  • dropdown.border#DCE6E433
  • dropdown.foreground#ECF3F1
  • editor.background#293E38
  • editor.findMatchBackground#FDB05E44
  • editor.findMatchHighlightBackground#FDB05E22
  • editor.foreground#C8D4CE
  • editor.inactiveSelectionBackground#ECF3F11A
  • editor.selectionBackground#ECF3F133
  • editor.wordHighlightBackground#ECF3F122
  • editor.wordHighlightStrongBackground#ECF3F133
  • editorCursor.foreground#FDB05E
  • editorGroupHeader.tabsBackground#1B2A25
  • editorGroupHeader.tabsBorder#DCE6E422
  • editorHoverWidget.background#1B2A25
  • editorHoverWidget.border#DCE6E433
  • editorIndentGuide.activeBackground1#DCE6E466
  • editorIndentGuide.background1#ECF3F122
  • editorLineNumber.activeForeground#C8D4CE
  • editorLineNumber.foreground#C8D4CE55
  • errorForeground#FDB05E
  • focusBorder#DCE6E466
  • foreground#ECF3F1
  • input.background#1B2A25
  • input.border#DCE6E433
  • input.foreground#ECF3F1
  • input.placeholderForeground#ECF3F199
  • inputOption.activeBorder#FDB05E66
  • list.activeSelectionBackground#ECF3F12E
  • list.activeSelectionForeground#ECF3F1
  • list.focusBackground#ECF3F12A
  • list.hoverBackground#ECF3F11F
  • list.inactiveSelectionBackground#ECF3F11A
  • panel.background#1B2A25
  • panel.border#DCE6E422
  • panelTitle.activeForeground#ECF3F1
  • panelTitle.inactiveForeground#ECF3F1AA
  • scrollbarSlider.activeBackground#FDB05E77
  • scrollbarSlider.background#DCE6E433
  • scrollbarSlider.hoverBackground#DCE6E455
  • sideBar.background#1B2A25
  • sideBar.border#DCE6E422
  • sideBar.foreground#ECF3F1
  • sideBarSectionHeader.background#1B2A25
  • sideBarSectionHeader.foreground#ECF3F1
  • statusBar.background#1B2A25
  • statusBar.debuggingBackground#315047
  • statusBar.debuggingForeground#ECF3F1
  • statusBar.foreground#ECF3F1
  • tab.activeBackground#293E38
  • tab.activeForeground#ECF3F1
  • tab.border#DCE6E41A
  • tab.inactiveBackground#1B2A25
  • tab.inactiveForeground#ECF3F1AA
  • terminal.ansiBlack#1B2A25
  • terminal.ansiBlue#ECF3F1
  • terminal.ansiBrightBlack#315047
  • terminal.ansiBrightBlue#ECF3F1
  • terminal.ansiBrightCyan#FDFCFC
  • terminal.ansiBrightGreen#FCFFFC
  • terminal.ansiBrightMagenta#FFF6EC
  • terminal.ansiBrightRed#FFE6CC
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FEA03D
  • terminal.ansiCyan#FCFFFC
  • terminal.ansiGreen#DCE6E4
  • terminal.ansiMagenta#FFE6CC
  • terminal.ansiRed#FDB05E
  • terminal.ansiWhite#ECF3F1
  • terminal.ansiYellow#FEA03D
  • terminal.background#293E38
  • terminal.foreground#ECF3F1
  • titleBar.activeBackground#1B2A25
  • titleBar.activeForeground#ECF3F1
  • titleBar.inactiveBackground#1B2A25CC
  • titleBar.inactiveForeground#ECF3F199

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A9990italic
keyword, storage, storage.type#C9885A
entity.name.function, support.function, meta.function-call#8FBDAD
string, constant.other.symbol#DDBF9A
constant.numeric, constant.language#C8924E
variable, identifier#C8D4CE
entity.name.type, entity.name.class, support.type#9EBA9E
Veni Trajan Dark by Daniel Andre Fortun - VS Code Theme