Skip to main content
CodingTheme

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.background#2b2b2b
  • activityBarBadge.background#214283
  • button.background#214283
  • editor.background#ffffff
  • editor.foreground#5e3f16
  • editor.inactiveSelectionBackground#c0d0ee
  • editor.selectionBackground#c0d0ee
  • editor.selectionHighlightBackground#c0d0ee
  • editorIndentGuide.activeBackground#cccccc
  • editorIndentGuide.background#cccccc
  • editorLineNumber.activeForeground#aaaaaa
  • editorLineNumber.foreground#aaaaaa
  • focusBorder#333333
  • foreground#424242
  • gitDecoration.addedResourceForeground#859868
  • gitDecoration.conflictingResourceForeground#836592
  • gitDecoration.deletedResourceForeground#9e3725
  • gitDecoration.ignoredResourceForeground#8c8c8c
  • gitDecoration.modifiedResourceForeground#79603e
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#C6684B
  • input.placeholderForeground#a6a6a6
  • list.activeSelectionBackground#214283
  • list.dropBackground#383b3d
  • list.focusBackground#c0d0ee
  • menu.background#eeeeee
  • menu.foreground#424242
  • minimap.selectionHighlight#58772d
  • selection.background#c0d0ee
  • settings.numberInputBackground#292929
  • settings.textInputBackground#292929
  • sideBar.background#eeeeee
  • sideBarSectionHeader.background#dddddd
  • sideBarSectionHeader.border#cccccc
  • sideBarTitle.foreground#424242
  • statusBar.background#214283
  • statusBar.debuggingBackground#834521
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#214283
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#ffffff2e
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.prominentBackground#00000080
  • statusBarItem.prominentForeground#ffffff
  • statusBarItem.prominentHoverBackground#0000004d
  • statusBarItem.remoteBackground#405e99
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#214283
  • tab.activeForeground#eeeeee
  • tab.hoverBackground#cccccc
  • tab.hoverForeground#424242
  • tab.inactiveForeground#424242
  • textBlockQuote.background#58772d
  • textLink.activeForeground#5188f7
  • textLink.foreground#4b6db3
  • titleBar.activeBackground#eeeeee

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
code-runner.output, code-runner.running, code-runner.output#D4D4D4
meta.embedded, source.groovy.embedded#D4D4D4
emphasisitalic
strongbold
header#214283
comment#54f00c
constant.language#569CD6
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#B5CEA8
constant.regexp#646695
entity.name.tag#569CD6
entity.name.tag.css#685c40
entity.other.attribute-name#9CDCFE
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#685c40
invalid#F44747
markup.underlineunderline
markup.bold#569CD6bold
markup.heading#569CD6bold
markup.italicitalic
markup.inserted#B5CEA8
markup.deleted#CE9178
markup.changed#569CD6
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796E6
markup.inline.raw#CE9178
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#569CD6
meta.preprocessor.string#CE9178
meta.preprocessor.numeric#B5CEA8
meta.structure.dictionary.key.python#9CDCFE
meta.diff.header#569CD6
storage#569CD6
storage.type#569CD6
storage.modifier, keyword.operator.noexcept#569CD6
string, meta.embedded.assembly#CE9178
string.tag#CE9178
string.value#CE9178
string.regexp#D16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#5e3f16
meta.template.expression#D4D4D4
variable.css, variable.scss, variable.other.less, source.coffee.embedded, entity.other.attribute-name.placeholder.css#415983
keyword#569CD6
keyword.control#569CD6
keyword.operator#D4D4D4
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#569CD6
keyword.other.unit#B5CEA8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#569CD6
constant.other.php, constant.other.class.php#7e4f96
support.function.git-rebase#9CDCFE
constant.sha.git-rebase#B5CEA8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#D4D4D4
variable.language#569CD6
comment#58772d
punctuation.definition.comment#58772d
string#58772d
meta.embedded.assembly#58772d
keyword - keyword.operator#685c40
keyword.control#685c40
storage#685c40
storage.type#685c40
constant.numeric#be441f
entity.name.type#5e3f16
entity.name.class#5e3f16
support.type#5e3f16
support.class#5e3f16
entity.name.function#5e3f16
support.function#5e3f16
variable#415983
entity.name.variable#415983
support.type.property-name#5e3f16
constant.language#685c40
constant.numeric#be441f
entity.name, entity.name.function, entity.name.tag, entity.name.type#5e3f16
keyword, keyword.control, keyword.operator#5e3f16
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#5e3f16
storage, storage.type, storage.modifier#685c40
variable.language#685c40
meta.preprocessor, entity.name.function.preprocessor#685c40
meta.preprocessor.numeric#be441f
constant.numeric, entity.name.operator.custom-literal.number, keyword.operator.plus.exponent, keyword.operator.minus.exponent#be441f
variable.other.enummember#925483
keyword.other.unit#5e3f16
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#5e3f16
meta.embedded, source.groovy.embedded#5e3f16
text.html.derivative#424242
entity.other.attribute-name.js, entity.other.attribute-name.html, meta.tag.metadata.doctype.html#685c40
punctuation.definition.tag.end.html, punctuation.definition.tag.begin.html#5e3f16
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#836592

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...