Skip to main content
Coding Theme

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.activeBorder#6ee7b7
  • activityBar.background#0a0d0a
  • activityBar.border#111611
  • activityBar.foreground#6ee7b7
  • activityBar.inactiveForeground#1f2a1f
  • activityBarBadge.background#34d399
  • activityBarBadge.foreground#0a0d0a
  • editor.background#0a0d0a
  • editor.findMatchBackground#fbbf2440
  • editor.findMatchHighlightBackground#fbbf2420
  • editor.foreground#e0f2e9
  • editor.inactiveSelectionBackground#065f4650
  • editor.lineHighlightBackground#111611
  • editor.lineHighlightBorder#1f2a1f30
  • editor.selectionBackground#065f46
  • editor.selectionHighlightBackground#065f4630
  • editor.wordHighlightBackground#065f4630
  • editor.wordHighlightStrongBackground#065f4650
  • editorBracketHighlight.foreground1#6ee7b7
  • editorBracketHighlight.foreground2#fde68a
  • editorBracketHighlight.foreground3#93c5fd
  • editorBracketHighlight.foreground4#c4b5fd
  • editorBracketHighlight.foreground5#fca5a5
  • editorBracketHighlight.foreground6#fed7aa
  • editorBracketMatch.background#6ee7b730
  • editorBracketMatch.border#6ee7b7
  • editorCursor.foreground#6ee7b7
  • editorGutter.addedBackground#34d399
  • editorGutter.background#0a0d0a
  • editorGutter.deletedBackground#f87171
  • editorGutter.modifiedBackground#60a5fa
  • editorIndentGuide.activeBackground#34d39940
  • editorIndentGuide.background#1f2a1f40
  • editorLineNumber.activeForeground#6ee7b7
  • editorLineNumber.foreground#1f2a1f
  • editorSuggestWidget.background#111611
  • editorSuggestWidget.border#1f2a1f
  • editorSuggestWidget.highlightForeground#6ee7b7
  • editorSuggestWidget.selectedBackground#065f46
  • editorWhitespace.foreground#1f2a1f60
  • editorWidget.background#111611
  • editorWidget.border#1f2a1f
  • gitDecoration.addedResourceForeground#34d399
  • gitDecoration.deletedResourceForeground#f87171
  • gitDecoration.modifiedResourceForeground#60a5fa
  • gitDecoration.untrackedResourceForeground#fbbf24
  • list.activeSelectionBackground#065f46
  • list.activeSelectionForeground#ffffff
  • list.highlightForeground#6ee7b7
  • list.hoverBackground#111611
  • list.inactiveSelectionBackground#111611
  • sideBar.background#080b08
  • sideBar.border#0a0d0a
  • sideBar.foreground#cbd5e1
  • sideBarSectionHeader.background#0a0d0a
  • sideBarSectionHeader.foreground#6ee7b7
  • sideBarTitle.foreground#e0f2e9
  • statusBar.background#0a0d0a
  • statusBar.border#111611
  • statusBar.debuggingBackground#dc2626
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#cbd5e1
  • tab.activeBackground#0a0d0a
  • tab.activeBorderTop#6ee7b7
  • tab.activeForeground#ffffff
  • tab.border#0a0d0a
  • tab.inactiveBackground#080b08
  • tab.inactiveForeground#cbd5e1
  • terminal.ansiBlack#111611
  • terminal.ansiBlue#60a5fa
  • terminal.ansiBrightBlack#374151
  • terminal.ansiBrightBlue#93c5fd
  • terminal.ansiBrightCyan#a5f3fc
  • terminal.ansiBrightGreen#6ee7b7
  • terminal.ansiBrightMagenta#c4b5fd
  • terminal.ansiBrightRed#fca5a5
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#fde68a
  • terminal.ansiCyan#67e8f9
  • terminal.ansiGreen#34d399
  • terminal.ansiMagenta#a78bfa
  • terminal.ansiRed#f87171
  • terminal.ansiWhite#e0f2e9
  • terminal.ansiYellow#fbbf24
  • terminal.background#0a0d0a
  • terminal.foreground#e0f2e9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#64748bitalic
string#6ee7b7—
string.template#67e8f9—
constant.numeric#fbbf24—
keyword#a78bfabold
keyword.operator#67e8f9—
entity.name.function, support.function#a7f3d0bold
entity.name.class, entity.name.type#fde68abold
variable#fca5a5—
variable.other.property#bfdbfe—