Skip to main content
CodingTheme

Color themes

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#f7f3e9
  • activityBar.foreground#2E7D32
  • activityBarBadge.background#FF4D3D
  • activityBarBadge.foreground#ffffff
  • badge.background#FF4D3D
  • badge.foreground#ffffff
  • button.background#2E7D32
  • button.foreground#ffffff
  • button.hoverBackground#388E3C
  • debugToolBar.background#f7f3e9
  • dropdown.background#fefdf8
  • dropdown.border#b8b59d
  • dropdown.foreground#2E7D32
  • editor.background#fcfaf4
  • editor.findMatchBackground#2E7D3240
  • editor.findMatchHighlightBackground#2E7D3220
  • editor.foreground#2c3e34
  • editor.selectionBackground#e6e3c760
  • editor.selectionHighlightBackground#e6e3c730
  • editor.wordHighlightBackground#17a2b820
  • editor.wordHighlightStrongBackground#17a2b830
  • editorBracketMatch.background#c9c6a840
  • editorBracketMatch.border#2E7D32
  • editorCursor.foreground#FF4D3D
  • editorError.foreground#FF4D3D
  • editorGroup.border#c9c6a8
  • editorGroupHeader.tabsBackground#f7f3e9
  • editorIndentGuide.activeBackground1#2E7D32
  • editorIndentGuide.background1#e6e3c7
  • editorLineNumber.activeForeground#2E7D32
  • editorLineNumber.foreground#9b9580
  • editorWarning.foreground#FF8F00
  • editorWhitespace.foreground#e6e3c7
  • focusBorder#2E7D32
  • foreground#2c3e34
  • gitDecoration.addedResourceForeground#2E7D32
  • gitDecoration.conflictingResourceForeground#FFB74D
  • gitDecoration.deletedResourceForeground#FF4D3D
  • gitDecoration.ignoredResourceForeground#6b6b52
  • gitDecoration.modifiedResourceForeground#FF8F00
  • gitDecoration.untrackedResourceForeground#2E7D32
  • input.background#fefdf8
  • input.border#b8b59d
  • input.foreground#2E7D32
  • inputOption.activeBorder#2E7D32
  • list.activeSelectionBackground#e6e3c7
  • list.activeSelectionForeground#FF4D3D
  • list.hoverBackground#f7f3e9
  • list.inactiveSelectionBackground#f7f3e9
  • panel.background#f7f3e9
  • panel.border#c9c6a8
  • panelTitle.activeForeground#2E7D32
  • panelTitle.inactiveForeground#6b6b52
  • progressBar.background#2E7D32
  • scrollbar.shadow#00000020
  • scrollbarSlider.background#c9c6a880
  • scrollbarSlider.hoverBackground#b8b59d
  • sideBar.background#f7f3e9
  • sideBar.foreground#2c3e34
  • sideBarSectionHeader.background#eeead4
  • sideBarSectionHeader.foreground#2E7D32
  • statusBar.background#f7f3e9
  • statusBar.foreground#2E7D32
  • statusBarItem.hoverBackground#eeead4
  • tab.activeBackground#fcfaf4
  • tab.activeForeground#2E7D32
  • tab.border#c9c6a8
  • tab.inactiveBackground#f7f3e9
  • tab.inactiveForeground#6b6b52
  • terminal.ansiBlack#2c3e34
  • terminal.ansiBlue#2980B9
  • terminal.ansiBrightBlack#6b6b52
  • terminal.ansiBrightBlue#5DADE2
  • terminal.ansiBrightCyan#26C6DA
  • terminal.ansiBrightGreen#388E3C
  • terminal.ansiBrightMagenta#AB47BC
  • terminal.ansiBrightRed#FF6B5A
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FFB74D
  • terminal.ansiCyan#00ACC1
  • terminal.ansiGreen#2E7D32
  • terminal.ansiMagenta#8E24AA
  • terminal.ansiRed#FF4D3D
  • terminal.ansiWhite#f7f3e9
  • terminal.ansiYellow#FF8F00
  • terminal.background#fcfaf4
  • terminal.foreground#2c3e34
  • titleBar.activeBackground#f7f3e9
  • titleBar.activeForeground#2c3e34
  • titleBar.inactiveBackground#f7f3e9
  • titleBar.inactiveForeground#6b6b52

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6b6b52italic
string#2E7D32
constant.numeric#FF8F00
constant.language#2c3e34
keyword#2980B9
storage.type#FF4D3D
storage.modifier#43A047
entity.name.function#FFB74D
entity.name.class#FF6B5A
entity.name.type#5DADE2
variable#2c3e34
support.function#43A047
support.class#8E24AA
markup.heading#FF4D3Dbold
markup.bold#FF8F00bold
markup.italic#2c3e34italic
meta.import, meta.export#2E7D32
punctuation.definition.tag#2E7D32
meta.tag, entity.name.tag#388E3C

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...