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#2c2416
  • activityBar.background#faf8f3
  • activityBar.foreground#8b7355
  • activityBar.inactiveForeground#8b7355
  • activityBarBadge.background#1e6b8c
  • activityBarBadge.foreground#faf8f3
  • badge.background#1e6b8c
  • badge.foreground#faf8f3
  • breadcrumb.activeSelectionForeground#2c2416
  • breadcrumb.focusForeground#2c2416
  • breadcrumb.foreground#4a3f2e
  • breadcrumbPicker.background#efe9dd
  • button.background#1e6b8c
  • button.foreground#faf8f3
  • button.hoverBackground#165a7a
  • descriptionForeground#4a3f2e
  • diffEditor.insertedLineBackground#4a7c5920
  • diffEditor.insertedTextBackground#4a7c5920
  • diffEditor.removedLineBackground#c2410c20
  • diffEditor.removedTextBackground#c2410c20
  • dropdown.background#efe9dd
  • dropdown.border#b8a890
  • dropdown.foreground#2c2416
  • editor.background#faf8f3
  • editor.findMatchBackground#4a7c5930
  • editor.findMatchHighlightBackground#b4530950
  • editor.findRangeHighlightBackground#a0522d30
  • editor.foreground#2c2416
  • editor.lineHighlightBackground#efe9dd
  • editor.lineHighlightBorder#00000001
  • editor.selectionBackground#ded4c0
  • editor.selectionHighlightBackground#ded4c080
  • editor.wordHighlightBackground#1e6b8c60
  • editor.wordHighlightStrongBackground#1e6b8c60
  • editorBracketHighlight.foreground1#4a7c59
  • editorBracketHighlight.foreground2#6b4226
  • editorBracketHighlight.foreground3#a0522d
  • editorBracketHighlight.foreground4#1e6b8c
  • editorBracketHighlight.foreground5#2a7f9e
  • editorBracketHighlight.foreground6#8b6239
  • editorBracketHighlight.unexpectedBracket.foreground#c2410c
  • editorBracketMatch.background#d4c8b040
  • editorBracketMatch.border#6b5d4880
  • editorCursor.foreground#2c2416
  • editorError.foreground#c2410c
  • editorGroupHeader.tabsBackground#faf8f3
  • editorGutter.addedBackground#4a7c59
  • editorGutter.deletedBackground#c2410c
  • editorGutter.modifiedBackground#b45309
  • editorHoverWidget.background#efe9dd
  • editorHoverWidget.border#b8a890
  • editorHoverWidget.foreground#2c2416
  • editorInfo.foreground#2a7f9e
  • editorLineNumber.activeForeground#2c2416
  • editorLineNumber.foreground#8b7355
  • editorOverviewRuler.errorForeground#c2410c
  • editorOverviewRuler.infoForeground#2a7f9e
  • editorOverviewRuler.warningForeground#b45309
  • editorRuler.foreground#b8a890
  • editorSuggestWidget.background#efe9dd
  • editorSuggestWidget.border#b8a890
  • editorSuggestWidget.selectedBackground#d4c8b0
  • editorWarning.foreground#b45309
  • editorWhitespace.foreground#b8a890
  • editorWidget.background#efe9dd
  • editorWidget.border#b8a890
  • focusBorder#1e6b8c60
  • gitDecoration.addedResourceForeground#4a7c59
  • gitDecoration.conflictingResourceForeground#1e6b8c
  • gitDecoration.deletedResourceForeground#c2410c
  • gitDecoration.ignoredResourceForeground#8b7355
  • gitDecoration.modifiedResourceForeground#b45309
  • gitDecoration.untrackedResourceForeground#7c6f64
  • input.background#efe9dd
  • input.border#b8a890
  • input.foreground#2c2416
  • input.placeholderForeground#6b5d48
  • inputOption.activeBorder#1e6b8c
  • inputOption.activeForeground#2c2416
  • list.activeSelectionBackground#efe9dd
  • list.activeSelectionForeground#2c2416
  • list.errorForeground#c2410c
  • list.highlightForeground#1e6b8c
  • list.hoverBackground#e8e0d0
  • list.inactiveSelectionBackground#e8e0d0
  • list.warningForeground#b45309
  • notificationsErrorIcon.foreground#c2410c
  • notificationsInfoIcon.foreground#2a7f9e
  • notificationsWarningIcon.foreground#b45309
  • panel.background#faf8f3
  • panel.border#00000000
  • panelTitle.activeForeground#2c2416
  • panelTitle.inactiveForeground#4a3f2e
  • peekView.border#1e6b8c
  • peekViewEditor.background#f5f2ea
  • peekViewResult.background#faf8f3
  • peekViewTitle.background#f5f2ea
  • peekViewTitleDescription.foreground#4a3f2e
  • pickerGroup.foreground#2c2416
  • problemsErrorIcon.foreground#c2410c
  • problemsInfoIcon.foreground#2a7f9e
  • problemsWarningIcon.foreground#b45309
  • quickInput.background#efe9dd
  • quickInput.foreground#2c2416
  • quickInputList.focusBackground#d4c8b0
  • quickInputList.focusForeground#2c2416
  • scrollbar.shadow#1e6b8c30
  • scrollbarSlider.activeBackground#e8e0d030
  • scrollbarSlider.background#d4c8b040
  • scrollbarSlider.hoverBackground#b8a89060
  • selection.background#ded4c0
  • settings.headerForeground#2c2416
  • settings.modifiedItemIndicator#1e6b8c
  • sideBar.background#faf8f3
  • sideBar.border#b8a89050
  • sideBar.foreground#2c2416
  • sideBarSectionHeader.background#faf8f3
  • sideBarSectionHeader.foreground#2c2416
  • sideBarTitle.foreground#2c2416
  • statusBar.background#f5f2ea
  • statusBar.debuggingBackground#efe9dd
  • statusBar.debuggingForeground#2c2416
  • statusBar.foreground#4a3f2e
  • statusBar.noFolderBackground#f5f2ea
  • statusBarItem.remoteBackground#1e6b8c
  • statusBarItem.remoteForeground#faf8f3
  • tab.activeBackground#efe9dd
  • tab.activeBorder#2c241620
  • tab.activeForeground#2c2416
  • tab.border#00000000
  • tab.inactiveBackground#faf8f3
  • tab.inactiveForeground#4a3f2e
  • terminal.ansiBlack#faf8f3
  • terminal.ansiBlue#a0522d
  • terminal.ansiBrightBlack#8b7355
  • terminal.ansiBrightBlue#2a7f9e
  • terminal.ansiBrightCyan#3c9fbc
  • terminal.ansiBrightGreen#4a7c59
  • terminal.ansiBrightMagenta#8b4a8c
  • terminal.ansiBrightRed#c2410c
  • terminal.ansiBrightWhite#1a1511
  • terminal.ansiBrightYellow#b45309
  • terminal.ansiCyan#4a7c59
  • terminal.ansiGreen#2a7f9e
  • terminal.ansiMagenta#6b4226
  • terminal.ansiRed#8b6239
  • terminal.ansiWhite#2c2416
  • terminal.ansiYellow#1e6b8c
  • terminal.background#faf8f3
  • terminal.foreground#2c2416
  • terminalCursor.foreground#2c2416
  • textLink.activeForeground#1e6b8c
  • textLink.foreground#1e6b8c
  • titleBar.activeBackground#faf8f3
  • titleBar.activeForeground#2c2416
  • titleBar.border#00000000
  • titleBar.inactiveBackground#faf8f3
  • titleBar.inactiveForeground#4a3f2e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b5d48italic
string, string.quoted, string.template#2a7f9e
constant.numeric#8b6239
constant.language.boolean#8b6239
constant.language.null, constant.language.undefined#8b6239
keyword, keyword.control#a0522d
storage, storage.type, storage.modifier#a0522d
keyword.operator#a0522d
entity.name.function, support.function#1e6b8c
entity.name.method#1e6b8c
entity.name.type, entity.name.class, support.type, support.class#6b4226
variable, entity.name.variable, variable.other#1a1511
variable.parameter#8b6239
variable.other.property, support.type.property-name#4a7c59
constant, variable.other.constant#8b6239
entity.name.tag#8b6239
entity.other.attribute-name#4a7c59
punctuation#2c2416
variable.language.special.self.python, variable.parameter.function.language.special.self.python#8b6239normal
support.function.magic.python#1e6b8cnormal
invalid, invalid.illegal#c2410c
constant.other.color#2c2416
keyword.control, constant.other.color, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#a0522d
entity.name.function, variable.function, support.function, keyword.other.special-method#1e6b8c
meta.block variable.other#2c2416
support.other.variable, string.other.link#2c2416
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, constant.language.boolean#8b6239
string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#2a7f9e
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#6b4226
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, support.type.vendored.property-name.css, source.css.scss entity.name.tag, variable.parameter.keyframe-list.css, meta.property-name.css, variable.parameter.url.scss, meta.property-value.scss, meta.property-value.css#2c2416
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#c2410c
variable.language#4a3f2e
entity.name.method.js#2c2416
meta.class-method.js entity.name.function.js, variable.function.constructor#2c2416
entity.other.attribute-name, meta.property-list.scss, meta.attribute-selector.scss, meta.property-value.css, entity.other.keyframe-offset.css, meta.selector.css, entity.name.tag.reference.scss, entity.name.tag.nesting.css, punctuation.separator.key-value.css#4a7c59
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#1e6b8c
entity.other.attribute-name.class, entity.other.attribute-name.id, meta.attribute-selector.scss, variable.parameter.misc.css#1e6b8c
source.sass keyword.control, meta.attribute-selector.scss#2c2416
markup.inserted#4a7c59
markup.deleted#c2410c
markup.changed#b45309
string.regexp#4a7c59
constant.character.escape#4a3f2e
*url*, *link*, *uri*#1e6b8cunderline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#1e6b8c
source.js constant.other.object.key.js string.unquoted.label.js#c2410cnormal
support.type.property-name.json#1e6b8c
text.html.markdown, punctuation.definition.list_item.markdown#2c2416
text.html.markdown markup.inline.raw.markdown#4a3f2e
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#2c2416
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading, markup.inserted.git_gutter#1e6b8c
markup.italic#2c2416normal
markup.bold, markup.bold string#2c2416bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#2c2416bold
markup.underline#1e6b8cunderline
markup.quote punctuation.definition.blockquote.markdown#2c2416
markup.quote#2c2416
string.other.link.title.markdown#2c2416
string.other.link.description.title.markdown#4a3f2e
constant.other.reference.link.markdown#1e6b8c
markup.raw.block#4a3f2e
markup.raw.block.fenced.markdown#2a7f9e30
punctuation.definition.fenced.markdown#2a7f9e30
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#2c2416
variable.language.fenced.markdown#2c2416
meta.separator#6b5d48bold
markup.table#2c2416
meta.brace, punctuation.definition.block, punctuation.definition.parameters, punctuation.section.function, meta.brackets, punctuation.definition.brackets, punctuation.definition.dictionary, punctuation.definition.array, punctuation.section, punctuation.section.block, punctuation.section.braces, punctuation.section.group, punctuation.section.parameters#8b7355
meta.function string.quoted.double.ts, meta.function string.quoted.single.ts, meta.function string.quoted.double.js, meta.function string.quoted.single.js, meta.function string.quoted.double.tsx, meta.function string.quoted.single.tsx#8b6239
support.function.builtin.python, support.function.magic.python, support.type.builtin.python#1e6b8cbold
variable.parameter.function.python#8b6239normal
keyword.control.flow.python, keyword.control.import.python, keyword.control.statement.python, keyword.operator.member.python, keyword.operator.wordlike.python#a0522d
keyword.operator.logical.python, keyword.operator.arithmetic.python, keyword.operator.assignment.python, keyword.operator.comparison.python, keyword.operator.bitwise.python#8b6239
storage.type.python, storage.type.annotation.python, storage.type.function.python, storage.type.class.python, storage.type.union.python, storage.type.intersection.python, storage.type.optional.python, storage.type.any.python, storage.type.unknown.python, storage.type.none.python#6b4226bold
variable.parameter.function.language.special.self.python#8b6239
entity.name.type.class.python, entity.name.type.class.python punctuation.definition.class.python#6b4226
entity.name.function.python, meta.function.python entity.name.function.python#1e6b8c
variable.other.constant.python, variable.other.enummember.python, variable.other.property.python, variable.other.object.python, variable.other.readwrite.python#1e6b8c
constant.character.format.placeholder.other.python, constant.character.format.placeholder.other.python punctuation.definition.format.placeholder.python#8b6239
string.quoted.single.python, string.quoted.double.python, string.quoted.triple.single.python, string.quoted.triple.double.python, string.regexp.python, string.quoted.single.python punctuation.definition.string.begin.python, string.quoted.single.python punctuation.definition.string.end.python, string.quoted.double.python punctuation.definition.string.begin.python, string.quoted.double.python punctuation.definition.string.end.python, string.quoted.triple.single.python punctuation.definition.string.begin.python, string.quoted.triple.single.python punctuation.definition.string.end.python, string.quoted.triple.double.python punctuation.definition.string.begin.python, string.quoted.triple.double.python punctuation.definition.string.end.python#2a7f9e
punctuation.definition.string.begin.python, punctuation.definition.string.end.python, string.quoted.docstring.multi.python#2a7f9e
constant.language.python#8b6239normal
meta.object-literal.key string.quoted.single.ts, meta.object-literal.key string.quoted.double.ts, meta.object-literal.key string.quoted.single.js, meta.object-literal.key string.quoted.double.js, meta.object-literal.key string.quoted.single.tsx, meta.object-literal.key string.quoted.double.tsx, meta.object.member string.quoted.single.ts, meta.object.member string.quoted.double.ts, meta.object.member string.quoted.single.js, meta.object.member string.quoted.double.js, meta.object.member string.quoted.single.tsx, meta.object.member string.quoted.double.tsx, meta.array.literal string.quoted.single.ts, meta.array.literal string.quoted.double.ts, meta.array.literal string.quoted.single.js, meta.array.literal string.quoted.double.js, meta.array.literal string.quoted.single.tsx, meta.array.literal string.quoted.double.tsx, meta.enum.declaration string.quoted.single.ts, meta.enum.declaration string.quoted.double.ts, meta.enum.declaration string.quoted.single.js, meta.enum.declaration string.quoted.double.js, meta.enum.declaration string.quoted.single.tsx, meta.enum.declaration string.quoted.double.tsx#4a7c59
meta.tag string.quoted.single.ts, meta.tag string.quoted.double.ts, meta.tag string.quoted.single.js, meta.tag string.quoted.double.js, meta.tag string.quoted.single.tsx, meta.tag string.quoted.double.tsx, meta.attribute string.quoted.single.ts, meta.attribute string.quoted.double.ts, meta.attribute string.quoted.single.js, meta.attribute string.quoted.double.js, meta.attribute string.quoted.single.tsx, meta.attribute string.quoted.double.tsx#2c2416
meta.import string.quoted.single.ts, meta.import string.quoted.double.ts, meta.import string.quoted.single.js, meta.import string.quoted.double.js, meta.import string.quoted.single.tsx, meta.import string.quoted.double.tsx#2c2416
string.template.js, string.template.ts#2a7f9e
string.quoted.single.ansible, string.quoted.double.ansible, string.quoted.single.yaml.ansible, string.quoted.double.yaml.ansible, punctuation.definition.string.begin.ansible, punctuation.definition.string.end.ansible, punctuation.definition.string.begin.yaml.ansible, punctuation.definition.string.end.yaml.ansible#2a7f9e
string.quoted.double.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, string.quoted.double.json punctuation.definition.string.begin, string.quoted.double.json punctuation.definition.string.end, punctuation.support.type.property-name.begin.json.lines, punctuation.support.type.property-name.end.json.lines#2a7f9e