Skip to main content
CodingTheme

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.

  • actionBar.toggledBackground#383a49
  • activityBar.activeBorder#0078D4
  • activityBar.background#181818
  • activityBar.border#2B2B2B
  • activityBar.foreground#D7D7D7
  • activityBar.inactiveForeground#868686
  • activityBarBadge.background#0078D4
  • activityBarBadge.foreground#FFFFFF
  • badge.background#616161
  • badge.foreground#F8F8F8
  • button.background#0078D4
  • button.border#FFFFFF12
  • button.foreground#FFFFFF
  • button.hoverBackground#026EC1
  • button.secondaryBackground#313131
  • button.secondaryForeground#CCCCCC
  • button.secondaryHoverBackground#3C3C3C
  • chat.slashCommandBackground#34414B
  • chat.slashCommandForeground#40A6FF
  • checkbox.background#313131
  • checkbox.border#3C3C3C
  • debugToolBar.background#181818
  • descriptionForeground#9D9D9D
  • dropdown.background#313131
  • dropdown.border#3C3C3C
  • dropdown.foreground#CCCCCC
  • dropdown.listBackground#1F1F1F
  • editor.background#1e1f22
  • editor.findMatchBackground#66313f
  • editor.findMatchHighlightBackground#2d543f
  • editor.foreground#BCBEC4
  • editor.inactiveSelectionBackground#3A3D41
  • editor.lineHighlightBackground#26282e
  • editor.selectionBackground#214283E6
  • editor.selectionHighlightBackground#ADD6FF26
  • editor.wordHighlightBackground#373b39
  • editor.wordHighlightStrongBackground#402f33
  • editorBracketHighlight.unexpectedBracket.foreground#F75464
  • editorBracketMatch.background#43454a
  • editorGroup.border#FFFFFF17
  • editorGroupHeader.tabsBackground#181818
  • editorGroupHeader.tabsBorder#2B2B2B
  • editorGutter.addedBackground#2EA043
  • editorGutter.deletedBackground#F85149
  • editorGutter.modifiedBackground#0078D4
  • editorIndentGuide.activeBackground1#666870
  • editorIndentGuide.background1#313438
  • editorLineNumber.activeForeground#a1a3ab
  • editorLineNumber.foreground#4b5059
  • editorOverviewRuler.border#010409
  • editorRuler.foreground#313438
  • editorWidget.background#202020
  • errorForeground#F85149
  • focusBorder#0078D4
  • foreground#CCCCCC
  • icon.foreground#CCCCCC
  • input.background#313131
  • input.border#3C3C3C
  • input.foreground#CCCCCC
  • input.placeholderForeground#818181
  • inputOption.activeBackground#2489DB82
  • inputOption.activeBorder#2488DB
  • keybindingLabel.foreground#CCCCCC
  • list.activeSelectionIconForeground#FFF
  • list.dropBackground#383B3D
  • menu.background#1F1F1F
  • menu.border#454545
  • menu.foreground#CCCCCC
  • menu.selectionBackground#0078d4
  • menu.separatorBackground#454545
  • notificationCenterHeader.background#1F1F1F
  • notificationCenterHeader.foreground#CCCCCC
  • notifications.background#1F1F1F
  • notifications.border#2B2B2B
  • notifications.foreground#CCCCCC
  • panel.background#181818
  • panel.border#2B2B2B
  • panelInput.border#2B2B2B
  • panelTitle.activeBorder#0078D4
  • panelTitle.activeForeground#CCCCCC
  • panelTitle.inactiveForeground#9D9D9D
  • peekViewEditor.background#1F1F1F
  • peekViewEditor.matchHighlightBackground#BB800966
  • peekViewResult.background#1F1F1F
  • peekViewResult.matchHighlightBackground#BB800966
  • pickerGroup.border#3C3C3C
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#0078D4
  • quickInput.background#222222
  • quickInput.foreground#CCCCCC
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#3C3C3C
  • settings.headerForeground#FFFFFF
  • settings.modifiedItemIndicator#BB800966
  • sideBar.background#181818
  • sideBar.border#2B2B2B
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.border#2B2B2B
  • sideBarSectionHeader.foreground#CCCCCC
  • sideBarTitle.foreground#CCCCCC
  • statusBar.background#181818
  • statusBar.border#2B2B2B
  • statusBar.debuggingBackground#0078D4
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.focusBorder#0078D4
  • statusBar.foreground#CCCCCC
  • statusBar.noFolderBackground#1F1F1F
  • statusBarItem.focusBorder#0078D4
  • statusBarItem.prominentBackground#6E768166
  • statusBarItem.remoteBackground#0078D4
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#1F1F1F
  • tab.activeBorder#1F1F1F
  • tab.activeBorderTop#0078D4
  • tab.activeForeground#FFFFFF
  • tab.border#2B2B2B
  • tab.hoverBackground#1F1F1F
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#9D9D9D
  • tab.lastPinnedBorder#ccc3
  • tab.selectedBackground#222222
  • tab.selectedForeground#ffffffa0
  • tab.unfocusedActiveBorder#1F1F1F
  • tab.unfocusedActiveBorderTop#2B2B2B
  • tab.unfocusedHoverBackground#1F1F1F
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#56a8f5
  • terminal.ansiBrightBlack#000000
  • terminal.ansiBrightBlue#56a8f5
  • terminal.ansiBrightCyan#2aacb8
  • terminal.ansiBrightGreen#6aab73
  • terminal.ansiBrightMagenta#c77dbb
  • terminal.ansiBrightRed#fa6675
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#cf8e6d
  • terminal.ansiCyan#2aacb8
  • terminal.ansiGreen#6aab73
  • terminal.ansiMagenta#c77dbb
  • terminal.ansiRed#fa6675
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#cf8e6d
  • terminal.background#1e1f22
  • terminal.foreground#BCBEC4
  • terminal.inactiveSelectionBackground#3A3D41
  • terminal.tab.activeBorder#0078D4
  • textBlockQuote.background#2B2B2B
  • textBlockQuote.border#616161
  • textCodeBlock.background#2B2B2B
  • textLink.activeForeground#4daafc
  • textLink.foreground#4daafc
  • textPreformat.background#3C3C3C
  • textPreformat.foreground#D0D0D0
  • textSeparator.foreground#21262D
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#CCCCCC
  • titleBar.border#2B2B2B
  • titleBar.inactiveBackground#1F1F1F
  • titleBar.inactiveForeground#9D9D9D
  • welcomePage.progress.foreground#0078D4
  • welcomePage.tileBackground#2B2B2B
  • widget.border#313131

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.variable,punctuation.terminator,constant.character.escape,punctuation.quasi.element#cf8e6d
variable.parameter,variable.other,string.unquoted.argument.shell,storage.type.object,storage.type.java,constant.other.option#BCBEC4
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#BCBEC4
emphasisitalic
strongbold
header#000080
comment#7a7e85
comment.block#5f826bitalic
constant.language#cf8e6d
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#2aacb8
constant.regexp#646695
entity.name.tag#cf8e6d
entity.name.tag.css, entity.name.tag.less#d7ba7d
entity.other.attribute-name#56a8f5
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#d7ba7d
invalid#f44747
markup.underlineunderline
markup.bold#cf8e6dbold
markup.heading#cf8e6dbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#2aacb8
markup.deleted#6aab73
markup.changed#cf8e6d
punctuation.definition.quote.begin.markdown#5f826b
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#6aab73
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#cf8e6d
meta.preprocessor.string#6aab73
meta.preprocessor.numeric#2aacb8
meta.structure.dictionary.key.python#9cdcfe
meta.diff.header#cf8e6d
storage#cf8e6d
storage.type#cf8e6d
storage.modifier, keyword.operator.noexcept#cf8e6d
string, meta.embedded.assembly, support.type.property-name.json#6aab73
string.tag#6aab73
string.value#6aab73
string.regexp#B2AE60
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#cf8e6d
meta.template.expression#BCBEC4
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#9cdcfe
keyword#cf8e6d
keyword.control#cf8e6d
keyword.operator#BCBEC4
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#cf8e6d
keyword.other.unit#2aacb8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#cf8e6d
support.function.git-rebase#9cdcfe
constant.sha.git-rebase#2aacb8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#BCBEC4
variable.language#cf8e6d

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Darcula Contrast by nashpatty - VS Code Theme