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#bd4242
  • activityBar.background#0c0f13
  • activityBar.border#00000060
  • activityBar.foreground#bd4242
  • activityBar.inactiveForeground#abb3b9
  • activityBarBadge.background#bd4242
  • activityBarBadge.foreground#0c0f13
  • button.background#bd4242
  • button.foreground#0c0f13
  • checkbox.background#bd4242
  • checkbox.foreground#0c0f13
  • dropdown.background#0c0f13
  • dropdown.listBackground#1a1d25
  • editor.background#1a1d25
  • editor.findMatchBackground#903b3b
  • editor.findMatchHighlightBackground#d6757551
  • editor.foreground#abb3b9
  • editor.inactiveSelectionBackground#ff000072
  • editor.inlineValuesForeground#ff0000
  • editor.lineHighlightBackground#ffffff08
  • editor.selectionBackground#204062
  • editor.selectionHighlightBorder#abb3b9
  • editor.wordHighlightBackground#abb3b930
  • editorBracketMatch.background#bd4242
  • editorBracketMatch.border#bd4242
  • editorCursor.background#2a2f23
  • editorCursor.foreground#abb3b9
  • editorGhostText.foreground#a78ef782
  • editorGroup.border#00000060
  • editorGroup.dropBackground#535d7530
  • editorGroupHeader.noTabsBackground#1B202a
  • editorGroupHeader.tabsBackground#0c0f13
  • editorGroupHeader.tabsBorder#00000060
  • editorHoverWidget.background#313b40
  • editorHoverWidget.border#ffffff1f
  • editorHoverWidget.foreground#d4dce4
  • editorHoverWidget.highlightForeground#bd4242
  • editorIndentGuide.activeBackground1#d53e3e7c
  • editorIndentGuide.background1#abb3b913
  • editorInlayHint.foreground#a78ef782
  • editorLineNumber.activeForeground#bd4242
  • editorLineNumber.foreground#707a84
  • editorLink.activeForeground#bd4242
  • editorSuggestWidget.background#2c3339
  • editorSuggestWidget.border#ffffff12
  • editorSuggestWidget.focusHighlightForeground#bd4242
  • editorSuggestWidget.highlightForeground#bd4242
  • editorSuggestWidget.selectedBackground#0c0f13
  • editorSuggestWidget.selectedForeground#d4dce4
  • editorSuggestWidget.selectedIconForeground#ffffff
  • editorWidget.background#1a1d25
  • editorWidget.border#707a84
  • editorWidget.resizeBorder#bd4242
  • extensionButton.prominentBackground#d4dce4
  • extensionButton.prominentForeground#0c0f13
  • focusBorder#707a84
  • gitDecoration.addedResourceForeground#00aeff
  • gitDecoration.conflictingResourceForeground#2bff00
  • gitDecoration.deletedResourceForeground#00ff99
  • gitDecoration.ignoredResourceForeground#abb3b98a
  • gitDecoration.modifiedResourceForeground#ff6f00
  • gitDecoration.renamedResourceForeground#ff00ee
  • gitDecoration.stageDeletedResourceForeground#ff0084
  • gitDecoration.stageModifiedResourceForeground#ff0000
  • gitDecoration.submoduleResourceForeground#0077ff
  • gitDecoration.untrackedResourceForeground#91c57a
  • input.background#1a1d25
  • inputOption.activeBorder#bd4242
  • list.activeSelectionBackground#1a1d25
  • list.dropBackground#1a1d25
  • list.focusBackground#1a1d25
  • list.focusOutline#707a84
  • list.hoverBackground#1a1d25
  • notebookStatusErrorIcon.foreground#de2020
  • notebookStatusSuccessIcon.foreground#57da10
  • panelTitle.activeBorder#bd4242
  • panelTitle.activeForeground#bd4242
  • panelTitle.inactiveForeground#abb3b9
  • pickerGroup.foreground#bd4242
  • progressBar.background#bd4242
  • quickInput.background#0c0f13
  • quickInput.foreground#abb3b9
  • quickInputList.focusBackground#1a1d25
  • quickInputList.focusForeground#d4dce4
  • selection.background#89ddff40
  • settings.textInputBackground#0c0f13
  • sideBar.background#0c0f13
  • sideBar.border#00000000
  • sideBar.foreground#abb3b9
  • sideBarSectionHeader.background#1a1d25
  • sideBarTitle.foreground#abb3b9
  • statusBar.background#0c0f13
  • statusBar.debuggingBackground#ffa763
  • statusBar.debuggingForeground#0c0f13
  • statusBar.foreground#abb3b9
  • statusBar.noFolderBackground#bd4242
  • statusBar.noFolderForeground#0c0f13
  • tab.activeBackground#0c0f13
  • tab.activeBorderTop#bd4242
  • tab.activeForeground#abb3b9
  • tab.border#00000000
  • tab.hoverBackground#1a1d25
  • tab.inactiveBackground#0c0f13
  • textLink.activeForeground#bd4242
  • textLink.foreground#d67575
  • titleBar.activeBackground#0c0f13
  • titleBar.activeForeground#abb3b9
  • titleBar.inactiveBackground#1a1d25
  • toolbar.hoverBackground#707a8430
  • walkThrough.embeddedEditorBackground#ff0000
  • walkthrough.stepTitle.foreground#d4dce4
  • welcomePage.background#1a1d25
  • welcomePage.progress.background#bd424223
  • welcomePage.progress.foreground#bd4242
  • welcomePage.tileBackground#313b40
  • welcomePage.tileBorder#bd42427a
  • welcomePage.tileHoverBackground#ffffff21
  • widget.shadow#0c0f13

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.operator.new, keyword.operator.logical, keyword, keyword.control, storage.type, storage.modifier#ba8ef7
keyword.operator#f78e8e
constant.language#ffa763
comment#576976
comment.line.shebang#ff8ad1
variable, string constant.other.placeholder#a0a7ad
invalid, invalid.illegal#ff6a80
punctuation.definition.template-expression, punctuation.definition.typeparameters, meta.template.expression#abb3b9
punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#d9f78e
support.function.builtin#89ddff
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ff6a80
support.class.component#ba8ef7
variable.function, meta.member.access#abb3b9
meta.return.type, meta.function-call#ffea6b
punctuation.accessor.js, punctuation.parenthesis#abb3b9
variable.other#abb3b9
constant.numeric#89ddff
support.constant, constant.character, constant.escape#abb3b9
keyword.other.unit, keyword.other, variable.parameter#8ab4d6
support.variable.property#ffa763
string, markup.heading, markup.inserted.git_gutter, string.unquoted.label.js#5bec95
meta.return.type#ffea6b
support.type#abb3b9
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#abb3b9
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#abb3b9
entity.name.method.js#abb3b9
meta.class-method.js entity.name.function.js, variable.function.constructor#ffea6b
storage.type.function.arrow#abb3b9
support.type, support.type.primitive, support.type.sys-types#89ddff
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#89ddff
*url*, *link*, *uri*underline
tag.decorator.js, tag.decorator.js punctuation.definition.tag.js, entity.name.function.decorator, meta.function.decorator#89ddff
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#abb3b9
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#abb3b9underline
markup.quote punctuation.definition.blockquote.markdown#abb3b9
string.other.link.title.markdown#89ddff
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#abb3b9
variable.language.fenced.markdown#abb3b9
meta.separator#8796b0bold
markup.table#abb3b9
support.type.object.module#ba8ef7
constant.language.boolean#ba8ef7
constant.character.format.placeholder.other.python#BA8EF7
fsx theme by fsx - VS Code Theme