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#1a2332
  • activityBar.foreground#4CAF50
  • activityBarBadge.background#FF4D3D
  • activityBarBadge.foreground#ffffff
  • badge.background#FF4D3D
  • badge.foreground#ffffff
  • button.background#4CAF50
  • button.foreground#1a2332
  • button.hoverBackground#66BB6A
  • debugToolBar.background#1a2332
  • dropdown.background#2d3b4f
  • dropdown.border#4a5d73
  • dropdown.foreground#a8bba8
  • editor.background#0f1419
  • editor.findMatchBackground#4CAF5040
  • editor.findMatchHighlightBackground#4CAF5020
  • editor.foreground#c7d2cc
  • editor.selectionBackground#4a5d7360
  • editor.selectionHighlightBackground#4a5d7330
  • editor.wordHighlightBackground#4CAF5020
  • editor.wordHighlightStrongBackground#4CAF5030
  • editorBracketMatch.background#4a5d7340
  • editorBracketMatch.border#4CAF50
  • editorCursor.foreground#FF4D3D
  • editorError.foreground#FF4D3D
  • editorGroup.border#4a5d73
  • editorGroupHeader.tabsBackground#1a2332
  • editorIndentGuide.activeBackground1#4CAF50
  • editorIndentGuide.background1#4a5d73
  • editorLineNumber.activeForeground#4CAF50
  • editorLineNumber.foreground#5c6b73
  • editorWarning.foreground#FFB74D
  • editorWhitespace.foreground#4a5d73
  • focusBorder#4CAF50
  • foreground#e8f0e8
  • gitDecoration.addedResourceForeground#4CAF50
  • gitDecoration.conflictingResourceForeground#FFC107
  • gitDecoration.deletedResourceForeground#FF4D3D
  • gitDecoration.ignoredResourceForeground#6b7d8a
  • gitDecoration.modifiedResourceForeground#FFB74D
  • gitDecoration.untrackedResourceForeground#4CAF50
  • input.background#2d3b4f
  • input.border#4a5d73
  • input.foreground#a8bba8
  • inputOption.activeBorder#4CAF50
  • list.activeSelectionBackground#4a5d73
  • list.activeSelectionForeground#FF4D3D
  • list.hoverBackground#2d3b4f
  • list.inactiveSelectionBackground#2d3b4f
  • panel.background#1a2332
  • panel.border#4a5d73
  • panelTitle.activeForeground#4CAF50
  • panelTitle.inactiveForeground#6b7d8a
  • progressBar.background#4CAF50
  • scrollbar.shadow#000000
  • scrollbarSlider.background#4a5d7380
  • scrollbarSlider.hoverBackground#5c6b73
  • sideBar.background#1a2332
  • sideBar.foreground#a8bba8
  • sideBarSectionHeader.background#2d3b4f
  • sideBarSectionHeader.foreground#4CAF50
  • statusBar.background#1a2332
  • statusBar.foreground#4CAF50
  • statusBarItem.hoverBackground#2d3b4f
  • tab.activeBackground#0f1419
  • tab.activeForeground#4CAF50
  • tab.border#4a5d73
  • tab.inactiveBackground#1a2332
  • tab.inactiveForeground#6b7d8a
  • terminal.ansiBlack#2d3b4f
  • terminal.ansiBlue#2980B9
  • terminal.ansiBrightBlack#5c6b73
  • terminal.ansiBrightBlue#5DADE2
  • terminal.ansiBrightCyan#4DD0E1
  • terminal.ansiBrightGreen#66BB6A
  • terminal.ansiBrightMagenta#AB47BC
  • terminal.ansiBrightRed#FF6B5A
  • terminal.ansiBrightWhite#e8f0e8
  • terminal.ansiBrightYellow#FFC107
  • terminal.ansiCyan#26C6DA
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#8E24AA
  • terminal.ansiRed#FF4D3D
  • terminal.ansiWhite#c7d2cc
  • terminal.ansiYellow#FFB74D
  • terminal.background#0f1419
  • terminal.foreground#c7d2cc
  • titleBar.activeBackground#1a2332
  • titleBar.activeForeground#a8bba8
  • titleBar.inactiveBackground#1a2332
  • titleBar.inactiveForeground#6b7d8a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6b7d8aitalic
string#4CAF50
constant.numeric#FFB74D
constant.language#e8f0e8
keyword#2980B9
storage.type#FF4D3D
storage.modifier#388E3C
entity.name.function#FFC107
entity.name.class#FF6B5A
entity.name.type#5DADE2
variable#c7d2cc
support.function#388E3C
support.class#AB47BC
markup.heading#FF4D3Dbold
markup.bold#FFB74Dbold
markup.italic#e8f0e8italic
meta.import, meta.export#4CAF50
punctuation.definition.tag#4CAF50
meta.tag, entity.name.tag#a8bba8

Shiki preview

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

Loading...