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#00C5C5
  • activityBar.background#12181F
  • activityBar.foreground#00C5C5
  • activityBar.inactiveForeground#005050
  • activityBarBadge.background#00C5C5
  • activityBarBadge.foreground#12181F
  • badge.background#00C5C5
  • badge.foreground#12181F
  • button.background#004D4D
  • button.border#00C5C560
  • button.foreground#00C5C5
  • button.hoverBackground#006B6B
  • button.secondaryBackground#1A2836
  • button.secondaryForeground#C5D1DE
  • checkbox.background#1A2836
  • checkbox.border#00C5C560
  • checkbox.foreground#00C5C5
  • debugToolBar.background#12181F
  • dropdown.background#1A2836
  • dropdown.border#00C5C560
  • editor.background#161D26
  • editor.findMatchBackground#FF7F5080
  • editor.findMatchBorder#FF7F50
  • editor.findMatchHighlightBackground#FF7F5040
  • editor.foreground#C5D1DE
  • editor.lineHighlightBackground#1A283620
  • editor.lineHighlightBorder#00C5C525
  • editor.selectionBackground#00C5C530
  • editor.selectionHighlightBackground#00C5C520
  • editorBracketMatch.background#00C5C520
  • editorBracketMatch.border#00C5C5
  • editorError.foreground#FF5555
  • editorGutter.addedBackground#00C5C580
  • editorGutter.deletedBackground#FF555580
  • editorGutter.modifiedBackground#FF7F5080
  • editorHoverWidget.background#12181F
  • editorHoverWidget.border#1A2836
  • editorHoverWidget.statusBarBackground#161D26
  • editorLineNumber.activeForeground#6C8A9E
  • editorLineNumber.foreground#5A5A5A
  • editorSuggestWidget.background#12181F
  • editorSuggestWidget.border#1A2836
  • editorSuggestWidget.highlightForeground#00C5C5
  • editorSuggestWidget.selectedBackground#004D4D
  • editorWarning.foreground#FF7F50
  • editorWidget.background#12181F
  • editorWidget.border#1A2836
  • errorForeground#FF5555
  • focusBorder#00C5C5
  • foreground#C5D1DE
  • input.background#1A2836
  • input.border#00C5C560
  • input.placeholderForeground#3A4856
  • inputOption.activeBackground#004D4D
  • inputOption.activeForeground#00C5C5
  • list.activeSelectionBackground#004D4D
  • list.activeSelectionForeground#00C5C5
  • list.focusBackground#1A283640
  • list.focusForeground#C5D1DE
  • list.highlightForeground#00C5C5
  • list.hoverBackground#1A283640
  • list.inactiveSelectionBackground#1A2836
  • notificationCenterHeader.background#12181F
  • notifications.background#1A2836
  • notifications.border#1A2836
  • panel.background#12181F
  • panel.border#1A283650
  • panelTitle.activeForeground#00C5C5
  • peekView.border#00C5C5
  • peekViewEditor.background#161D26
  • peekViewResult.background#12181F
  • peekViewResult.selectionBackground#004D4D
  • peekViewTitle.background#12181F
  • progressBar.background#00C5C5
  • scrollbarSlider.activeBackground#00C5C580
  • scrollbarSlider.background#00C5C530
  • scrollbarSlider.hoverBackground#00C5C550
  • settings.focusedRowBackground#1A283620
  • settings.focusedRowBorder#00C5C5
  • settings.headerForeground#00C5C5
  • settings.textInputBackground#1A2836
  • sideBar.background#12181F
  • statusBar.background#12181F
  • statusBar.border#1A283650
  • statusBar.debuggingBackground#004D4D
  • statusBar.debuggingForeground#00C5C5
  • statusBar.foreground#7D8A98
  • statusBarItem.remoteBackground#004D4D
  • statusBarItem.remoteForeground#00C5C5
  • tab.activeBackground#161D26
  • tab.activeBorder#00C5C5
  • tab.activeForeground#E6F1F5
  • tab.border#1A2836
  • tab.inactiveBackground#12181F
  • tab.inactiveForeground#8C9AAA
  • terminal.ansiBlue#58A6FF
  • terminal.ansiBrightGreen#1AFFF3
  • terminal.ansiCyan#00C5C5
  • terminal.ansiGreen#00C5C5
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#C5D1DE
  • terminal.ansiYellow#FF7F50

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.control, storage.type, storage.modifier, keyword.operator, variable.language.this, variable.language.super#9DAABF
entity.name.function#00C5C5italic bold
entity.name.class, support.class.component#00C5C5bold
constant.numeric, constant.language#FF7F50
string, punctuation.definition.string#B5C8E0
variable.other.readwrite, variable, variable.parameter#C5D1DE
entity.name.tag, meta.object-literal.key, string.unquoted.label.js, variable.other.object.key.js#6C7A90
variable.object.property, support.variable.property, variable.other.object.property#C5D1DE
entity.name.type, support.type, support.class#58A6FF
keyword.operator.type, storage.modifier.satisfies#9DAABF
comment, punctuation.definition.comment#657B8Aitalic
invalid, invalid.illegal#FF5555bold underline