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#26242e
  • activityBar.foreground#ffb7c5
  • activityBar.inactiveForeground#778b8a
  • activityBarBadge.background#ffb7c5
  • activityBarBadge.foreground#26242e
  • badge.background#ffb7c5
  • badge.foreground#2c2a35
  • button.background#f1b8ff
  • button.foreground#2C2A35
  • button.hoverBackground#f6d1ff
  • dropdown.background#26242e
  • editor.background#2C2A35
  • editor.foreground#E0E2F0
  • editor.inactiveSelectionBackground#7cb7ff1a
  • editor.lineHighlightBorder#ffb7c533
  • editor.selectionBackground#7cb7ff33
  • editorCursor.foreground#ffb7c5cc
  • editorError.foreground#ee5d43
  • editorGroup.dropBackground#495061d7
  • editorGroupHeader.tabsBackground#34313f
  • editorInfo.foreground#00b0ff
  • editorInlayHint.background#8b949e1c
  • editorInlayHint.foreground#8b949e
  • editorInlayHint.typeBackground#8b949e1c
  • editorInlayHint.typeForeground#8b949e
  • editorSuggestWidget.background#211f28
  • editorSuggestWidget.selectedBackground#34313f
  • editorWarning.foreground#FFE66D
  • editorWidget.background#211f28
  • focusBorder#ffb7c580
  • foreground#E0E2F0
  • gitDecoration.ignoredResourceForeground#778b8abf
  • input.background#34313f
  • input.border#444153
  • input.foreground#ffe0e7
  • input.placeholderForeground#778b8a
  • list.activeSelectionBackground#26242e
  • list.dropBackground#26242e
  • list.hoverBackground#2a2833
  • list.inactiveSelectionBackground#282631
  • minimap.background#211f28
  • peekView.border#2C2A35
  • peekViewEditor.background#1c1c1c
  • peekViewEditor.matchHighlightBackground#FF9F2E60
  • peekViewResult.background#1c1c1c
  • peekViewResult.matchHighlightBackground#FF9F2E60
  • peekViewResult.selectionBackground#2C2A35
  • peekViewTitle.background#1c1c1c
  • peekViewTitleDescription.foreground#00e8c6
  • progressBar.background#00b0ff
  • quickInput.background#211f28
  • quickInputList.focusBackground#2f2d39
  • scrollbar.shadow#ffb7c533
  • sideBar.background#2f2d39
  • sideBar.foreground#778b8a
  • sideBarSectionHeader.background#2C2A35
  • sideBarTitle.foreground#ffb7c5
  • statusBar.background#211f28
  • statusBar.debuggingBackground#FC644D
  • statusBar.noFolderBackground#23262E
  • statusBarItem.activeBackground#00e8c5cc
  • statusBarItem.errorBackground#ff000080
  • statusBarItem.hoverBackground#ffb7c580
  • statusBarItem.prominentBackground#07d4b5b0
  • statusBarItem.prominentHoverBackground#00e8c5cc
  • statusBarItem.remoteBackground#f1b8ff
  • statusBarItem.remoteForeground#211f28
  • statusBarItem.warningBackground#ffff0080
  • tab.activeBackground#2C2A35
  • tab.activeBorder#ffb7c5
  • tab.activeForeground#00e8c6
  • tab.inactiveBackground#34313f
  • tab.inactiveForeground#778b8a
  • terminal.ansiBlue#7cb7ff
  • terminal.ansiBrightBlue#7cb7ff
  • terminal.ansiBrightCyan#00e8c6
  • terminal.ansiBrightGreen#96E072
  • terminal.ansiBrightMagenta#ff00aa
  • terminal.ansiBrightRed#ee5d43
  • terminal.ansiBrightYellow#FFE66D
  • terminal.ansiCyan#00e8c6
  • terminal.ansiGreen#96E072
  • terminal.ansiMagenta#ff00aa
  • terminal.ansiRed#ee5d43
  • terminal.ansiYellow#FFE66D
  • terminalCursor.background#2C2A35
  • terminalCursor.foreground#ffb7c5
  • terminalStickyScrollHover.background#26242e
  • titleBar.activeBackground#2C2A35
  • widget.shadow#ffb7c533

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, markup.quote.markdown, meta.diff, meta.diff.header#a0a1a7cc
meta.template.expression.js, constant.name.attribute.tag.jade, punctuation.definition.metadata.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown#E0E2F0
string, text.html.php string, markup.inline.raw, markup.inserted, punctuation.definition.string, punctuation.definition.markdown, text.html meta.embedded source.js string, text.html.php punctuation.definition.string, text.html meta.embedded source.js punctuation.definition.string, text.html punctuation.definition.string, text.html string#96E072
string.quoted.docstring punctuation.definition.string.begin.python, string.quoted.docstring, string.quoted.docstring punctuation.definition.string.end.python, comment.block.javadoc, comment.line.documentation.rust, comment.block.documentation#8ca777italic
source.regexp, string.regexp, string.regexp.quoted.multi punctuation.definition.string.begin.python, string.regexp.quoted.multi punctuation.definition.string.end.python#7cb7ff
meta.import.js string.quoted, meta.import.ts string.quoted, meta.import.jsx string.quoted, meta.import.tsx string.quoted, storage.modifier.import.java, storage.modifier.package.java, meta.use.rust entity.name.namespace.rust, entity.name.module.rust, meta.preprocessor.include.c punctuation.definition.string.begin.c, meta.preprocessor.include.c string.quoted, meta.preprocessor.include.c punctuation.definition.string.end.c, meta.preprocessor.include.cpp punctuation.definition.string.begin.cpp, meta.preprocessor.include.cpp string.quoted, meta.preprocessor.include.cpp punctuation.definition.string.end.cpp, entity.name.import.go, entity.name.package.go#55c9ff
variable, identifier#00e8c6
meta.structure.dictionary.json support.type.property-name, entity.name.tag.yaml, support.type.property-name.table.toml, support.type.property-name.toml, constant.character.entity.html, source.css entity.name.tag.reference, source.css entity.other.attribute-name.parent-selector, beginning.punctuation.definition.list.markdown, meta.object-literal.key#00e8c6
markup.heading, variable.language.this.js, variable.language.this.ts, variable.language.this.cpp, variable.language.self.rust, variable.language.special.self.python#ff00aa
constant.numeric#147eff
variable.other.property, entity.other.attribute-name, source.css keyword.other.unit, variable.other.object.property.js.jsx, variable.other.object.js#c74ded
support.type.exception.python#ee5d43
constant, support.constant#f39c12
keyword.operator#ee5d43
support.class#0cae00
entity.name.function, source.css support.function, source.php support.function, meta.function-call, support.function.magic.python#FFE66D
entity.name.type, support.type.python#0cae00
entity.name.tag, tag.html#f92672
keyword#ff00aa
storage#ff00aa
markup.bold#f39c12bold
markup.italic#7cb7ffitalic
punctuation.definition.math.begin.markdown, punctuation.definition.math.end.markdown#7cb7ff
meta.link, meta.image, source.js support.type#c74ded
*url*, *link*, *uri*underline
entity.other.inherited-classunderline
comment, invalid, keyword, entity.other.attribute-nameitalic