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#456fff
  • activityBar.background#1a2023
  • activityBar.border#00000060
  • activityBar.foreground#456fff
  • activityBar.inactiveForeground#939da5
  • activityBarBadge.background#456fff
  • activityBarBadge.foreground#1a2023
  • button.background#25ffaf9d
  • button.foreground#1a2023
  • checkbox.background#25ffaf9d
  • checkbox.foreground#1a2023
  • dropdown.background#1a2023
  • dropdown.listBackground#232a2f
  • editor.background#202325
  • editor.foreground#939da5
  • editor.lineHighlightBorder#939da515
  • editor.selectionBackground#204062
  • editor.selectionHighlightBorder#939da5
  • editor.wordHighlightBackground#939da530
  • editorCursor.background#232a2f
  • editorCursor.foreground#939da5
  • editorGroup.border#00000060
  • editorGroup.dropBackground#535d7530
  • editorGroupHeader.noTabsBackground#1B202a
  • editorGroupHeader.tabsBackground#1a2023
  • editorGroupHeader.tabsBorder#00000060
  • editorIndentGuide.activeBackground#939da550
  • editorIndentGuide.background#939da520
  • editorLineNumber.activeForeground#d4dce4
  • editorLineNumber.foreground#707a84
  • editorSuggestWidget.selectedBackground#1a2023
  • editorSuggestWidget.selectedForeground#d4dce4
  • editorWidget.background#232a2f
  • editorWidget.border#707a84
  • extensionButton.prominentBackground#d4dce4
  • extensionButton.prominentForeground#1a2023
  • focusBorder#707a84
  • input.background#232a2f
  • list.activeSelectionBackground#232a2f
  • list.dropBackground#232a2f
  • list.focusBackground#232a2f
  • list.focusOutline#707a84
  • list.hoverBackground#232a2f
  • panelTitle.activeForeground#d4dce4
  • panelTitle.inactiveForeground#939da5
  • quickInput.background#1a2023
  • quickInput.foreground#939da5
  • quickInputList.focusBackground#232a2f
  • quickInputList.focusForeground#d4dce4
  • selection.background#456fff40
  • settings.textInputBackground#1a2023
  • sideBar.background#1a2023
  • sideBar.border#00000060
  • sideBar.foreground#939da5
  • sideBarSectionHeader.background#232a2f
  • sideBarTitle.foreground#939da5
  • statusBar.background#1a2023
  • statusBar.debuggingBackground#ac08c2
  • statusBar.debuggingForeground#1a2023
  • statusBar.foreground#939da5
  • statusBar.noFolderBackground#456fff
  • statusBar.noFolderForeground#1a2023
  • tab.activeBackground#1a2023
  • tab.activeBorderTop#25ffaf9d
  • tab.activeForeground#939da5
  • tab.border#00000060
  • tab.hoverBackground#232a2f
  • tab.inactiveBackground#1a2023
  • textLink.foreground#456fff
  • titleBar.activeBackground#1a2023
  • titleBar.activeForeground#939da5
  • titleBar.border#00000060
  • titleBar.inactiveBackground#232a2f
  • toolbar.hoverBackground#707a8430
  • widget.shadow#1a2023

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.operator.new, keyword.operator.logical#ba8ef7
comment#707a84
comment.line.shebang#fc03e3
variable, string constant.other.placeholder#939da5
invalid, invalid.illegal#ff3856
keyword, storage.type, storage.modifier#ba8ef7
keyword.operator#939da5
keyword.control#ba8ef7
constant.language, variable.other.property#ac08c2
punctuation.definition.template-expression, punctuation.definition.typeparameters, meta.template.expression#939da5
punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#939da5
support.function.builtin#678bff
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ff4965
support.class.component#ba8ef7
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#ffde25
punctuation.definition.arguments, meta.function-call#939da5
punctuation.accessor.js, punctuation.parenthesis#939da5
variable.other#939da5
constant.numeric#678bff
support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, variable.parameter#939da5
support.variable.property#ac08c2
string, markup.heading, markup.inserted.git_gutter, string.unquoted.label.js#5bec95
meta.return.type#ffde25
support.type#939da5
keyword.other.unit.px.css, support.constant.color.w3c-standard-color-name.css, keyword.other.unit.s.css, support.constant.property-value.css, meta.property-value.css#ac08c2
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#939da5
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#939da5
variable.language#939da5
entity.name.method.js#939da5
meta.class-method.js entity.name.function.js, variable.function.constructor#ffde25
storage.type.function.arrow#939da5
support.type, support.type.primitive, support.type.sys-types#678bff
entity.other.attribute-name#ac08c2
entity.other.attribute-name.html, entity.other.attribute-name#ac08c2
entity.other.attribute-name.class#ac08c2
entity.other.attribute-name.id.css#fc03e3
markup.inserted#C3E88D
markup.deleted#ff3856
markup.changed#C792EA
string.regexp#56adb7
constant.character.escape#678bff
*url*, *link*, *uri*underline
tag.decorator.js, tag.decorator.js punctuation.definition.tag.js#678bff
source.js constant.other.object.key.js string.unquoted.label.js#b15e7c
source.json meta.structure.dictionary.json support.type.property-name.json#ba8ef7
text.html.markdown, punctuation.definition.list_item.markdown#939da5
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#5bec95
markup.bold, markup.bold string#ba8ef7bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#ba8ef7bold
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#ffff00
markup.underline#939da5underline
markup.quote punctuation.definition.blockquote.markdown#939da5
string.other.link.title.markdown#678bff
string.other.link.description.title.markdown#ba8ef7
constant.other.reference.link.markdown#ffde25
markup.raw.block#ba8ef7
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#939da5
variable.language.fenced.markdown#939da5
meta.separator#8796b0bold
markup.table#939da5
entity.name.type.class#ff3856
support.type.object.module#ba8ef7
constant.language.boolean#ba8ef7
entity.name.type#678bff
Waterbyte Theme by Michael Ungar - VS Code Theme