Skip to main content
Coding Theme

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#10b981
  • activityBar.background#f8fafc
  • activityBar.border#e2e8f0
  • activityBar.foreground#059669
  • activityBar.inactiveForeground#94a3b8
  • activityBarBadge.background#10b981
  • activityBarBadge.foreground#ffffff
  • badge.background#10b981
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#065f46
  • breadcrumb.focusForeground#065f46
  • breadcrumb.foreground#64748b
  • breadcrumbPicker.background#ffffff
  • button.background#10b981
  • button.foreground#ffffff
  • button.hoverBackground#059669
  • button.secondaryBackground#e2e8f0
  • button.secondaryForeground#334155
  • button.secondaryHoverBackground#cbd5e1
  • charts.yellow#d97706
  • descriptionForeground#64748b
  • dropdown.background#ffffff
  • dropdown.border#cbd5e1
  • dropdown.foreground#1e293b
  • editor.background#ffffff
  • editor.findMatchBackground#6ee7b7aa
  • editor.findMatchHighlightBackground#a7f3d060
  • editor.foreground#1e293b
  • editor.inactiveSelectionBackground#dcfce760
  • editor.lineHighlightBackground#f0fdf480
  • editor.lineHighlightBorder#dcfce7
  • editor.selectionBackground#bbf7d070
  • editor.selectionHighlightBackground#bbf7d050
  • editor.wordHighlightBackground#bbf7d060
  • editorBracketMatch.background#a7f3d050
  • editorBracketMatch.border#10b981
  • editorCursor.foreground#059669
  • editorGroup.border#e2e8f0
  • editorGroupHeader.border#00000000
  • editorGroupHeader.tabsBackground#e2e8f0
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#22c55e
  • editorGutter.background#ffffff
  • editorGutter.deletedBackground#f87171
  • editorGutter.modifiedBackground#38bdf8
  • editorIndentGuide.activeBackground#6ee7b7
  • editorIndentGuide.background#e2e8f0
  • editorLineNumber.activeForeground#059669
  • editorLineNumber.foreground#cbd5e1
  • errorForeground#ef4444
  • focusBorder#10b981
  • foreground#1e293b
  • input.background#ffffff
  • input.border#cbd5e1
  • input.foreground#1e293b
  • inputOption.activeBackground#dcfce7
  • inputOption.activeBorder#10b981
  • inputOption.activeForeground#065f46
  • inputValidation.errorBorder#ef4444
  • inputValidation.infoBorder#10b981
  • inputValidation.warningBorder#f59e0b
  • list.activeSelectionBackground#059669
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • list.focusBackground#059669
  • list.focusForeground#ffffff
  • list.focusHighlightForeground#ffffff
  • list.highlightForeground#059669
  • list.inactiveSelectionBackground#059669
  • list.inactiveSelectionForeground#ffffff
  • list.inactiveSelectionIconForeground#ffffff
  • panel.background#ffffff
  • panel.border#e2e8f0
  • panelTitle.activeBorder#10b981
  • panelTitle.activeForeground#065f46
  • panelTitle.inactiveForeground#64748b
  • pickerGroup.border#e2e8f0
  • pickerGroup.foreground#059669
  • quickInput.background#ffffff
  • quickInput.foreground#1e293b
  • selection.background#a7f3d080
  • sideBar.background#f8fafc
  • sideBar.border#e2e8f0
  • sideBar.foreground#1e293b
  • sideBarSectionHeader.background#e6f4ea
  • sideBarSectionHeader.border#e2e8f0
  • sideBarSectionHeader.foreground#065f46
  • sideBarTitle.foreground#065f46
  • statusBar.background#059669
  • statusBar.border#047857
  • statusBar.debuggingBackground#047857
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#059669
  • statusBarItem.activeBackground#065f46
  • statusBarItem.hoverBackground#047857
  • statusBarItem.remoteBackground#047857
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#059669
  • tab.activeBorder#059669
  • tab.activeBorderTop#00000000
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#00000000
  • tab.border#00000000
  • tab.dragAndDropBorder#059669
  • tab.hoverBackground#0f172a
  • tab.hoverBorder#0f172a
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#e2e8f0
  • tab.inactiveForeground#475569
  • tab.inactiveModifiedBorder#00000000
  • tab.lastPinnedBorder#00000000
  • tab.selectedBackground#059669
  • tab.selectedBorderTop#00000000
  • tab.selectedForeground#ffffff
  • tab.unfocusedActiveBackground#059669cc
  • tab.unfocusedActiveBorder#059669cc
  • tab.unfocusedActiveBorderTop#00000000
  • tab.unfocusedActiveForeground#ffffff
  • tab.unfocusedActiveModifiedBorder#00000000
  • tab.unfocusedHoverBackground#1e293b
  • tab.unfocusedHoverBorder#1e293b
  • tab.unfocusedHoverForeground#ffffff
  • tab.unfocusedInactiveBackground#e2e8f0
  • tab.unfocusedInactiveForeground#64748b
  • tab.unfocusedInactiveModifiedBorder#00000000
  • terminal.ansiBrightGreen#10b981
  • terminal.ansiGreen#059669
  • terminal.foreground#1e293b
  • terminalCursor.foreground#059669
  • titleBar.activeBackground#f8fafc
  • titleBar.activeForeground#1e293b
  • titleBar.border#e2e8f0
  • titleBar.inactiveBackground#f8fafc
  • titleBar.inactiveForeground#94a3b8
  • widget.shadow#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#94a3b8italic
keyword, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#059669bold
keyword.control#047857bold
string, string.quoted#0d9488
constant.numeric, constant.language.boolean#d97706
constant, constant.character, constant.other#0284c7
entity.name.function, meta.function-call, support.function#0f766ebold
entity.name.type, entity.name.class, support.type, support.class#15803dbold
variable, variable.other.readwrite, variable.parameter#334155
variable.other.property, variable.other.object.property, meta.object-literal.key, support.type.property-name#047857
punctuation, punctuation.terminator, punctuation.separator#64748b
entity.name.tag, meta.tag.sgml#059669
entity.other.attribute-name#0d9488
support.type.property-name.json#047857bold
Agent Cowork by Adrian Gruenberg - VS Code Theme