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.activeBackground#0e1012
  • activityBar.background#0e1012
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#528bff
  • activityBarBadge.foreground#f8fafd
  • button.background#528bff
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#1d1f23
  • dropdown.border#181a1f
  • editor.background#0e1012
  • editor.findMatchHighlightBackground#314365
  • editor.lineHighlightBackground#1d1f23
  • editor.selectionBackground#3e4451
  • editorCursor.foreground#f8f8f0
  • editorError.foreground#704040
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#0e1012
  • editorHoverWidget.background#181a1f
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.background#3b4048
  • editorInfo.foreground#707040
  • editorLineNumber.foreground#495162
  • editorRuler.foreground#484848
  • editorSuggestWidget.background#181a1f
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#407040
  • editorWhitespace.foreground#484a50
  • editorWidget.background#181a1f
  • focusBorder#181a1f
  • input.background#1d1f23
  • list.activeSelectionBackground#121212
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#383e4a
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#121212
  • list.inactiveSelectionBackground#121212
  • list.inactiveSelectionForeground#d7dae0
  • peekView.border#202020
  • peekViewEditor.background#202020
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566680
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#0e1012
  • sideBar.border#1d1f23
  • sideBarSectionHeader.background#181a1f
  • statusBar.background#020202
  • statusBar.debuggingBackground#020202
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#020202
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#0e1012
  • tab.activeBorderTop#21fff0
  • tab.border#181a1f
  • tab.inactiveBackground#181a1f
  • titleBar.activeBackground#020202
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#020202
  • titleBar.inactiveForeground#6b717d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment#5C6370italic
string#E5C07B
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts#C678DD
string.template.js#E5C07B
meta.template.expression.js#ABB2BF
constant.numeric#C678DD
string.embedded.begin, string.embedded.end#C678DD
string.embedded#A6F087F6
constant.language#43C9D0
constant.character, constant.other#43C9D0
variable.language#FF6875
variable.readwrite, variable.readwrite.other.block#57ABF0
keyword, keyword.operator.logical, keyword.operator.constructor#FF6875
keyword.operator#FF6875
storage#FF6875
storage.type#43C9D0
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#57ABF0
variable.other.object#57ABF0
variable.other.property, variable.other.block#ABB2BF
entity.other.inherited-class#A6F087F6
entity.name.function, support.function#A6F087F6
variable.parameter#D19A66italic
entity.name.function-call#ABB2BF
function.support.builtin, function.support.core#A6F087F6
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx#FF6875
entity.name.tag.class, entity.name.tag.id#43C9D0
entity.other.attribute-name#A6F087F6
support.constant#43C9D0
support.type, support.variable#43C9D0
support.dictionary.json#43C9D0
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#ABB2BF
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#A6F087F6
variable.css, variable.scss, variable.less, variable.sass#43C9D0
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#E5C07B
unit.css, unit.scss, unit.less, unit.sass#C678DD
function.css, function.scss, function.less, function.sass#43C9D0
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
structure.dictionary.property-name.json#43C9D0
string.detected-link#57ABF0
meta.diff, meta.diff.header#75715E
markup.deleted#C678DD
markup.inserted#E5C07B
markup.changed#E5C07B
constant.numeric.line-number.find-in-files - match#43C9D0A0
entity.name.filename.find-in-files#E5C07B
markup.italic, markup.italic.markdownitalic
punctuation.definition.italic.markdown#696969none
markup.underline.link.markdown#57ABF0
markup.bold.markdownbold
punctuation.definition.bold.markdown#696969none
markup.heading.markdown#FF6875bold
punctuation.definition.heading.markdown#696969none
markup.quote.markdown#A6F087F6
meta.separator.markdown#C678DDbold
markup.raw.inline.markdown, markup.raw.block.markdown#43C9D0
punctuation.definition.list_item.markdown#FFFFFFbold
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
comment, variable.language, variable.parameter, entity.other.attribute-name, keyword, markup.underline.link, storage.modifier, storage.type, string.url, variable.language.super, variable.language.this
keyword.operator, keyword.other.type, storage.modifier.import, storage.modifier.package, storage.type.built-in, storage.type.function.arrow, storage.type.generic, storage.type.java, storage.type.primitive
Best Themes Redefined 🚀 by Lakshit Somani - VS Code Theme