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.italicitalic