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#36300F
  • activityBar.border#a2876c
  • activityBar.foreground#FFD4B5
  • activityBar.inactiveForeground#a2876c
  • activityBarBadge.background#FFD4B59b
  • activityBarBadge.foreground#36300F
  • badge.background#FFD4B59b
  • badge.foreground#36300F
  • breadcrumb.activeSelectionForeground#4e4e4e
  • breadcrumb.background#36300F
  • breadcrumb.focusForeground#D7A428
  • breadcrumb.foreground#C2A383
  • button.background#36300F
  • button.border#a2876c
  • button.foreground#FFD4B5
  • button.hoverBackground#443c13
  • button.secondaryBackground#FFD4B5
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#4c5561
  • checkbox.background#ffffff
  • checkbox.border#00000000
  • checkbox.foreground#616161
  • debugExceptionWidget.background#36300F
  • debugExceptionWidget.border#FFD4B5
  • debugToolBar.background#f3f3f3
  • debugToolBar.border#d5d5d5
  • diffEditor.border#d7d7d7
  • diffEditor.insertedTextBackground#65900033
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#ffffff
  • dropdown.border#00000000
  • dropdown.foreground#616161
  • editor.background#211D00
  • editor.findMatchBackground#483c30
  • editor.findMatchBorder#8d755d
  • editor.findMatchHighlightBackground#ea5c0055
  • editor.findMatchHighlightBorder#ffffff00
  • editor.findRangeHighlightBackground#b4b4b44d
  • editor.findRangeHighlightBorder#ffffff00
  • editor.foldBackground#add6ff4d
  • editor.foreground#d3af86
  • editor.hoverHighlightBackground#add6ff26
  • editor.inactiveSelectionBackground#fba8769b
  • editor.lineHighlightBackground#ffffff0A
  • editor.lineHighlightBorder#3f3f3f
  • editor.rangeHighlightBackground#fdff0033
  • editor.rangeHighlightBorder#ffffff00
  • editor.selectionBackground#7c5021a9
  • editor.selectionHighlightBackground#ffd27b54
  • editor.selectionHighlightBorder#d1996d
  • editor.wordHighlightBackground#57575740
  • editor.wordHighlightStrongBackground#0e639c40
  • editorBracketMatch.background#0064001a
  • editorBracketMatch.border#b9b9b9
  • editorCodeLens.foreground#999999
  • editorCursor.background#ffffff
  • editorCursor.foreground#d3af86
  • editorError.background#B73A3400
  • editorError.border#ffffff00
  • editorError.foreground#e51400
  • editorGroup.border#a2876c
  • editorGroup.emptyBackground#221A0F
  • editorGroupHeader.tabsBackground#221A0F
  • editorGroupHeader.tabsBorder#000000
  • editorGutter.addedBackground#81b88b
  • editorGutter.background#36300F
  • editorGutter.commentRangeForeground#424242
  • editorGutter.deletedBackground#ca4b51
  • editorGutter.foldingControlForeground#a2876c
  • editorGutter.modifiedBackground#66afe0
  • editorHoverWidget.background#36300F
  • editorHoverWidget.border#FFD4B5
  • editorHoverWidget.foreground#FFD4B5
  • editorIndentGuide.activeBackground1#ad896f
  • editorIndentGuide.background1#ad896f76
  • editorInfo.background#4490BF00
  • editorInfo.border#4490BF00
  • editorInfo.foreground#75beff
  • editorLineNumber.activeForeground#FFD4B5
  • editorLineNumber.foreground#a2876c
  • editorLink.activeForeground#0000ff
  • editorMarkerNavigation.background#a3b6ff
  • editorMarkerNavigationError.background#be1708
  • editorMarkerNavigationInfo.background#799cbc
  • editorMarkerNavigationWarning.background#c99000
  • editorOverviewRuler.background#574a4100
  • editorOverviewRuler.border#7f7f7f4d
  • editorRuler.foreground#cc9868
  • editorSuggestWidget.background#36300F
  • editorSuggestWidget.border#FFD4B5
  • editorSuggestWidget.foreground#FFD4B5
  • editorSuggestWidget.highlightForeground#64591c
  • editorSuggestWidget.selectedBackground#b57a46
  • editorWarning.background#A9904000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#b88100
  • editorWhitespace.foreground#a57a4c
  • editorWidget.background#36300F
  • editorWidget.border#FFD4B5
  • editorWidget.foreground#FFD4B5
  • editorWidget.resizeBorder#c7c7c7
  • focusBorder#0090f1
  • foreground#868686
  • gitDecoration.addedResourceForeground#587c0c
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#ad0707
  • gitDecoration.ignoredResourceForeground#8e8e90
  • gitDecoration.modifiedResourceForeground#ab6a01
  • gitDecoration.stageDeletedResourceForeground#ad0707
  • gitDecoration.stageModifiedResourceForeground#895503
  • gitDecoration.submoduleResourceForeground#1258a7
  • gitDecoration.untrackedResourceForeground#007100
  • icon.foreground#e3b583
  • input.background#745d3f
  • input.border#00000000
  • input.foreground#eac193
  • input.placeholderForeground#998158
  • inputOption.activeBackground#0090f133
  • inputOption.activeBorder#007acc00
  • inputOption.activeForeground#000000
  • list.activeSelectionBackground#7c5021
  • list.activeSelectionForeground#e3b583
  • list.dropBackground#c9b67f
  • list.focusBackground#7c5021AA
  • list.focusForeground#e3b583
  • list.highlightForeground#e3b583
  • list.hoverBackground#7c502166
  • list.hoverForeground#e3b583
  • list.inactiveSelectionBackground#483c30
  • list.inactiveSelectionForeground#e3b583
  • listFilterWidget.background#36300F
  • listFilterWidget.noMatchesOutline#be1100
  • listFilterWidget.outline#00000000
  • menu.background#362712
  • menu.foreground#C2A383
  • menu.separatorBackground#221A0F
  • menubar.selectionBackground#0000001a
  • menubar.selectionForeground#b88100
  • merge.commonContentBackground#E5E5E5ee
  • merge.commonHeaderBackground#BFBFBFee
  • merge.currentContentBackground#DBF4EFee
  • merge.currentHeaderBackground#A4E3D6ee
  • merge.incomingContentBackground#DBECFFee
  • merge.incomingHeaderBackground#A6CFFFee
  • minimap.background#36300F
  • minimap.errorHighlight#e51400
  • minimap.findMatchHighlight#483c30ee
  • minimap.selectionHighlight#ffd27b54
  • minimap.warningHighlight#b88100
  • minimapGutter.addedBackground#81b88b
  • minimapGutter.deletedBackground#ca4b51
  • minimapGutter.modifiedBackground#66afe0
  • minimapSlider.activeBackground#ffffff40
  • minimapSlider.background#ffffff20
  • minimapSlider.hoverBackground#ffffff60
  • notificationCenter.border#FFD4B5
  • notificationCenterHeader.background#36300F
  • notificationCenterHeader.foreground#FFD4B5
  • notifications.background#36300F
  • notifications.border#FFD4B5
  • notifications.foreground#FFD4B5
  • notificationsErrorIcon.foreground#e51400
  • notificationsInfoIcon.foreground#75beff
  • notificationsWarningIcon.foreground#e9a700
  • notificationToast.border#FFD4B5
  • panel.background#36300F
  • panel.border#a2876c
  • panelSection.border#51515159
  • panelTitle.activeBorder#FFD4B5
  • panelTitle.activeForeground#FFD4B5
  • panelTitle.inactiveForeground#a2876c
  • peekView.border#007acc
  • peekViewEditor.background#a0bccf
  • peekViewEditor.matchHighlightBackground#f5d802de
  • peekViewEditor.matchHighlightBorder#dbc417
  • peekViewEditorGutter.background#a2cde2
  • peekViewResult.background#86672d
  • peekViewResult.fileForeground#000000
  • peekViewResult.lineForeground#414141
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#c6d55e33
  • peekViewResult.selectionForeground#e6a4a4
  • peekViewTitle.background#e2cca2
  • peekViewTitleDescription.foreground#616161e6
  • peekViewTitleLabel.foreground#333333
  • pickerGroup.border#cccedb
  • pickerGroup.foreground#0066bf
  • profileBadge.background#FFD4B59b
  • profileBadge.foreground#36300F
  • progressBar.background#0e70c0
  • scrollbar.shadow#FFD4B5A0
  • scrollbarSlider.activeBackground#ffffff40
  • scrollbarSlider.background#ffffff20
  • scrollbarSlider.hoverBackground#ffffff60
  • selection.background#aa9176
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#868686
  • sideBar.background#211D00
  • sideBar.border#a2876c
  • sideBar.dropBackground#c9b67f
  • sideBar.foreground#C2A383
  • sideBarSectionHeader.background#36300F
  • sideBarSectionHeader.border#ffffff30
  • sideBarSectionHeader.foreground#FFD4B5
  • sideBarTitle.foreground#C2A383
  • statusBar.background#36300F
  • statusBar.border#a2876c
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingBorder#000000
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#FFD4B5
  • statusBar.noFolderBackground#68217a
  • statusBar.noFolderBorder#ffffff
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.remoteBackground#16825d
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#36300F
  • tab.activeBorder#FFD4B5
  • tab.activeBorderTop#FFD4B5
  • tab.activeForeground#FFD4B5
  • tab.border#000000
  • tab.hoverBackground#36300F
  • tab.hoverBorder#FFD4B5
  • tab.inactiveBackground#211D00
  • tab.inactiveForeground#eebc87
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0451a5
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#0451a5
  • terminal.ansiBrightCyan#0598bc
  • terminal.ansiBrightGreen#14ce14
  • terminal.ansiBrightMagenta#bc05bc
  • terminal.ansiBrightRed#cd3131
  • terminal.ansiBrightWhite#a5a5a5
  • terminal.ansiBrightYellow#b5ba00
  • terminal.ansiCyan#0598bc
  • terminal.ansiGreen#00bc00
  • terminal.ansiMagenta#bc05bc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#555555
  • terminal.ansiYellow#949800
  • terminal.background#211D00
  • terminal.border#a2876c
  • terminal.foreground#5e5d5d
  • terminal.selectionBackground#00000040
  • terminalCursor.background#0087FF
  • terminalCursor.foreground#ffffff
  • textLink.foreground#006ab1
  • titleBar.activeBackground#36300F
  • titleBar.activeForeground#FFD4B5
  • titleBar.border#a2876c
  • titleBar.inactiveBackground#36300F99
  • titleBar.inactiveForeground#a2876c99
  • tree.indentGuidesStroke#a9a9a9
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#FFD4B5A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#d4d4d4
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string.quoted punctuation.definition.string.begin, string.quoted punctuation.definition.string.end#ce9178
comment, punctuation.definition.comment#52525bitalic
variable, string constant.other.placeholder#fdba74
source#d4d4d4
constant.other.color, punctuation.definition.entity, constant.character.entity, punctuation.definition.template-expression, punctuation.section.tag.twig#ce9178
invalid, invalid.illegal#f44747
keyword, storage.type, storage.modifier, constant.language, support.constant#E97318
constant.numeric, constant.character, constant.escape#E97318
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.brace, meta.block, meta.jsx, meta.embedded.expression, meta.template.expression, meta.tag.block.any.html, string.unquoted.tag-string.nunjucks, text.html.nunjucks#d4d4d4
punctuation.separator.key-value.html, keyword.control, keyword.operator, punctuation.definition.constant, meta.function.block.start.handlebars, meta.function.inline.other, meta.property-value, support.constant.mathematical-symbols, support.constant.vendored.property-value, punctuation.definition.keyword, punctuation.accessor, punctuation.separator.property, string.unquoted.filter-pipe#E97318
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.variable.dom, meta.import, meta.export, meta.export.default, support.class.builtin, support.class.component, variable.other.object#E97318
markup.deleted.git_gutter#f44747
keyword.control.import, keyword.control.export, keyword.control.from#E97318
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.function-call, keyword.control.filter#DCDCAA
meta.block variable.other#d4d4d4
variable.parameter, punctuation.section.property-list, meta.property-value.scss punctuation, meta.property-list, keyword.operator.type.annotation, variable.other.object.property#d4d4d4
text.html#d4d4d4
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, punctuation.definition.string, entity.name.section.markdown, meta.attribute-selector, entity.name.import.go, storage.type.attr.nunjucks#ce9178
markup.inserted.git_gutter#a0a0a0
markup.heading, entity.name.section.markdown#E97318bold
meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#d4d4d4
entity.name.import.go#d4d4d4
entity.name, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, meta.object-literal.key#d7ba7d
support.type, support.type.sys-types#d7ba7d
markup.changed.git_gutter#E97318
support.class, entity.other.inherited-class, meta.property-name, punctuation.definition.raw.markdown, variable.graphql, variable.other.readwrite#d7ba7d
keyword.other.debugger#E97318
variable.graphql, variable.other.readwrite#d4d4d4
meta.property-name, punctuation.definition.raw.markdown#d4d4d4
support.type.property-name, support.variable.object.node, support.variable.object.process#d4d4d4
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#d4d4d4
entity.name.module.js, variable.import.parameter.js#d7ba7d
variable.language#E97318
entity.name.method.js#DCDCAA
meta.class-method.js entity.name.function.js, variable.function.constructor#DCDCAA
entity.other.attribute-name#E97318
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#E97318
entity.other.attribute-name.class, punctuation.definition.entity.css#d7ba7d
source.sass keyword.control, entity.other.attribute-name.id#d7ba7d
markup.inserted#a0a0a0
markup.deleted#f44747
markup.changed#E97318
string.regexp#d16969
constant.character.escape#d7ba7d
*url*, *link*, *uri*#E97318underline
meta.decorator, tag.decorator.js entity.name.tag, tag.decorator.js punctuation.definition.tag#DCDCAA
source.js constant.other.object.key.js string.unquoted.label.js#d4d4d4
source.json meta.structure.dictionary.json support.type.property-name.json#E97318
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#DCDCAA
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#DCDCAA
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d7ba7d
markup.italic#E97318italic
markup.bold#E97318bold
markup.underlineunderline
markup.strike#888888strikethrough
markup.quote#a0a0a0italic
markup.raw.block#ce9178
markup.table#d4d4d4
text.html.markdown, punctuation.definition.list_item.markdown#d4d4d4
text.html.markdown markup.raw.inline, text.html.markdown markup.inline.raw.string.markdown#ce9178
text.html.markdown meta.dummy.line-break#d4d4d4
punctuation.definition.heading.markdown#E97318bold
punctuation.definition.blockquote.markdown#a0a0a0italic
string.other.link.title.markdown, markup.underline.link.markdown#ce9178
markup.underline.link.markdown#E97318underline
markup.raw.block.fenced.markdown#ce9178
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#858585
meta.separator#858585bold
token.info-token#E97318
token.warn-token#FFA500
token.error-token#F44747
token.debug-token#ffae57
storage.type.error.go#858585
punctuation.other.period.go#d4d4d4