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#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.editedFileForeground#E2C08D
  • chat.slashCommandBackground#26477866
  • chat.slashCommandForeground#85B6FF
  • 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#242628
  • editor.foreground#d5c4a1
  • editor.lineHighlightBorder#32302f
  • editor.selectionBackground#07667880
  • editor.wordHighlightStrongBackground#532b2ecc
  • editorBracketHighlight.unexpectedBracket.foreground#9d0006
  • editorBracketMatch.background#3c3836
  • editorBracketMatch.border#7c6f64
  • editorGroup.border#FFFFFF17
  • editorGroupHeader.tabsBackground#181818
  • editorGroupHeader.tabsBorder#2B2B2B
  • editorGutter.addedBackground#2EA043
  • editorGutter.deletedBackground#F85149
  • editorGutter.modifiedBackground#0078D4
  • editorIndentGuide.activeBackground1#665c54
  • editorIndentGuide.background1#50494566
  • editorLineNumber.activeForeground#a89984
  • editorLineNumber.foreground#665c54
  • editorOverviewRuler.border#010409
  • editorRuler.foreground#3c3836
  • editorWhitespace.foreground#504945
  • editorWidget.background#202020
  • errorForeground#F85149
  • focusBorder#0078D4
  • foreground#CCCCCC
  • icon.foreground#CCCCCC
  • input.background#313131
  • input.border#3C3C3C
  • input.foreground#CCCCCC
  • input.placeholderForeground#989898
  • inputOption.activeBackground#2489DB82
  • inputOption.activeBorder#2488DB
  • keybindingLabel.foreground#CCCCCC
  • menu.background#1F1F1F
  • menu.selectionBackground#0078d4
  • 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
  • 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.selectedBorderTop#6caddf
  • tab.unfocusedActiveBorder#1F1F1F
  • tab.unfocusedActiveBorderTop#2B2B2B
  • tab.unfocusedHoverBackground#1F1F1F
  • terminal.ansiBlack#080808
  • terminal.ansiBlue#83a598
  • terminal.ansiBrightBlack#080808
  • terminal.ansiBrightBlue#83a598
  • terminal.ansiBrightCyan#81AE70
  • terminal.ansiBrightGreen#b8bb26
  • terminal.ansiBrightMagenta#d3869b
  • terminal.ansiBrightRed#fb4934
  • terminal.ansiBrightWhite#f9f5d7
  • terminal.ansiBrightYellow#D79921
  • terminal.ansiCyan#81AE70
  • terminal.ansiGreen#b8bb26
  • terminal.ansiMagenta#d3869b
  • terminal.ansiRed#fb4934
  • terminal.ansiWhite#f9f5d7
  • terminal.ansiYellow#D79921
  • terminal.background#242628
  • terminal.foreground#d5c4a1
  • 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.terminator,constant.character.escape,punctuation.quasi.element#CC7832
entity.name#d79921
variable.parameter,variable.other,string.unquoted.argument.shell,storage.type.object,storage.type.java,constant.other.option#d5c4a1
entity.name.function,support.function,support.type.property-name.json,keyword.control.twig#d79921
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#d5c4a1
emphasisitalic
strongbold
comment#928374
comment.block#79740e
constant.language#CC7832
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#83a598
constant.regexp#d65d0e
entity.name.tag#CC7832
entity.name.tag.css, entity.name.tag.less#CC7832
entity.other.attribute-name#d79921
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#CC7832
invalid#cc241d
markup.underlineunderline
markup.bold#CC7832bold
markup.heading#CC7832bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#83a598
markup.deleted#b8bb26
markup.changed#CC7832
punctuation.definition.quote.begin.markdown#b8bb26
punctuation.definition.list.begin.markdown#83a598
markup.inline.raw#b8bb26
punctuation,meta.brace#a89984
meta.preprocessor, entity.name.function.preprocessor#CC7832
meta.preprocessor.string#b8bb26
meta.preprocessor.numeric#83a598
meta.diff.header#CC7832
storage#CC7832
storage.type#CC7832
storage.modifier, keyword.operator.noexcept#CC7832
string, meta.embedded.assembly#b8bb26
string.tag#b8bb26
string.value#b8bb26
string.regexp#b8bb26
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#CC7832
meta.template.expression#d5c4a1
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#d5c4a1
keyword#CC7832
keyword.control#CC7832
keyword.operator#d5c4a1
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#CC7832
keyword.other.unit#83a598
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#CC7832
constant.sha.git-rebase#83a598
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d5c4a1
variable.language#CC7832
support.constant.property-value, keyword.control.at-rule#d79921
grubby-theme by nashpatty - VS Code Theme