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#F0E2C6
  • activityBar.activeBorder#B85A20
  • activityBar.background#F7ECD4
  • activityBar.border#E0CCA6
  • activityBar.foreground#B85A20
  • activityBar.inactiveForeground#A89668
  • activityBarBadge.background#8A2520
  • activityBarBadge.foreground#FDFAEC
  • breadcrumb.activeSelectionForeground#B85A20
  • breadcrumb.background#FDFAEC
  • breadcrumb.focusForeground#8A2520
  • breadcrumb.foreground#8A7A4A
  • button.background#8A2520
  • button.foreground#FDFAEC
  • button.hoverBackground#A03020
  • button.secondaryBackground#ECDAB6
  • button.secondaryForeground#3A2410
  • button.secondaryHoverBackground#E0CCA6
  • dropdown.background#F9F0D8
  • dropdown.border#A89668
  • dropdown.foreground#3A2410
  • editor.background#FDFAEC
  • editor.findMatchBackground#8A652055
  • editor.findMatchHighlightBackground#8A652022
  • editor.foreground#3A2410
  • editor.inactiveSelectionBackground#B85A2022
  • editor.lineHighlightBackground#F5E7C6
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#B85A2044
  • editor.wordHighlightBackground#B85A201A
  • editor.wordHighlightStrongBackground#8A252026
  • editorBracketHighlight.foreground1#B85A20
  • editorBracketHighlight.foreground2#8A6520
  • editorBracketHighlight.foreground3#5A6B2E
  • editorBracketHighlight.foreground4#3A5560
  • editorBracketHighlight.foreground5#7A3A50
  • editorBracketHighlight.foreground6#8A2520
  • editorBracketHighlight.unexpectedBracket.foreground#A03020
  • editorBracketMatch.background#B85A2022
  • editorBracketMatch.border#B85A20
  • editorCursor.foreground#B85A20
  • editorError.foreground#8A2520
  • editorGroupHeader.tabsBackground#F0E2C6
  • editorGroupHeader.tabsBorder#E0CCA6
  • editorGutter.addedBackground#5A6B2E
  • editorGutter.background#FDFAEC
  • editorGutter.deletedBackground#8A2520
  • editorGutter.modifiedBackground#8A6520
  • editorHint.foreground#5A6B2E
  • editorHoverWidget.background#F9F0D8
  • editorHoverWidget.border#A89668
  • editorIndentGuide.activeBackground1#B85A20
  • editorIndentGuide.background1#ECDAB6
  • editorInfo.foreground#3A5560
  • editorLineNumber.activeForeground#B85A20
  • editorLineNumber.foreground#A89668
  • editorSuggestWidget.background#F9F0D8
  • editorSuggestWidget.border#A89668
  • editorSuggestWidget.foreground#3A2410
  • editorSuggestWidget.highlightForeground#B85A20
  • editorSuggestWidget.selectedBackground#F1D6BA
  • editorSuggestWidget.selectedForeground#8A2520
  • editorWarning.foreground#B85A20
  • editorWhitespace.foreground#ECDAB6
  • editorWidget.background#F9F0D8
  • editorWidget.border#A89668
  • editorWidget.foreground#3A2410
  • errorForeground#8A2520
  • focusBorder#B85A2088
  • foreground#3A2410
  • gitDecoration.addedResourceForeground#5A6B2E
  • gitDecoration.conflictingResourceForeground#A03020
  • gitDecoration.deletedResourceForeground#8A2520
  • gitDecoration.ignoredResourceForeground#E0CCA6
  • gitDecoration.modifiedResourceForeground#8A6520
  • gitDecoration.untrackedResourceForeground#6E7E3A
  • input.background#F9F0D8
  • input.border#A89668
  • input.foreground#3A2410
  • input.placeholderForeground#8A7A4A
  • inputOption.activeBorder#B85A20
  • inputValidation.errorBackground#F0D0C8
  • inputValidation.errorBorder#8A2520
  • list.activeSelectionBackground#F1D6BA
  • list.activeSelectionForeground#8A2520
  • list.errorForeground#8A2520
  • list.focusBackground#F1D6BA
  • list.focusOutline#B85A20
  • list.highlightForeground#8A2520
  • list.hoverBackground#F7ECD4
  • list.hoverForeground#B85A20
  • list.inactiveSelectionBackground#F0E2C6
  • list.inactiveSelectionForeground#3A2410
  • list.warningForeground#8A6520
  • menu.background#F9F0D8
  • menu.border#A89668
  • menu.foreground#3A2410
  • menu.selectionBackground#F1D6BA
  • menu.selectionBorder#A89668
  • menu.selectionForeground#8A2520
  • menu.separatorBackground#E0CCA6
  • menubar.selectionBackground#F1D6BA
  • menubar.selectionBorder#A89668
  • menubar.selectionForeground#8A2520
  • minimap.background#F7ECD4
  • minimap.errorHighlight#8A2520AA
  • minimap.findMatchHighlight#B85A2088
  • minimap.selectionHighlight#B85A2044
  • minimap.warningHighlight#8A6520AA
  • minimapSlider.activeBackground#B85A20AA
  • minimapSlider.background#A8966855
  • minimapSlider.hoverBackground#8A7A4AAA
  • notificationCenterHeader.background#F3E7CC
  • notifications.background#F9F0D8
  • notifications.border#A89668
  • notifications.foreground#3A2410
  • panel.background#F7ECD4
  • panel.border#E0CCA6
  • panelTitle.activeBorder#B85A20
  • panelTitle.activeForeground#B85A20
  • panelTitle.inactiveForeground#8A7A4A
  • peekView.border#B85A20
  • peekViewEditor.background#F9F0D8
  • peekViewEditor.matchHighlightBackground#B85A2044
  • peekViewResult.background#F7ECD4
  • peekViewResult.matchHighlightBackground#B85A2044
  • peekViewResult.selectionBackground#F1D6BA
  • peekViewResult.selectionForeground#8A2520
  • peekViewTitle.background#F3E7CC
  • pickerGroup.border#E0CCA6
  • pickerGroup.foreground#B85A20
  • quickInput.background#F9F0D8
  • quickInput.foreground#3A2410
  • quickInputList.focusBackground#F1D6BA
  • quickInputList.focusForeground#8A2520
  • quickInputList.focusIconForeground#8A2520
  • quickInputTitle.background#F3E7CC
  • scrollbar.shadow#3A241088
  • scrollbarSlider.activeBackground#B85A20AA
  • scrollbarSlider.background#A8966855
  • scrollbarSlider.hoverBackground#8A7A4AAA
  • selection.background#B85A2044
  • sideBar.background#F7ECD4
  • sideBar.border#E0CCA6
  • sideBar.foreground#5A4A30
  • sideBarSectionHeader.background#F3E7CC
  • sideBarSectionHeader.border#E0CCA6
  • sideBarSectionHeader.foreground#8A6520
  • sideBarTitle.foreground#B85A20
  • statusBar.background#8A2520
  • statusBar.border#6E1D18
  • statusBar.debuggingBackground#A03020
  • statusBar.debuggingForeground#FDFAEC
  • statusBar.foreground#FDFAEC
  • statusBar.noFolderBackground#8A2520
  • statusBarItem.hoverBackground#A03020
  • statusBarItem.prominentBackground#6E1D18
  • statusBarItem.prominentForeground#FDFAEC
  • statusBarItem.remoteBackground#6E1D18
  • statusBarItem.remoteForeground#FDFAEC
  • tab.activeBackground#FDFAEC
  • tab.activeBorder#B85A20
  • tab.activeBorderTop#B85A20
  • tab.activeForeground#B85A20
  • tab.border#E0CCA6
  • tab.inactiveBackground#F0E2C6
  • tab.inactiveForeground#8A7A4A
  • tab.unfocusedActiveBorder#A89668
  • terminal.ansiBlack#3A2410
  • terminal.ansiBlue#3A5560
  • terminal.ansiBrightBlack#8A7A4A
  • terminal.ansiBrightBlue#4A6E80
  • terminal.ansiBrightCyan#5E8458
  • terminal.ansiBrightGreen#6E7E3A
  • terminal.ansiBrightMagenta#9A4A60
  • terminal.ansiBrightRed#A03020
  • terminal.ansiBrightWhite#3A2410
  • terminal.ansiBrightYellow#A8801C
  • terminal.ansiCyan#4A7048
  • terminal.ansiGreen#5A6B2E
  • terminal.ansiMagenta#7A3A50
  • terminal.ansiRed#8A2520
  • terminal.ansiWhite#5A4A30
  • terminal.ansiYellow#8A6520
  • terminal.background#FDFAEC
  • terminal.foreground#3A2410
  • titleBar.activeBackground#F7ECD4
  • titleBar.activeForeground#3A2410
  • titleBar.border#E0CCA6
  • titleBar.inactiveBackground#F7ECD4
  • titleBar.inactiveForeground#A89668
  • widget.shadow#3A241055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A7A4Aitalic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.operator.expression#8A2520
keyword.operator, punctuation.separator, punctuation.terminator, punctuation.accessor#5A4A30
string, constant.other.symbol, string.quoted, punctuation.definition.string#5A6B2E
string.regexp#6E7E3A
constant.numeric#7A3A50
constant.language, support.constant#7A3A50
entity.name.function, support.function, meta.function-call, meta.function-call entity.name.function#B85A20
entity.name.type, entity.name.class, support.class, support.type, entity.name.namespace#8A6520
variable, meta.definition.variable.name, support.variable, variable.other.readwrite#3A2410
variable.parameter, meta.parameter#3A5560italic
variable.other.property, support.variable.property, meta.property#3A5560
variable.language, this, super#A03020italic
entity.name.tag, punctuation.definition.tag#8A2520
entity.other.attribute-name#4A7048
invalid, invalid.illegal#A03020underline
markup.heading, entity.name.section#B85A20bold
markup.bold#8A6520bold
markup.italic#3A2410italic
markup.inline.raw, markup.fenced_code.block#5A6B2E
markup.inserted#6E7E3A
markup.deleted#8A2520
markup.changed#8A6520
markup.underline.link, string.other.link#3A5560underline