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.activeBorder#ffb681
  • activityBar.background#20120e
  • activityBar.border#734e3a
  • activityBar.foreground#ffb681
  • activityBar.inactiveForeground#c09f89
  • activityBarBadge.background#ffb681
  • activityBarBadge.foreground#281811
  • badge.background#ffb681
  • badge.foreground#281811
  • breadcrumb.background#361f19
  • breadcrumb.foreground#dfc1af
  • button.background#ffb681
  • button.foreground#281811
  • button.hoverBackground#febf90
  • button.secondaryBackground#503026
  • button.secondaryForeground#faece1
  • button.secondaryHoverBackground#43271f
  • charts.blue#edcc92
  • charts.green#a9ddb4
  • charts.orange#95dcd8
  • charts.purple#d8b3ef
  • charts.red#ff9faa
  • charts.yellow#efd18e
  • contrastActiveBorder#ffb681
  • debugConsole.errorForeground#ff9faa
  • debugConsole.infoForeground#edcc92
  • debugConsole.sourceForeground#dfc1af
  • debugConsole.warningForeground#efd18e
  • debugExceptionWidget.background#361f19
  • debugExceptionWidget.border#ff9faa
  • debugIcon.breakpointForeground#ff9faa
  • debugIcon.disconnectForeground#ff9faa
  • debugIcon.pauseForeground#95dcd8
  • debugIcon.startForeground#a9ddb4
  • debugIcon.stepIntoForeground#95dcd8
  • debugIcon.stepOutForeground#95dcd8
  • debugIcon.stepOverForeground#95dcd8
  • debugIcon.stopForeground#ff9faa
  • debugToolBar.background#361f19
  • descriptionForeground#c09f89
  • diffEditor.insertedLineBackground#a9ddb40c
  • diffEditor.insertedTextBackground#a9ddb41c
  • diffEditor.removedLineBackground#ff9faa0c
  • diffEditor.removedTextBackground#ff9faa1c
  • disabledForeground#c09f89
  • dropdown.background#361f19
  • dropdown.border#734e3a
  • dropdown.foreground#faece1
  • editor.background#281811
  • editor.findMatchBackground#37332d
  • editor.findMatchBorder#95dcd8
  • editor.findMatchHighlightBackground#37332d
  • editor.findMatchHighlightBorder#95dcd8
  • editor.findRangeHighlightBorder#95dcd8
  • editor.focusedStackFrameHighlightBackground#a9ddb418
  • editor.foreground#faece1
  • editor.inactiveSelectionBackground#503026
  • editor.lineHighlightBackground#43271f
  • editor.selectionBackground#503026
  • editor.selectionForeground#faece1
  • editor.selectionHighlightBackground#ffb68116
  • editor.stackFrameHighlightBackground#95dcd818
  • editor.wordHighlightBackground#ffb68116
  • editor.wordHighlightStrongBackground#ffb68116
  • editorBracketHighlight.foreground1#ffb681
  • editorBracketHighlight.foreground2#95dcd8
  • editorBracketHighlight.foreground3#edcc92
  • editorBracketHighlight.foreground4#d8b3ef
  • editorBracketHighlight.foreground5#b8d4a4
  • editorBracketHighlight.foreground6#f5adb7
  • editorBracketHighlight.unexpectedBracket.foreground#ff9faa
  • editorBracketMatch.background#43271f
  • editorBracketMatch.border#c09f89
  • editorCursor.foreground#ffb681
  • editorError.foreground#ff9faa
  • editorGroup.border#734e3a
  • editorGroupHeader.tabsBackground#361f19
  • editorGroupHeader.tabsBorder#734e3a
  • editorGutter.addedBackground#a9ddb4
  • editorGutter.deletedBackground#ff9faa
  • editorGutter.modifiedBackground#95dcd8
  • editorHint.foreground#a9ddb4
  • editorHoverWidget.background#361f19
  • editorHoverWidget.border#734e3a
  • editorHoverWidget.foreground#faece1
  • editorIndentGuide.activeBackground1#c09f89
  • editorIndentGuide.background1#5d473b
  • editorInfo.foreground#edcc92
  • editorLineNumber.activeForeground#ffb681
  • editorLineNumber.foreground#c09f89
  • editorOverviewRuler.addedForeground#a9ddb4
  • editorOverviewRuler.deletedForeground#ff9faa
  • editorOverviewRuler.errorForeground#ff9faa
  • editorOverviewRuler.modifiedForeground#95dcd8
  • editorOverviewRuler.warningForeground#efd18e
  • editorRuler.foreground#5d473b
  • editorWarning.foreground#efd18e
  • editorWhitespace.foreground#5d473b
  • editorWidget.background#361f19
  • editorWidget.border#734e3a
  • editorWidget.foreground#faece1
  • errorForeground#ff9faa
  • focusBorder#ffb681
  • foreground#faece1
  • gitDecoration.addedResourceForeground#a9ddb4
  • gitDecoration.conflictingResourceForeground#ff9faa
  • gitDecoration.deletedResourceForeground#ff9faa
  • gitDecoration.ignoredResourceForeground#c09f89
  • gitDecoration.modifiedResourceForeground#95dcd8
  • gitDecoration.renamedResourceForeground#edcc92
  • gitDecoration.untrackedResourceForeground#a9ddb4
  • input.background#361f19
  • input.border#734e3a
  • input.foreground#faece1
  • input.placeholderForeground#c09f89
  • inputOption.activeBackground#503026
  • inputOption.activeBorder#ffb681
  • inputOption.activeForeground#faece1
  • inputOption.hoverBackground#43271f
  • inputValidation.errorBackground#3e2620
  • inputValidation.errorBorder#ff9faa
  • inputValidation.errorForeground#faece1
  • inputValidation.infoBackground#3c2a1e
  • inputValidation.infoBorder#edcc92
  • inputValidation.infoForeground#faece1
  • inputValidation.warningBackground#3c2b1e
  • inputValidation.warningBorder#efd18e
  • inputValidation.warningForeground#faece1
  • list.activeSelectionBackground#503026
  • list.activeSelectionForeground#faece1
  • list.errorForeground#ff9faa
  • list.filterMatchBackground#503026
  • list.focusBackground#503026
  • list.focusForeground#faece1
  • list.focusHighlightForeground#ffb681
  • list.focusOutline#ffb681
  • list.highlightForeground#faece1
  • list.hoverBackground#43271f
  • list.hoverForeground#faece1
  • list.inactiveSelectionBackground#503026
  • list.inactiveSelectionForeground#faece1
  • list.warningForeground#efd18e
  • menu.background#361f19
  • menu.border#734e3a
  • menu.foreground#faece1
  • menu.selectionBackground#503026
  • menu.selectionForeground#faece1
  • menu.separatorBackground#734e3a
  • minimap.errorHighlight#ff9faa
  • minimap.warningHighlight#efd18e
  • notebook.cellEditorBackground#281811
  • notificationCenterHeader.background#20120e
  • notificationCenterHeader.foreground#dfc1af
  • notifications.background#361f19
  • notifications.border#734e3a
  • notifications.foreground#faece1
  • notificationsErrorIcon.foreground#ff9faa
  • notificationsInfoIcon.foreground#edcc92
  • notificationsWarningIcon.foreground#efd18e
  • panel.background#361f19
  • panel.border#734e3a
  • panelTitle.activeBorder#ffb681
  • panelTitle.activeForeground#faece1
  • panelTitle.inactiveForeground#dfc1af
  • peekView.border#ffb681
  • peekViewEditor.background#361f19
  • peekViewEditor.matchHighlightBackground#503026
  • peekViewResult.background#361f19
  • peekViewResult.fileForeground#faece1
  • peekViewResult.lineForeground#faece1
  • peekViewResult.matchHighlightBackground#503026
  • peekViewResult.selectionBackground#503026
  • peekViewResult.selectionForeground#faece1
  • peekViewTitle.background#361f19
  • peekViewTitleDescription.foreground#dfc1af
  • peekViewTitleLabel.foreground#faece1
  • pickerGroup.border#734e3a
  • pickerGroup.foreground#ffb681
  • problemsErrorIcon.foreground#ff9faa
  • problemsInfoIcon.foreground#edcc92
  • problemsWarningIcon.foreground#efd18e
  • progressBar.background#ffb681
  • quickInput.background#361f19
  • quickInput.foreground#faece1
  • quickInputList.focusBackground#503026
  • quickInputList.focusForeground#faece1
  • scrollbar.shadow#28181199
  • scrollbarSlider.activeBackground#c09f8980
  • scrollbarSlider.background#c09f8940
  • scrollbarSlider.hoverBackground#c09f8960
  • selection.background#503026
  • sideBar.background#20120e
  • sideBar.border#734e3a
  • sideBar.foreground#dfc1af
  • sideBarSectionHeader.background#20120e
  • sideBarSectionHeader.foreground#faece1
  • sideBarTitle.foreground#faece1
  • statusBar.background#20120e
  • statusBar.border#734e3a
  • statusBar.debuggingBackground#503026
  • statusBar.debuggingForeground#faece1
  • statusBar.foreground#faece1
  • statusBar.noFolderBackground#20120e
  • statusBar.noFolderForeground#faece1
  • statusBarItem.hoverBackground#43271f
  • statusBarItem.remoteBackground#ffb681
  • statusBarItem.remoteForeground#281811
  • tab.activeBackground#281811
  • tab.activeBorderTop#ffb681
  • tab.activeForeground#faece1
  • tab.border#734e3a
  • tab.hoverBackground#43271f
  • tab.inactiveBackground#361f19
  • tab.inactiveForeground#c09f89
  • tab.unfocusedActiveForeground#dfc1af
  • tab.unfocusedInactiveForeground#c09f89
  • terminal.ansiBlack#c09f89
  • terminal.ansiBlue#edcc92
  • terminal.ansiBrightBlack#c7a894
  • terminal.ansiBrightBlue#fad99f
  • terminal.ansiBrightCyan#ffc38e
  • terminal.ansiBrightGreen#b6eac1
  • terminal.ansiBrightMagenta#e5c0fc
  • terminal.ansiBrightRed#ffacb7
  • terminal.ansiBrightWhite#eccebc
  • terminal.ansiBrightYellow#fcde9b
  • terminal.ansiCyan#ffb681
  • terminal.ansiGreen#a9ddb4
  • terminal.ansiMagenta#d8b3ef
  • terminal.ansiRed#ff9faa
  • terminal.ansiWhite#dfc1af
  • terminal.ansiYellow#efd18e
  • terminal.background#281811
  • terminal.border#734e3a
  • terminal.findMatchBackground#503026
  • terminal.findMatchBorder#95dcd8
  • terminal.findMatchHighlightBackground#43271f
  • terminal.findMatchHighlightBorder#ffb681
  • terminal.foreground#faece1
  • terminal.selectionBackground#503026
  • terminalCursor.background#281811
  • terminalCursor.foreground#ffb681
  • testing.iconFailed#ff9faa
  • testing.iconPassed#a9ddb4
  • testing.iconQueued#c09f89
  • testing.iconSkipped#c09f89
  • testing.iconUnset#c09f89
  • testing.runAction#a9ddb4
  • textBlockQuote.background#43271f
  • textBlockQuote.border#ffb681
  • textCodeBlock.background#43271f
  • textLink.activeForeground#ffb681
  • textLink.foreground#ffb681
  • textPreformat.foreground#95dcd8
  • titleBar.activeBackground#20120e
  • titleBar.activeForeground#faece1
  • titleBar.border#734e3a
  • titleBar.inactiveBackground#20120e
  • titleBar.inactiveForeground#c09f89
  • toolbar.hoverBackground#43271f
  • widget.border#734e3a
  • widget.shadow#28181199

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#c09f89italic
keyword, storage.type, storage.modifier#ffb681
string, markup.inline.raw, markup.fenced_code#95dcd8
entity.name.function, support.function, variable.function, meta.function-call#edcc92
entity.name.type, entity.name.class, support.type, support.class, entity.name.namespace#d8b3ef
constant.numeric#b8d4a4
constant.language, variable.other.constant, constant.other#b8d4a4
keyword.operator#f5adb7
variable, variable.other.readwrite#faece1
variable.parameter#dfc1af
variable.other.property, support.variable.property, support.type.property-name#edcc92
punctuation, meta.brace#dfc1af
entity.name.tag#ffb681
entity.other.attribute-name#95dcd8
string.regexp#d8b3ef
constant.character.escape#f5adb7
markup.heading, entity.name.section#ffb681bold
markup.italicitalic
markup.boldbold
invalid#ff9faaunderline
markup.inserted#a9ddb4
markup.deleted#ff9faa