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#2a1a24
  • activityBar.activeBorder#FFB7C5
  • activityBar.background#0f0a0f
  • activityBar.border#3a2a34
  • activityBar.foreground#DC143C
  • activityBar.inactiveForeground#778899
  • activityBarBadge.background#B22222
  • activityBarBadge.foreground#ffffff
  • badge.background#9370DB
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#DC143C
  • breadcrumb.focusForeground#FFB7C5
  • breadcrumb.foreground#9a8a9a
  • button.background#DC143C
  • button.foreground#ffffff
  • button.hoverBackground#B22222
  • button.secondaryBackground#708090
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#778899
  • debugExceptionWidget.background#2a0a0a
  • debugExceptionWidget.border#8B0000
  • debugToolBar.background#2a1a24
  • debugToolBar.border#FFB7C5
  • diffEditor.insertedLineBackground#98FB9820
  • diffEditor.insertedTextBackground#98FB9830
  • diffEditor.removedLineBackground#DC143C20
  • diffEditor.removedTextBackground#DC143C30
  • dropdown.background#2a1a24
  • dropdown.border#FFB7C5
  • dropdown.foreground#ffffff
  • editor.background#1a0f14
  • editor.findMatchBackground#DC143C80
  • editor.findMatchHighlightBackground#DC143C50
  • editor.foreground#F0FFFF
  • editor.inactiveSelectionBackground#FFB7C550
  • editor.lineHighlightBackground#2a1a24
  • editor.selectionBackground#FFB7C580
  • editor.selectionHighlightBackground#FF69B440
  • editor.wordHighlightBackground#FFC0CB30
  • editor.wordHighlightStrongBackground#FFC0CB50
  • editorBracketMatch.background#FFB7C550
  • editorBracketMatch.border#FFC0CB
  • editorCursor.foreground#DC143C
  • editorError.background#8B000080
  • editorError.border#DC143C
  • editorError.foreground#8B0000
  • editorGroupHeader.tabsBackground#0f0a0f
  • editorGroupHeader.tabsBorder#3a2a34
  • editorHint.foreground#90EE90
  • editorIndentGuide.activeBackground1#FFB7C5
  • editorIndentGuide.background1#3a2a34
  • editorInfo.foreground#98FB98
  • editorLineNumber.activeForeground#FF69B4
  • editorLineNumber.foreground#778899
  • editorWarning.foreground#FFB7C5
  • editorWhitespace.foreground#3a2a34
  • focusBorder#DC143C
  • gitDecoration.addedResourceForeground#00FA9A
  • gitDecoration.conflictingResourceForeground#8B0000
  • gitDecoration.deletedResourceForeground#DC143C
  • gitDecoration.ignoredResourceForeground#778899
  • gitDecoration.modifiedResourceForeground#98FB98
  • gitDecoration.untrackedResourceForeground#FFB7C5
  • input.background#2a1a24
  • input.border#FFB7C5
  • input.foreground#ffffff
  • input.placeholderForeground#778899
  • inputOption.activeBorder#FF69B4
  • inputValidation.errorBackground#2a0a0a
  • inputValidation.errorBorder#8B0000
  • inputValidation.warningBackground#2a1a1a
  • inputValidation.warningBorder#FFB7C5
  • list.activeSelectionBackground#FFB7C580
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#ff8888
  • list.focusBackground#FFB7C580
  • list.focusForeground#ffffff
  • list.highlightForeground#DC143C
  • list.hoverBackground#2a1a24
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#3a2a34
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#FFB7C5
  • merge.border#DC143C
  • merge.currentContentBackground#FFB7C530
  • merge.currentHeaderBackground#FFB7C580
  • merge.incomingContentBackground#90EE9030
  • merge.incomingHeaderBackground#90EE9080
  • minimap.errorHighlight#8B0000
  • minimap.findMatchHighlight#DC143C80
  • minimap.selectionHighlight#FFB7C580
  • minimap.warningHighlight#FFB7C5
  • minimapGutter.addedBackground#98FB98
  • minimapGutter.deletedBackground#DC143C
  • minimapGutter.modifiedBackground#FFB7C5
  • notificationCenter.border#3a2a34
  • notificationCenterHeader.background#2a1a24
  • notificationLink.foreground#FF69B4
  • notifications.background#2a1a24
  • notifications.border#FFB7C5
  • notifications.foreground#ffffff
  • panel.background#1a0f14
  • panel.border#3a2a34
  • panelTitle.activeBorder#FFB7C5
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#9a8a9a
  • peekView.border#FFB7C5
  • peekViewEditor.background#2a1a24
  • peekViewEditor.matchHighlightBackground#DC143C80
  • peekViewResult.background#1a0f14
  • peekViewResult.matchHighlightBackground#FFB7C550
  • peekViewResult.selectionBackground#FFB7C580
  • peekViewTitle.background#2a1a24
  • peekViewTitleDescription.foreground#9a8a9a
  • peekViewTitleLabel.foreground#FF69B4
  • scrollbarSlider.activeBackground#FF69B4A0
  • scrollbarSlider.background#FFB7C560
  • scrollbarSlider.hoverBackground#FFB7C580
  • sideBar.background#1a0f14
  • sideBar.border#3a2a34
  • sideBar.foreground#f0e8f0
  • sideBarSectionHeader.background#2a1a24
  • sideBarSectionHeader.border#3a2a34
  • sideBarSectionHeader.foreground#98FB98
  • sideBarTitle.foreground#FF69B4
  • statusBar.background#DC143C
  • statusBar.border#3a2a34
  • statusBar.debuggingBackground#8B0000
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#708090
  • statusBarItem.errorBackground#8B0000
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.prominentBackground#FFB7C5
  • statusBarItem.prominentHoverBackground#FF69B4
  • statusBarItem.warningBackground#FFC0CB
  • statusBarItem.warningForeground#000000
  • tab.activeBackground#2a1a24
  • tab.activeBorder#0f0a0f
  • tab.activeBorderTop#FFB7C5
  • tab.activeForeground#ffffff
  • tab.border#1a1a1a
  • tab.hoverBackground#2a1a24
  • tab.hoverBorder#FF69B4
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#1a0f14
  • tab.inactiveForeground#9a8a9a
  • terminal.ansiBlack#1C1C1C
  • terminal.ansiBlue#90EE90
  • terminal.ansiBrightBlack#708090
  • terminal.ansiBrightBlue#00FA9A
  • terminal.ansiBrightCyan#98FB98
  • terminal.ansiBrightGreen#90EE90
  • terminal.ansiBrightMagenta#8B008B
  • terminal.ansiBrightRed#B22222
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FF69B4
  • terminal.ansiCyan#00FA9A
  • terminal.ansiGreen#98FB98
  • terminal.ansiMagenta#9370DB
  • terminal.ansiRed#DC143C
  • terminal.ansiWhite#F0FFFF
  • terminal.ansiYellow#FFB7C5
  • terminal.background#1a0f14
  • terminal.border#3a2a34
  • terminal.foreground#F0FFFF
  • terminal.selectionBackground#FFB7C550
  • terminalCursor.background#1a0f14
  • terminalCursor.foreground#DC143C
  • titleBar.activeBackground#0f0a0f
  • titleBar.activeForeground#FF69B4
  • titleBar.border#3a2a34
  • titleBar.inactiveBackground#0f0a0f
  • titleBar.inactiveForeground#778899

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#FFC0CBitalic
keyword, storage.type, storage.modifier#98FB98bold
keyword.operator, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#DC143Cbold
variable, variable.other, variable.parameter, variable.language#FFB7C5
entity.name.function, support.function, meta.function-call#90EE90bold
entity.name.type, entity.name.class, support.class#B22222bold
string, string.quoted, string.template#9370DB
constant, constant.language, constant.numeric, constant.character#F0FFFFbold
support.type, entity.name.type.instance#A0522D
entity.other.attribute-name, entity.other.attribute-name.html#00FA9Aitalic
entity.name.tag, meta.tag#98FB98bold
variable.other.property, support.type.property-name#FF69B4
invalid, invalid.illegal, invalid.broken#8B0000bold underline
keyword.control.import, keyword.control.from, meta.import#90EE90bold
constant.numeric, constant.numeric.integer, constant.numeric.float#8B008B
string.regexp, constant.character.escape#00FA9Abold
meta.decorator, entity.name.function.decorator#A0522Ditalic
punctuation.definition, punctuation.separator, punctuation.terminator#778899
support.type, support.class, support.other#FFC0CB
entity.name.type.module, support.module#FFB7C5bold
entity.name.type.namespace, entity.name.namespace#708090
support.type.property-name.json, meta.object-literal.key#90EE90
markup.bold#DC143Cbold
markup.italic#FFB7C5italic
markup.heading, entity.name.section#B22222bold
markup.underline.link#FF69B4underline
markup.quote#9370DBitalic
markup.inline.raw, markup.fenced_code.block#98FB98
markup.inserted#00FA9A
markup.deleted#DC143C
markup.changed#FFB7C5
meta.brace, meta.block, meta.bracket#8B008B
variable.parameter, meta.function.parameters#98FB98italic
entity.name.function.method, meta.method-call#DC143Cbold
entity.name.type.interface, support.type.interface#00FA9Abold
entity.name.type.enum, support.type.enum#B22222
storage.type.annotation, meta.annotation#A0522Ditalic
variable.language.this, variable.language.self#FF69B4italic bold
support.function.builtin, support.variable.builtin#DC143C
comment.block.documentation#90EE90italic
constant.character.escape#FFB7C5
meta.template.expression#98FB98
entity.name.label#B22222bold
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF69B4
support.type.property-name.css#90EE90
support.constant.property-value.css#9370DB
keyword.other.DML.sql, keyword.other.DDL.sql#98FB98bold
support.function.magic#DC143Cbold italic