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#F3EFE6
  • activityBar.activeBorder#0057B8
  • activityBar.background#FFFFF8
  • activityBar.border#1B1416
  • activityBar.foreground#D62828
  • activityBar.inactiveForeground#1B1416AA
  • activityBarBadge.background#FFC000
  • activityBarBadge.foreground#1B1416
  • badge.background#D62828
  • badge.foreground#FFFFF8
  • breadcrumb.activeSelectionForeground#1B1416
  • breadcrumb.background#FFFFF8
  • breadcrumb.focusForeground#D62828
  • breadcrumb.foreground#7A4F35
  • button.background#A51F2B
  • button.foreground#FFFFF8
  • button.hoverBackground#D62828
  • button.secondaryBackground#0057B8
  • button.secondaryForeground#FFFFF8
  • button.secondaryHoverBackground#4E7C7B
  • debugIcon.disconnectForeground#F88000
  • debugIcon.pauseForeground#FFC000
  • debugIcon.restartForeground#0057B8
  • debugIcon.startForeground#00843D
  • debugIcon.stepIntoForeground#0057B8
  • debugIcon.stepOutForeground#0057B8
  • debugIcon.stepOverForeground#0057B8
  • debugIcon.stopForeground#D62828
  • debugToolBar.background#FFFFF8
  • debugToolBar.border#D5DFE1
  • descriptionForeground#6F4A32
  • diffEditor.border#D5DFE1
  • diffEditor.insertedLineBackground#00843D18
  • diffEditor.insertedTextBackground#00843D2C
  • diffEditor.removedLineBackground#D6282814
  • diffEditor.removedTextBackground#D6282824
  • dropdown.background#FFFFF8
  • dropdown.border#D5DFE1
  • dropdown.foreground#1B1416
  • editor.background#FFFFF8
  • editor.findMatchBackground#FFC00080
  • editor.findMatchHighlightBackground#F880004D
  • editor.findRangeHighlightBackground#D628281C
  • editor.foreground#171313
  • editor.hoverHighlightBackground#0057B81F
  • editor.lineHighlightBackground#F3EFE6
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#4E7C7B24
  • editor.selectionBackground#0057B833
  • editor.selectionHighlightBackground#FFC00033
  • editor.wordHighlightBackground#00843D24
  • editor.wordHighlightStrongBackground#D6282826
  • editorBracketHighlight.foreground1#D62828
  • editorBracketHighlight.foreground2#0057B8
  • editorBracketHighlight.foreground3#FFC000
  • editorBracketHighlight.foreground4#00843D
  • editorBracketHighlight.foreground5#F88000
  • editorBracketHighlight.foreground6#4E7C7B
  • editorBracketHighlight.unexpectedBracket.foreground#D62828
  • editorCursor.foreground#D62828
  • editorError.foreground#D62828
  • editorGroup.border#1B1416
  • editorGroup.dropBackground#4E7C7B22
  • editorGroupHeader.tabsBackground#F3EFE6
  • editorGroupHeader.tabsBorder#1B1416
  • editorGutter.addedBackground#00843D
  • editorGutter.deletedBackground#D62828
  • editorGutter.modifiedBackground#0057B8
  • editorHint.foreground#00843D
  • editorHoverWidget.background#FFFFF8
  • editorHoverWidget.border#D5DFE1
  • editorHoverWidget.foreground#1B1416
  • editorIndentGuide.activeBackground1#0057B8
  • editorIndentGuide.background1#D5DFE1
  • editorInfo.foreground#0057B8
  • editorInlayHint.background#F3EFE6
  • editorInlayHint.foreground#6F4A32
  • editorLineNumber.activeForeground#D62828
  • editorLineNumber.foreground#8A6A4A
  • editorOverviewRuler.addedForeground#00843DAA
  • editorOverviewRuler.border#FFFFF8
  • editorOverviewRuler.deletedForeground#D62828AA
  • editorOverviewRuler.errorForeground#D62828
  • editorOverviewRuler.infoForeground#0057B8
  • editorOverviewRuler.modifiedForeground#0057B8AA
  • editorOverviewRuler.warningForeground#F88000
  • editorSuggestWidget.background#FFFFF8
  • editorSuggestWidget.border#D5DFE1
  • editorSuggestWidget.focusHighlightForeground#0057B8
  • editorSuggestWidget.foreground#1B1416
  • editorSuggestWidget.highlightForeground#D62828
  • editorSuggestWidget.selectedBackground#0057B826
  • editorWarning.foreground#F88000
  • editorWhitespace.foreground#D5DFE1AA
  • editorWidget.background#FFFFF8
  • editorWidget.border#D5DFE1
  • editorWidget.foreground#1B1416
  • errorForeground#D62828
  • focusBorder#0057B8
  • foreground#171313
  • gitDecoration.addedResourceForeground#00843D
  • gitDecoration.conflictingResourceForeground#F88000
  • gitDecoration.deletedResourceForeground#D62828
  • gitDecoration.ignoredResourceForeground#8A6A4A
  • gitDecoration.modifiedResourceForeground#0057B8
  • gitDecoration.submoduleResourceForeground#9D6B56
  • gitDecoration.untrackedResourceForeground#00843D
  • input.background#FFFFF8
  • input.border#D5DFE1
  • input.foreground#1B1416
  • input.placeholderForeground#8A6A4A
  • inputOption.activeBorder#A51F2B
  • inputValidation.errorBorder#A51F2B
  • inputValidation.infoBorder#4E7C7B
  • inputValidation.warningBorder#A89063
  • list.activeSelectionBackground#0057B826
  • list.activeSelectionForeground#1B1416
  • list.dropBackground#00843D22
  • list.errorForeground#A51F2B
  • list.focusBackground#FFC00026
  • list.focusForeground#1B1416
  • list.highlightForeground#D62828
  • list.hoverBackground#F3EFE6
  • list.hoverForeground#1B1416
  • list.inactiveSelectionBackground#F3EFE6
  • list.warningForeground#A89063
  • menu.background#FFFFF8
  • menu.foreground#1B1416
  • menu.selectionBackground#0057B826
  • menu.selectionForeground#1B1416
  • menu.separatorBackground#D5DFE1
  • menubar.selectionBackground#FFC00026
  • menubar.selectionForeground#1B1416
  • notificationCenterHeader.background#F3EFE6
  • notificationCenterHeader.foreground#1B1416
  • notifications.background#FFFFF8
  • notifications.border#D5DFE1
  • notifications.foreground#1B1416
  • panel.background#FFFFF8
  • panel.border#1B1416
  • panelTitle.activeBorder#D62828
  • panelTitle.activeForeground#1B1416
  • panelTitle.inactiveForeground#6F4A32
  • pickerGroup.border#D5DFE1
  • pickerGroup.foreground#D62828
  • progressBar.background#0057B8
  • quickInput.background#FFFFF8
  • quickInput.foreground#1B1416
  • quickInputList.focusBackground#F3EFE6
  • quickInputList.focusForeground#1B1416
  • scrollbarSlider.activeBackground#A51F2B80
  • scrollbarSlider.background#D5DFE180
  • scrollbarSlider.hoverBackground#4E7C7B80
  • selection.background#0057B840
  • settings.dropdownBackground#FFFFF8
  • settings.dropdownBorder#D5DFE1
  • settings.dropdownForeground#1B1416
  • settings.headerForeground#D62828
  • settings.modifiedItemIndicator#0057B8
  • settings.textInputBackground#FFFFF8
  • settings.textInputBorder#D5DFE1
  • settings.textInputForeground#1B1416
  • sideBar.background#FFFFF8
  • sideBar.border#1B1416
  • sideBar.foreground#1B1416
  • sideBarSectionHeader.background#F3EFE6
  • sideBarSectionHeader.border#FFC000
  • sideBarSectionHeader.foreground#0057B8
  • sideBarTitle.foreground#A51F2B
  • statusBar.background#4E7C7B
  • statusBar.border#1B1416
  • statusBar.debuggingBackground#D62828
  • statusBar.debuggingForeground#FFFFF8
  • statusBar.foreground#FFFFF8
  • statusBar.noFolderBackground#00843D
  • statusBar.noFolderForeground#FFFFF8
  • statusBarItem.errorBackground#A51F2B
  • statusBarItem.errorForeground#FFFFF8
  • statusBarItem.hoverBackground#0057B8
  • statusBarItem.remoteBackground#D62828
  • statusBarItem.remoteForeground#FFFFF8
  • statusBarItem.warningBackground#FFC000
  • statusBarItem.warningForeground#1B1416
  • tab.activeBackground#FFFFF8
  • tab.activeBorderTop#D62828
  • tab.activeForeground#1B1416
  • tab.activeModifiedBorder#0057B8
  • tab.border#F3EFE6
  • tab.hoverBackground#FFFFF8
  • tab.hoverForeground#0057B8
  • tab.inactiveBackground#F3EFE6
  • tab.inactiveForeground#6F4A32
  • tab.unfocusedActiveForeground#1B1416
  • tab.unfocusedInactiveForeground#8A6A4A
  • terminal.ansiBlack#1B1416
  • terminal.ansiBlue#0057B8
  • terminal.ansiBrightBlack#404040
  • terminal.ansiBrightBlue#0030A0
  • terminal.ansiBrightCyan#4E7C7B
  • terminal.ansiBrightGreen#00A84B
  • terminal.ansiBrightMagenta#F88000
  • terminal.ansiBrightRed#F00810
  • terminal.ansiBrightWhite#FFFFF8
  • terminal.ansiBrightYellow#FFD010
  • terminal.ansiCyan#4E7C7B
  • terminal.ansiGreen#00843D
  • terminal.ansiMagenta#9D6B56
  • terminal.ansiRed#D62828
  • terminal.ansiWhite#F3EFE6
  • terminal.ansiYellow#FFC000
  • terminal.background#FFFFF8
  • terminal.foreground#1B1416
  • terminalCursor.foreground#D62828
  • titleBar.activeBackground#F3EFE6
  • titleBar.activeForeground#1B1416
  • titleBar.inactiveBackground#F3EFE6
  • titleBar.inactiveForeground#7A4F35

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6F4A32italic
string, string.quoted, string.template#00843D
constant.numeric, constant.language, constant.character, constant.other#F88000
keyword, storage, storage.type, storage.modifier#D62828
keyword.operator, punctuation, meta.brace, meta.delimiter#1B1416
entity.name.function, support.function, meta.function-call, variable.function#0057B8
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#00843D
variable, variable.parameter, meta.definition.variable#1B1416
variable.other.property, support.variable.property, meta.property-name#9D6B56
entity.name.function.decorator, meta.decorator, storage.type.annotation, entity.other.attribute-name#A89063
entity.name.tag, support.class.component#D62828
entity.other.attribute-name.html, entity.other.attribute-name.xml#F88000
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css#00843D
support.type.property-name.css, support.type.vendored.property-name.css#0057B8
string.regexp, constant.character.escape#F88000
markup.heading, entity.name.section.markdown#D62828bold
markup.underline.link, string.other.link#0057B8
markup.italic#9D6B56italic
markup.bold#1B1416bold
support.type.property-name.json, support.type.property-name.json.comments#9D6B56
invalid, invalid.illegal#FFFFF8