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.foreground#657B83
  • editor.lineHighlightBackground#EEE8D5
  • editor.selectionBackground#EEE8D5
  • editorBracketHighlight.foreground1#268BD2
  • editorBracketHighlight.foreground2#B58900
  • editorBracketHighlight.foreground3#D33682
  • editorCursor.foreground#657B83
  • editorGroup.border#DDD6C1
  • editorGroup.dropBackground#DDD6C1AA
  • editorGroupHeader.tabsBackground#D9D2C2
  • editorHoverWidget.background#CCC4B0
  • editorIndentGuide.activeBackground#081E2580
  • editorIndentGuide.background#586E7580
  • editorLineNumber.activeBackground#EEE8D5
  • editorLineNumber.activeForeground#888e89
  • editorLineNumber.foreground#ABB2AC
  • 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
  • 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#073642
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#002b36
  • terminal.ansiBrightBlue#839496
  • terminal.ansiBrightCyan#93a1a1
  • terminal.ansiBrightGreen#586e75
  • 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
—#657B83—
source.groovy.embedded, string meta.image.inline.markdown#657B83—
comment#93A1A1—
string#2AA198—
string meta.path.search#586e75—
string.regexp#D30102—
constant.numeric#D33682—
meta.definition.variable.js, meta.definition.property.js, meta.template.expression.js, meta.function-call.js variable.other.object.js, meta.function-call.js variable.other.object.property.js, support.variable.property.js, variable.other.object.js, variable.other.object.property.js, meta.objectliteral.js variable.other.property.js, variable.other.readwrite.js, variable.language.this.js, source.js variable.other.property.js, meta.definition.variable.ts, meta.definition.property.ts, meta.template.expression.ts, meta.function-call.ts variable.other.object.ts, meta.function-call.ts variable.other.object.property.ts, support.variable.property.ts, variable.other.object.ts, variable.other.object.property.ts, meta.objectliteral.ts variable.other.property.ts, variable.other.readwrite.ts, variable.language.this.ts, source.ts variable.other.property.ts, meta.definition.variable.tsx, meta.definition.property.tsx, meta.template.expression.tsx, meta.function-call.tsx variable.other.object.tsx, meta.function-call.tsx variable.other.object.property.tsx, support.variable.property.tsx, variable.other.object.tsx, variable.other.object.property.tsx, meta.objectliteral.tsx variable.other.property.tsx, variable.other.readwrite.tsx, variable.language.this.tsx, source.tsx variable.other.property.tsx#268BD2—
meta.var.expr.js, meta.var.expr.ts, meta.var.expr.tsx#268BD2—
keyword, keyword.control.import, keyword.control.from#859900—
meta.import.js, meta.import.ts, meta.import.tsx#268BD2—
storage#073642bold
entity.name.class, entity.name.type.class—
meta.class.js, meta.class.ts, meta.class.tsx#268BD2—
entity.name.type
entity.name.namespace, entity.name.scope-resolution#586E75—
entity.name.function—
punctuation.definition.variable, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.begin.tsx, punctuation.definition.template-expression.end.tsx#859900—
punctuation.section.embedded.begin, punctuation.section.embedded.end#D30102—
constant.language, meta.preprocessor#B58900—
support.function.construct, keyword.other.new#CB4B16—
constant.character, constant.other#CB4B16—
entity.other.inherited-class#6C71C4—
variable.parameter.js, variable.parameter.ts, variable.parameter.tsx#586E75—
entity.name.tag#268BD2—
punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.tag.begin, punctuation.definition.tag.end#93A1A1—
entity.other.attribute-name#93A1A1—
support.function—
punctuation.separator.continuation#D30102—
punctuation.separator.key-value.js, punctuation.separator.key-value.ts, punctuation.separator.key-value.tsx#CB4B16—
support.constant——
support.type, support.class, support.class.console.js, support.variable.console.js, support.objects.console.js, variable.language.console.js, support.class.console.ts, support.variable.console.ts, support.objects.console.ts, variable.language.console.ts, support.class.console.tsx, support.variable.console.tsx, support.objects.console.tsx, variable.language.console.tsx#859900—
meta.definition.method.js, meta.definition.method.ts, meta.definition.method.tsx#B58900—
support.type.exception#CB4B16—
support.other.variable——
invalid#DC322F—
meta.diff, meta.diff.header#E0EDDDitalic
markup.deleted#DC322F
markup.changed#CB4B16
markup.inserted#859900—
markup.quote#859900—
markup.list#B58900—
markup.bold, markup.italic#D33682—
markup.bold—bold
markup.italic—italic
markup.strikethrough—strikethrough
markup.inline.raw#2AA198
markup.heading#268BD2—
markup.heading.setext#268BD2
token.info-token#316bcd—
token.warn-token#cd9731—
token.error-token#cd3131—
token.debug-token#800080—
meta.export.default.js storage.modifier.js, meta.export.default.ts storage.modifier.ts, meta.export.default.tsx storage.modifier.tsx#073642bold
storage.modifier.async#268BD2bold
meta.import#657b83—
meta.function-call#657b83—
meta.import#657b83—
meta.function-call#657b83—
punctuation.separator.dictionary.key-value.json, punctuation.separator.array.json, punctuation.separator.dictionary.pair.json#657B83—
punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.definition.array.begin.json, punctuation.definition.array.end.json#586E75—
support.type.primitive#b58900—
source#657b83—
JS: storage.type.property.js#1aff00
string.quoted, string.quoted.single, string.quoted.double#269186—
meta.brace.round.js, meta.brace.round.ts, meta.brace.round.tsx#93A1A1—
meta.brace.square.js, meta.brace.square.ts, meta.brace.square.tsx#586E75—
entity.name.tag.js, entity.name.tag.ts, entity.name.tag.tsx—bold
punctuation.accessor.js, punctuation.accessor.optional.js, punctuation.accessor.ts, punctuation.accessor.optional.ts, punctuation.accessor.tsx, punctuation.accessor.optional.tsx#859900—
punctuation.definition.block.js, punctuation.definition.binding-pattern.object.js, punctuation.separator.comma.js, punctuation.definition.block.ts, punctuation.definition.binding-pattern.object.ts, punctuation.separator.comma.ts, punctuation.definition.block.tsx, punctuation.definition.binding-pattern.object.tsx, punctuation.separator.comma.tsx#586E75—
storage.type.function.js, storage.type.function.ts, storage.type.function.tsx#268BD2—
storage.type.js, storage.type.ts, storage.type.tsx#268BD2bold
meta.function-call.js entity.name.function.js, meta.function-call.ts entity.name.function.ts, meta.function-call.tsx entity.name.function.tsx#586e75—
meta.object-literal.key.js, meta.object-literal.key.ts, meta.object-literal.key.tsx#586e75—
meta.definition.function.js, meta.definition.function.ts, meta.definition.function.tsx#268BD2—
meta.function.js entity.name.function, meta.export.default.js entity.name.function, meta.object-literal.key.js entity.name.function, meta.function.ts entity.name.function, meta.export.default.ts entity.name.function, meta.object-literal.key.ts entity.name.function, meta.function.tsx entity.name.function, meta.export.default.tsx entity.name.function, meta.object-literal.key.tsx entity.name.function#A57800—
storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.arrow.tsx#073642—
text.html.basic source.js.embedded.html, text.html.basic source.ts.embedded.html, text.html.basic source.tsx.embedded.html#A57800—
support.class.component.js, support.class.component.ts, support.class.component.tsx#268BD2—
support.type.property-name.css#A57800—
entity.other.attribute-name.class.css, meta.selector.css#268BD2—
punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css#5a74cf—
meta.property-value.css#269186—
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css#268BD2—
meta.property-list.css#b83e3e—
meta.property-list.css meta.property-name.css#859900—
storage.type.class.python, storage.type.function.python, storage.modifier.global.python#748B00
keyword.control.import.python, keyword.control.import.from.python#BD3800—
support.type.exception.python#A57800—
keyword.control.class.python, meta.class.python#268BD2—
entity.other.inherited-class.python#657B83—
meta.function.python entity.name.function.python#268BD2—
meta.function.decorator.python entity.name.function.decorator.python—
meta.function.decorator.python support.type.python#859900—
punctuation.definition.decorator.python#748B00—
constant.other.caps.python#268BD2—