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#f5ebe1
  • activityBar.border#bfbdb5
  • activityBar.foreground#403e3c
  • activityBar.inactiveForeground#948d88
  • activityBarBadge.background#565350
  • activityBarBadge.foreground#faf0e6
  • activityBarTop.inactiveForeground#948d88
  • badge.background#75716c
  • badge.foreground#faf0e6
  • breadcrumb.background#f5ebe1
  • button.background#789c62
  • button.foreground#faf0e6
  • debugExceptionWidget.background#faf0e6
  • debugExceptionWidget.border#dad8ce
  • debugToolBar.background#faf0e6
  • descriptionForeground#403e3c
  • diffEditor.insertedLineBackground#8f8f6e14
  • diffEditor.insertedTextBackground#77775c14
  • diffEditor.removedLineBackground#b3444626
  • diffEditor.removedTextBackground#b344461f
  • dropdown.background#fef7ef
  • dropdown.border#cbc5bb
  • dropdown.foreground#403e3c
  • editor.background#f5ebe1
  • editor.findMatchBackground#b7b5ac6c
  • editor.findMatchHighlightBackground#b7b5ac6c
  • editor.findRangeHighlightBackground#7497a633
  • editor.foreground#403e3c
  • editor.hoverHighlightBackground#339cec33
  • editor.lineHighlightBackground#faf0e6
  • editor.rangeHighlightBackground#7497a633
  • editor.selectionBackground#9bced63d
  • editor.selectionHighlightBackground#9bced63d
  • editor.wordHighlightBackground#339cec33
  • editor.wordHighlightStrongBackground#007dd659
  • editorBracketHighlight.foreground1#515151
  • editorBracketHighlight.foreground2#515151
  • editorBracketHighlight.foreground3#515151
  • editorBracketHighlight.foreground4#515151
  • editorBracketHighlight.foreground5#515151
  • editorBracketHighlight.foreground6#515151
  • editorBracketMatch.background#53535311
  • editorBracketMatch.border#00000000
  • editorCodeLens.foreground#403e3c
  • editorCursor.foreground#9bced6ff
  • editorError.foreground#e64d49
  • editorGroup.border#faf0e6
  • editorGroupHeader.noTabsBackground#ebe1d7
  • editorGroupHeader.tabsBackground#ebe1d7
  • editorGroupHeader.tabsBorder#f5ebe1
  • editorGutter.addedBackground#a2bd82
  • editorGutter.deletedBackground#d14d41
  • editorGutter.modifiedBackground#bea343
  • editorHoverWidget.background#faf0e6
  • editorHoverWidget.border#dad8ce
  • editorIndentGuide.background1#dad8ce
  • editorInfo.foreground#789c62
  • editorLineNumber.activeForeground#343331
  • editorLineNumber.foreground#afaaa2
  • editorMarkerNavigation.background#dad8ce
  • editorMarkerNavigationError.background#af3029
  • editorMarkerNavigationWarning.background#ad8301
  • editorOverviewRuler.errorForeground#e64d49
  • editorOverviewRuler.warningForeground#daaa01
  • editorRuler.foreground#dad8ce
  • editorSuggestWidget.background#faf0e6
  • editorSuggestWidget.border#dad8ce
  • editorSuggestWidget.foreground#403e3c
  • editorSuggestWidget.highlightForeground#403e3c
  • editorSuggestWidget.selectedBackground#d3e8f8
  • editorWarning.foreground#d0a215
  • editorWhitespace.foreground#dad8ce
  • editorWidget.background#faf0e6
  • editorWidget.border#dad8ce
  • errorForeground#403e3c
  • extensionButton.prominentBackground#2aa298
  • extensionButton.prominentForeground#faf0e6
  • focusBorder#b7b5ac
  • foreground#403e3c
  • gitDecoration.addedResourceForeground#a0b881
  • gitDecoration.modifiedResourceForeground#b18327
  • input.background#fef6ee
  • input.border#dad8ce
  • input.foreground#403e3c
  • input.placeholderForeground#b7b5ac
  • inputOption.activeBorder#2aa298
  • inputValidation.errorBackground#f76e6e
  • inputValidation.errorBorder#de3d3b
  • inputValidation.infoBackground#faf0e6
  • inputValidation.infoBorder#dad8ce
  • inputValidation.warningBackground#daaa01
  • inputValidation.warningBorder#e0af02
  • list.activeSelectionBackground#d5dad3
  • list.activeSelectionForeground#403e3c
  • list.errorForeground#a21e1e
  • list.focusAndSelectionOutline#c2c7c0
  • list.focusBackground#d5dad3
  • list.focusForeground#403e3c
  • list.highlightForeground#403e3c
  • list.hoverBackground#e0e5df
  • list.hoverForeground#403e3c
  • list.inactiveSelectionBackground#d5dad3
  • list.inactiveSelectionForeground#403e3c
  • list.warningForeground#815555
  • notificationCenter.border#cecdc3
  • notificationCenterHeader.background#faf0e6
  • notificationCenterHeader.foreground#403e3c
  • notificationLink.foreground#5e409d
  • notifications.background#faf0e6
  • notifications.border#cecdc3
  • notifications.foreground#403e3c
  • notificationToast.border#cecdc3
  • panel.background#faf0e6
  • panel.border#bfbdb5
  • peekView.border#dad8ce
  • peekViewEditor.background#faf0e6
  • peekViewEditor.matchHighlightBackground#3aa99faa
  • peekViewEditorGutter.background#faf0e6
  • peekViewResult.background#faf0e6
  • peekViewResult.fileForeground#403e3c
  • peekViewResult.lineForeground#403e3c
  • peekViewResult.matchHighlightBackground#3aa99faa
  • peekViewResult.selectionBackground#4385be66
  • peekViewResult.selectionForeground#403e3c
  • peekViewTitle.background#faf0e6
  • peekViewTitleDescription.foreground#403e3c
  • peekViewTitleLabel.foreground#403e3c
  • pickerGroup.border#dad8ce
  • pickerGroup.foreground#403e3c
  • progressBar.background#2aa298
  • scrollbar.shadow#cecdc3
  • selection.background#6f6e69ad
  • sideBar.background#faf0e6
  • sideBar.border#bfbdb5
  • sideBar.foreground#403e3c
  • sideBarActivityBarTop.border#00000000
  • sideBarSectionHeader.background#faf0e6
  • sideBarSectionHeader.border#d9d1ca
  • sideBarSectionHeader.foreground#595654
  • sideBarTitle.foreground#403e3c
  • statusBar.background#faf0e6
  • statusBar.border#dbd6d1
  • statusBar.debuggingBackground#faf0e6
  • statusBar.debuggingForeground#403e3c
  • statusBar.foreground#403e3c
  • statusBar.noFolderBackground#faf0e6
  • statusBar.noFolderForeground#403e3c
  • statusBarItem.errorBackground#faf0e6
  • statusBarItem.errorForeground#9a0000
  • statusBarItem.warningBackground#faf0e6
  • statusBarItem.warningForeground#9a5f00
  • tab.activeBackground#f5ebe1
  • tab.activeForeground#343331
  • tab.activeModifiedBorder#bfbdb5
  • tab.border#bfbdb5
  • tab.inactiveBackground#ebe1d7
  • tab.inactiveForeground#343331
  • tab.inactiveModifiedBorder#bfbdb5
  • tab.unfocusedActiveModifiedBorder#bfbdb5
  • tab.unfocusedInactiveModifiedBorder#bfbdb5
  • terminal.ansiBlack#100f0f
  • terminal.ansiBlue#205ea6
  • terminal.ansiBrightBlack#343331
  • terminal.ansiBrightBlue#4385be
  • terminal.ansiBrightCyan#3aa99f
  • terminal.ansiBrightGreen#879a39
  • terminal.ansiBrightMagenta#ce5d97
  • terminal.ansiBrightRed#d14d41
  • terminal.ansiBrightWhite#faf0e6
  • terminal.ansiBrightYellow#d0a215
  • terminal.ansiCyan#24837b
  • terminal.ansiGreen#66800b
  • terminal.ansiMagenta#a02f6f
  • terminal.ansiRed#af3029
  • terminal.ansiWhite#faf0e6
  • terminal.ansiYellow#ad8301
  • terminal.background#fdf5ed
  • terminal.foreground#10100f
  • titleBar.activeBackground#ebe0d7
  • titleBar.activeForeground#343331
  • titleBar.border#bfbdb5
  • titleBar.inactiveBackground#e0d7ce
  • widget.shadow#dad8ce

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file#a2bffc—
markup.deleted.diff#d14d4190—
markup.inserted.diff#205ea6ff—
comment#6f6e69—
string.quoted, variable.other.readwrite.js#b3534b—
support.constant.math#697024—
constant.numeric, constant.character.numeric#b38f4b
constant.language, punctuation.definition.constant, variable.other.constant#697024—
constant.character, constant.other#697024—
constant.character.escape#a02f6f—
string.regexp, string.regexp keyword.other#b3534b—
variable#515151—
punctuation.accessor, keyword#4a858c—
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx#4a858c—
storage.type#4a858c—
entity.name.class, entity.name.namespace, entity.other.inherited-class, meta.class, entity.name.type.class, entity.name.type.struct, entity.name.type#8c4a79—
entity.name.function#bd745e—
punctuation.definition.tag, meta.tag#9d9a40—
entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#8c4a79
entity.other.attribute-name#585858—
entity.name.tag.custom#585858—
invalid#ff2c83—
invalid.deprecated#d3423e—
keyword.operator#585858
keyword.operator.relational#585858—
keyword.operator.assignment#585858—
keyword.operator.arithmetic#585858—
keyword.operator.bitwise#585858—
keyword.operator.increment#585858—
keyword.operator.ternary#585858—
comment.line.double-slash#6f6e69—
constant.language.null, constant.language.boolean#4a858c—
meta.attribute.rust#585858—
meta.brace#585858—
meta.delimiter.period#585858—
punctuation#515151—
punctuation.definition.string#585858—
punctuation.definition.string.begin.markdown#585858—
variable.parameter.function#656565—
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#4a858c—
meta.property-list entity.name.tag.reference#4a858c—
keyword.other.unit#a02f6f—
meta.property-name#4a858c—
keyword.control.operator#4a858c—
keyword.operator.logical#4a858c—
keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts#4a858c—
invalid.broken#a02f6f—
invalid.unimplemented#66800b—
invalid.illegal#bc5215—
variable.language#24837b—
variable.function#bd745e—
italic—italic
bold—bold
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css#585858—
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#8c4a79—
source.elixir entity.name.function#bd745e—
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#697024—
keyword.package.go, keyword.import.go, keyword.function.go, keyword.type.go, keyword.struct.go, keyword.interface.go, keyword.const.go, keyword.var.go, keyword.map.go, keyword.channel.go, keyword.control.go#4a858c—
constant.language.go, constant.other.placeholder.go#8c4a79—
entity.name.function.preprocessor.cpp, entity.scope.name.cpp#bd745e—
storage.type.language.primitive.cpp#8c4a79—
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#8c4a79—
markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#697024—
markup.italic.markdown—italic
markup.bold.markdown—bold
markup.quote.markdown#697098—
markup.underline.link.markdown, markup.underline.link.image.markdown#8c4a79—
string.other.link.title.markdown, string.other.link.description.markdown#8a7d87—
markup.inline.raw.string.markdown#7b7b7b—
entity.name.tag.yaml#8c4a79—