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#e093d9
  • activityBar.background#212121
  • activityBar.border#00000000
  • activityBar.foreground#B0BEC5
  • activityBar.inactiveForeground#727272bf
  • activityBarBadge.background#e093d9
  • activityBarBadge.foreground#212121
  • badge.background#e093d9
  • badge.foreground#212121
  • breadcrumb.activeSelectionForeground#727272
  • breadcrumb.focusForeground#B0BEC5
  • breadcrumb.foreground#727272
  • breadcrumbPicker.background#212121
  • button.background#e093d9
  • button.foreground#212121
  • button.hoverBackground#e093d9b3
  • button.secondaryBackground#2A2A2A
  • button.secondaryForeground#727272
  • button.secondaryHoverBackground#2a2a2abf
  • checkbox.background#212121
  • checkbox.border#00000000
  • debugConsole.errorForeground#f07178
  • debugConsole.infoForeground#727272
  • debugConsole.sourceForeground#ffcb6b
  • debugConsole.warningForeground#ffcb6b
  • debugConsoleInputIcon.foreground#e093d9
  • debugIcon.breakpointForeground#f07178
  • debugTokenExpression.boolean#9580ff
  • debugTokenExpression.error#ff5555
  • debugTokenExpression.name#727272
  • debugTokenExpression.number#9580ff
  • debugTokenExpression.string#feff80
  • debugTokenExpression.value#feff80
  • debugToolBar.background#212121
  • descriptionForeground#727272
  • diffEditor.insertedLineBackground#264b33
  • diffEditor.insertedTextBackground#447152
  • diffEditor.removedLineBackground#656e76
  • diffEditor.removedTextBackground#41454b
  • dropdown.background#212121
  • dropdown.border#00000000
  • dropdown.foreground#B0BEC5
  • dropdown.listBackground#212121
  • editor.background#212121
  • editor.findMatchBackground#e093d9
  • editor.findMatchHighlightBackground#292929
  • editor.focusedStackFrameHighlightBackground#c3e88d
  • editor.foldBackground#212121
  • editor.fontFamily'IBM Plex Mono', 'JetBrains Mono', Consolas, 'Courier New', monospace
  • editor.fontLigatures
  • editor.fontSize15
  • editor.foreground#B0BEC5
  • editor.inactiveSelectionBackground#292929
  • editor.lineHeight2
  • editor.lineHighlightBackground#1A1A1A
  • editor.lineHighlightBorder#00000000
  • editor.linkedEditingBackground#292929
  • editor.selectionBackground#404040
  • editor.selectionForeground#FFFFFF
  • editor.selectionHighlightBackground#353535
  • editor.stackFrameHighlightBackground#474747
  • editor.wordHighlightBackground#40404033
  • editor.wordHighlightBorder#40404033
  • editor.wordHighlightStrongBackground#3232324d
  • editor.wordHighlightStrongBorder#32323299
  • editorBracketHighlight.foreground1#f8f8f2
  • editorBracketHighlight.foreground2#f8f8f2
  • editorBracketHighlight.foreground3#f8f8f2
  • editorBracketHighlight.foreground4#f8f8f2
  • editorBracketHighlight.foreground5#f8f8f2
  • editorBracketHighlight.foreground6#f8f8f2
  • editorBracketHighlight.unexpectedBracket.foreground#727272
  • editorBracketMatch.background#e093d9b3
  • editorBracketMatch.border#e093d9
  • editorCursor.foreground#e093d9
  • editorGroup.border#00000000
  • editorGroupHeader.tabsBackground#212121
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#c3e88d
  • editorGutter.deletedBackground#f07178
  • editorGutter.modifiedBackground#474747
  • editorIndentGuide.activeBackground#b0bec53d
  • editorIndentGuide.background#b0bec51f
  • editorInlayHint.background#1A1A1A
  • editorInlayHint.foreground#727272
  • editorInlayHint.paramBackground#1A1A1A
  • editorInlayHint.paramForeground#727272
  • editorInlayHint.typeBackground#1A1A1A
  • editorInlayHint.typeForeground#727272
  • editorLineNumber.activeForeground#727272
  • editorLineNumber.foreground#72727240
  • editorOverviewRuler.border#00000000
  • editorWhitespace.foreground#00000000
  • editorWidget.background#212121
  • errorForeground#f07178
  • focusBorder#e093d9
  • foreground#B0BEC5
  • gitDecoration.addedResourceForeground#c3e88d
  • gitDecoration.conflictingResourceForeground#f07178
  • gitDecoration.deletedResourceForeground#f07178
  • gitDecoration.ignoredResourceForeground#727272
  • gitDecoration.modifiedResourceForeground#B0BEC5
  • gitDecoration.submoduleResourceForeground#727272
  • gitDecoration.untrackedResourceForeground#c3e88d
  • icon.foreground#727272
  • input.background#212121
  • input.border#00000000
  • input.foreground#B0BEC5
  • input.placeholderForeground#727272
  • keybindingLabel.foreground#B0BEC5
  • list.activeSelectionBackground#323232
  • list.activeSelectionForeground#e093d9
  • list.errorForeground#f07178
  • list.focusBackground#e093d940
  • list.focusForeground#e093d9
  • list.focusHighlightForeground#e093d9
  • list.foreground#727272bf
  • list.highlightForeground#e093d9
  • list.hoverBackground#323232
  • list.hoverForeground#e093d9
  • list.inactiveFocusBackground#40404033
  • list.inactiveSelectionBackground#323232
  • list.inactiveSelectionForeground#727272bf
  • list.warningForeground#ffcb6b
  • listFilterWidget.background#212121
  • minimap.findMatchHighlight#e093d980
  • minimap.selectionHighlight#404040
  • minimapSlider.activeBackground#e093d926
  • minimapSlider.background#212121
  • minimapSlider.hoverBackground#e093d91a
  • notificationCenterHeader.background#212121
  • notificationCenterHeader.foreground#727272
  • notifications.background#212121
  • notifications.border#00000000
  • notifications.foreground#B0BEC5
  • notificationsErrorIcon.foreground#f07178
  • notificationsInfoIcon.foreground#e093d9
  • notificationsWarningIcon.foreground#ffcb6b
  • panel.background#212121
  • panel.border#00000000
  • panelInput.border#00000000
  • panelTitle.activeBorder#e093d9
  • panelTitle.activeForeground#B0BEC5
  • panelTitle.inactiveForeground#727272
  • peekViewEditor.background#212121
  • peekViewEditor.matchHighlightBackground#e093d980
  • peekViewResult.background#212121
  • peekViewResult.matchHighlightBackground#e093d980
  • pickerGroup.border#00000000
  • pickerGroup.foreground#727272
  • progressBar.background#e093d9
  • quickInput.background#212121
  • quickInput.foreground#B0BEC5
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#e093d9
  • scrollbarSlider.background#e093d9b3
  • scrollbarSlider.hoverBackground#e093d9
  • selection.background#404040
  • settings.headerForeground#B0BEC5
  • settings.modifiedItemIndicator#727272
  • sideBar.background#212121
  • sideBar.border#00000000
  • sideBar.foreground#727272bf
  • sideBarSectionHeader.background#212121
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#B0BEC5
  • sideBarTitle.foreground#B0BEC5
  • statusBar.background#212121
  • statusBar.border#00000000
  • statusBar.debuggingBackground#e093d9
  • statusBar.debuggingForeground#212121
  • statusBar.focusBorder#00000000
  • statusBar.foreground#727272
  • statusBar.noFolderBackground#212121
  • statusBarItem.activeBackground#212121
  • statusBarItem.focusBorder#00000000
  • statusBarItem.hoverBackground#e093d9b3
  • statusBarItem.hoverForeground#212121
  • statusBarItem.prominentBackground#1A1A1A
  • statusBarItem.remoteBackground#212121
  • statusBarItem.remoteForeground#e093d9
  • symbolIcon.arrayForeground#f8f8f2
  • symbolIcon.booleanForeground#9580ff
  • symbolIcon.classForeground#78dce8
  • symbolIcon.colorForeground#f8f8f2
  • symbolIcon.constantForeground#9580ff
  • symbolIcon.constructorForeground#50fa78
  • symbolIcon.enumeratorForeground#80ffea
  • symbolIcon.enumeratorMemberForeground#9580ff
  • symbolIcon.eventForeground#f780bf
  • symbolIcon.fieldForeground#f8f8f2
  • symbolIcon.fileForeground#80ffea
  • symbolIcon.folderForeground#78dce8
  • symbolIcon.functionForeground#8aff80
  • symbolIcon.interfaceForeground#80ffea
  • symbolIcon.keyForeground#f780bf
  • symbolIcon.keywordForeground#f780bf
  • symbolIcon.methodForeground#8aff80
  • symbolIcon.moduleForeground#80ffea
  • symbolIcon.namespaceForeground#80ffea
  • symbolIcon.nullForeground#9580ff
  • symbolIcon.numberForeground#9580ff
  • symbolIcon.objectForeground#78dce8
  • symbolIcon.operatorForeground#f780bf
  • symbolIcon.packageForeground#78dce8
  • symbolIcon.propertyForeground#f8f8f2
  • symbolIcon.referenceForeground#f8f8f2
  • symbolIcon.snippetForeground#feff80
  • symbolIcon.stringForeground#feff80
  • symbolIcon.structForeground#78dce8
  • symbolIcon.textForeground#f8f8f2
  • symbolIcon.typeParameterForeground#f89580
  • symbolIcon.unitForeground#9580ff
  • symbolIcon.variableForeground#f8f8f2
  • tab.activeBackground#e093d913
  • tab.activeBorder#e093d9
  • tab.activeBorderTop#00000000
  • tab.activeForeground#eeffff
  • tab.border#00000000
  • tab.hoverBackground#212121
  • tab.inactiveBackground#212121
  • tab.inactiveForeground#727272
  • tab.unfocusedActiveBorder#212121
  • tab.unfocusedActiveBorderTop#00000000
  • tab.unfocusedHoverBackground#323232
  • terminal.ansiBlack#212121
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#616161
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#89DDFF
  • terminal.ansiBrightGreen#C3E88D
  • terminal.ansiBrightMagenta#f780bf
  • terminal.ansiBrightRed#FF5370
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFCB6B
  • terminal.ansiCyan#89DDFF
  • terminal.ansiGreen#C3E88D
  • terminal.ansiMagenta#f780bf
  • terminal.ansiRed#FF5370
  • terminal.ansiWhite#f8f8f2
  • terminal.ansiYellow#FFCB6B
  • terminal.background#212121
  • terminal.border#292929
  • terminal.foreground#B0BEC5
  • terminal.integrated.fontFamily'IBM Plex Mono', 'JetBrains Mono', Consolas, 'Courier New', monospace
  • terminal.integrated.fontSize13
  • terminal.integrated.lineHeight1.4
  • terminalCursor.background#f8f8f2
  • terminalCursor.foreground#f780bf
  • textBlockQuote.background#323232
  • textBlockQuote.border#00000000
  • textCodeBlock.background#323232
  • textLink.activeForeground#e093d9
  • textLink.foreground#e093d9
  • textPreformat.background#323232
  • textPreformat.foreground#727272
  • textSeparator.foreground#2A2A2A
  • titleBar.activeBackground#212121
  • titleBar.activeForeground#727272
  • titleBar.border#00000000
  • titleBar.inactiveBackground#323232
  • titleBar.inactiveForeground#727272
  • tree.indentGuidesStroke#2A2A2A
  • tree.tableColumnsBorder#00000000
  • welcomePage.buttonBackground#e093d9
  • welcomePage.buttonForeground#212121
  • welcomePage.buttonHoverBackground#e093d980
  • widget.shadow#00000020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#f8f8f2
comment, punctuation.definition.comment#616161italic
comment.block.documentation, comment.line.documentation#616161italic
comment.block.documentation storage.type, comment.block.documentation punctuation.definition.block.tag, comment.block.documentation variable.other#f780bfitalic underline
comment.block.documentation string#f8f8f2italic
string#feff80
constant.character.escape, string .source.regexp .meta.character-class#f89580
string.regexp#feff80
constant.numeric#9580ff
constant.language.boolean#9580ffitalic
constant.language.null, constant.language.nil, constant.language.undefined#9580ffitalic
keyword, storage.type, storage.modifier#f780bfitalic
keyword.operator#f780bf
meta.type.parameters, keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.exception, meta.parameters, keyword.operator.expression.typeof.ts, keyword.operator.new#f780bfitalic
punctuation, meta.brace, meta.delimiter#f8f8f2
meta.import, meta.block.ts#80ffea
variable, variable.other.object, variable.other.constant, support.variable#f8f8f2
variable.parameter#9580ff
variable.other.reassigned
variable.language.this, variable.language.super, variable.language.self#78dce8italic
entity.name.function, support.function#8aff80
meta.function-call entity.name.function, support.function.any-method#50fa78
entity.name.class, support.class#78dce8
entity.name.type.abstract#80ffea
declaration, entity.name.type, entity.name.interface, entity.name.type.interface#80ffeaitalic
entity.name.type.parameter#f89580
entity.other.inherited-class#80ffea
variable.instance, variable.other.property, member.access#f8f8f2
variable.static, variable.other.static#f8f8f2italic
variable.other.constant.static.final#f8f8f2italic bold
meta.decorator entity.name.function, meta.decorator punctuation.decorator, meta.annotation entity.name.type, meta.annotation punctuation.definition.annotation#f780bf
meta.annotation meta.attribute-pair variable.other#f89580
entity.name.tag, punctuation.definition.tag#f780bf
punctuation.definition.tag#f8f8f2
entity.other.attribute-name#8aff80italic
string.quoted.double.html#feff80
constant.character.entity#9580ff
entity.name.tag.css#f780bf
entity.other.attribute-name.class.css#78dce8italic
entity.other.attribute-name.id.css#f780bf
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css#f780bfitalic
support.type.property-name.css#80ffea
support.constant.property-value.css, constant.numeric.css, support.constant.color.css#feff80
support.function.misc.css#80ffea
keyword.other.important.css#feff80italic
variable.parameter.url.css#f780bfunderline
support.type.property-name.json#f780bf
constant.language.json#9580ffitalic
markup.heading#feff80
markup.bold#f780bfbold
markup.italic#f780bfitalic
markup.strikethroughstrikethrough
string.other.link.title.markdown#f780bfunderline italic
markup.underline.link.markdown#f780bf
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#f780bfitalic
markup.quote.markdown#50fa78italic
punctuation.definition.list.begin.markdown#ff5555italic
entity.name.function.decorator.python#8aff80
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python, variable.parameter.function.keyword.python#78dce8italic
variable.language.this.java#78dce8italic
support.type.object.console.js#78dce8
string.quoted.double.js, string.quoted.single.js, variable.other.module.jssyntax.defaultStringitalic
entity.name.type.parameter.ts#78dce8
keyword.operator.expression, support.type.primitive, support.type.builtin, support.type.python, support.type.go, support.type.c, support.type.cpp, support.type.rust, entity.name.type.primitive.rust#f780bfitalic
variable.other.readwrite#78dce8italic
keyword.other.rust, variable.language.self.rust, entity.name.namespace.rust#f89580
variable.language.self.rust#78dce8italic
entity.name.type.lifetime.rust#78dce8italic
support.function.macro.rust#f8f8f2
invalid#ff5555
invalid.deprecated#616161strikethrough
meta.todo, keyword.other.documentation.todo#79cbdcitalic