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#89ddff
  • activityBar.background#161616
  • activityBar.border#00000060
  • activityBar.foreground#89ddff
  • activityBar.inactiveForeground#939da5
  • activityBarBadge.background#89ddff
  • activityBarBadge.foreground#1a2023
  • button.background#ffea6b
  • button.foreground#1a2023
  • checkbox.background#ffea6b
  • checkbox.foreground#1a2023
  • dropdown.background#1a2023
  • dropdown.listBackground#232a2f
  • editor.background#161616
  • 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#161616
  • editorGroupHeader.tabsBorder#222222
  • editorIndentGuide.activeBackground#939da550
  • editorIndentGuide.background#939da520
  • editorLineNumber.activeForeground#d4dce4
  • editorLineNumber.foreground#707a84
  • editorSuggestWidget.background#161616
  • editorSuggestWidget.border#1e1b46
  • 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
  • menu.background#161616
  • panel.background#161616
  • panelTitle.activeForeground#d4dce4
  • panelTitle.inactiveForeground#939da5
  • quickInput.background#1a2023
  • quickInput.foreground#939da5
  • quickInputList.focusBackground#232a2f
  • quickInputList.focusForeground#d4dce4
  • selection.background#89ddff40
  • settings.textInputBackground#1a2023
  • sideBar.background#161617
  • sideBar.border#222222
  • sideBar.foreground#939da5
  • sideBarSectionHeader.background#161616
  • sideBarTitle.foreground#939da5
  • statusBar.background#161616
  • statusBar.debuggingBackground#ffa763
  • statusBar.debuggingForeground#1a2023
  • statusBar.foreground#939da5
  • statusBar.noFolderBackground#89ddff
  • statusBar.noFolderForeground#1a2023
  • tab.activeBackground#161616
  • tab.activeBorderTop#ffea6b
  • tab.activeForeground#939da5
  • tab.border#00000060
  • tab.hoverBackground#232a2f
  • tab.inactiveBackground#161616
  • terminal.background#161616
  • textLink.foreground#89ddff
  • titleBar.activeBackground#161616
  • 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#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#89DDFF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FF6A80
support.class.component#BA8EF7
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#FFEA6B
punctuation.definition.arguments, meta.function-call#939DA5
punctuation.accessor.js, punctuation.parenthesis#939DA5
variable.other#939DA5
constant.numeric#89DDFF
support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, variable.parameter#939DA5
support.variable.property#FFA763
string, markup.heading, markup.inserted.git_gutter, string.unquoted.label.js#5BEC95
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#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#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#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#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#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
entity.name.type#89DDFF
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
Radha Theme by Radha - VS Code Theme