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—
Fedaykin by FedaykinDev - VS Code Theme