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.activeBackground#fffffc33
  • activityBar.background#524e4d
  • activityBarBadge.background#5d7d6b
  • button.background#5d7d6b
  • button.foreground#fbf8f5
  • button.secondaryBackground#ede9e3
  • button.secondaryForeground#1a1306
  • button.secondaryHoverBackground#e2ded9
  • dropdown.background#fffffc
  • dropdown.border#dad6d0
  • dropdown.foreground#1a1306
  • editor.background#fbf8f5
  • editor.findMatchBackground#ce671870
  • editor.findMatchHighlightBackground#ce671830
  • editor.foreground#1a1306
  • editor.inactiveSelectionBackground#241a080a
  • editor.lineHighlightBackground#241a0808
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#241a0818
  • editor.selectionHighlightBackground#241a080d
  • editor.wordHighlightBackground#006e9d18
  • editor.wordHighlightStrongBackground#006e9d28
  • editorGroup.border#dad6d0
  • editorGroupHeader.border#dad6d0
  • editorGroupHeader.noTabsBackground#f7f5f2
  • editorGroupHeader.tabsBackground#f7f5f2
  • editorGutter.addedBackground#5b7454
  • editorGutter.deletedBackground#aa2f2e
  • editorGutter.modifiedBackground#9e6b28
  • editorHoverWidget.background#f7f5f2
  • editorHoverWidget.border#dad6d0
  • editorHoverWidget.foreground#1a1306
  • editorHoverWidget.statusBarBackground#ede9e3
  • editorIndentGuide.activeBackground1#524e4d60
  • editorIndentGuide.background1#524e4d1f
  • editorLineNumber.activeForeground#1a1306
  • editorLineNumber.foreground#a8a29e
  • editorSuggestWidget.background#f7f5f2
  • editorSuggestWidget.border#dad6d0
  • editorSuggestWidget.focusHighlightForeground#004898
  • editorSuggestWidget.foreground#1a1306
  • editorSuggestWidget.highlightForeground#004898
  • editorSuggestWidget.selectedBackground#ede9e3
  • editorSuggestWidget.selectedForeground#1a1306
  • focusBorder#5d7d6b
  • foreground#524e4d
  • gitDecoration.addedResourceForeground#5b7454
  • gitDecoration.conflictingResourceForeground#d7003a
  • gitDecoration.deletedResourceForeground#aa2f2e
  • gitDecoration.ignoredResourceForeground#a8a29e
  • gitDecoration.modifiedResourceForeground#9e6b28
  • gitDecoration.renamedResourceForeground#004898
  • gitDecoration.stageDeletedResourceForeground#aa2f2e
  • gitDecoration.stageModifiedResourceForeground#9e6b28
  • gitDecoration.submoduleResourceForeground#004898
  • gitDecoration.untrackedResourceForeground#5b7454
  • input.background#fffffc
  • input.border#dad6d0
  • input.foreground#1a1306
  • input.placeholderForeground#a8a29e
  • inputOption.activeBackground#5d7d6b80
  • inputOption.activeBorder#5d7d6b
  • list.activeSelectionBackground#f7f5f2
  • list.activeSelectionForeground#1a1306
  • list.hoverBackground#fffffc80
  • list.inactiveSelectionBackground#fffffc
  • menu.background#f7f5f2
  • menu.border#dad6d0
  • menu.foreground#1a1306
  • menu.selectionBackground#ede9e3
  • menu.selectionForeground#1a1306
  • menu.separatorBackground#e2ded9
  • modernActivityBar.activeBackground#524e4d80
  • modernActivityBar.activeForeground#fbf8f5
  • modernActivityBar.hoverBackground#524e4d40
  • modernActivityBar.hoverForeground#fbf8f5
  • panel.background#eeeaec
  • panel.border#dad6d0
  • pickerGroup.border#dad6d0
  • pickerGroup.foreground#78716c
  • progressBar.background#5d7d6b
  • quickInput.background#f7f5f2
  • quickInput.foreground#1a1306
  • quickInputList.focusBackground#ede9e3
  • quickInputList.focusForeground#1a1306
  • sash.hoverBorder#524e4d
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#524e4d55
  • scrollbarSlider.background#524e4d20
  • scrollbarSlider.hoverBackground#524e4d38
  • sideBar.background#f7f5f2
  • sideBar.border#dad6d0
  • statusBar.background#f7f5f2
  • statusBar.debuggingBackground#dbced1
  • statusBar.foreground#524e4d
  • statusBar.noFolderBackground#f7f5f2
  • statusBarItem.remoteBackground#5d7d6b
  • tab.activeBackground#fbf8f5
  • tab.activeForeground#1a1306
  • tab.inactiveBackground#ede9e3
  • tab.inactiveForeground#78716c
  • tab.unfocusedActiveBackground#fbf8f5
  • tab.unfocusedInactiveBackground#f2eee8
  • terminal.ansiBlack#1a1306
  • terminal.ansiBlue#006e9d
  • terminal.ansiBrightBlack#78716c
  • terminal.ansiBrightBlue#004898
  • terminal.ansiBrightCyan#007083
  • terminal.ansiBrightGreen#007b43
  • terminal.ansiBrightMagenta#d7003a
  • terminal.ansiBrightRed#aa2f2e
  • terminal.ansiBrightWhite#fffffc
  • terminal.ansiBrightYellow#ffdd00
  • terminal.ansiCyan#007083
  • terminal.ansiGreen#007b43
  • terminal.ansiMagenta#d7003a
  • terminal.ansiRed#aa2f2e
  • terminal.ansiWhite#fbf8f5
  • terminal.ansiYellow#ebb200
  • terminal.border#00000000
  • terminal.foreground#1a1306
  • terminal.selectionBackground#524e4d25
  • terminalCommandDecoration.defaultBackground#78716c80
  • terminalCommandDecoration.errorBackground#d7003a
  • terminalCommandDecoration.successBackground#5d7d6b
  • terminalCursor.foreground#1a1306
  • textBlockQuote.background#ede9e360
  • textBlockQuote.border#4d5141
  • textLink.activeForeground#5d7d6b
  • textLink.foreground#03512e
  • titleBar.activeBackground#f7f5f2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis, markup.italicitalic
strongbold
markup.underlineunderline
markup.strikethroughstrikethrough
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike, keyword.operator.noexcept, storage, storage.type, storage.modifier, constant.language, constant.regexp, variable.language, meta.diff.header, meta.preprocessor, entity.name.function.preprocessor, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, markup.changed, entity.name.tag.html, entity.name.tag.xml, entity.name.tag.localname.xml, support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded, support.function.git-rebase#004898
comment, punctuation.definition.comment, punctuation.definition.quote.begin.markdown#03512e
string, string.tag, string.value, meta.embedded.assembly, meta.preprocessor.string, markup.inline.raw, markup.deleted, entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.xml, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, meta.attribute.html, source.json support.type.property-name.json, meta.structure.dictionary.json support.type.property-name.json, entity.name.tag.yaml, source.yaml support.type.property-name, punctuation.support.type.property-name.yaml, meta.structure.dictionary.key.python#aa2f2e
source.json string.quoted.double.json, source.yaml string, source.yaml string.unquoted, source.yaml string.quoted.single, source.yaml string.quoted.double, string.quoted.double.html, string.quoted.single.html, string.quoted.double.xml, string.quoted.single.xml, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.definition.string.begin.xml, punctuation.definition.string.end.xml#1a1306
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent, keyword.other.unit, meta.preprocessor.numeric, constant.sha.git-rebase, markup.inserted#006e9d
markup.bold, markup.heading, punctuation.definition.list.begin.markdown, markup.list.numbered.bullet.markdown#7f2517
entity.name.tag.css, entity.name.tag.less, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, source.css entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss, source.css entity.other.attribute-name.class#ce6718
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python, keyword.operator, meta.template.expression, storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#1a1306
string.regexp#6967ab
invalid#d7003a
punctuation.definition.tag#8c877d