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.activeBorder#aca1cf
  • activityBar.background#27272a
  • activityBar.border#131314
  • activityBar.foreground#c9c7cd
  • activityBar.inactiveForeground#757581
  • activityBarBadge.background#57575f
  • activityBarBadge.foreground#c9c7cd
  • breadcrumb.activeSelectionForeground#cac9dd
  • breadcrumb.focusForeground#cac9dd
  • breadcrumb.foreground#c9c7cd
  • breadcrumbPicker.background#353539
  • button.background#57575f
  • button.foreground#ffffff
  • button.hoverBackground#757581
  • button.secondaryBackground#57575f
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#757581
  • checkbox.background#2a2a2d
  • checkbox.border#3e3e43
  • diffEditor.insertedLineBackground#90b99f66
  • diffEditor.insertedTextBackground#90b99f33
  • diffEditor.removedLineBackground#f5a19166
  • diffEditor.removedTextBackground#f5a19133
  • dropdown.background#2a2a2d
  • dropdown.border#3e3e43
  • dropdown.foreground#c9c7cd
  • dropdown.listBackground#2a2a2d
  • editor.background#161617
  • editor.foldBackground#1b1b1d
  • editor.foreground#c9c7cd
  • editor.lineHighlightBackground#1b1b1d
  • editor.lineHighlightBorder#1b1b1d
  • editor.selectionBackground#3e3e43
  • editor.selectionHighlightBackground#3e3e43
  • editorBracketHighlight.foreground1#9998a8
  • editorBracketHighlight.foreground2#9998a8
  • editorBracketHighlight.foreground3#9998a8
  • editorBracketHighlight.foreground4#9998a8
  • editorBracketHighlight.foreground5#9998a8
  • editorBracketHighlight.foreground6#9998a8
  • editorBracketHighlight.unexpectedBracket.foreground#9998a8
  • editorCursor.foreground#c1c0d4
  • editorGutter.addedBackground#9dc6ac
  • editorGutter.deletedBackground#ffae9f
  • editorGutter.modifiedBackground#f0c5a9
  • editorIndentGuide.activeBackground#57575f
  • editorIndentGuide.background#2a2a2d
  • editorInlayHint.background#161617
  • editorInlayHint.foreground#757581
  • editorInlayHint.paramBackground#161617
  • editorInlayHint.paramForeground#757581
  • editorInlayHint.typeBackground#161617
  • editorInlayHint.typeForeground#757581
  • editorLineNumber.activeForeground#cac9dd
  • editorLineNumber.foreground#57575f
  • editorWhitespace.foreground#2a2a2d
  • editorWidget.background#1b1b1d
  • focusBorder#57575f
  • gitDecoration.addedResourceForeground#9dc6ac
  • gitDecoration.conflictingResourceForeground#ffae9f
  • gitDecoration.deletedResourceForeground#ffae9f
  • gitDecoration.ignoredResourceForeground#757581
  • gitDecoration.modifiedResourceForeground#f0c5a9
  • gitDecoration.submoduleResourceForeground#3e3e43
  • gitDecoration.untrackedResourceForeground#9dc6ac
  • icon.foreground#9998a8
  • input.background#2a2a2d
  • input.border#3e3e43
  • input.foreground#c9c7cd
  • input.placeholderForeground#757581
  • list.activeSelectionBackground#3e3e43
  • list.hoverBackground#2a2a2d
  • list.inactiveSelectionBackground#3e3e43
  • sideBar.background#27272a
  • sideBar.border#131314
  • sideBar.foreground#c9c7cd
  • sideBarSectionHeader.background#27272a
  • sideBarSectionHeader.border#131314
  • sideBarSectionHeader.foreground#757581
  • sideBarTitle.foreground#c1c0d4
  • statusBar.background#27272a
  • statusBar.border#27272a
  • statusBar.debuggingBackground#27272a
  • statusBar.debuggingForeground#c9c7cd
  • statusBar.focusBorder#353539
  • statusBar.foreground#c9c7cd
  • statusBar.noFolderBackground#27272a
  • statusBarItem.activeBackground#57575f
  • statusBarItem.focusBorder#57575f
  • statusBarItem.hoverBackground#3e3e43
  • statusBarItem.prominentBackground#27272a
  • statusBarItem.remoteBackground#27272a
  • statusBarItem.remoteForeground#c9c7cd
  • tab.activeBackground#27272a
  • tab.activeBorder#27272a
  • tab.activeBorderTop#aca1cf
  • tab.activeForeground#cac9dd
  • tab.border#27272a
  • tab.hoverBackground#27272a
  • tab.inactiveBackground#1b1b1d
  • tab.inactiveForeground#757581
  • tab.unfocusedActiveBorder#27272a
  • tab.unfocusedActiveBorderTop#27272a
  • tab.unfocusedHoverBackground#2a2a2d
  • terminal.ansiBlack#27272a
  • terminal.ansiBlue#aca1cf
  • terminal.ansiBrightBlack#353539
  • terminal.ansiBrightBlue#b9aeda
  • terminal.ansiBrightCyan#f591b2
  • terminal.ansiBrightGreen#9dc6ac
  • terminal.ansiBrightMagenta#ecaad6
  • terminal.ansiBrightRed#ffae9f
  • terminal.ansiBrightWhite#cac9dd
  • terminal.ansiBrightYellow#f0c5a9
  • terminal.ansiCyan#ea83a5
  • terminal.ansiGreen#90b99f
  • terminal.ansiMagenta#e29eca
  • terminal.ansiRed#f5a191
  • terminal.ansiWhite#c1c0d4
  • terminal.ansiYellow#e6b99d
  • terminal.background#1b1b1d
  • terminal.foreground#c9c7cd
  • textBlockQuote.background#90b99f
  • textCodeBlock.background#1b1b1d
  • textLink.activeForeground#9998a8
  • textLink.foreground#9998a8
  • tree.indentGuidesStroke#3e3e43

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
namespace, entity.name.namespace#f591b2italic
type, entity.name.type.primitive#e29eca
type.defaultLibrary, support.type, entity.name.type#b9aeda
function, entity.name.function, function.defaultLibrary, support.function#c1c0d4
method, entity.name.function.member, entity.name.function.clojure, entity.name.tag#aca1cf
class, entity.name.type.class, class.defaultLibrary, support.class#aca1cf
struct, storage.type#aca1cf
interface, entity.name.type.interface#aca1cf
enum, entity.name.type.enum#aca1cf
macro, entity.name.function.macro#f591b2
parameter, variable.parameter, meta.attribute, keyword.control.clojure#ea83a5
variable, variable.other.readwrite, entity.name.variable, variable.readonly, variable.other.constant, variable.readonly.defaultLibrary, support.constant#c1c0d4
property, variable.other.property, property.readonly, variable.other.constant.property#e6b99d
comment, punctuation.definition.comment, string.comment#757581italic
string, string punctuation.section.embedded source, constant.other.color, support.constant.property-value.css#90b99f
keyword, variable.language#aca1cf
keyword.operator, constant.keyword#e6b99d
keyword.operator.namespace, punctuation.brackets#9998a8
constant.language#e6b99d
entity.name.type.result#f0c5a9
constant.numeric#e29eca
markup.heading#b9aedabold
markup.raw, markup.inline.raw, markup.fenced_code#e6b99d
markup.underline.link#90b99f
string.other.link.title#aca1cfitalic
punctuation.definition.heading, punctuation.definition.tag.begin, punctuation.definition.tag.end#9998a8normal
entity.name.tag.html, entity.name.tag.js#ea83a5
entity.other.attribute-name.html, entity.other.attribute-name.js#aca1cfitalic