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#3d3327
  • activityBar.background#1a1611
  • activityBar.border#3d3327
  • activityBar.foreground#f4f0e6
  • activityBar.inactiveForeground#a19485
  • activityBarBadge.background#daa520
  • activityBarBadge.foreground#1a1611
  • badge.background#d9d5cd
  • badge.foreground#1a1611
  • breadcrumb.activeSelectionForeground#f4f0e6
  • breadcrumb.background#1a1611
  • breadcrumb.focusForeground#f4f0e6
  • breadcrumb.foreground#a19485
  • button.background#daa520
  • button.foreground#1a1611
  • button.hoverBackground#b8860b
  • button.secondaryBackground#6b5b73
  • button.secondaryForeground#f4f0e6
  • button.secondaryHoverBackground#a19485
  • checkbox.background#2d251a
  • checkbox.border#00000000
  • checkbox.foreground#f4f0e6
  • debugExceptionWidget.background#2d251a
  • debugExceptionWidget.border#b19cd9
  • debugToolBar.background#000
  • debugToolBar.border#00000000
  • diffEditor.border#00000000
  • diffEditor.insertedTextBackground#daa52024
  • diffEditor.removedTextBackground#dc143c24
  • dropdown.background#2d251a
  • dropdown.border#00000000
  • dropdown.foreground#f4f0e6
  • editor.background#1a1611
  • editor.findMatchBackground#b19cd9
  • editor.findMatchBorder#daa520
  • editor.findMatchHighlightBackground#9370db55
  • editor.findMatchHighlightBorder#00000000
  • editor.findRangeHighlightBackground#2d251a
  • editor.findRangeHighlightBorder#00000000
  • editor.foldBackground#b19cd926
  • editor.foreground#f4f0e6
  • editor.hoverHighlightBackground#9370db40
  • editor.inactiveSelectionBackground#3d3327
  • editor.lineHighlightBackground#2d251a
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#ffffff0b
  • editor.rangeHighlightBorder#00000000
  • editor.selectionBackground#b19cd944
  • editor.selectionHighlightBackground#daa52034
  • editor.selectionHighlightBorder#b8860b
  • editor.wordHighlightBackground#6b5b73b8
  • editor.wordHighlightStrongBackground#9370dbb8
  • editorBracketMatch.background#6b5b73
  • editorBracketMatch.border#00000000
  • editorCodeLens.foreground#d9d5cd
  • editorCursor.background#1a1611
  • editorCursor.foreground#daa520
  • editorError.background#00000000
  • editorError.border#00000000
  • editorError.foreground#dc143c
  • editorGroup.border#3d3327
  • editorGroup.emptyBackground#1a1611
  • editorGroupHeader.border#00000000
  • editorGroupHeader.tabsBackground#2d251a
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#daa520
  • editorGutter.background#1a1611
  • editorGutter.commentRangeForeground#6b5b73
  • editorGutter.deletedBackground#dc143c
  • editorGutter.foldingControlForeground#6b5b73
  • editorGutter.modifiedBackground#9370db
  • editorHoverWidget.background#2d251a
  • editorHoverWidget.border#6b5b73
  • editorHoverWidget.foreground#e5e1dc
  • editorIndentGuide.activeBackground#a19485
  • editorIndentGuide.background#3d3327
  • editorInfo.background#9370db00
  • editorInfo.border#9370db00
  • editorInfo.foreground#9370db
  • editorLineNumber.activeForeground#a19485
  • editorLineNumber.foreground#6b5b73
  • editorLink.activeForeground#9370db
  • editorMarkerNavigation.background#2d251a
  • editorMarkerNavigationError.background#dc143c
  • editorMarkerNavigationInfo.background#9370db
  • editorMarkerNavigationWarning.background#daa520
  • editorOverviewRuler.background#00000000
  • editorOverviewRuler.border#00000000
  • editorRuler.foreground#6b5b73
  • editorSuggestWidget.background#2d251a
  • editorSuggestWidget.border#6b5b73
  • editorSuggestWidget.foreground#e5e1dc
  • editorSuggestWidget.highlightForeground#daa520
  • editorSuggestWidget.selectedBackground#b19cd9
  • editorWarning.background#daa52000
  • editorWarning.border#00000000
  • editorWarning.foreground#b8860b
  • editorWhitespace.foreground#b19cd950
  • editorWidget.background#3d3327
  • editorWidget.foreground#ffffff
  • editorWidget.resizeBorder#b19cd9
  • focusBorder#daa520
  • foreground#e5e1dc
  • gitDecoration.addedResourceForeground#daa520
  • gitDecoration.conflictingResourceForeground#8b7355
  • gitDecoration.deletedResourceForeground#dc143c
  • gitDecoration.ignoredResourceForeground#a19485
  • gitDecoration.modifiedResourceForeground#d4af37
  • gitDecoration.stageDeletedResourceForeground#dc143c
  • gitDecoration.stageModifiedResourceForeground#d4af37
  • gitDecoration.submoduleResourceForeground#9370db
  • gitDecoration.untrackedResourceForeground#daa520
  • icon.foreground#e5e1dc
  • input.background#2d251a
  • input.border#d9d5cd
  • input.foreground#f4f0e6
  • input.placeholderForeground#a19485
  • inputOption.activeBackground#9370db
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#f4f0e6
  • list.activeSelectionBackground#b19cd9
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#1a1611
  • list.focusBackground#9370db
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#3d3327
  • list.hoverForeground#f4f0e6
  • list.inactiveSelectionBackground#1a1611
  • list.inactiveSelectionForeground#f4f0e6
  • listFilterWidget.background#b19cd9
  • listFilterWidget.noMatchesOutline#dc143c
  • listFilterWidget.outline#9370db
  • menu.background#2d251a
  • menu.border#00000085
  • menu.foreground#e5e1dc
  • menu.selectionBackground#9370db
  • menu.selectionBorder#00000000
  • menu.selectionForeground#daa520
  • menu.separatorBackground#d9d5cd
  • menubar.selectionBackground#ffffff1a
  • menubar.selectionForeground#e5e1dc
  • merge.commonContentBackground#3d3327
  • merge.commonHeaderBackground#6b5b73
  • merge.currentContentBackground#daa52033
  • merge.currentHeaderBackground#daa520
  • merge.incomingContentBackground#9370db33
  • merge.incomingHeaderBackground#9370db
  • minimap.background#1a1611
  • minimap.errorHighlight#dc143c
  • minimap.findMatchHighlight#b19cd9
  • minimap.selectionHighlight#b19cd942
  • minimap.warningHighlight#b8860b
  • minimapGutter.addedBackground#daa520
  • minimapGutter.deletedBackground#dc143c
  • minimapGutter.modifiedBackground#9370db
  • notificationCenter.border#00000000
  • notificationCenterHeader.background#3d3327
  • notificationCenterHeader.foreground#1a1611
  • notifications.background#3d3327
  • notifications.border#d9d5cd
  • notifications.foreground#ffffff
  • notificationsErrorIcon.foreground#dc143c
  • notificationsInfoIcon.foreground#9370db
  • notificationsWarningIcon.foreground#b8860b
  • notificationToast.border#00000000
  • panel.background#2d251a
  • panel.border#1a1611
  • panelSection.border#1a1611
  • panelTitle.activeBorder#f4f0e6
  • panelTitle.activeForeground#f4f0e6
  • panelTitle.inactiveForeground#d9d5cd
  • peekView.border#daa520
  • peekViewEditor.background#2d1a00
  • peekViewEditor.matchHighlightBackground#daa52099
  • peekViewEditor.matchHighlightBorder#daa520
  • peekViewEditorGutter.background#2d1a00
  • peekViewResult.background#2d251a
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#d9d5cd
  • peekViewResult.matchHighlightBackground#dc143c
  • peekViewResult.selectionBackground#b19cd933
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1a1611
  • peekViewTitleDescription.foreground#e5e1dcb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#00000000
  • pickerGroup.foreground#f4f0e6
  • progressBar.background#daa520
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#9370db66
  • scrollbarSlider.background#6b5b7366
  • scrollbarSlider.hoverBackground#6b5b73B3
  • selection.background#daa52056
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#e5e1dc
  • sideBar.background#2d251a
  • sideBar.border#1a1611
  • sideBar.dropBackground#1a1611
  • sideBar.foreground#d9d5cd
  • sideBarSectionHeader.background#3d3327
  • sideBarSectionHeader.border#1a1611
  • sideBarSectionHeader.foreground#f4f0e6
  • sideBarTitle.foreground#f4f0e6
  • statusBar.background#4a3728
  • statusBar.debuggingBackground#b19cd9
  • statusBar.debuggingForeground#f4f0e6
  • statusBar.foreground#f4f0e6
  • statusBar.noFolderBackground#6b4423
  • statusBar.noFolderForeground#f4f0e6
  • statusBarItem.activeBackground#ffffff25
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.remoteBackground#8b7355
  • statusBarItem.remoteForeground#1a1611
  • tab.activeBackground#1a1611
  • tab.activeBorder#00000000
  • tab.activeBorderTop#f4f0e6
  • tab.activeForeground#f4f0e6
  • tab.border#1a1611
  • tab.hoverBackground#3d3327
  • tab.hoverForeground#f4f0e6
  • tab.inactiveBackground#2d251a
  • tab.inactiveForeground#a19485
  • terminal.ansiBlack#1a1611
  • terminal.ansiBlue#483d8b
  • terminal.ansiBrightBlack#6b5b73
  • terminal.ansiBrightBlue#9370db
  • terminal.ansiBrightCyan#8b7355
  • terminal.ansiBrightGreen#556b2f
  • terminal.ansiBrightMagenta#b19cd9
  • terminal.ansiBrightRed#dc143c
  • terminal.ansiBrightWhite#f4f0e6
  • terminal.ansiBrightYellow#daa520
  • terminal.ansiCyan#5f4b32
  • terminal.ansiGreen#2f4f2f
  • terminal.ansiMagenta#663399
  • terminal.ansiRed#8b0000
  • terminal.ansiWhite#f4f0e6
  • terminal.ansiYellow#b8860b
  • terminal.border#80808059
  • terminal.foreground#e5e1dc
  • terminal.selectionBackground#ffffff40
  • terminalCursor.background#daa520
  • terminalCursor.foreground#ffffff
  • textLink.foreground#9370db
  • titleBar.activeBackground#1a1611
  • titleBar.activeForeground#e5e1dc
  • titleBar.border#00000000
  • titleBar.inactiveBackground#3d332799
  • titleBar.inactiveForeground#e5e1dc99
  • tree.indentGuidesStroke#6b5b73
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison#daa520
variable.other.generic-type.haskell#9370db
storage.type.haskell#d4af37
support.variable.magic.python#daa520
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#f4f0e6
variable.parameter.function.language.special.self.python#b19cd9
storage.modifier.lifetime.rust#f4f0e6
support.function.std.rust#8b7355
entity.name.lifetime.rust#b19cd9
variable.language.rust#daa520
support.constant.edge#9370db
constant.other.character-class.regexp#daa520
keyword.operator.quantifier.regexp#d4af37
punctuation.definition.string.begin,punctuation.definition.string.end#d4af37
variable.parameter.function#f4f0e6
comment markup.link#6b5b73
markup.changed.diff#b19cd9
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#8b7355
markup.inserted.diff#d4af37
markup.deleted.diff#daa520
meta.function.c,meta.function.cpp#daa520
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c#f4f0e6
punctuation.separator.key-value#f4f0e6
keyword.operator.expression.import#8b7355
support.constant.math#b19cd9
support.constant.property.math#d4af37
variable.other.constant#b19cd9
storage.type.annotation.java, storage.type.object.array.java#b19cd9
source.java#daa520
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java#f4f0e6
meta.method.java#8b7355
storage.modifier.import.java,storage.type.java,storage.type.generic.java#b19cd9
keyword.operator.instanceof.java#9370db
meta.definition.variable.name.java#daa520
keyword.operator.logical#f4f0e6
keyword.operator.bitwise#f4f0e6
keyword.operator.channel#f4f0e6
support.constant.property-value.scss,support.constant.property-value.css#d4af37
keyword.operator.css,keyword.operator.scss,keyword.operator.less#f4f0e6
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#d4af37
punctuation.separator.list.comma.css#f4f0e6
support.constant.color.w3c-standard-color-name.css#d4af37
support.type.vendored.property-name.css#f4f0e6
support.module.node,support.type.object.module,support.module.node#b19cd9
entity.name.type.module#d4af37
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#daa520
support.constant.json#d4af37
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#9370db
support.type.object.console#daa520
support.variable.property.process#d4af37
entity.name.function,support.function.console#8b7355
keyword.operator.misc.rust#f4f0e6
keyword.operator.sigil.rust#9370db
keyword.operator.delete#9370db
support.type.object.dom#f4f0e6
support.variable.dom,support.variable.property.dom#daa520
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#f4f0e6
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp#9370db
punctuation.separator.delimiter#f4f0e6
punctuation.separator.c,punctuation.separator.cpp#9370db
support.type.posix-reserved.c,support.type.posix-reserved.cpp#f4f0e6
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#9370db
variable.parameter.function.language.python#d4af37
support.type.python#f4f0e6
keyword.operator.logical.python#9370db
variable.parameter.function.python#d4af37
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#f4f0e6
meta.function-call.generic.python#8b7355
constant.character.format.placeholder.other.python#d4af37
keyword.operator#f4f0e6
keyword.operator.assignment.compound#9370db
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#f4f0e6
keyword#9370db
entity.name.namespace#b19cd9
variable#daa520
variable.c#f4f0e6
variable.language#b19cd9
token.variable.parameter.java#f4f0e6
import.storage.java#b19cd9
token.package.keyword#9370db
token.package#f4f0e6
entity.name.function, meta.require, support.function.any-method, variable.function#8b7355
entity.name.type.namespace#b19cd9
support.class, entity.name.type.class#b19cd9
entity.name.class.identifier.namespace.type#b19cd9
entity.name.class, variable.other.class.js, variable.other.class.ts#b19cd9
variable.other.class.php#daa520
entity.name.type#b19cd9
keyword.control#9370db
control.elements, keyword.operator.less#d4af37
keyword.other.special-method#8b7355
storage#9370db
token.storage#9370db
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void#9370db
token.storage.type.java#b19cd9
support.function#f4f0e6
support.type.property-name#f4f0e6
support.constant.property-value#f4f0e6
support.constant.font-name#d4af37
meta.tag#f4f0e6
string#d4af37
entity.other.inherited-class#b19cd9
constant.other.symbol#f4f0e6
constant.numeric#d4af37
constant#d4af37
punctuation.definition.constant#d4af37
entity.name.tag#9370db
entity.other.attribute-name#daa520
entity.other.attribute-name.html#b19cd9
string.quoted.double.html,string.quoted.single.html,string.template.html,punctuation.definition.string.begin.html,punctuation.definition.string.end.html#daa520
entity.other.attribute-name.id#8b7355normal
entity.other.attribute-name.class.css#daa520normal
meta.selector#9370db
markup.heading#daa520
markup.heading punctuation.definition.heading, entity.name.section#8b7355
keyword.other.unit#daa520
markup.bold,todo.bold#d4af37
punctuation.definition.bold#b19cd9
markup.italic, punctuation.definition.italic,todo.emphasis#9370db
emphasis md#9370db
entity.name.section.markdown#daa520
punctuation.definition.heading.markdown#daa520
punctuation.definition.list.begin.markdown#daa520
markup.heading.setext#f4f0e6
punctuation.definition.bold.markdown#d4af37
markup.inline.raw.markdown#d4af37
markup.inline.raw.string.markdown#d4af37
punctuation.definition.list.markdown#daa520
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#daa520
beginning.punctuation.definition.list.markdown#daa520
punctuation.definition.metadata.markdown#daa520
markup.underline.link.markdown,markup.underline.link.image.markdown#9370db
string.other.link.title.markdown,string.other.link.description.markdown#8b7355
string.regexp#f4f0e6
constant.character.escape#f4f0e6
punctuation.section.embedded, variable.interpolation#daa520
punctuation.section.embedded.begin,punctuation.section.embedded.end#9370db
invalid.illegal#dc143c
invalid.illegal.bad-ampersand.html#f4f0e6
invalid.broken#dc143c
invalid.deprecated#dc143c
invalid.unimplemented#dc143c
support.type.property-name.json#daa520
support.type.property-name.json punctuation#daa520
comment, punctuation.definition.comment#8b7d6b80italic
markup.quote.markdown#8b7d6b80