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#24201C
  • activityBar.activeBorder#AD7450
  • activityBar.background#1A1714
  • activityBar.border#4B3A2E
  • activityBar.foreground#C89469
  • activityBar.inactiveForeground#8A786A
  • activityBarBadge.background#AD7450
  • activityBarBadge.foreground#F3EEE6
  • badge.background#AD7450
  • badge.foreground#F3EEE6
  • breadcrumb.activeSelectionForeground#F3EEE6
  • breadcrumb.background#1A1714
  • breadcrumb.focusForeground#C89469
  • breadcrumb.foreground#D7B38C
  • button.background#AD7450
  • button.foreground#F3EEE6
  • button.hoverBackground#C89469
  • button.secondaryBackground#24201C
  • button.secondaryForeground#F3EEE6
  • button.secondaryHoverBackground#4B3A2E
  • debugIcon.disconnectForeground#AD7450
  • debugIcon.pauseForeground#C89469
  • debugIcon.restartForeground#D7B38C
  • debugIcon.startForeground#8A786A
  • debugIcon.stepIntoForeground#D7B38C
  • debugIcon.stepOutForeground#D7B38C
  • debugIcon.stepOverForeground#D7B38C
  • debugIcon.stopForeground#AD7450
  • debugToolBar.background#24201C
  • debugToolBar.border#4B3A2E
  • descriptionForeground#D7B38C
  • diffEditor.border#4B3A2E
  • diffEditor.insertedLineBackground#8A786A14
  • diffEditor.insertedTextBackground#8A786A24
  • diffEditor.removedLineBackground#AD745016
  • diffEditor.removedTextBackground#AD745026
  • dropdown.background#24201C
  • dropdown.border#4B3A2E
  • dropdown.foreground#F3EEE6
  • editor.background#1A1714
  • editor.findMatchBackground#C8946966
  • editor.findMatchHighlightBackground#AD745044
  • editor.findRangeHighlightBackground#AD745020
  • editor.foreground#F3EEE6
  • editor.hoverHighlightBackground#8A786A22
  • editor.lineHighlightBackground#24201C
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#D7B38C18
  • editor.selectionBackground#AD74504A
  • editor.selectionHighlightBackground#D7B38C24
  • editor.wordHighlightBackground#8A786A26
  • editor.wordHighlightStrongBackground#C8946930
  • editorBracketHighlight.foreground1#C89469
  • editorBracketHighlight.foreground2#D7B38C
  • editorBracketHighlight.foreground3#AD7450
  • editorBracketHighlight.foreground4#8A786A
  • editorBracketHighlight.foreground5#DCE7EE
  • editorBracketHighlight.foreground6#F3EEE6
  • editorBracketHighlight.unexpectedBracket.foreground#C89469
  • editorCursor.foreground#AD7450
  • editorError.foreground#C89469
  • editorGroup.border#4B3A2E
  • editorGroup.dropBackground#C8946922
  • editorGroupHeader.tabsBackground#13110F
  • editorGroupHeader.tabsBorder#4B3A2E
  • editorGutter.addedBackground#8A786A
  • editorGutter.deletedBackground#AD7450
  • editorGutter.modifiedBackground#C89469
  • editorHint.foreground#8A786A
  • editorHoverWidget.background#24201C
  • editorHoverWidget.border#4B3A2E
  • editorHoverWidget.foreground#F3EEE6
  • editorIndentGuide.activeBackground1#C89469
  • editorIndentGuide.background1#4B3A2E
  • editorInfo.foreground#DCE7EE
  • editorInlayHint.background#24201C
  • editorInlayHint.foreground#D7B38C
  • editorLineNumber.activeForeground#C89469
  • editorLineNumber.foreground#7A5843
  • editorOverviewRuler.addedForeground#8A786AAA
  • editorOverviewRuler.border#1A1714
  • editorOverviewRuler.deletedForeground#AD7450AA
  • editorOverviewRuler.errorForeground#C89469
  • editorOverviewRuler.infoForeground#DCE7EE
  • editorOverviewRuler.modifiedForeground#C89469AA
  • editorOverviewRuler.warningForeground#AD7450
  • editorSuggestWidget.background#24201C
  • editorSuggestWidget.border#4B3A2E
  • editorSuggestWidget.focusHighlightForeground#D7B38C
  • editorSuggestWidget.foreground#F3EEE6
  • editorSuggestWidget.highlightForeground#C89469
  • editorSuggestWidget.selectedBackground#4B3A2E
  • editorWarning.foreground#AD7450
  • editorWhitespace.foreground#4B3A2E99
  • editorWidget.background#24201C
  • editorWidget.border#4B3A2E
  • editorWidget.foreground#F3EEE6
  • errorForeground#C89469
  • focusBorder#AD7450CC
  • foreground#F3EEE6
  • gitDecoration.addedResourceForeground#8A786A
  • gitDecoration.conflictingResourceForeground#AD7450
  • gitDecoration.deletedResourceForeground#AD7450
  • gitDecoration.ignoredResourceForeground#7A5843
  • gitDecoration.modifiedResourceForeground#C89469
  • gitDecoration.submoduleResourceForeground#D7B38C
  • gitDecoration.untrackedResourceForeground#D7B38C
  • input.background#24201C
  • input.border#4B3A2E
  • input.foreground#F3EEE6
  • input.placeholderForeground#8A786A
  • inputOption.activeBorder#C89469
  • inputValidation.errorBorder#C89469
  • inputValidation.infoBorder#DCE7EE
  • inputValidation.warningBorder#AD7450
  • list.activeSelectionBackground#4B3A2E
  • list.activeSelectionForeground#F3EEE6
  • list.dropBackground#C8946922
  • list.errorForeground#C89469
  • list.focusBackground#33281F
  • list.focusForeground#F3EEE6
  • list.highlightForeground#C89469
  • list.hoverBackground#24201C
  • list.hoverForeground#F3EEE6
  • list.inactiveSelectionBackground#24201C
  • list.warningForeground#AD7450
  • menu.background#24201C
  • menu.foreground#F3EEE6
  • menu.selectionBackground#4B3A2E
  • menu.selectionForeground#F3EEE6
  • menu.separatorBackground#4B3A2E
  • menubar.selectionBackground#24201C
  • menubar.selectionForeground#F3EEE6
  • notificationCenterHeader.background#1A1714
  • notificationCenterHeader.foreground#F3EEE6
  • notifications.background#24201C
  • notifications.border#4B3A2E
  • notifications.foreground#F3EEE6
  • panel.background#1A1714
  • panel.border#4B3A2E
  • panelTitle.activeBorder#C89469
  • panelTitle.activeForeground#F3EEE6
  • panelTitle.inactiveForeground#D7B38C
  • pickerGroup.border#4B3A2E
  • pickerGroup.foreground#C89469
  • progressBar.background#C89469
  • quickInput.background#24201C
  • quickInput.foreground#F3EEE6
  • quickInputList.focusBackground#4B3A2E
  • quickInputList.focusForeground#F3EEE6
  • scrollbarSlider.activeBackground#AD7450AA
  • scrollbarSlider.background#4B3A2E66
  • scrollbarSlider.hoverBackground#7A584388
  • selection.background#C8946940
  • settings.dropdownBackground#24201C
  • settings.dropdownBorder#4B3A2E
  • settings.dropdownForeground#F3EEE6
  • settings.headerForeground#C89469
  • settings.modifiedItemIndicator#AD7450
  • settings.textInputBackground#24201C
  • settings.textInputBorder#4B3A2E
  • settings.textInputForeground#F3EEE6
  • sideBar.background#1A1714
  • sideBar.border#4B3A2E
  • sideBar.foreground#F3EEE6
  • sideBarSectionHeader.background#24201C
  • sideBarSectionHeader.border#4B3A2E
  • sideBarSectionHeader.foreground#C89469
  • sideBarTitle.foreground#F3EEE6
  • statusBar.background#4B3A2E
  • statusBar.border#AD7450
  • statusBar.debuggingBackground#AD7450
  • statusBar.debuggingForeground#F3EEE6
  • statusBar.foreground#F3EEE6
  • statusBar.noFolderBackground#2D241F
  • statusBar.noFolderForeground#F3EEE6
  • statusBarItem.errorBackground#AD7450
  • statusBarItem.errorForeground#F3EEE6
  • statusBarItem.hoverBackground#7A5843
  • statusBarItem.remoteBackground#AD7450
  • statusBarItem.remoteForeground#F3EEE6
  • statusBarItem.warningBackground#C89469
  • statusBarItem.warningForeground#1A1714
  • tab.activeBackground#1A1714
  • tab.activeBorderTop#C89469
  • tab.activeForeground#F3EEE6
  • tab.activeModifiedBorder#AD7450
  • tab.border#13110F
  • tab.hoverBackground#24201C
  • tab.hoverForeground#F3EEE6
  • tab.inactiveBackground#13110F
  • tab.inactiveForeground#D7B38C
  • tab.unfocusedActiveForeground#F3EEE6
  • tab.unfocusedInactiveForeground#8A786A
  • terminal.ansiBlack#1A1714
  • terminal.ansiBlue#DCE7EE
  • terminal.ansiBrightBlack#2D241F
  • terminal.ansiBrightBlue#DCE7EE
  • terminal.ansiBrightCyan#D7B38C
  • terminal.ansiBrightGreen#8A786A
  • terminal.ansiBrightMagenta#AD7450
  • terminal.ansiBrightRed#C89469
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#D7B38C
  • terminal.ansiCyan#D7B38C
  • terminal.ansiGreen#8A786A
  • terminal.ansiMagenta#7A5843
  • terminal.ansiRed#C89469
  • terminal.ansiWhite#F3EEE6
  • terminal.ansiYellow#AD7450
  • terminal.background#1A1714
  • terminal.foreground#F3EEE6
  • terminalCursor.foreground#C89469
  • titleBar.activeBackground#13110F
  • titleBar.activeForeground#F3EEE6
  • titleBar.inactiveBackground#13110F
  • titleBar.inactiveForeground#8A786A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A786Aitalic
string, string.quoted, string.template#D7B38C—
constant.numeric, constant.language, constant.character, constant.other#AD7450—
keyword, storage, storage.type, storage.modifier#C89469—
keyword.operator, punctuation, meta.brace, meta.delimiter#D7B38C—
entity.name.function, support.function, meta.function-call, variable.function#F3EEE6—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#DCE7EE—
variable, variable.parameter, meta.definition.variable#F3EEE6—
variable.other.property, support.variable.property, meta.property-name#D7B38C—
entity.name.function.decorator, meta.decorator, storage.type.annotation, entity.other.attribute-name#AD7450—
entity.name.tag, support.class.component#C89469—
entity.other.attribute-name.html, entity.other.attribute-name.xml#AD7450—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css#DCE7EE—
support.type.property-name.css, support.type.vendored.property-name.css#D7B38C—
string.regexp, constant.character.escape#AD7450—
markup.heading, entity.name.section.markdown#C89469bold
markup.underline.link, string.other.link#DCE7EE—
markup.italic#D7B38Citalic
markup.bold#F3EEE6bold
support.type.property-name.json, support.type.property-name.json.comments#D7B38C—
invalid, invalid.illegal#F3EEE6—