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#58DCFF
  • activityBar.activeFocusBorder#58DCFF
  • activityBar.background#193442
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#8F8496
  • activityBarBadge.background#58DCFF
  • activityBarBadge.foreground#193442
  • badge.background#58DCFF
  • badge.foreground#193442
  • breadcrumb.background#F1FBFF
  • breadcrumb.focusForeground#203B46
  • breadcrumb.foreground#62586A
  • button.background#1698BA
  • button.foreground#FFFFFF
  • button.hoverBackground#58DCFF
  • button.secondaryBackground#477184
  • button.secondaryForeground#FFFFFF
  • checkbox.background#193442
  • checkbox.border#477184
  • checkbox.foreground#F4EEF8
  • commandCenter.background#284D60
  • commandCenter.border#477184
  • commandCenter.foreground#F4EEF8
  • descriptionForeground#A89EAE
  • dropdown.background#284D60
  • dropdown.border#477184
  • dropdown.foreground#F4EEF8
  • editor.background#F1FBFF
  • editor.foreground#203B46
  • editor.inactiveSelectionBackground#58DCFF2B
  • editor.lineHighlightBackground#58DCFF0C
  • editor.selectionBackground#58DCFF4D
  • editor.selectionHighlightBackground#58DCFF24
  • editor.wordHighlightBackground#12648220
  • editor.wordHighlightStrongBackground#8F345A24
  • editorBracketHighlight.foreground1#623B91
  • editorBracketHighlight.foreground2#126482
  • editorBracketHighlight.foreground3#246B4E
  • editorBracketHighlight.foreground4#93471F
  • editorBracketHighlight.foreground5#8F345A
  • editorBracketHighlight.foreground6#795700
  • editorBracketMatch.background#58DCFF25
  • editorBracketMatch.border#58DCFF
  • editorCursor.foreground#1698BA
  • editorError.foreground#E94362
  • editorGroup.border#477184
  • editorGroupHeader.noTabsBackground#193442
  • editorGroupHeader.tabsBackground#193442
  • editorGutter.addedBackground#66D39A
  • editorGutter.deletedBackground#FF7892
  • editorGutter.modifiedBackground#62C7F2
  • editorHint.foreground#247A53
  • editorHoverWidget.background#284D60
  • editorHoverWidget.border#477184
  • editorHoverWidget.foreground#F4EEF8
  • editorIndentGuide.activeBackground1#58DCFF88
  • editorIndentGuide.background1#DDD3E2
  • editorInfo.foreground#08749A
  • editorLineNumber.activeForeground#62586A
  • editorLineNumber.foreground#918697
  • editorSuggestWidget.background#284D60
  • editorSuggestWidget.foreground#F4EEF8
  • editorSuggestWidget.highlightForeground#58DCFF
  • editorSuggestWidget.selectedBackground#58DCFF35
  • editorWarning.foreground#D78B00
  • editorWhitespace.foreground#DDD3E2
  • editorWidget.background#284D60
  • editorWidget.border#477184
  • editorWidget.foreground#F4EEF8
  • errorForeground#FF8FA3
  • focusBorder#58DCFF
  • foreground#F4EEF8
  • gitDecoration.addedResourceForeground#73D99F
  • gitDecoration.deletedResourceForeground#F7768E
  • gitDecoration.ignoredResourceForeground#827889
  • gitDecoration.modifiedResourceForeground#61BEEA
  • gitDecoration.untrackedResourceForeground#93E7B7
  • icon.foreground#D7CEDD
  • input.background#193442
  • input.border#477184
  • input.foreground#F4EEF8
  • input.placeholderForeground#958A9D
  • inputOption.activeBackground#58DCFF28
  • inputOption.activeBorder#58DCFF
  • list.activeSelectionBackground#58DCFF32
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#58DCFF
  • list.highlightForeground#58DCFF
  • list.hoverBackground#58DCFF15
  • list.inactiveSelectionBackground#58DCFF20
  • list.inactiveSelectionForeground#F4EEF8
  • menu.background#284D60
  • menu.border#477184
  • menu.foreground#F4EEF8
  • menu.selectionBackground#58DCFF35
  • menu.selectionForeground#FFFFFF
  • minimap.background#F1FBFF
  • notificationCenter.border#477184
  • notifications.background#284D60
  • notifications.border#477184
  • notifications.foreground#F4EEF8
  • panel.background#284D60
  • panel.border#477184
  • panel.foreground#F4EEF8
  • panelTitle.activeBorder#58DCFF
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#A89EAE
  • peekView.border#58DCFF
  • peekViewEditor.background#F1FBFF
  • peekViewEditor.matchHighlightBackground#58DCFF45
  • peekViewResult.background#214354
  • peekViewResult.foreground#F4EEF8
  • peekViewResult.matchHighlightBackground#58DCFF3D
  • progressBar.background#58DCFF
  • quickInput.background#284D60
  • quickInput.foreground#F4EEF8
  • quickInputList.focusBackground#58DCFF35
  • quickInputList.focusForeground#FFFFFF
  • quickInputList.focusIconForeground#58DCFF
  • scrollbarSlider.activeBackground#58DCFF75
  • scrollbarSlider.background#58DCFF30
  • scrollbarSlider.hoverBackground#58DCFF55
  • selection.background#58DCFF45
  • sideBar.background#214354
  • sideBar.border#477184
  • sideBar.foreground#F4EEF8
  • sideBarSectionHeader.background#284D60
  • sideBarSectionHeader.border#477184
  • sideBarSectionHeader.foreground#F7F1FA
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#1698BA
  • statusBar.border#58DCFF
  • statusBar.debuggingBackground#A4375E
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#193442
  • statusBarItem.hoverBackground#FFFFFF18
  • statusBarItem.remoteBackground#58DCFF
  • statusBarItem.remoteForeground#193442
  • tab.activeBackground#F1FBFF
  • tab.activeBorderTop#58DCFF
  • tab.activeForeground#203B46
  • tab.border#477184
  • tab.hoverBackground#284D60
  • tab.inactiveBackground#193442
  • tab.inactiveForeground#A89EAE
  • tab.unfocusedActiveBorderTop#58DCFF99
  • terminal.ansiBlack#302A36
  • terminal.ansiBlue#79CEFF
  • terminal.ansiBrightBlack#766D7C
  • terminal.ansiBrightBlue#A9DFFF
  • terminal.ansiBrightCyan#A2EEE3
  • terminal.ansiBrightGreen#A5F1C7
  • terminal.ansiBrightMagenta#E5C5FF
  • terminal.ansiBrightRed#FFB0BD
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFE2A0
  • terminal.ansiCyan#72E2D2
  • terminal.ansiGreen#84E6B1
  • terminal.ansiMagenta#D6A6FF
  • terminal.ansiRed#FF8FA3
  • terminal.ansiWhite#EDE6F1
  • terminal.ansiYellow#FFD477
  • terminal.background#284D60
  • terminal.foreground#F4EEF8
  • terminal.selectionBackground#58DCFF42
  • terminalCursor.foreground#58DCFF
  • textLink.activeForeground#FFFFFF
  • textLink.foreground#58DCFF
  • titleBar.activeBackground#193442
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#193442
  • titleBar.inactiveForeground#8F8496
  • tree.indentGuidesStroke#477184

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring#675E70italic
string, string.quoted, constant.other.symbol#246B4E—
constant.character.escape, constant.other.placeholder#176E64bold
constant.numeric, constant.language, constant.character#93471F—
keyword, keyword.control, storage.type, storage.modifier#623B91bold
entity.name.function, support.function, meta.function-call, variable.function#126482—
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, support.type, support.class, support.type.primitive#795700—
variable, variable.other.readwrite, variable.other.constant, variable.language#372F40—
variable.other.property, support.variable.property, meta.object-literal.key, meta.mapping.key, entity.name.tag.yaml#8F345A—
variable.parameter, meta.function.parameters variable, meta.parameters variable#8D4425italic
entity.name.tag, support.class.component, punctuation.definition.tag#9C2D50—
entity.other.attribute-name, support.type.property-name#735100—
meta.decorator, meta.annotation, punctuation.decorator, entity.name.function.decorator#82396F—
string.regexp, constant.other.character-class, keyword.operator.quantifier.regexp#176E64—
keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.arithmetic#56417E—
punctuation, punctuation.separator, punctuation.terminator, meta.brace, meta.delimiter#554F5C—
support.type.property-name.json, string.json support.type.property-name#8F345A—
markup.heading, entity.name.section.markdown#623B91bold
markup.underline.link, string.other.link, meta.link.inline.markdown#126482underline
markup.inserted, meta.diff.header.to-file#246B4E—
markup.deleted, meta.diff.header.from-file#9C2D50—
invalid, invalid.illegal, invalid.deprecated#FFFFFFbold