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#ddd6c1
  • activityBar.foreground#584c27
  • activityBarBadge.background#b58900
  • badge.background#b58900aa
  • button.background#ac9d57
  • debugExceptionWidget.background#ddd6c1
  • debugExceptionWidget.border#ab395b
  • debugToolBar.background#ddd6c1
  • dropdown.background#eee8d5
  • dropdown.border#d3af86
  • editor.background#fdf6e3
  • editor.findMatchHighlightForeground#fdf6e3
  • editor.foreground#657b83
  • editor.lineHighlightBackground#eee8d5
  • editor.selectionBackground#eee8d5
  • editorCursor.foreground#657b83
  • editorGroup.border#ddd6c1
  • editorGroup.dropBackground#ddd6c1aa
  • editorGroupHeader.tabsBackground#d9d2c2
  • editorHoverWidget.background#eee8d5
  • editorLineNumber.activeForeground#93a1a1
  • editorLineNumber.dimmedForeground#93a1a1
  • editorLineNumber.foreground#93a1a1
  • editorWhitespace.foreground#586e7580
  • editorWidget.background#eee8d5
  • extensionButton.prominentBackground#b58900
  • extensionButton.prominentHoverBackground#584c27aa
  • focusBorder#b49471
  • input.background#ddd6c1
  • input.foreground#586e75
  • input.placeholderForeground#586e75aa
  • inputOption.activeBorder#d3af86
  • list.activeSelectionBackground#dfca88
  • list.activeSelectionForeground#6c6c6c
  • list.highlightForeground#b58900
  • list.hoverBackground#dfca8844
  • list.inactiveSelectionBackground#d1cbb8
  • list.warningForeground#657b83
  • minimap.selectionHighlight#eee8d5
  • notebook.cellEditorBackground#f7f0e0
  • panel.border#ddd6c1
  • peekView.border#b58900
  • peekViewEditor.background#fffbf2
  • peekViewEditor.matchHighlightBackground#7744aa40
  • peekViewResult.background#eee8d5
  • peekViewTitle.background#eee8d5
  • pickerGroup.border#2aa19899
  • pickerGroup.foreground#2aa19899
  • ports.iconRunningProcessForeground#2aa19899
  • progressBar.background#b58900
  • quickInputList.focusBackground#dfca8866
  • selection.background#878b9180
  • sideBar.background#eee8d5
  • sideBarTitle.foreground#586e75
  • statusBar.background#eee8d5
  • statusBar.debuggingBackground#eee8d5
  • statusBar.foreground#586e75
  • statusBar.noFolderBackground#eee8d5
  • statusBarItem.prominentBackground#ddd6c1
  • statusBarItem.prominentHoverBackground#ddd6c199
  • statusBarItem.remoteBackground#ac9d57
  • tab.activeBackground#fdf6e3
  • tab.activeModifiedBorder#cb4b16
  • tab.border#ddd6c1
  • tab.inactiveBackground#d3cbb7
  • tab.inactiveForeground#586e75
  • tab.lastPinnedBorder#fdf6e3
  • terminal.ansiBlack#586e75
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#586e75
  • terminal.ansiBrightBlue#268bd2
  • terminal.ansiBrightCyan#2aa198
  • terminal.ansiBrightGreen#859900
  • terminal.ansiBrightMagenta#6c71c4
  • terminal.ansiBrightRed#cb4b16
  • terminal.ansiBrightWhite#fdf6e3
  • terminal.ansiBrightYellow#657b83
  • terminal.ansiCyan#2aa198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#d33682
  • terminal.ansiRed#dc322f
  • terminal.ansiWhite#eee8d5
  • terminal.ansiYellow#b58900
  • terminal.background#fdf6e3
  • titleBar.activeBackground#eee8d5
  • walkThrough.embeddedEditorBackground#00000014

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.function.python, support.function.aggregate.sql, entity.name.function.macro, entity.name.function.target.makefile#2aa198
meta.function.decorator, meta.declaration.annotation.java, entity.name.function.js, meta.decorator.ts, entity.name.function.ts, support.class.component.js#b58900
constant.numeric, constant.language, storage.type.class, storage.type.function.python, meta.preprocessor, support.function.builtin, keyword.control, keyword.operator.logical.python, storage.modifier.java, keyword.other, variable.language.this, support.constant.java-properties, entity.name.tag.localname.xml, entity.other.attribute-name.localname.xml, entity.name.tag.xml, entity.other.attribute-name.xml, keyword.operator.new, keyword.operator.instanceof, entity.name.tag.yaml, meta.tag.metadata.doctype.html, entity.name.tag.html, meta.selector.css, meta.property-name.css, entity.other.attribute-name.html, storage.type.primitive, support.type.property-name.toml, support.type.property-name.table.toml, storage.type.js, support.other.match.begin.regexp, support.other.escape.special.regexp, keyword.operator.quantifier.regexp, support.other.match.end.regexp, support.other.match.any.regexp, constant.other.set.regexp, keyword.operator.negation.regexp, keyword.operator.cast, keyword.operator.expression, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.wordlike, storage.type.ts, support.type.primitive, storage.type.interface, storage.type.type, storage.type.function, storage.type.property.ts, constant.other.character-class.regexp, punctuation.definition.character-class.regexp, storage.type.enum, storage.type.namespace, storage.modifier.sql, storage.type.sql, constant.character.escape.json, constant.character.entity.named, constant.character.entity.numeric.hexadecimal.html, support.function.url.css, constant.other.unicode-range.css, support.function.misc.css, variable.css, storage.modifier.js, storage.type.property.js, markup.underline.link, constant.other.reference.link.markdown, meta.separator.markdown, punctuation.separator.table.markdown, punctuation.definition.table.markdown, storage.type.proto, storage.modifier.proto, support.type.property-name.css.sass.prop.name, entity.other.attribute-name.id.css.sass, entity.name.tag.css.sass.symbol, entity.other.attribute-name.class.css.sass, entity.other.attribute-selector.sass, support.function.name.sass.library, support.type.property-name.css.sass, storage.modifier.ts#268bd2
variable.language.special.self, variable.parameter.function-call, variable.parameter.function.language.special.self, support.function.magic, support.type.property-name.json, entity.name.section.markdown, markup.heading, support.variable.magic.python, variable.other.name, entity.name.tag.namespace.xml#6c71c4
comment, string.quoted.docstring.multi#93a1a1italic
string, markup.inline.raw.string, meta.property-value.css, markup.fenced_code.block.markdown, markup.raw.block.markdown, markup.quote.markdown#859900
meta.shebang.shell#000000bold
markup.boldbold
markup.italicitalic
emphasisitalic
strongbold
markup.strikethroughstrikethrough
token.error-token#dc322f
token.warn-token#b58900
token.debug-token#d33682
token.info-token#268bd2
markup.inserted#859900
markup.deleted#dc322f
markup.changed#268bd2
entity.name.label.ts, entity.name.label.jsunderline
storage.type.class.jsdoc, keyword.other.documentation.javadoc.java#657b83underline
string.other.link.title, string.other.link.description#268bd2underline