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.background#212022fc
  • activityBar.border#ff6eb1
  • activityBar.foreground#02ffc0
  • activityBar.inactiveForeground#81f1d5
  • activityBarBadge.background#ff6eb1
  • activityBarBadge.foreground#ffffff
  • badge.background#ff6eb1
  • badge.foreground#ffffff
  • button.background#af3a70
  • button.foreground#ffffff
  • button.hoverBackground#6F2c32
  • dropdown.background#212022fc
  • dropdown.border#ff6eb1
  • dropdown.foreground#dce8e9
  • editor.background#1c1b1dfc
  • editor.foreground#dce8e9
  • editor.lineHighlightBackground#353030
  • editor.selectionBackground#6F2c32
  • editor.selectionHighlightBackground#af3a7040
  • editorCursor.foreground#FFFFFF
  • editorGroup.border#ff6eb1
  • editorGroupHeader.tabsBackground#212022fc
  • editorGroupHeader.tabsBorder#ff6eb1
  • editorGutter.addedBackground#ff6eb1
  • editorGutter.background#212022fc
  • editorGutter.deletedBackground#ff6eb1
  • editorGutter.foldingControlForeground#ff6eb1
  • editorGutter.modifiedBackground#ff6eb1
  • editorIndentGuide.activeBackground1#353030
  • editorIndentGuide.background1#353030
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#ac88ff
  • editorWhitespace.foreground#3F2D2D
  • input.background#211e1e
  • input.border#ff6eb1
  • input.foreground#dce8e9
  • inputOption.activeBorder#ff6eb1
  • list.activeSelectionBackground#af3a70
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#af3a70
  • list.hoverBackground#353030
  • list.inactiveSelectionBackground#6F2c32
  • menu.background#212022fc
  • menu.foreground#dce8e9
  • menu.selectionBackground#af3a70
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#02ffc0
  • menubar.selectionBackground#af3a70
  • menubar.selectionForeground#ffffff
  • panel.background#212022fc
  • panel.border#ffff63
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#81f1d5
  • progressBar.background#02ffc0
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#02ffc080
  • scrollbarSlider.background#02ffc040
  • scrollbarSlider.hoverBackground#02ffc060
  • sideBar.background#212022fc
  • sideBar.border#ff6eb1
  • sideBar.foreground#dce8e9
  • sideBarSectionHeader.background#2a2a2a
  • sideBarSectionHeader.border#ff6eb1
  • sideBarSectionHeader.foreground#02ffc0
  • sideBarTitle.foreground#02ffc0
  • statusBar.background#212022fc
  • statusBar.border#ff6eb1
  • statusBar.debuggingBackground#af3a70
  • statusBar.foreground#ffff63
  • statusBar.noFolderBackground#212022fc
  • statusBarItem.prominentBackground#af3a70
  • statusBarItem.prominentHoverBackground#6F2c32
  • tab.activeBackground#211e1efc
  • tab.activeBorder#ff6eb1
  • tab.activeForeground#02ffc0
  • tab.border#ff6eb1
  • tab.inactiveBackground#2a2a2a
  • tab.inactiveForeground#ac88ff
  • titleBar.activeBackground#212022fc
  • titleBar.activeForeground#ffff63
  • titleBar.border#ff6eb1
  • titleBar.inactiveBackground#2a2a2a
  • titleBar.inactiveForeground#ac88ff
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#ac88ff—
string#32d9ff—
constant.numeric#CCCCCC—
keyword, keyword.control.js#02ffc0—
meta.preprocessor#ffff63—
keyword.control.import#dce8e9bold
support.function#02ffc0—
declaration.function function-result#ffff63—
declaration.function function-name#dce8e9bold
declaration.function argument-name#dce8e9bold
declaration.function function-arg-type#ffff63—
declaration.function function-argument#dce8e9italic
declaration.class class-name#dce8e9underline
declaration.class class-inheritance#dce8e9italic underline
comment.merge-marker.yours, comment.merge-marker.end, comment.merge-marker.theirs#32d9ff—
invalid.warning#ffffff—
invalid#FFF9F9bold
invalid.deprecated.trailing-whitespace#dce8e9—
declaration.section section-name#dce8e9italic
string.interpolation#ff6268—
string.regexp#666666—
variable#ff6eb1—
constant, support.constant#ac88ff—
constant.character#32d9ff—
constant.language#ffff63bold
embedded#dce8e9underline
keyword.markup.element-name#ac88ff—
keyword.markup.attribute-name, entity.name.type.attribute-name#ff6eb1—
meta.attribute-with-value#ff6eb1—
keyword.exception#C82255bold
keyword.operator#30ffc1—
keyword.control#ffff63bold
support.constant.tm-language-def, support.constant.name.tm-language-def#ac88ff—
meta.tag.preprocessor.xml#68685B—
meta.tag.sgml.doctype#888888—
string.quoted.docinfo.doctype.DTD#dce8e9italic
comment.other.server-side-include.xhtml, comment.other.server-side-include.html#909090—
text.html declaration.tag, text.html meta.tag, source.scss entity.name.tag, text.html entity.name.tag.xhtml#02ffc0—
keyword.other.phpdoc.php#777777—
keyword.other.include.php#C82255—
support.constant.core.php#ffba5abold
support.constant.std.php#ffba5abold
variable.other.global.php#B72E1D—
variable.other.global.safer.php#02ffc0—
string.quoted.single.php#bef4f8—
keyword.storage.php#ac88ff—
string.quoted.double.php#bef4f8—
entity.other.attribute-name.id.css#ffba5a—
entity.name.tag.css#bfff3ebold
entity.other.attribute-name.class.css#ffff63—
entity.other.attribute-name.pseudo-class.css#32d9ff—
invalid.bad-comma.css#FFFFFF—
support.constant.property-value.css#d2679a—
support.type.property-name.css, storage.modifier#ffff63—
support.constant.font-name.css#bef4f8—
keyword.other.unit.css#ac88ff—
string.quoted.single.js#32d9ff—
string.quoted.double.js#C1538A—
keyword.operator.new.js#02ffc0—
storage.type#02ffc0—
comment.line.number-sign.r#32d9ffitalic
comment.line.number-sign-tick.r#ff6268italic
comment.line.number-sign-plus.r#ac88ffitalic
markup.raw.block.markdown#dce8e9—