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.background#101820
  • activityBar.foreground#D6EFFF
  • activityBar.inactiveForeground#8FA6B8
  • activityBarBadge.background#00A8D1
  • activityBarBadge.foreground#001018
  • badge.background#007FAF
  • badge.foreground#001018
  • descriptionForeground#8FA6B8
  • diffEditor.diagonalFill#223845
  • diffEditor.insertedLineBackground#4CD9641F
  • diffEditor.insertedTextBackground#4CD96433
  • diffEditor.removedLineBackground#FF5C5C1F
  • diffEditor.removedTextBackground#FF5C5C33
  • dropdown.background#13202A
  • dropdown.border#2A4352
  • dropdown.foreground#D6EFFF
  • editor.background#0A0F14
  • editor.findMatchBackground#007FAFAA
  • editor.findMatchHighlightBackground#007FAF55
  • editor.foreground#D6EFFF
  • editor.inactiveSelectionBackground#002A3888
  • editor.lineHighlightBackground#13202A
  • editor.selectionBackground#003A4D
  • editor.selectionHighlightBackground#12313E88
  • editor.wordHighlightBackground#14344288
  • editor.wordHighlightStrongBackground#1A465788
  • editorBracketMatch.background#00A8D122
  • editorBracketMatch.border#00A8D1
  • editorCursor.foreground#00A8D1
  • editorError.foreground#FF5C5C
  • editorGutter.addedBackground#4CD964
  • editorGutter.deletedBackground#FF5C5C
  • editorGutter.modifiedBackground#00A8D1
  • editorHint.foreground#8FA6B8
  • editorHoverWidget.background#13202A
  • editorHoverWidget.border#2A4352
  • editorIndentGuide.activeBackground1#2A4352
  • editorIndentGuide.background1#1A2B36
  • editorInfo.foreground#00A8D1
  • editorLineNumber.activeForeground#8FA6B8
  • editorLineNumber.foreground#4A6A80
  • editorWarning.foreground#FFC857
  • editorWhitespace.foreground#1F313D
  • errorForeground#FF5C5C
  • focusBorder#00A8D1
  • foreground#D6EFFF
  • gitDecoration.addedResourceForeground#4CD964
  • gitDecoration.deletedResourceForeground#FF5C5C
  • gitDecoration.ignoredResourceForeground#4A6A80
  • gitDecoration.modifiedResourceForeground#00A8D1
  • gitDecoration.untrackedResourceForeground#6AD3E6
  • input.background#13202A
  • input.border#2A4352
  • input.foreground#D6EFFF
  • input.placeholderForeground#4A6A80
  • inputOption.activeBorder#00A8D1
  • list.activeSelectionBackground#12313E
  • list.activeSelectionForeground#D6EFFF
  • list.focusOutline#00A8D1
  • list.highlightForeground#39BDD9
  • list.hoverBackground#13202A
  • list.inactiveSelectionBackground#0F2732
  • list.inactiveSelectionForeground#D6EFFF
  • notifications.background#13202A
  • notifications.border#2A4352
  • notifications.foreground#D6EFFF
  • panel.background#101820
  • panel.border#223845
  • panelTitle.activeBorder#00A8D1
  • panelTitle.activeForeground#D6EFFF
  • panelTitle.inactiveForeground#8FA6B8
  • peekView.border#00A8D1
  • peekViewEditor.background#0A0F14
  • peekViewResult.background#101820
  • peekViewTitle.background#13202A
  • scrollbarSlider.activeBackground#4A6A80AA
  • scrollbarSlider.background#2A435255
  • scrollbarSlider.hoverBackground#3A5C6E88
  • sideBar.background#0D141A
  • sideBar.foreground#8FA6B8
  • sideBarSectionHeader.background#101820
  • sideBarSectionHeader.foreground#D6EFFF
  • sideBarTitle.foreground#D6EFFF
  • statusBar.background#00A8D1
  • statusBar.border#007FAF
  • statusBar.debuggingBackground#FFC857
  • statusBar.debuggingForeground#1A1300
  • statusBar.foreground#001018
  • statusBar.noFolderBackground#007FAF
  • statusBar.noFolderForeground#001018
  • tab.activeBackground#0A0F14
  • tab.activeBorderTop#00A8D1
  • tab.activeForeground#D6EFFF
  • tab.border#101820
  • tab.inactiveBackground#0D141A
  • tab.inactiveForeground#8FA6B8
  • tab.unfocusedActiveBorderTop#007FAF
  • terminal.ansiBlack#0A0F14
  • terminal.ansiBlue#00A8D1
  • terminal.ansiBrightBlack#4A6A80
  • terminal.ansiBrightBlue#49C7DF
  • terminal.ansiBrightCyan#86D7E3
  • terminal.ansiBrightGreen#8AF5A1
  • terminal.ansiBrightMagenta#8FDDEA
  • terminal.ansiBrightRed#FF8A8A
  • terminal.ansiBrightWhite#F0FAFF
  • terminal.ansiBrightYellow#FFD98F
  • terminal.ansiCyan#39BDD9
  • terminal.ansiGreen#4CD964
  • terminal.ansiMagenta#6AD3E6
  • terminal.ansiRed#FF5C5C
  • terminal.ansiWhite#D6EFFF
  • terminal.ansiYellow#FFC857
  • terminal.background#0A0F14
  • terminal.foreground#D6EFFF
  • terminalCursor.foreground#00A8D1
  • titleBar.activeBackground#101820
  • titleBar.activeForeground#D6EFFF
  • titleBar.inactiveBackground#0D141A
  • titleBar.inactiveForeground#8FA6B8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage, storage.type#00A8D1
string#39BDD9
comment, punctuation.definition.comment#4A6A80
entity.name.function, meta.function-call, support.function#49C7DFbold
variable, variable.other.readwrite, variable.language#D6EFFF
constant.numeric, constant.language, constant.character.escape#6AD3E6
entity.name.type, entity.name.class, support.type, storage.type.class#39BDD9bold
keyword.operator, punctuation.separator.key-value#00A8D1
entity.name.function.decorator, meta.decorator, punctuation.decorator, storage.type.annotation, entity.other.attribute-name, meta.attribute#D9A840
entity.other.inherited-class#39BDD9
invalid, invalid.illegal#FF5C5C
markup.heading, entity.name.section#49C7DFbold
markup.bold, markup.italic#D6EFFF
markup.underline.link, string.other.link#00A8D1
support.type.property-name.json, meta.object-literal.key#8FA6B8
entity.name.tag#00A8D1
punctuation.definition.template-expression#D9A840
Kong Strong Zero Blue by capmar - VS Code Theme