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#3AC987
  • activityBar.background#080D16
  • activityBar.foreground#3AC987
  • activityBar.inactiveForeground#2A5040
  • activityBarBadge.background#3AC987
  • activityBarBadge.foreground#0D1626
  • badge.background#3AC987
  • badge.foreground#0D1626
  • button.background#1F4D2F
  • button.border#3DD18660
  • button.foreground#3AC987
  • button.hoverBackground#2A6B3F
  • button.secondaryBackground#1A2836
  • button.secondaryForeground#D4E4E8
  • checkbox.background#1A2836
  • checkbox.border#3DD18660
  • checkbox.foreground#3AC987
  • debugToolBar.background#0B1420
  • dropdown.background#1A2836
  • dropdown.border#3DD18660
  • editor.background#0D1418
  • editor.findMatchBackground#E3C87880
  • editor.findMatchBorder#E3C878
  • editor.findMatchHighlightBackground#E3C87840
  • editor.foreground#D4E4E8
  • editor.lineHighlightBackground#1A283620
  • editor.lineHighlightBorder#3AC98725
  • editor.selectionBackground#3AC98730
  • editor.selectionHighlightBackground#3AC98720
  • editorBracketMatch.background#3AC98720
  • editorBracketMatch.border#3AC987
  • editorError.foreground#EF5350
  • editorGutter.addedBackground#3AC98780
  • editorGutter.deletedBackground#EF535080
  • editorGutter.modifiedBackground#E3C87880
  • editorHoverWidget.background#0B1420
  • editorHoverWidget.border#1A2836
  • editorHoverWidget.statusBarBackground#080D16
  • editorLineNumber.activeForeground#6C8A9E
  • editorLineNumber.foreground#5A5A5A
  • editorSuggestWidget.background#0B1420
  • editorSuggestWidget.border#1A2836
  • editorSuggestWidget.highlightForeground#3AC987
  • editorSuggestWidget.selectedBackground#1F4D2F
  • editorWarning.foreground#E3C878
  • editorWidget.background#0B1420
  • editorWidget.border#1A2836
  • errorForeground#EF5350
  • focusBorder#3AC987
  • foreground#D4E4E8
  • input.background#1A2836
  • input.border#3DD18660
  • input.placeholderForeground#3A4856
  • inputOption.activeBackground#1F4D2F
  • inputOption.activeForeground#3AC987
  • list.activeSelectionBackground#1F4D2F
  • list.activeSelectionForeground#3AC987
  • list.focusBackground#1A283640
  • list.focusForeground#D4E4E8
  • list.highlightForeground#3AC987
  • list.hoverBackground#1A283640
  • list.inactiveSelectionBackground#1A2836
  • notificationCenterHeader.background#0B1420
  • notifications.background#1A2836
  • notifications.border#1A2836
  • panel.background#0B1420
  • panel.border#1A283650
  • panelTitle.activeForeground#3AC987
  • peekView.border#3AC987
  • peekViewEditor.background#0D1626
  • peekViewResult.background#0B1420
  • peekViewResult.selectionBackground#1F4D2F
  • peekViewTitle.background#0B1420
  • progressBar.background#3AC987
  • scrollbarSlider.activeBackground#3AC98780
  • scrollbarSlider.background#3AC98730
  • scrollbarSlider.hoverBackground#3AC98750
  • settings.focusedRowBackground#1A283620
  • settings.focusedRowBorder#3AC987
  • settings.headerForeground#3AC987
  • settings.textInputBackground#1A2836
  • sideBar.background#0B1420
  • statusBar.background#0B1420
  • statusBar.border#1A283650
  • statusBar.debuggingBackground#1F4D2F
  • statusBar.debuggingForeground#3DD186
  • statusBar.foreground#7D8A98
  • statusBarItem.remoteBackground#1F4D2F
  • statusBarItem.remoteForeground#3DD186
  • tab.activeBackground#0D1626
  • tab.activeBorder#3AC987
  • tab.activeForeground#E6F1F5
  • tab.border#1A2836
  • tab.inactiveBackground#080D16
  • tab.inactiveForeground#6C7A90
  • terminal.ansiBlue#7FA8E8
  • terminal.ansiBrightGreen#44FF88
  • terminal.ansiCyan#4EC9B0
  • terminal.ansiGreen#3AC987
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#EF5350
  • terminal.ansiWhite#D4E4E8
  • terminal.ansiYellow#E3C878

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.control, storage.type, storage.modifier, keyword.operator, variable.language.this, variable.language.super#7FA8E8
entity.name.function#3AC987italic bold
entity.name.class, support.class.component#3AC987bold
constant.numeric, constant.language#E3C878
string, punctuation.definition.string#A0B3CC
variable.other.readwrite, variable, variable.parameter#D4E4E8
entity.name.tag, meta.object-literal.key, string.unquoted.label.js, variable.other.object.key.js#8AABB8
variable.object.property, support.variable.property, variable.other.object.property#A8C5E0
entity.name.type, support.type, support.class#4EC9B0
keyword.operator.type, storage.modifier.satisfies#7FA8E8
comment, punctuation.definition.comment#657B8Aitalic
invalid, invalid.illegal#EF5350bold underline