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
Aether - Sublime Coding Experience by Yonas Valentin Mougaard Kristensen - VS Code Theme