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.background#23212d
  • activityBar.foreground#f5eaec
  • activityBar.inactiveForeground#f5eaec54
  • activityBarBadge.background#df1b6c
  • activityBarBadge.foreground#f5eaec
  • badge.background#2bb4af
  • badge.foreground#23212d
  • breadcrumb.activeSelectionForeground#f5eaec
  • breadcrumb.focusForeground#df1b6c
  • breadcrumb.foreground#f5eaec66
  • button.background#df1b6c
  • button.foreground#f5eaec
  • button.hoverBackground#ff3c87
  • checkbox.background#2a2834
  • checkbox.border#3a3744
  • descriptionForeground#f5eaecab
  • diffEditor.diagonalFill#3a3744
  • diffEditor.insertedTextBackground#b38bff21
  • diffEditor.removedTextBackground#e9386d21
  • dropdown.background#2a2834
  • dropdown.border#3a3744
  • dropdown.foreground#f5eaec
  • editor.background#1f1e26
  • editor.findMatchBackground#25e0da96
  • editor.findMatchHighlightBackground#df1b6c91
  • editor.foreground#cfc9ca
  • editor.inactiveSelectionBackground#df1b6c21
  • editor.lineHighlightBackground#2f2c39
  • editor.lineHighlightBorder#2f2c39
  • editor.selectionBackground#df1b6c45
  • editor.selectionHighlightBackground#2cada982
  • editor.wordHighlightBackground#2dc3be52
  • editor.wordHighlightStrongBackground#df1b6c61
  • editorBracketMatch.background#88b7b521
  • editorBracketMatch.border#95ddda66
  • editorCodeLens.foreground#f5eaec99
  • editorCursor.foreground#e9386d
  • editorGroup.border#3a3744
  • editorGroupHeader.tabsBackground#23212d
  • editorGutter.addedBackground#84cd4c
  • editorGutter.background#1f1e26
  • editorGutter.deletedBackground#e82c55
  • editorGutter.modifiedBackground#ffcf6b
  • editorHoverWidget.background#2f2d3aed
  • editorHoverWidget.border#4a4755
  • editorIndentGuide.activeBackground1#e0d9dc4f
  • editorIndentGuide.background1#3a374454
  • editorLineNumber.activeForeground#ba3b70
  • editorLineNumber.foreground#5f5a66
  • editorMarkerNavigation.background#23212d
  • editorRuler.foreground#3a374454
  • editorSuggestWidget.background#2a2834ed
  • editorSuggestWidget.border#4a4755
  • editorSuggestWidget.foreground#f5eaec
  • editorSuggestWidget.highlightForeground#df1b6c
  • editorSuggestWidget.selectedBackground#df1b6c33
  • editorWhitespace.foreground#3a374454
  • editorWidget.background#2a2834ed
  • errorForeground#e9386d
  • focusBorder#df1b6c87
  • foreground#f5eaec
  • gitDecoration.addedResourceForeground#84cd4c
  • gitDecoration.conflictingResourceForeground#cc67e3
  • gitDecoration.deletedResourceForeground#e9386d
  • gitDecoration.ignoredResourceForeground#7c707e
  • gitDecoration.modifiedResourceForeground#ffcf6b
  • gitDecoration.submoduleResourceForeground#9ad1ff
  • gitDecoration.untrackedResourceForeground#7fd4cc
  • input.background#2a2834
  • input.border#3a3744
  • input.foreground#f5eaec
  • input.placeholderForeground#f5eaec66
  • inputOption.activeBackground#df1b6c33
  • inputOption.activeBorder#df1b6c
  • list.activeSelectionBackground#df1b6c33
  • list.activeSelectionForeground#f5eaec
  • list.errorForeground#e9386d
  • list.focusBackground#2bb4af21
  • list.focusForeground#f5eaec
  • list.highlightForeground#df1b6c
  • list.hoverBackground#2f2d3a
  • list.inactiveSelectionBackground#2f2d3a
  • list.inactiveSelectionForeground#f5eaec
  • list.warningForeground#ffcf6b
  • minimap.errorHighlight#e9386d87
  • minimap.selectionHighlight#df1b6c87
  • minimap.warningHighlight#ffcf6bcc
  • notificationCenterHeader.background#2f2d3a
  • notificationLink.foreground#2bb4af
  • notifications.background#2a2834
  • notifications.border#3a3744
  • notifications.foreground#f5eaec
  • panel.background#23212d
  • panel.border#3a3744
  • panelTitle.activeBorder#df1b6c
  • panelTitle.activeForeground#f5eaec
  • panelTitle.inactiveForeground#f5eaec66
  • peekView.border#df1b6c
  • peekViewEditor.background#2a2834
  • peekViewEditor.matchHighlightBackground#df1b6c21
  • peekViewResult.background#23212d
  • peekViewTitle.background#68213f
  • progressBar.background#df1b6c
  • quickInput.background#2a2834ed
  • scrollbarSlider.activeBackground#df1b6c66
  • scrollbarSlider.background#4a475545
  • scrollbarSlider.hoverBackground#4a475566
  • selection.background#df1b6c54
  • sideBar.background#23212d
  • sideBar.border#3a3744
  • sideBar.foreground#f5eaecba
  • sideBarSectionHeader.background#2a2834ab
  • sideBarSectionHeader.foreground#f5eaec
  • statusBar.background#23212dde
  • statusBar.border#3a3744
  • statusBar.debuggingBackground#df1b6c
  • statusBar.debuggingForeground#f5eaec
  • statusBar.foreground#f5eaec
  • statusBar.noFolderBackground#23212dde
  • statusBar.noFolderForeground#f5eaec
  • statusBarItem.remoteBackground#df1b6c
  • statusBarItem.remoteForeground#f5eaec
  • symbolIcon.classForeground#e0a7ff
  • symbolIcon.functionForeground#f7d1e1
  • symbolIcon.interfaceForeground#cc67e3
  • symbolIcon.keyForeground#df1b6c
  • symbolIcon.methodForeground#f7d1e1
  • symbolIcon.moduleForeground#b38bff
  • symbolIcon.numberForeground#c73a78
  • symbolIcon.propertyForeground#f4c1d5
  • symbolIcon.stringForeground#84cd4c
  • symbolIcon.variableForeground#f5eaec
  • tab.activeBackground#2f2d3a
  • tab.activeBorderTop#df1b6c
  • tab.activeForeground#f5eaec
  • tab.border#3a3744
  • tab.hoverBackground#2f2d3a
  • tab.inactiveBackground#23212d
  • tab.inactiveForeground#f5eaec66
  • terminal.ansiBlack#3a3744
  • terminal.ansiBlue#2bb4af
  • terminal.ansiBrightBlack#5f5a66
  • terminal.ansiBrightBlue#37c3bd
  • terminal.ansiBrightCyan#7ae4d9
  • terminal.ansiBrightGreen#a7d782
  • terminal.ansiBrightMagenta#e0a7ff
  • terminal.ansiBrightRed#e9386d
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffcf6b
  • terminal.ansiCyan#7fd4cc
  • terminal.ansiGreen#84cd4c
  • terminal.ansiMagenta#cc67e3
  • terminal.ansiRed#df1b6c
  • terminal.ansiWhite#f5eaec
  • terminal.ansiYellow#e7b94b
  • terminal.background#23212d
  • terminal.foreground#f5eaec
  • terminalCursor.foreground#e9386d
  • textLink.activeForeground#df1b6c
  • textLink.foreground#df1b6c
  • titleBar.activeBackground#23212d
  • titleBar.activeForeground#f5eaec99
  • titleBar.inactiveBackground#23212d
  • titleBar.inactiveForeground#f5eaec45

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6c5f6fitalic
variable.language, variable.language.this#4f5a90
string, string.quoted, string.template#84cd4c
punctuation.definition.string#84cd4c
constant.numeric#df1b6c
constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.nullish#ff4d96
keyword, storage.type, storage.modifier#4f5a90bold
keyword.control.return, keyword.control.flow#4f5a90bold italic
keyword.operator.assignment#14c759c7bold italic
keyword.operator.logical#df1b6c
keyword.operator.comparison, keyword.operator.relational#4f5a90
keyword.operator.type.annotation, punctuation.separator.type.annotation#4f5a90
entity.name.function, meta.function-call, support.function, meta.function-call.method#ea80ac
variable, variable.other.readwrite, variable.other.object#f5eaecba
variable.other.property, meta.object-literal.key, support.variable.property#f5eaecba
entity.name.class, entity.name.type.class#ea80acbold
entity.name.type, entity.name.type.interface, support.type, entity.name.type.enum, storage.type.cs#6176d1italic
entity.name.module, support.module, entity.name.namespace#6176d1underline
storage.type.annotation, punctuation.definition.annotation, meta.annotation, meta.decorator, entity.name.function.decorator#3f496f
string.regexp, constant.character.escape#c73a78
punctuation, meta.brace, meta.delimiter#f5eaec99
invalid, invalid.deprecated#ff4d96strikethrough
text.html.markdown#f5eaec
punctuation.definition.markdown, markup.heading.markdown, markup.italic.markdown, markup.bold.markdown, markup.quote.markdown, markup.list.markdown#6176d1bold
markup.inline.raw.string#df1b6c
string.other.link.title.markdown, string.other.link.description.markdown, markup.underline.link.markdown, string.other.link.markdown#4f5a90
meta.separator.markdown#c73a78
support.type.property-name#6176d1italic
constant.language.json#ff4d96
string.quoted.docstring#6c5f6f
entity.name.tag, meta.tag.html#ea80ac
meta.shebang.shell, punctuation.definition.comment.shebang.shell#ba3b70italic underline
Perfume by Type-Delta - VS Code Theme