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.boldbold
markup.italicitalic
markup.strikethroughstrikethrough
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.tsxbold
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
ItCase-Solarized by ChangeSomeCode - VS Code Theme