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#332424
  • activityBar.border#443633
  • activityBar.foreground#e4ddbe
  • activityBarBadge.background#6195c5
  • activityBarBadge.foreground#e4ddbe
  • badge.background#d0a2cc
  • badge.foreground#332424
  • button.background#6195c580
  • button.foreground#e4ddbe
  • button.hoverBackground#6195c560
  • debugToolBar.background#332424
  • diffEditor.insertedTextBackground#81bda330
  • diffEditor.removedTextBackground#e8534830
  • dropdown.background#332424
  • dropdown.border#443633
  • dropdown.foreground#e4ddbe
  • editor.background#332424
  • editor.findMatchBackground#82b5e770
  • editor.findMatchHighlightBackground#ff923f30
  • editor.findRangeHighlightBackground#82b5e770
  • editor.foreground#e4ddbe
  • editor.hoverHighlightBackground#539aae50
  • editor.lineHighlightBackground#44363360
  • editor.lineHighlightBorder#44363300
  • editor.selectionBackground#539aae40
  • editor.selectionHighlightBackground#ffcf6040
  • editorBracketHighlight.foreground1#af82ab
  • editorBracketHighlight.foreground2#6195c5
  • editorBracketHighlight.foreground3#539aae
  • editorBracketHighlight.foreground4#629c84
  • editorBracketHighlight.foreground5#fdae40
  • editorBracketHighlight.foreground6#f6711d
  • editorBracketHighlight.unexpectedBracket.foreground#c3302c
  • editorBracketMatch.background#90857880
  • editorBracketMatch.border#33242400
  • editorCodeLens.foreground#a39a8990
  • editorCursor.foreground#e4ddbe
  • editorError.foreground#c3302c
  • editorGroup.border#443633
  • editorGroup.dropBackground#44363360
  • editorGroupHeader.noTabsBackground#443633
  • editorGroupHeader.tabsBackground#332424
  • editorGroupHeader.tabsBorder#443633
  • editorGutter.addedBackground#81bda3
  • editorGutter.background#33242400
  • editorGutter.deletedBackground#e85348
  • editorGutter.modifiedBackground#82b5e7
  • editorHoverWidget.background#332424
  • editorHoverWidget.border#443633
  • editorInfo.foreground#6195c5
  • editorLineNumber.foreground#695c55
  • editorLink.activeForeground#e4ddbe
  • editorOverviewRuler.addedForeground#82b5e7
  • editorOverviewRuler.border#33242400
  • editorOverviewRuler.commonContentForeground#908578
  • editorOverviewRuler.currentContentForeground#6195c5
  • editorOverviewRuler.deletedForeground#82b5e7
  • editorOverviewRuler.errorForeground#e85348
  • editorOverviewRuler.findMatchForeground#b8b09b
  • editorOverviewRuler.incomingContentForeground#539aae
  • editorOverviewRuler.infoForeground#d0a2cc
  • editorOverviewRuler.modifiedForeground#82b5e7
  • editorOverviewRuler.rangeHighlightForeground#b8b09b
  • editorOverviewRuler.selectionHighlightForeground#695c55
  • editorOverviewRuler.warningForeground#fdae40
  • editorOverviewRuler.wordHighlightForeground#695c55
  • editorOverviewRuler.wordHighlightStrongForeground#695c55
  • editorRuler.foreground#a39a8940
  • editorSuggestWidget.background#332424
  • editorSuggestWidget.border#443633
  • editorSuggestWidget.foreground#e4ddbe
  • editorSuggestWidget.highlightForeground#539aae
  • editorSuggestWidget.selectedBackground#44363360
  • editorWarning.foreground#fdae40
  • editorWhitespace.foreground#a39a8920
  • editorWidget.background#332424
  • editorWidget.border#443633
  • errorForeground#e85348
  • extensionButton.prominentBackground#81bda380
  • extensionButton.prominentHoverBackground#81bda330
  • focusBorder#443633
  • foreground#e4ddbe
  • gitDecoration.conflictingResourceForeground#af82ab
  • gitDecoration.deletedResourceForeground#c3302c
  • gitDecoration.ignoredResourceForeground#7c7066
  • gitDecoration.modifiedResourceForeground#fdae40
  • gitDecoration.untrackedResourceForeground#629c84
  • input.background#e4ddbe05
  • input.border#443633
  • input.foreground#e4ddbe
  • input.placeholderForeground#e4ddbe60
  • inputOption.activeBorder#e4ddbe60
  • inputValidation.errorBackground#c3302c80
  • inputValidation.errorBorder#e85348
  • inputValidation.infoBackground#6195c580
  • inputValidation.infoBorder#82b5e7
  • inputValidation.warningBackground#fdae4080
  • inputValidation.warningBorder#ffcf60
  • list.activeSelectionBackground#44363380
  • list.activeSelectionForeground#74bbcf
  • list.dropBackground#443633
  • list.focusBackground#443633
  • list.focusForeground#e4ddbe
  • list.highlightForeground#539aae
  • list.hoverBackground#44363380
  • list.hoverForeground#cdc7ac
  • list.inactiveSelectionBackground#44363380
  • list.inactiveSelectionForeground#539aae
  • menu.border#443633
  • menu.separatorBackground#443633
  • merge.border#33242400
  • merge.currentContentBackground#6195c520
  • merge.currentHeaderBackground#6195c540
  • merge.incomingContentBackground#539aae20
  • merge.incomingHeaderBackground#539aae40
  • notebook.cellBorderColor#564844
  • notebook.cellEditorBackground#3c2d2b
  • notebook.focusedCellBorder#a39a89
  • notebook.focusedEditorBorder#564844
  • panel.border#443633
  • panelTitle.activeForeground#e4ddbe
  • peekView.border#443633
  • peekViewEditor.background#44363370
  • peekViewEditor.matchHighlightBackground#564844
  • peekViewEditorGutter.background#44363370
  • peekViewResult.background#44363370
  • peekViewResult.fileForeground#e4ddbe
  • peekViewResult.lineForeground#e4ddbe
  • peekViewResult.matchHighlightBackground#564844
  • peekViewResult.selectionBackground#6195c520
  • peekViewResult.selectionForeground#e4ddbe
  • peekViewTitle.background#44363370
  • peekViewTitleDescription.foreground#b8b09b
  • peekViewTitleLabel.foreground#e4ddbe
  • progressBar.background#539aae
  • scrollbar.shadow#332424
  • scrollbarSlider.activeBackground#539aae
  • scrollbarSlider.background#56484499
  • scrollbarSlider.hoverBackground#695c55
  • selection.background#539aae80
  • sideBar.background#332424
  • sideBar.border#443633
  • sideBar.foreground#cdc7ac
  • sideBarSectionHeader.background#33242400
  • sideBarSectionHeader.foreground#e4ddbe
  • sideBarTitle.foreground#e4ddbe
  • statusBar.background#332424
  • statusBar.border#443633
  • statusBar.debuggingBackground#ff923f
  • statusBar.debuggingBorder#33242400
  • statusBar.debuggingForeground#332424
  • statusBar.foreground#e4ddbe
  • statusBar.noFolderBackground#332424
  • statusBar.noFolderBorder#33242400
  • tab.activeBackground#443633
  • tab.activeBorder#539aae
  • tab.activeForeground#e4ddbe
  • tab.border#33242400
  • tab.inactiveBackground#332424
  • tab.inactiveForeground#a39a89
  • tab.unfocusedActiveBorder#33242400
  • tab.unfocusedActiveForeground#a39a89
  • tab.unfocusedInactiveForeground#908578
  • terminal.ansiBlack#443633
  • terminal.ansiBlue#6195c5
  • terminal.ansiBrightBlack#908578
  • terminal.ansiBrightBlue#82b5e7
  • terminal.ansiBrightCyan#74bbcf
  • terminal.ansiBrightGreen#81bda3
  • terminal.ansiBrightMagenta#d0a2cc
  • terminal.ansiBrightRed#e85348
  • terminal.ansiBrightWhite#e4ddbe
  • terminal.ansiBrightYellow#ffcf60
  • terminal.ansiCyan#539aae
  • terminal.ansiGreen#629c84
  • terminal.ansiMagenta#af82ab
  • terminal.ansiRed#c3302c
  • terminal.ansiWhite#a39a89
  • terminal.ansiYellow#fdae40
  • terminal.background#332424
  • terminal.foreground#e4ddbe
  • textLink.activeForeground#6195c5
  • textLink.foreground#82b5e7
  • titleBar.activeBackground#332424
  • titleBar.activeForeground#e4ddbe
  • titleBar.inactiveBackground#332424
  • widget.shadow#33242430

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#e4ddbe
emphasisitalic
strongbold
header#6195c5
comment, punctuation.definition.comment#908578italic
constant, support.constant, variable.arguments#d0a2cc
constant.rgb-value#e4ddbe
entity.name.selector#74bbcf
entity.other.attribute-name#ffcf60
entity.name.tag, punctuation.tag#74bbcf
invalid, invalid.illegal#c3302c
invalid.deprecated#af82ab
meta.selector#74bbcf
meta.preprocessor#ff923f
meta.preprocessor.string#81bda3
meta.preprocessor.numeric#81bda3
meta.header.diff#ff923f
storage#e85348
storage.type, storage.modifier#ff923f
string#81bda3
string.tag#81bda3
string.value#81bda3
string.regexp#ff923f
string.escape#e85348
string.quasi#74bbcf
string.entity#81bda3
object#e4ddbe
module.node#82b5e7
support.type.property-name#539aae
keyword#e85348
keyword.control#e85348
keyword.control.module#74bbcf
keyword.control.less#fdae40
keyword.operator#74bbcf
keyword.operator.new#ff923f
keyword.other.unit#81bda3
metatag.php#ff923f
support.function.git-rebase#539aae
constant.sha.git-rebase#81bda3
meta.type.name, meta.return.type, meta.return-type, meta.cast, meta.type.annotation, support.type, storage.type.cs, variable.class#ffcf60
variable.this, support.variable#d0a2cc
entity.name, entity.static, entity.name.class.static.function, entity.name.function, entity.name.class, entity.name.type#ffcf60
entity.function, entity.name.function.static#74bbcf
entity.name.function.function-call#74bbcf
support.function.builtin#ff923f
entity.name.method, entity.name.method.function-call, entity.name.static.function-call#539aae
brace#cdc7ac
meta.parameter.type.variable, variable.parameter, variable.name, variable.other, variable, string.constant.other.placeholder#82b5e7
prototype#d0a2cc
punctuation#a39a89
punctuation.quoted#e4ddbe
punctuation.quasi#e85348
*url*, *link*, *uri*underline
meta.function.python, entity.name.function.python#74bbcf
storage.type.function.python, storage.modifier.declaration, storage.type.class.python, storage.type.string.python#e85348
storage.type.function.async.python#e85348
meta.function-call.generic#82b5e7
meta.function-call.arguments#cdc7ac
entity.name.function.decorator#ffcf60bold
constant.other.capsbold
keyword.operator.logical#e85348
punctuation.definition.logical-expression#ff923f
string.interpolated.dollar.shell, string.interpolated.backtick.shell#74bbcf
keyword.control.directive#74bbcf
support.function.C99#ffcf60
meta.function.cs, entity.name.function.cs, entity.name.type.namespace.cs#81bda3
keyword.other.using.cs, entity.name.variable.field.cs, entity.name.variable.local.cs, variable.other.readwrite.cs#74bbcf
keyword.other.this.cs, keyword.other.base.cs#d0a2cc
meta.scope.prerequisites#ffcf60
entity.name.function.target#81bda3bold
storage.modifier.import.java, storage.modifier.package.java#b8b09b
keyword.other.import.java, keyword.other.package.java#74bbcf
storage.type.java#ffcf60
storage.type.annotation#82b5e7bold
keyword.other.documentation.javadoc#74bbcf
comment.block.javadoc variable.parameter.java#81bda3bold
source.java variable.other.object, source.java variable.other.definition.java#e4ddbe
meta.function-parameters.lisp#ffcf60
markup.underlineunderline
string.other.link.title.markdown#908578underline
markup.underline.link#d0a2cc
markup.bold#ff923fbold
markup.heading#ff923fbold
markup.italicitalic
markup.inserted#81bda3
markup.deleted#f6711d
markup.changed#ff923f
markup.punctuation.quote.beginning#629c84
markup.punctuation.list.beginning#82b5e7
markup.inline.raw, markup.fenced_code.block#74bbcf
string.quoted.double.json#82b5e7
source.json meta.structure.dictionary.json support.type.property-name.json#81bda3
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#74bbcf
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#d0a2cc
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 support.type.property-name.json#81bda3
entity.other.attribute-name.css#ff923f
source.css meta.selector#e4ddbe
support.type.property-name.css#ff923f
entity.other.attribute-name.class#81bda3
source.css support.function.transform, source.css support.function.timing-function, source.css support.function.misc#e85348
support.property-value, constant.rgb-value, support.property-value.scss, constant.rgb-value.scss#f6711d
entity.name.tag.css
punctuation.definition.tag#82b5e7
text.html entity.name.tag, text.html punctuation.tag#74bbcfbold
source.js variable.language#ff923f
source.ts variable.language#ff923f
source.go storage.type#ffcf60
source.go entity.name.import#81bda3
source.go keyword.package, source.go keyword.import#74bbcf
source.go keyword.interface, source.go keyword.struct#82b5e7
source.go entity.name.type#e4ddbe
source.go entity.name.function#d0a2cc
keyword.control.cucumber.table#82b5e7
source.reason string.double, source.reason string.regexp#81bda3
source.reason keyword.control.less#74bbcf
source.reason entity.name.function#82b5e7
source.reason support.property-value, source.reason entity.name.filename#ff923f
source.powershell variable.other.member.powershell#ff923f
source.powershell support.function.powershell#ffcf60
source.powershell support.function.attribute.powershell#b8b09b
source.powershell meta.hashtable.assignment.powershell variable.other.readwrite.powershell#ff923f