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#a55eea
  • activityBar.background#e8dfcd
  • activityBar.border#dcd1b9
  • activityBar.foreground#a55eea
  • activityBar.inactiveForeground#8e8584
  • activityBarBadge.background#a55eea
  • activityBarBadge.foreground#ffffff
  • editor.background#fcf8f2
  • editor.foreground#4a3e3d
  • editor.lineHighlightBackground#f5ebd9
  • editor.selectionBackground#a55eea33
  • editor.selectionHighlightBackground#a55eea22
  • editor.wordHighlightBackground#a55eea22
  • editor.wordHighlightStrongBackground#a55eea44
  • editorBracketMatch.background#a55eea22
  • editorBracketMatch.border#a55eea88
  • editorCursor.foreground#a55eea
  • editorGroupHeader.tabsBackground#f4eee3
  • editorGroupHeader.tabsBorder#e1d4be
  • editorIndentGuide.activeBackground#a55eea88
  • editorIndentGuide.background#e1d4be
  • editorLineNumber.activeForeground#a55eea
  • editorLineNumber.foreground#8e8584bb
  • editorWhitespace.foreground#dfd5c1
  • focusBorder#a55eea66
  • foreground#4a3e3d
  • gitDecoration.addedResourceForeground#2e7d32
  • gitDecoration.deletedResourceForeground#c62828
  • gitDecoration.ignoredResourceForeground#8e8584
  • gitDecoration.modifiedResourceForeground#1565c0
  • gitDecoration.untrackedResourceForeground#2e7d32
  • input.background#ffffff
  • input.border#dcd1b9
  • input.foreground#4a3e3d
  • input.placeholderForeground#9e9493
  • list.activeSelectionBackground#a55eea22
  • list.activeSelectionForeground#3c3231
  • list.highlightForeground#a55eea
  • list.hoverBackground#e8dfcd
  • list.hoverForeground#3c3231
  • list.inactiveSelectionBackground#e8dfcd
  • list.inactiveSelectionForeground#4a3e3d
  • scrollbarSlider.activeBackground#a55eea40
  • scrollbarSlider.background#a55eea15
  • scrollbarSlider.hoverBackground#a55eea25
  • selection.background#a55eea33
  • sideBar.background#f4eee3
  • sideBar.border#e1d4be
  • sideBar.foreground#4a3e3d
  • sideBarSectionHeader.background#e8dfcd
  • sideBarSectionHeader.border#dcd1b9
  • sideBarSectionHeader.foreground#3c3231
  • sideBarTitle.foreground#3c3231
  • statusBar.background#e8dfcd
  • statusBar.border#dcd1b9
  • statusBar.debuggingBackground#d35400
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#4a3e3d
  • statusBarItem.remoteBackground#a55eea
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#fcf8f2
  • tab.activeBorderTop#a55eea
  • tab.activeForeground#3c3231
  • tab.border#e1d4be
  • tab.inactiveBackground#f4eee3
  • tab.inactiveForeground#8e8584
  • terminal.ansiBlack#3c3231
  • terminal.ansiBlue#2980b9
  • terminal.ansiBrightBlack#8e8584
  • terminal.ansiBrightBlue#2980b9
  • terminal.ansiBrightCyan#16a085
  • terminal.ansiBrightGreen#27ae60
  • terminal.ansiBrightMagenta#a55eea
  • terminal.ansiBrightRed#c0392b
  • terminal.ansiBrightWhite#3c3231
  • terminal.ansiBrightYellow#d35400
  • terminal.ansiCyan#16a085
  • terminal.ansiGreen#27ae60
  • terminal.ansiMagenta#a55eea
  • terminal.ansiRed#c0392b
  • terminal.ansiWhite#4a3e3d
  • terminal.ansiYellow#d35400
  • terminal.background#fcf8f2
  • terminal.foreground#4a3e3d
  • titleBar.activeBackground#e8dfcd
  • titleBar.activeForeground#3c3231
  • titleBar.inactiveBackground#e8dfcd
  • titleBar.inactiveForeground#8e8584
  • widget.shadow#4a2a1a15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, unused.comment#8e8584italic
string, punctuation.definition.string#2e7d32—
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#d35400—
entity.name.function, support.function, meta.function-call, variable.function#1e7ecb—
variable, variable.parameter, variable.other, meta.block variable.other, support.variable#3c3231—
variable.other.property, variable.other.object.property, meta.object-literal.key#4a3e3d—
constant, constant.numeric, constant.language, constant.character, support.constant#d35400—
keyword.operator, punctuation.separator, punctuation.terminator, keyword.operator.assignment#a55eea—
meta.brace, punctuation, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.section, punctuation.accessor#4a3e3d—
entity.name.type, entity.name.class, support.type, support.class#d35400—
entity.name.tag, meta.tag#1e7ecb—
entity.other.attribute-name#a55eea—
support.type.property-name.css#4a3e3d—
support.constant.property-value.css, constant.numeric.css#2e7d32—
markup.heading, entity.name.section.markdown#d35400bold
markup.underline.link, string.other.link.title.markdown#1e7ecb—
markup.bold#a55eeabold
markup.italic—italic