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#33A6FF
  • activityBar.background#0A111F
  • activityBar.foreground#33A6FF
  • activityBar.inactiveForeground#2A5070
  • activityBarBadge.background#33A6FF
  • activityBarBadge.foreground#0A111F
  • badge.background#33A6FF
  • badge.foreground#0A111F
  • button.background#1A4A7F
  • button.border#33A6FF60
  • button.foreground#33A6FF
  • button.hoverBackground#2A6B9C
  • button.secondaryBackground#1A2836
  • button.secondaryForeground#E1E9F5
  • checkbox.background#1A2836
  • checkbox.border#33A6FF60
  • checkbox.foreground#33A6FF
  • debugToolBar.background#0A111F
  • dropdown.background#1A2836
  • dropdown.border#33A6FF60
  • editor.background#0B1320
  • editor.findMatchBackground#FFC94080
  • editor.findMatchBorder#FFC940
  • editor.findMatchHighlightBackground#FFC94040
  • editor.foreground#E1E9F5
  • editor.lineHighlightBackground#1A283620
  • editor.lineHighlightBorder#33A6FF25
  • editor.selectionBackground#33A6FF30
  • editor.selectionHighlightBackground#33A6FF20
  • editorBracketMatch.background#33A6FF20
  • editorBracketMatch.border#33A6FF
  • editorError.foreground#FF4D4D
  • editorGutter.addedBackground#33A6FF80
  • editorGutter.deletedBackground#FF4D4D80
  • editorGutter.modifiedBackground#FFC94080
  • editorHoverWidget.background#0A111F
  • editorHoverWidget.border#1A2836
  • editorHoverWidget.statusBarBackground#0A111F
  • editorLineNumber.activeForeground#6C8A9E
  • editorLineNumber.foreground#5A5A5A
  • editorSuggestWidget.background#0A111F
  • editorSuggestWidget.border#1A2836
  • editorSuggestWidget.highlightForeground#33A6FF
  • editorSuggestWidget.selectedBackground#1A4A7F
  • editorWarning.foreground#FFC940
  • editorWidget.background#0A111F
  • editorWidget.border#1A2836
  • errorForeground#FF4D4D
  • focusBorder#33A6FF
  • foreground#E1E9F5
  • input.background#1A2836
  • input.border#33A6FF60
  • input.placeholderForeground#4A5866
  • inputOption.activeBackground#1A4A7F
  • inputOption.activeForeground#33A6FF
  • list.activeSelectionBackground#1A4A7F
  • list.activeSelectionForeground#33A6FF
  • list.focusBackground#1A283640
  • list.focusForeground#E1E9F5
  • list.highlightForeground#33A6FF
  • list.hoverBackground#1A283640
  • list.inactiveSelectionBackground#1A2836
  • notificationCenterHeader.background#0A111F
  • notifications.background#1A2836
  • notifications.border#1A2836
  • panel.background#0A111F
  • panel.border#1A283650
  • panelTitle.activeForeground#33A6FF
  • peekView.border#33A6FF
  • peekViewEditor.background#0B1320
  • peekViewResult.background#0A111F
  • peekViewResult.selectionBackground#1A4A7F
  • peekViewTitle.background#0A111F
  • progressBar.background#33A6FF
  • scrollbarSlider.activeBackground#33A6FF80
  • scrollbarSlider.background#33A6FF30
  • scrollbarSlider.hoverBackground#33A6FF50
  • settings.focusedRowBackground#1A283620
  • settings.focusedRowBorder#33A6FF
  • settings.headerForeground#33A6FF
  • settings.textInputBackground#1A2836
  • sideBar.background#0A111F
  • statusBar.background#0A111F
  • statusBar.border#1A283650
  • statusBar.debuggingBackground#1A4A7F
  • statusBar.debuggingForeground#33A6FF
  • statusBar.foreground#7D8A98
  • statusBarItem.remoteBackground#1A4A7F
  • statusBarItem.remoteForeground#33A6FF
  • tab.activeBackground#0B1320
  • tab.activeBorder#33A6FF
  • tab.activeForeground#E6F1F5
  • tab.border#1A2836
  • tab.inactiveBackground#0A111F
  • tab.inactiveForeground#6C7A90
  • terminal.ansiBlue#33A6FF
  • terminal.ansiBrightGreen#44FF88
  • terminal.ansiCyan#7FDBCA
  • terminal.ansiGreen#33A6FF
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#FF4D4D
  • terminal.ansiWhite#E1E9F5
  • terminal.ansiYellow#FFC940

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#33A6FFitalic bold
entity.name.class, support.class.component#33A6FFbold
constant.numeric, constant.language#FFC940—
string, punctuation.definition.string#A0B3CC—
variable.other.readwrite, variable, variable.parameter#E1E9F5—
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#E1E9F5—
entity.name.type, support.type, support.class#8FEBD8—
keyword.operator.type, storage.modifier.satisfies#9DAABF—
comment, punctuation.definition.comment#657B8Aitalic
invalid, invalid.illegal#FF5555bold underline