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#f9f8f6
  • activityBar.background#fffef7
  • activityBar.border#f3f1eb
  • activityBar.foreground#44403c
  • activityBar.inactiveForeground#78716c
  • activityBarBadge.background#a16207
  • activityBarBadge.foreground#ffffff
  • badge.background#78716c
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#44403c
  • breadcrumb.background#fffef7
  • breadcrumb.focusForeground#44403c
  • breadcrumb.foreground#78716c
  • button.background#a16207
  • button.foreground#ffffff
  • button.hoverBackground#92400e
  • button.secondaryBackground#78716c
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#57534e
  • checkbox.background#fffef7
  • checkbox.border#d6d3d1
  • checkbox.foreground#44403c
  • debugExceptionWidget.background#faf9f2
  • debugExceptionWidget.border#6b46c1
  • debugToolBar.background#ffffff
  • debugToolBar.border#f3f1eb
  • diffEditor.border#f3f1eb
  • diffEditor.insertedTextBackground#ecfdf5
  • diffEditor.removedTextBackground#fef2f2
  • dropdown.background#fffef7
  • dropdown.border#d6d3d1
  • dropdown.foreground#44403c
  • editor.background#ffffff
  • editor.findMatchBackground#fef3c7
  • editor.findMatchBorder#a16207
  • editor.findMatchHighlightBackground#ede9fe
  • editor.findMatchHighlightBorder#7c3aed
  • editor.findRangeHighlightBackground#faf9f2
  • editor.findRangeHighlightBorder#f3f1eb
  • editor.foldBackground#ede9fe
  • editor.foreground#44403c
  • editor.hoverHighlightBackground#ede9fe
  • editor.inactiveSelectionBackground#f9f8f6
  • editor.lineHighlightBackground#faf9f2
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#faf9f2
  • editor.rangeHighlightBorder#f3f1eb
  • editor.selectionBackground#fef3c7
  • editor.selectionHighlightBackground#ede9fe
  • editor.selectionHighlightBorder#6b46c1
  • editor.wordHighlightBackground#f9f8f6
  • editor.wordHighlightStrongBackground#fef3c7
  • editorBracketMatch.background#faf9f2
  • editorBracketMatch.border#78716c
  • editorCodeLens.foreground#78716c
  • editorCursor.background#ffffff
  • editorCursor.foreground#a16207
  • editorError.background#00000000
  • editorError.border#00000000
  • editorError.foreground#dc2626
  • editorGroup.border#f3f1eb
  • editorGroup.emptyBackground#fffef7
  • editorGroupHeader.border#f3f1eb
  • editorGroupHeader.tabsBackground#faf9f2
  • editorGroupHeader.tabsBorder#f3f1eb
  • editorGutter.addedBackground#16a34a
  • editorGutter.background#ffffff
  • editorGutter.commentRangeForeground#78716c
  • editorGutter.deletedBackground#dc2626
  • editorGutter.foldingControlForeground#78716c
  • editorGutter.modifiedBackground#f59e0b
  • editorHoverWidget.background#fffef7
  • editorHoverWidget.border#d6d3d1
  • editorHoverWidget.foreground#44403c
  • editorIndentGuide.activeBackground#57534e
  • editorIndentGuide.background#f9f8f6
  • editorInfo.background#ddd6fe00
  • editorInfo.border#ddd6fe00
  • editorInfo.foreground#5b21b6
  • editorLineNumber.activeForeground#57534e
  • editorLineNumber.foreground#78716c
  • editorLink.activeForeground#a16207
  • editorMarkerNavigation.background#faf9f2
  • editorMarkerNavigationError.background#dc2626
  • editorMarkerNavigationInfo.background#0ea5e9
  • editorMarkerNavigationWarning.background#f59e0b
  • editorOverviewRuler.background#faf9f2
  • editorOverviewRuler.border#f3f1eb
  • editorRuler.foreground#f9f8f6
  • editorSuggestWidget.background#fffef7
  • editorSuggestWidget.border#d6d3d1
  • editorSuggestWidget.foreground#44403c
  • editorSuggestWidget.highlightForeground#a16207
  • editorSuggestWidget.selectedBackground#ede9fe
  • editorWarning.background#fef3c700
  • editorWarning.border#fef3c700
  • editorWarning.foreground#a16207
  • editorWhitespace.foreground#f3f1eb
  • editorWidget.background#faf9f2
  • editorWidget.foreground#44403c
  • editorWidget.resizeBorder#a16207
  • focusBorder#a16207
  • foreground#44403c
  • gitDecoration.addedResourceForeground#16a34a
  • gitDecoration.conflictingResourceForeground#f59e0b
  • gitDecoration.deletedResourceForeground#dc2626
  • gitDecoration.ignoredResourceForeground#78716c
  • gitDecoration.modifiedResourceForeground#a16207
  • gitDecoration.stageDeletedResourceForeground#dc2626
  • gitDecoration.stageModifiedResourceForeground#a16207
  • gitDecoration.submoduleResourceForeground#7c3aed
  • gitDecoration.untrackedResourceForeground#16a34a
  • icon.foreground#44403c
  • input.background#fffef7
  • input.border#d6d3d1
  • input.foreground#44403c
  • input.placeholderForeground#78716c
  • inputOption.activeBackground#a16207
  • inputOption.activeBorder#a16207
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#a16207
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#ede9fe
  • list.focusBackground#fef3c7
  • list.focusForeground#44403c
  • list.highlightForeground#a16207
  • list.hoverBackground#faf9f2
  • list.hoverForeground#44403c
  • list.inactiveSelectionBackground#f9f8f6
  • list.inactiveSelectionForeground#44403c
  • listFilterWidget.background#faf9f2
  • listFilterWidget.noMatchesOutline#dc2626
  • listFilterWidget.outline#a16207
  • menu.background#fffef7
  • menu.border#d6d3d1
  • menu.foreground#44403c
  • menu.selectionBackground#ede9fe
  • menu.selectionBorder#a16207
  • menu.selectionForeground#44403c
  • menu.separatorBackground#f3f1eb
  • menubar.selectionBackground#ede9fe
  • menubar.selectionForeground#44403c
  • merge.commonContentBackground#faf9f2
  • merge.commonHeaderBackground#f9f8f6
  • merge.currentContentBackground#ecfdf5
  • merge.currentHeaderBackground#16a34a
  • merge.incomingContentBackground#f3e8ff
  • merge.incomingHeaderBackground#8b5cf6
  • minimap.background#ffffff
  • minimap.errorHighlight#dc2626
  • minimap.findMatchHighlight#fef3c7
  • minimap.selectionHighlight#ede9fe
  • minimap.warningHighlight#f59e0b
  • minimapGutter.addedBackground#16a34a
  • minimapGutter.deletedBackground#dc2626
  • minimapGutter.modifiedBackground#f59e0b
  • notificationCenter.border#f3f1eb
  • notificationCenterHeader.background#faf9f2
  • notificationCenterHeader.foreground#44403c
  • notifications.background#fffef7
  • notifications.border#d6d3d1
  • notifications.foreground#44403c
  • notificationsErrorIcon.foreground#dc2626
  • notificationsInfoIcon.foreground#0ea5e9
  • notificationsWarningIcon.foreground#f59e0b
  • notificationToast.border#d6d3d1
  • panel.background#fffef7
  • panel.border#f3f1eb
  • panelSection.border#f3f1eb
  • panelTitle.activeBorder#a16207
  • panelTitle.activeForeground#44403c
  • panelTitle.inactiveForeground#78716c
  • peekView.border#a16207
  • peekViewEditor.background#faf9f2
  • peekViewEditor.matchHighlightBackground#fef3c7
  • peekViewEditor.matchHighlightBorder#a16207
  • peekViewEditorGutter.background#faf9f2
  • peekViewResult.background#fffef7
  • peekViewResult.fileForeground#44403c
  • peekViewResult.lineForeground#57534e
  • peekViewResult.matchHighlightBackground#fef3c7
  • peekViewResult.selectionBackground#ede9fe
  • peekViewResult.selectionForeground#44403c
  • peekViewTitle.background#f9f8f6
  • peekViewTitleDescription.foreground#78716c
  • peekViewTitleLabel.foreground#44403c
  • pickerGroup.border#f3f1eb
  • pickerGroup.foreground#57534e
  • progressBar.background#a16207
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#57534eaa
  • scrollbarSlider.background#78716c80
  • scrollbarSlider.hoverBackground#57534eaa
  • selection.background#fef3c7
  • settings.focusedRowBackground#faf9f2
  • settings.headerForeground#44403c
  • sideBar.background#faf9f2
  • sideBar.border#f3f1eb
  • sideBar.dropBackground#ede9fe
  • sideBar.foreground#57534e
  • sideBarSectionHeader.background#f9f8f6
  • sideBarSectionHeader.border#f3f1eb
  • sideBarSectionHeader.foreground#44403c
  • sideBarTitle.foreground#44403c
  • statusBar.background#a16207
  • statusBar.debuggingBackground#7c3aed
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#78716c
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#ffffff20
  • statusBarItem.hoverBackground#ffffff15
  • statusBarItem.remoteBackground#16a34a
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorder#00000000
  • tab.activeBorderTop#a16207
  • tab.activeForeground#44403c
  • tab.border#f3f1eb
  • tab.hoverBackground#f9f8f6
  • tab.hoverForeground#44403c
  • tab.inactiveBackground#faf9f2
  • tab.inactiveForeground#78716c
  • terminal.ansiBlack#292524
  • terminal.ansiBlue#1d4ed8
  • terminal.ansiBrightBlack#78716c
  • terminal.ansiBrightBlue#3b82f6
  • terminal.ansiBrightCyan#0ea5e9
  • terminal.ansiBrightGreen#16a34a
  • terminal.ansiBrightMagenta#8b5cf6
  • terminal.ansiBrightRed#dc2626
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f59e0b
  • terminal.ansiCyan#0891b2
  • terminal.ansiGreen#059669
  • terminal.ansiMagenta#7c3aed
  • terminal.ansiRed#b91c1c
  • terminal.ansiWhite#faf9f2
  • terminal.ansiYellow#a16207
  • terminal.border#f3f1eb
  • terminal.foreground#44403c
  • terminal.selectionBackground#a1620740
  • terminalCursor.background#ffffff
  • terminalCursor.foreground#a16207
  • textLink.foreground#a16207
  • titleBar.activeBackground#fffef7
  • titleBar.activeForeground#44403c
  • titleBar.border#f3f1eb
  • titleBar.inactiveBackground#faf9f2
  • titleBar.inactiveForeground#78716c
  • tree.indentGuidesStroke#f9f8f6
  • walkThrough.embeddedEditorBackground#faf9f2
  • widget.shadow#00000020

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#a16207
variable.other.generic-type.haskell#7c3aed
storage.type.haskell#b45309
support.variable.magic.python#a16207
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#44403c
variable.parameter.function.language.special.self.python#6b46c1
storage.modifier.lifetime.rust#44403c
support.function.std.rust#92400e
entity.name.lifetime.rust#6b46c1
variable.language.rust#a16207
support.constant.edge#7c3aed
constant.other.character-class.regexp#a16207
keyword.operator.quantifier.regexp#b45309
punctuation.definition.string.begin,punctuation.definition.string.end#b45309
variable.parameter.function#44403c
comment markup.link#78716c
markup.changed.diff#6b46c1
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#92400e
markup.inserted.diff#b45309
markup.deleted.diff#a16207
meta.function.c,meta.function.cpp#a16207
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#44403c
punctuation.separator.key-value#44403c
keyword.operator.expression.import#92400e
support.constant.math#6b46c1
support.constant.property.math#b45309
variable.other.constant#6b46c1
storage.type.annotation.java, storage.type.object.array.java#6b46c1
source.java#a16207
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#44403c
meta.method.java#92400e
storage.modifier.import.java,storage.type.java,storage.type.generic.java#6b46c1
keyword.operator.instanceof.java#7c3aed
meta.definition.variable.name.java#a16207
keyword.operator.logical#44403c
keyword.operator.bitwise#44403c
keyword.operator.channel#44403c
support.constant.property-value.scss,support.constant.property-value.css#b45309
keyword.operator.css,keyword.operator.scss,keyword.operator.less#44403c
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#b45309
punctuation.separator.list.comma.css#44403c
support.constant.color.w3c-standard-color-name.css#b45309
support.type.vendored.property-name.css#44403c
support.module.node,support.type.object.module,support.module.node#6b46c1
entity.name.type.module#b45309
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#a16207
support.constant.json#b45309
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#7c3aed
support.type.object.console#a16207
support.variable.property.process#b45309
entity.name.function,support.function.console#92400e
keyword.operator.misc.rust#44403c
keyword.operator.sigil.rust#7c3aed
keyword.operator.delete#7c3aed
support.type.object.dom#44403c
support.variable.dom,support.variable.property.dom#a16207
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#44403c
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#7c3aed
punctuation.separator.delimiter#44403c
punctuation.separator.c,punctuation.separator.cpp#7c3aed
support.type.posix-reserved.c,support.type.posix-reserved.cpp#44403c
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#7c3aed
variable.parameter.function.language.python#b45309
support.type.python#44403c
keyword.operator.logical.python#7c3aed
variable.parameter.function.python#b45309
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#44403c
meta.function-call.generic.python#92400e
constant.character.format.placeholder.other.python#b45309
keyword.operator#44403c
keyword.operator.assignment.compound#7c3aed
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#44403c
keyword#7c3aed
entity.name.namespace#6b46c1
variable#a16207
variable.c#44403c
variable.language#6b46c1
token.variable.parameter.java#44403c
import.storage.java#6b46c1
token.package.keyword#7c3aed
token.package#44403c
entity.name.function, meta.require, support.function.any-method, variable.function#92400e
entity.name.type.namespace#6b46c1
support.class, entity.name.type.class#6b46c1
entity.name.class.identifier.namespace.type#6b46c1
entity.name.class, variable.other.class.js, variable.other.class.ts#6b46c1
variable.other.class.php#a16207
entity.name.type#6b46c1
keyword.control#7c3aed
control.elements, keyword.operator.less#b45309
keyword.other.special-method#92400e
storage#7c3aed
token.storage#7c3aed
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#7c3aed
token.storage.type.java#6b46c1
support.function#44403c
support.type.property-name#44403c
support.constant.property-value#44403c
support.constant.font-name#b45309
meta.tag#44403c
string#b45309
entity.other.inherited-class#6b46c1
constant.other.symbol#44403c
constant.numeric#b45309
constant#b45309
punctuation.definition.constant#b45309
entity.name.tag#7c3aed
entity.other.attribute-name#a16207
entity.other.attribute-name.html#6b46c1
string.quoted.double.html,string.quoted.single.html,string.template.html,punctuation.definition.string.begin.html,punctuation.definition.string.end.html#a16207
entity.other.attribute-name.id#92400enormal
entity.other.attribute-name.class.css#a16207normal
meta.selector#7c3aed
markup.heading#a16207
markup.heading punctuation.definition.heading, entity.name.section#92400e
keyword.other.unit#a16207
markup.bold,todo.bold#b45309
punctuation.definition.bold#6b46c1
markup.italic, punctuation.definition.italic,todo.emphasis#7c3aed
emphasis md#7c3aed
entity.name.section.markdown#a16207
punctuation.definition.heading.markdown#a16207
punctuation.definition.list.begin.markdown#a16207
markup.heading.setext#44403c
punctuation.definition.bold.markdown#b45309
markup.inline.raw.markdown#b45309
markup.inline.raw.string.markdown#b45309
punctuation.definition.list.markdown#a16207
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#a16207
beginning.punctuation.definition.list.markdown#a16207
punctuation.definition.metadata.markdown#a16207
markup.underline.link.markdown,markup.underline.link.image.markdown#7c3aed
string.other.link.title.markdown,string.other.link.description.markdown#92400e
string.regexp#44403c
constant.character.escape#44403c
punctuation.section.embedded, variable.interpolation#a16207
punctuation.section.embedded.begin,punctuation.section.embedded.end#7c3aed
invalid.illegal#dc2626
invalid.illegal.bad-ampersand.html#44403c
invalid.broken#dc2626
invalid.deprecated#dc2626
invalid.unimplemented#dc2626
support.type.property-name.json#a16207
support.type.property-name.json punctuation#a16207
comment, punctuation.definition.comment#78716citalic
markup.quote.markdown#78716c