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#ffffff1a
  • button.foreground#FFFFFF
  • button.hoverBackground#026EC1
  • button.secondaryBackground#00000000
  • button.secondaryForeground#CCCCCC
  • button.secondaryHoverBackground#2B2B2B
  • 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#262626
  • editor.findMatchBackground#9E6A03
  • editor.foreground#BCBCBC
  • editor.inactiveSelectionBackground#20406080
  • editor.lineHighlightBorder#333333
  • editor.selectionBackground#204060BF
  • editor.selectionHighlightBackground#ADD6FF26
  • editorBracketHighlight.unexpectedBracket.foreground#B30000
  • editorGroup.border#FFFFFF17
  • editorGroupHeader.tabsBackground#181818
  • editorGroupHeader.tabsBorder#2B2B2B
  • editorGutter.addedBackground#2EA043
  • editorGutter.deletedBackground#F85149
  • editorGutter.modifiedBackground#0078D4
  • editorIndentGuide.activeBackground1#484848
  • editorIndentGuide.background1#323232
  • editorLineNumber.activeForeground#909090
  • editorLineNumber.foreground#555555
  • editorOverviewRuler.border#010409
  • editorRuler.foreground#323232
  • 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.hoverBackground#F1F1F133
  • statusBarItem.hoverForeground#FFFFFF
  • 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.ansiBlue#87AFD7
  • terminal.ansiBrightBlack#080808
  • terminal.ansiBrightBlue#87AFD7
  • terminal.ansiBrightCyan#5FAFAF
  • terminal.ansiBrightGreen#87AF87
  • terminal.ansiBrightMagenta#8787AF
  • terminal.ansiBrightRed#FF8700
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFFAF
  • terminal.ansiCyan#5FAFAF
  • terminal.ansiGreen#87AF87
  • terminal.ansiMagenta#8787AF
  • terminal.ansiRed#FF8700
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FFFFAF
  • terminal.background#262626
  • terminal.foreground#BCBCBC
  • 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.terminator,constant.character.escape,punctuation.quasi.element#87AFD7
entity.name,support.type.property-name.json#8787AF
variable.other,string.unquoted.argument.shell,storage.type.object,storage.type.java,constant.other.option#BCBCBC
entity.name.function,support.function,keyword.control.twig#FFFFAF
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#BCBCBC
emphasisitalic
strongbold
comment#6C6C6C
comment.block#6C6C6C
constant.language#87AFD7
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#FF8700
constant.regexp#AF5F5F
entity.name.tag#87AFD7
entity.name.tag.css, entity.name.tag.less#87AFD7
entity.other.attribute-name#8787AF
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#87AFD7
invalid#B30000
markup.underlineunderline
markup.bold#87AFD7bold
markup.heading#87AFD7bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#FF8700
markup.deleted#87AF87
markup.changed#87AFD7
punctuation.definition.quote.begin.markdown#87AF87
punctuation.definition.list.begin.markdown#FFFFAF
markup.inline.raw#87AF87
punctuation.definition.tag#999999
meta.preprocessor, entity.name.function.preprocessor#87AFD7
meta.preprocessor.string#87AF87
meta.preprocessor.numeric#FF8700
meta.diff.header#87AFD7
storage#87AFD7
storage.type#87AFD7
storage.modifier, keyword.operator.noexcept#87AFD7
string, meta.embedded.assembly#87AF87
string.tag#87AF87
string.value#87AF87
string.regexp#87AF87
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#87AFD7
meta.template.expression#BCBCBC
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#BCBCBC
keyword#87AFD7
keyword.control#87AFD7
keyword.operator#BCBCBC
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#87AFD7
keyword.other.unit#FF8700
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#87AFD7
constant.sha.git-rebase#FF8700
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#BCBCBC
variable.language#87AFD7
support.constant.property-value, keyword.control.at-rule#8787AF
sage-theme by nashpatty - VS Code Theme