Skip to main content
Coding Theme

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#61dafb
  • activityBar.background#000000
  • activityBar.border#00000060
  • activityBar.foreground#1fdf64
  • activityBar.inactiveForeground#7e7b78
  • activityBarBadge.background#fa5151
  • activityBarBadge.foreground#ffffff
  • button.background#238636
  • button.foreground#ffffff
  • checkbox.background#ffea6b
  • checkbox.foreground#1a2023
  • dropdown.background#000000
  • dropdown.listBackground#232a2f
  • editor.background#000000
  • 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#000000
  • editorGroupHeader.tabsBorder#191919
  • 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#238636
  • extensionButton.prominentForeground#ffffff
  • focusBorder#707a84
  • gitDecoration.addedResourceForeground#4d9375
  • input.background#050505
  • input.border#191919
  • 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#61dafb40
  • settings.textInputBackground#050505
  • sideBar.background#000000
  • sideBar.border#00000060
  • sideBar.foreground#939da5
  • sideBarSectionHeader.background#000000
  • sideBarTitle.foreground#939da5
  • statusBar.background#000000
  • statusBar.debuggingBackground#ffa763
  • statusBar.debuggingForeground#1a2023
  • statusBar.foreground#939da5
  • statusBar.noFolderBackground#61dafb
  • statusBar.noFolderForeground#1a2023
  • tab.activeBackground#080808
  • tab.activeBorderTop#1fdf64
  • tab.activeForeground#939da5
  • tab.border#202020
  • tab.hoverBackground#080808
  • tab.inactiveBackground#000000
  • terminal.foreground#939da5
  • terminal.selectionBackground#eeeeee15
  • textLink.foreground#61dafb
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#939da5
  • titleBar.border#202020
  • titleBar.inactiveBackground#000000
  • 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#ff8ad1
variable, string constant.other.placeholder#939da5
invalid, invalid.illegal#ff6a80
keyword, storage.type, storage.modifier#ba8ef7
keyword.operator#939da5
keyword.control#ba8ef7
constant.language, variable.other.property#ffa763
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#61dafb
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#7ee787
support.class.component#ba8ef7
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#7ee787
punctuation.definition.arguments, meta.function-call#939da5
punctuation.accessor.js, punctuation.parenthesis#939da5
variable.other#939da5
constant.numeric, number color#61dafb
support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, variable.parameter#ffa657
support.variable.property#ffa763
string, markup.heading, markup.inserted.git_gutter, string.unquoted.label.js#61dafb
meta.return.type#ffea6b
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#ffa763
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#ffea6b
storage.type.function.arrow#939da5
support.type, support.type.primitive, support.type.sys-types#61dafb
entity.other.attribute-name#ffa763
entity.other.attribute-name.html, entity.other.attribute-name#ffa763
entity.other.attribute-name.class#ffa763
entity.other.attribute-name.id.css#ff8ad1
markup.inserted#C3E88D
markup.deleted#ff6a80
markup.changed#C792EA
string.regexp#56adb7
constant.character.escape#61dafb
*url*, *link*, *uri*underline
tag.decorator.js, tag.decorator.js punctuation.definition.tag.js#61dafb
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
markup.underline#939da5underline
markup.quote punctuation.definition.blockquote.markdown#939da5
string.other.link.title.markdown#61dafb
string.other.link.description.title.markdown#ba8ef7
constant.other.reference.link.markdown#ffea6b
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#ff6a80
support.type.object.module#ba8ef7
constant.language.boolean#ba8ef7
capalot-theme by capalot - VS Code Theme