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#F6EFE6
  • activityBar.activeBorder#B8946B
  • activityBar.background#E9E1D3
  • activityBar.foreground#7A6B32
  • activityBar.inactiveForeground#9F917B
  • activityBarBadge.background#A44E2E
  • activityBarBadge.foreground#F6EFE6
  • badge.background#A44E2E
  • badge.foreground#F6EFE6
  • breadcrumb.activeSelectionForeground#2F2E2B
  • breadcrumb.background#F6EFE6
  • breadcrumb.focusForeground#A44E2E
  • breadcrumb.foreground#7A6B32
  • button.background#7A6B32
  • button.foreground#F6EFE6
  • button.hoverBackground#A44E2E
  • button.secondaryBackground#E9E1D3
  • button.secondaryForeground#2F2E2B
  • button.secondaryHoverBackground#D9C8AE
  • debugIcon.disconnectForeground#A44E2E
  • debugIcon.pauseForeground#B8946B
  • debugIcon.restartForeground#7A6B32
  • debugIcon.startForeground#8A946F
  • debugIcon.stepIntoForeground#7A6B32
  • debugIcon.stepOutForeground#7A6B32
  • debugIcon.stepOverForeground#7A6B32
  • debugIcon.stopForeground#A44E2E
  • debugToolBar.background#F6EFE6
  • debugToolBar.border#D9C8AE
  • descriptionForeground#7A6B32
  • diffEditor.border#D9C8AE
  • diffEditor.insertedLineBackground#8A946F1C
  • diffEditor.insertedTextBackground#8A946F30
  • diffEditor.removedLineBackground#A44E2E18
  • diffEditor.removedTextBackground#A44E2E25
  • dropdown.background#F6EFE6
  • dropdown.border#D9C8AE
  • dropdown.foreground#2F2E2B
  • editor.background#F6EFE6
  • editor.findMatchBackground#B8946B70
  • editor.findMatchHighlightBackground#D9C8AE70
  • editor.findRangeHighlightBackground#B8946B22
  • editor.foreground#2F2E2B
  • editor.hoverHighlightBackground#D9C8AE4D
  • editor.lineHighlightBackground#E9E1D380
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#D9C8AE40
  • editor.selectionBackground#D9C8AE80
  • editor.selectionHighlightBackground#B8946B30
  • editor.wordHighlightBackground#8A946F26
  • editor.wordHighlightStrongBackground#7A6B3230
  • editorBracketHighlight.foreground1#A44E2E
  • editorBracketHighlight.foreground2#7A6B32
  • editorBracketHighlight.foreground3#8A946F
  • editorBracketHighlight.foreground4#B8946B
  • editorBracketHighlight.foreground5#7A6B32
  • editorBracketHighlight.foreground6#A44E2E
  • editorBracketHighlight.unexpectedBracket.foreground#A44E2E
  • editorCursor.foreground#A44E2E
  • editorError.foreground#A44E2E
  • editorGroup.border#D9C8AE
  • editorGroup.dropBackground#B8946B22
  • editorGroupHeader.tabsBackground#E9E1D3
  • editorGroupHeader.tabsBorder#D9C8AE
  • editorGutter.addedBackground#8A946F
  • editorGutter.deletedBackground#A44E2E
  • editorGutter.modifiedBackground#B8946B
  • editorHint.foreground#8A946F
  • editorHoverWidget.background#F6EFE6
  • editorHoverWidget.border#D9C8AE
  • editorHoverWidget.foreground#2F2E2B
  • editorIndentGuide.activeBackground1#B8946B
  • editorIndentGuide.background1#D9C8AE
  • editorInfo.foreground#7A6B32
  • editorInlayHint.background#E9E1D3
  • editorInlayHint.foreground#7A6B32
  • editorLineNumber.activeForeground#7A6B32
  • editorLineNumber.foreground#BBAA91
  • editorOverviewRuler.addedForeground#8A946FAA
  • editorOverviewRuler.border#F6EFE6
  • editorOverviewRuler.deletedForeground#A44E2EAA
  • editorOverviewRuler.errorForeground#A44E2E
  • editorOverviewRuler.infoForeground#7A6B32
  • editorOverviewRuler.modifiedForeground#B8946BAA
  • editorOverviewRuler.warningForeground#B8946B
  • editorSuggestWidget.background#F6EFE6
  • editorSuggestWidget.border#D9C8AE
  • editorSuggestWidget.focusHighlightForeground#7A6B32
  • editorSuggestWidget.foreground#2F2E2B
  • editorSuggestWidget.highlightForeground#A44E2E
  • editorSuggestWidget.selectedBackground#E9E1D3
  • editorWarning.foreground#B8946B
  • editorWhitespace.foreground#D9C8AEAA
  • editorWidget.background#F6EFE6
  • editorWidget.border#D9C8AE
  • editorWidget.foreground#2F2E2B
  • errorForeground#A44E2E
  • focusBorder#B8946B
  • foreground#2F2E2B
  • gitDecoration.addedResourceForeground#8A946F
  • gitDecoration.conflictingResourceForeground#A44E2E
  • gitDecoration.deletedResourceForeground#A44E2E
  • gitDecoration.ignoredResourceForeground#9F917B
  • gitDecoration.modifiedResourceForeground#B8946B
  • gitDecoration.submoduleResourceForeground#7A6B32
  • gitDecoration.untrackedResourceForeground#8A946F
  • input.background#F6EFE6
  • input.border#D9C8AE
  • input.foreground#2F2E2B
  • input.placeholderForeground#9F917B
  • inputOption.activeBorder#B8946B
  • inputValidation.errorBorder#A44E2E
  • inputValidation.infoBorder#7A6B32
  • inputValidation.warningBorder#B8946B
  • list.activeSelectionBackground#D9C8AE
  • list.activeSelectionForeground#2F2E2B
  • list.dropBackground#B8946B22
  • list.errorForeground#A44E2E
  • list.focusBackground#E9E1D3
  • list.focusForeground#2F2E2B
  • list.highlightForeground#A44E2E
  • list.hoverBackground#E9E1D3
  • list.hoverForeground#2F2E2B
  • list.inactiveSelectionBackground#E9E1D3
  • list.warningForeground#B8946B
  • menu.background#F6EFE6
  • menu.foreground#2F2E2B
  • menu.selectionBackground#E9E1D3
  • menu.selectionForeground#2F2E2B
  • menu.separatorBackground#D9C8AE
  • menubar.selectionBackground#D9C8AE
  • menubar.selectionForeground#2F2E2B
  • notificationCenterHeader.background#E9E1D3
  • notificationCenterHeader.foreground#2F2E2B
  • notifications.background#F6EFE6
  • notifications.border#D9C8AE
  • notifications.foreground#2F2E2B
  • panel.background#F6EFE6
  • panel.border#D9C8AE
  • panelTitle.activeBorder#B8946B
  • panelTitle.activeForeground#2F2E2B
  • panelTitle.inactiveForeground#7A6B32
  • pickerGroup.border#D9C8AE
  • pickerGroup.foreground#A44E2E
  • progressBar.background#B8946B
  • quickInput.background#F6EFE6
  • quickInput.foreground#2F2E2B
  • quickInputList.focusBackground#E9E1D3
  • quickInputList.focusForeground#2F2E2B
  • scrollbarSlider.activeBackground#7A6B3280
  • scrollbarSlider.background#D9C8AE80
  • scrollbarSlider.hoverBackground#B8946B80
  • selection.background#B8946B40
  • settings.dropdownBackground#F6EFE6
  • settings.dropdownBorder#D9C8AE
  • settings.dropdownForeground#2F2E2B
  • settings.headerForeground#A44E2E
  • settings.modifiedItemIndicator#B8946B
  • settings.textInputBackground#F6EFE6
  • settings.textInputBorder#D9C8AE
  • settings.textInputForeground#2F2E2B
  • sideBar.background#F6EFE6
  • sideBar.border#D9C8AE
  • sideBar.foreground#3C3933
  • sideBarSectionHeader.background#E9E1D3
  • sideBarSectionHeader.border#D9C8AE
  • sideBarSectionHeader.foreground#7A6B32
  • sideBarTitle.foreground#2F2E2B
  • statusBar.background#E9E1D3
  • statusBar.border#D9C8AE
  • statusBar.debuggingBackground#A44E2E
  • statusBar.debuggingForeground#F6EFE6
  • statusBar.foreground#2F2E2B
  • statusBar.noFolderBackground#D9C8AE
  • statusBar.noFolderForeground#2F2E2B
  • statusBarItem.errorBackground#A44E2E
  • statusBarItem.errorForeground#F6EFE6
  • statusBarItem.hoverBackground#D9C8AE
  • statusBarItem.remoteBackground#7A6B32
  • statusBarItem.remoteForeground#F6EFE6
  • statusBarItem.warningBackground#B8946B
  • statusBarItem.warningForeground#2F2E2B
  • tab.activeBackground#F6EFE6
  • tab.activeBorderTop#B8946B
  • tab.activeForeground#2F2E2B
  • tab.border#E9E1D3
  • tab.hoverBackground#F6EFE6
  • tab.hoverForeground#A44E2E
  • tab.inactiveBackground#E9E1D3
  • tab.inactiveForeground#7A6B32
  • tab.unfocusedActiveForeground#3C3933
  • tab.unfocusedInactiveForeground#9F917B
  • terminal.ansiBlack#2F2E2B
  • terminal.ansiBlue#7A6B32
  • terminal.ansiBrightBlack#7A6B32
  • terminal.ansiBrightBlue#7A6B32
  • terminal.ansiBrightCyan#8A946F
  • terminal.ansiBrightGreen#8A946F
  • terminal.ansiBrightMagenta#A44E2E
  • terminal.ansiBrightRed#A44E2E
  • terminal.ansiBrightWhite#F6EFE6
  • terminal.ansiBrightYellow#B8946B
  • terminal.ansiCyan#8A946F
  • terminal.ansiGreen#8A946F
  • terminal.ansiMagenta#A44E2E
  • terminal.ansiRed#A44E2E
  • terminal.ansiWhite#E9E1D3
  • terminal.ansiYellow#B8946B
  • terminal.background#F6EFE6
  • terminal.foreground#2F2E2B
  • terminalCursor.foreground#A44E2E
  • titleBar.activeBackground#E9E1D3
  • titleBar.activeForeground#2F2E2B
  • titleBar.inactiveBackground#E9E1D3
  • titleBar.inactiveForeground#7A6B32

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A6B32italic
string, string.quoted, string.template#8A946F—
constant.numeric, constant.language, constant.character, constant.other#B8946B—
keyword, storage, storage.type, storage.modifier#A44E2E—
keyword.operator, punctuation, meta.brace, meta.delimiter#7A6B32—
entity.name.function, support.function, meta.function-call, variable.function#7A6B32—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#8A946F—
variable, variable.parameter, meta.definition.variable#2F2E2B—
variable.other.property, support.variable.property, meta.property-name#B8946B—
entity.name.function.decorator, meta.decorator, storage.type.annotation, entity.other.attribute-name#A44E2E—
entity.name.tag, support.class.component#A44E2E—
entity.other.attribute-name.html, entity.other.attribute-name.xml#B8946B—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css#8A946F—
support.type.property-name.css, support.type.vendored.property-name.css#7A6B32—
string.regexp, constant.character.escape#A44E2E—
markup.heading, entity.name.section.markdown#A44E2Ebold
markup.underline.link, string.other.link#7A6B32—
markup.italic#B8946Bitalic
markup.bold#2F2E2Bbold
support.type.property-name.json, support.type.property-name.json.comments#B8946B—
invalid, invalid.illegal#F6EFE6—