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.activeBackground#FF5DA214
  • activityBar.activeBorder#FF5DA2
  • activityBar.background#302C3B
  • activityBar.foreground#F9F5E9
  • activityBar.inactiveForeground#F9F5E973
  • activityBarBadge.background#FF5DA2
  • activityBarBadge.foreground#1E1C31
  • badge.background#FF5DA2
  • badge.foreground#1E1C31
  • breadcrumb.activeSelectionForeground#FF5DA2
  • breadcrumb.background#231F2F
  • breadcrumb.foreground#F9F5E98C
  • breadcrumbPicker.background#302C3B
  • button.background#FF5DA2
  • button.foreground#1E1C31
  • button.hoverBackground#FF5DA2D9
  • button.secondaryBackground#302C3B
  • button.secondaryForeground#F9F5E9
  • button.secondaryHoverBackground#95849833
  • diffEditor.insertedLineBackground#38DA911F
  • diffEditor.insertedTextBackground#38DA9133
  • diffEditor.removedLineBackground#F02E6E1F
  • diffEditor.removedTextBackground#F02E6E33
  • dropdown.background#302C3B
  • dropdown.border#9584984C
  • dropdown.foreground#F9F5E9
  • editor.background#231F2F
  • editor.findMatchBackground#FF5DA273
  • editor.findMatchHighlightBackground#FF5DA23D
  • editor.foreground#F9F5E9
  • editor.inactiveSelectionBackground#FF5DA229
  • editor.lineHighlightBackground#302C3B
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#FF5DA252
  • editor.selectionHighlightBackground#FF5DA22E
  • editor.wordHighlightBackground#2A9DD729
  • editor.wordHighlightStrongBackground#2A9DD742
  • editorBracketHighlight.foreground1#BA65E5
  • editorBracketHighlight.foreground2#A0D7EC
  • editorBracketHighlight.foreground3#FFB378
  • editorBracketHighlight.foreground4#79E9E0
  • editorBracketHighlight.foreground5#38DA91
  • editorBracketHighlight.foreground6#FF5DA2
  • editorBracketHighlight.unexpectedBracket.foreground#F02E6E
  • editorBracketMatch.background#FF5DA233
  • editorBracketMatch.border#FF5DA2
  • editorCursor.background#231F2F
  • editorCursor.foreground#FF5DA2
  • editorError.foreground#F02E6E
  • editorGutter.addedBackground#38DA91
  • editorGutter.background#231F2F
  • editorGutter.deletedBackground#F02E6E
  • editorGutter.modifiedBackground#2A9DD7
  • editorHoverWidget.background#302C3B
  • editorHoverWidget.border#95849840
  • editorIndentGuide.activeBackground1#FF5DA266
  • editorIndentGuide.background1#95849840
  • editorInfo.foreground#2A9DD7
  • editorLineNumber.activeForeground#FF5DA2
  • editorLineNumber.foreground#958498B2
  • editorOverviewRuler.border#00000000
  • editorRuler.foreground#95849833
  • editorSuggestWidget.background#302C3B
  • editorSuggestWidget.border#95849840
  • editorSuggestWidget.foreground#F9F5E9
  • editorSuggestWidget.highlightForeground#FF5DA2
  • editorSuggestWidget.selectedBackground#FF5DA238
  • editorWarning.foreground#FFE6B3
  • editorWhitespace.foreground#9584984C
  • editorWidget.background#302C3B
  • editorWidget.border#95849840
  • extensionButton.prominentBackground#FF5DA2
  • extensionButton.prominentForeground#1E1C31
  • extensionButton.prominentHoverBackground#FF5DA2D9
  • focusBorder#FF5DA2
  • gitDecoration.addedResourceForeground#38DA91
  • gitDecoration.conflictingResourceForeground#FFE6B3
  • gitDecoration.deletedResourceForeground#F02E6E
  • gitDecoration.ignoredResourceForeground#95849899
  • gitDecoration.modifiedResourceForeground#2A9DD7
  • gitDecoration.untrackedResourceForeground#38DA91
  • input.background#302C3B
  • input.border#9584984C
  • input.foreground#F9F5E9
  • input.placeholderForeground#F9F5E973
  • inputOption.activeBorder#FF5DA2
  • list.activeSelectionBackground#FF5DA242
  • list.activeSelectionForeground#F9F5E9
  • list.errorForeground#F02E6E
  • list.focusBackground#FF5DA233
  • list.highlightForeground#FF5DA2
  • list.hoverBackground#95849824
  • list.inactiveSelectionBackground#FF5DA224
  • list.warningForeground#FFE6B3
  • minimap.background#231F2F
  • minimapGutter.addedBackground#38DA91
  • minimapGutter.deletedBackground#F02E6E
  • minimapGutter.modifiedBackground#2A9DD7
  • minimapSlider.activeBackground#FF5DA259
  • minimapSlider.background#FF5DA226
  • minimapSlider.hoverBackground#FF5DA240
  • notificationCenter.border#95849833
  • notificationCenterHeader.background#302C3B
  • notifications.background#302C3B
  • notifications.foreground#F9F5E9
  • notificationsErrorIcon.foreground#F02E6E
  • notificationsInfoIcon.foreground#2A9DD7
  • notificationsWarningIcon.foreground#FFE6B3
  • panel.background#302C3B
  • panel.border#95849840
  • panelTitle.activeBorder#FF5DA2
  • panelTitle.activeForeground#F9F5E9
  • panelTitle.inactiveForeground#F9F5E98C
  • peekView.border#FF5DA2
  • peekViewEditor.background#302C3B
  • peekViewResult.background#302C3B
  • peekViewTitle.background#302C3B
  • peekViewTitleLabel.foreground#F9F5E9
  • scrollbarSlider.activeBackground#FF5DA266
  • scrollbarSlider.background#9584984C
  • scrollbarSlider.hoverBackground#FF5DA240
  • sideBar.background#302C3B
  • sideBar.border#95849833
  • sideBar.foreground#F9F5E9E6
  • sideBarSectionHeader.background#9584981A
  • sideBarSectionHeader.foreground#F9F5E9
  • sideBarTitle.foreground#F9F5E9
  • statusBar.background#302C3B
  • statusBar.border#95849833
  • statusBar.debuggingBackground#FFE6B3
  • statusBar.debuggingForeground#1E1C31
  • statusBar.foreground#F9F5E9
  • statusBar.noFolderBackground#302C3B
  • statusBarItem.hoverBackground#FF5DA229
  • statusBarItem.remoteBackground#FF5DA2
  • statusBarItem.remoteForeground#1E1C31
  • tab.activeBackground#231F2F
  • tab.activeBorderTop#FF5DA2
  • tab.activeForeground#F9F5E9
  • tab.border#95849826
  • tab.hoverBackground#FF5DA214
  • tab.inactiveBackground#302C3B
  • tab.inactiveForeground#F9F5E98C
  • terminal.ansiBlack#484450
  • terminal.ansiBlue#34A2D7
  • terminal.ansiBrightBlack#958498
  • terminal.ansiBrightBlue#A0D7EC
  • terminal.ansiBrightCyan#79E9E0
  • terminal.ansiBrightGreen#ACE8C8
  • terminal.ansiBrightMagenta#FF5DA2
  • terminal.ansiBrightRed#F2608D
  • terminal.ansiBrightWhite#F9F5E9
  • terminal.ansiBrightYellow#FFE6B3
  • terminal.ansiCyan#93DBE0
  • terminal.ansiGreen#2CE592
  • terminal.ansiMagenta#BA65E5
  • terminal.ansiRed#F02E6E
  • terminal.ansiWhite#958498
  • terminal.ansiYellow#FFB378
  • terminal.background#231F2F
  • terminal.foreground#F9F5E9
  • terminalCursor.foreground#FF5DA2
  • titleBar.activeBackground#302C3B
  • titleBar.activeForeground#F9F5E9
  • titleBar.border#95849833
  • titleBar.inactiveBackground#231F2F
  • titleBar.inactiveForeground#F9F5E98C
  • widget.shadow#00000055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#958498italic
string, string.quoted, punctuation.definition.string#ACE8C8
constant.character.escape#79E9E0
constant.numeric, constant.language, constant.language.boolean, variable.other.constant, support.constant#D4BFFF
keyword, keyword.control, keyword.other, keyword.operator.new#BA65E5
storage, storage.type, storage.modifier#BA65E5
keyword.operator, punctuation#F9F5E9
entity.name.function, support.function, meta.function-call, variable.function, entity.name.function.member#A0D7EC
entity.name.type, entity.name.class, support.class, support.type, entity.other.inherited-class#D8BEF2
variable, variable.other.readwrite, variable.parameter, variable.other.property, meta.object-literal.key#F48FB1
entity.name.tag#F2467F
entity.other.attribute-name#79E9E0
support.type.property-name.json#79E9E0
string.quoted.double.json, string.quoted.single.json#F48FB1
invalid, invalid.illegal#F02E6E
markup.heading#BA65E5bold
markup.boldbold
markup.italicitalic
markup.underline.link#A0D7EC
markup.quote#958498italic
markup.inline.raw#FFB378