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.activeBackground#0d140d50
  • activityBar.activeBorder#4ade80
  • activityBar.background#0a0f0a
  • activityBar.border#0d140d
  • activityBar.foreground#4ade80
  • activityBar.inactiveForeground#1a2f1a
  • activityBarBadge.background#22c55e
  • activityBarBadge.foreground#000000
  • editor.background#0a0f0a
  • editor.findMatchBackground#fbbf2440
  • editor.findMatchHighlightBackground#fbbf2420
  • editor.foreground#d4f4dd
  • editor.hoverHighlightBackground#134e1330
  • editor.inactiveSelectionBackground#134e1350
  • editor.lineHighlightBackground#0f1a0f
  • editor.lineHighlightBorder#1a2f1a30
  • editor.selectionBackground#134e13
  • editor.selectionHighlightBackground#134e1330
  • editor.wordHighlightBackground#134e1330
  • editor.wordHighlightStrongBackground#134e1350
  • editorBracketHighlight.foreground1#4ade80
  • editorBracketHighlight.foreground2#fbbf24
  • editorBracketHighlight.foreground3#60a5fa
  • editorBracketHighlight.foreground4#c084fc
  • editorBracketHighlight.foreground5#f87171
  • editorBracketHighlight.foreground6#fde047
  • editorBracketMatch.background#4ade8030
  • editorBracketMatch.border#4ade80
  • editorCursor.foreground#4ade80
  • editorGutter.addedBackground#22c55e
  • editorGutter.background#0a0f0a
  • editorGutter.deletedBackground#f87171
  • editorGutter.modifiedBackground#4ade80
  • editorHoverWidget.background#0d140d
  • editorHoverWidget.border#1a2f1a
  • editorIndentGuide.activeBackground#22c55e40
  • editorIndentGuide.background#1a2f1a40
  • editorLineNumber.activeForeground#4ade80
  • editorLineNumber.foreground#1a2f1a
  • editorSuggestWidget.background#0d140d
  • editorSuggestWidget.border#1a2f1a
  • editorSuggestWidget.foreground#d4f4dd
  • editorSuggestWidget.highlightForeground#4ade80
  • editorSuggestWidget.selectedBackground#134e13
  • editorWhitespace.foreground#1a2f1a60
  • editorWidget.background#0d140d
  • editorWidget.border#1a2f1a
  • editorWidget.foreground#d4f4dd
  • gitDecoration.addedResourceForeground#4ade80
  • gitDecoration.conflictingResourceForeground#f87171
  • gitDecoration.deletedResourceForeground#f87171
  • gitDecoration.ignoredResourceForeground#1a2f1a
  • gitDecoration.modifiedResourceForeground#60a5fa
  • gitDecoration.untrackedResourceForeground#fbbf24
  • list.activeSelectionBackground#134e13
  • list.activeSelectionForeground#ffffff
  • list.highlightForeground#4ade80
  • list.hoverBackground#0d140d
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#0f1a0f
  • list.inactiveSelectionForeground#d4f4dd
  • sideBar.background#0b110b
  • sideBar.border#0a0f0a
  • sideBar.foreground#a8d5b8
  • sideBarSectionHeader.background#0a0f0a
  • sideBarSectionHeader.border#0d140d
  • sideBarSectionHeader.foreground#4ade80
  • sideBarTitle.foreground#d4f4dd
  • statusBar.background#0a0f0a
  • statusBar.border#0d140d
  • statusBar.debuggingBackground#f87171
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#a8d5b8
  • statusBar.noFolderBackground#0a0f0a
  • tab.activeBackground#0a0f0a
  • tab.activeBorderTop#4ade80
  • tab.activeForeground#ffffff
  • tab.border#0a0f0a
  • tab.hoverBackground#0d140d
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#0b110b
  • tab.inactiveForeground#a8d5b8
  • terminal.ansiBlack#0a0f0a
  • terminal.ansiBlue#60a5fa
  • terminal.ansiBrightBlack#1a2f1a
  • terminal.ansiBrightBlue#93c5fd
  • terminal.ansiBrightCyan#67e8f9
  • terminal.ansiBrightGreen#86efac
  • terminal.ansiBrightMagenta#d8b4fe
  • terminal.ansiBrightRed#fca5a5
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#fde047
  • terminal.ansiCyan#22d3ee
  • terminal.ansiGreen#4ade80
  • terminal.ansiMagenta#c084fc
  • terminal.ansiRed#f87171
  • terminal.ansiWhite#d4f4dd
  • terminal.ansiYellow#fbbf24
  • terminal.background#0a0f0a
  • terminal.foreground#d4f4dd
  • terminalCursor.foreground#4ade80
  • titleBar.activeBackground#0a0f0a
  • titleBar.activeForeground#d4f4dd
  • titleBar.border#0d140d
  • titleBar.inactiveBackground#0a0f0a
  • titleBar.inactiveForeground#a8d5b8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5f7c5fitalic
string, string.quoted#86efac—
string.template, punctuation.definition.template-expression#22d3ee—
constant.numeric#fbbf24—
constant.language.boolean#fbbf24bold
keyword, storage.type, storage.modifier#c084fcbold
keyword.operator#22d3ee—
entity.name.function, meta.function-call, support.function#4ade80bold
entity.name.class, entity.name.type, support.class#fbbf24bold
variable, meta.definition.variable#f87171—
variable.parameter#fde047italic
variable.other.property, support.variable.property#86efac—
constant, variable.other.constant#fbbf24bold
entity.name.tag, meta.tag#f87171—
entity.other.attribute-name#fbbf24italic