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.background#EDE0D4
  • activityBar.border#E0CFC4
  • activityBar.foreground#4A2F22
  • activityBar.inactiveForeground#9C6B5299
  • activityBarBadge.background#FEC5BB
  • activityBarBadge.foreground#3A1F14
  • badge.background#FEC5BB
  • badge.foreground#3A1F14
  • breadcrumb.activeSelectionForeground#4A2F22
  • breadcrumb.focusForeground#4A2F22
  • breadcrumb.foreground#9C6B52
  • breadcrumbPicker.background#F5E6DA
  • button.background#FEC5BB
  • button.foreground#3A1F14
  • button.hoverBackground#FFB5A8
  • button.secondaryBackground#EDE0D4
  • button.secondaryForeground#4A2F22
  • descriptionForeground#9C6B52
  • diffEditor.insertedTextBackground#D8E2DC44
  • diffEditor.removedTextBackground#FEC5BB44
  • dropdown.background#F5E6DA
  • dropdown.border#E0CFC4
  • dropdown.foreground#4A2F22
  • editor.background#F8EDEB
  • editor.findMatchBackground#FEC5BB88
  • editor.findMatchHighlightBackground#FEC5BB44
  • editor.foreground#4A2F22
  • editor.lineHighlightBackground#F2E4DA
  • editor.selectionBackground#FEC5BB55
  • editor.selectionHighlightBackground#FEC5BB2A
  • editor.wordHighlightBackground#FFE5D955
  • editor.wordHighlightStrongBackground#FFD7BA44
  • editorBracketMatch.background#FFE5D966
  • editorBracketMatch.border#FEC5BB
  • editorCursor.foreground#C0622F
  • editorGroupHeader.tabsBackground#F0DDD0
  • editorGutter.background#F8EDEB
  • editorIndentGuide.activeBackground1#FEC5BB
  • editorIndentGuide.background1#EDE0D4
  • editorLineNumber.activeForeground#8B4A33
  • editorLineNumber.foreground#C8B4A6
  • editorOverviewRuler.border#EDE0D4
  • editorWhitespace.foreground#DDD0C4
  • errorForeground#C0392B
  • focusBorder#FEC5BB
  • foreground#5C3D2E
  • gitDecoration.addedResourceForeground#7A9E7E
  • gitDecoration.deletedResourceForeground#A0392B
  • gitDecoration.ignoredResourceForeground#C8B4A6
  • gitDecoration.modifiedResourceForeground#C0622F
  • gitDecoration.untrackedResourceForeground#9C6B52
  • input.background#F5E6DA
  • input.border#E0CFC4
  • input.foreground#4A2F22
  • input.placeholderForeground#C8B4A6
  • inputOption.activeBackground#FEC5BB33
  • inputOption.activeBorder#FEC5BB
  • list.activeSelectionBackground#FEC5BB66
  • list.activeSelectionForeground#3A1F14
  • list.focusBackground#FEC5BB44
  • list.highlightForeground#C0622F
  • list.hoverBackground#FFE5D9
  • list.hoverForeground#4A2F22
  • list.inactiveSelectionBackground#FFE5D966
  • list.inactiveSelectionForeground#4A2F22
  • notificationCenterHeader.background#EDE0D4
  • notificationCenterHeader.foreground#4A2F22
  • notifications.background#F5E6DA
  • notifications.border#E0CFC4
  • notifications.foreground#4A2F22
  • panel.background#F8EDEB
  • panel.border#EDE0D4
  • panelTitle.activeBorder#FEC5BB
  • panelTitle.activeForeground#4A2F22
  • panelTitle.inactiveForeground#9C6B52
  • peekView.border#FEC5BB
  • peekViewEditor.background#F5E6DA
  • peekViewEditorGutter.background#F5E6DA
  • peekViewResult.background#EDE0D4
  • peekViewResult.matchHighlightBackground#FEC5BB55
  • peekViewResult.selectionBackground#FEC5BB44
  • peekViewTitle.background#F0DDD0
  • peekViewTitleDescription.foreground#7A4A35
  • peekViewTitleLabel.foreground#3A1F14
  • quickInput.background#F5E6DA
  • quickInput.foreground#4A2F22
  • quickInputHighlightForeground#C0622F
  • scrollbarSlider.activeBackground#FEC5BB88
  • scrollbarSlider.background#D4B8A844
  • scrollbarSlider.hoverBackground#D4B8A888
  • selection.background#FEC5BB77
  • sideBar.background#F5E6DA
  • sideBar.border#EDE0D4
  • sideBar.foreground#4A2F22
  • sideBarSectionHeader.background#EDE0D4
  • sideBarSectionHeader.border#E0CFC4
  • sideBarSectionHeader.foreground#5C3D2E
  • sideBarTitle.foreground#5C3D2E
  • statusBar.background#E8CDB8
  • statusBar.border#DFC0A8
  • statusBar.debuggingBackground#C0622F
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#3A1F14
  • statusBar.noFolderBackground#EDE0D4
  • statusBarItem.hoverBackground#DFC0A866
  • statusBarItem.remoteBackground#FEC5BB
  • statusBarItem.remoteForeground#3A1F14
  • tab.activeBackground#F8EDEB
  • tab.activeBorderTop#FEC5BB
  • tab.activeForeground#4A2F22
  • tab.border#EDE0D4
  • tab.hoverBackground#FFE5D9
  • tab.inactiveBackground#F0DDD0
  • tab.inactiveForeground#9C6B52
  • terminal.ansiBlack#4A2F22
  • terminal.ansiBlue#7B8FA1
  • terminal.ansiBrightBlue#A8BAC9
  • terminal.ansiBrightCyan#E8E8E4
  • terminal.ansiBrightGreen#A3C4A8
  • terminal.ansiBrightMagenta#FFD7C8
  • terminal.ansiBrightRed#E07B5A
  • terminal.ansiBrightWhite#F8EDEB
  • terminal.ansiBrightYellow#E8C49A
  • terminal.ansiCyan#D8E2DC
  • terminal.ansiGreen#7A9E7E
  • terminal.ansiMagenta#FEC5BB
  • terminal.ansiRed#C0622F
  • terminal.ansiWhite#EDE0D4
  • terminal.ansiYellow#D4A574
  • terminal.background#F8EDEB
  • terminal.foreground#4A2F22
  • terminalCursor.foreground#C0622F
  • titleBar.activeBackground#F0DDD0
  • titleBar.activeForeground#3A1F14
  • titleBar.border#E0CFC4
  • titleBar.inactiveBackground#EDE0D4
  • titleBar.inactiveForeground#9C6B52

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#B89080italic
keyword, storage.type, storage.modifier#C0622Fbold
keyword.control#A0522D
string, string.quoted#7A6E52
constant.character.escape, punctuation.definition.template-expression#C0622F
constant.numeric#9B6A3F
constant.language#9B6A3Fitalic
constant.other#A07850
entity.name.type, entity.name.class, support.class, support.type#8B7355
entity.name.function, meta.definition.method entity.name.function#A0522Dbold
meta.function-call entity.name.function, support.function#B8622F
variable.parameter#7A6050italic
variable, variable.other#4A2F22
variable.other.property, support.variable.property#6B4535
meta.object-literal.key#6B4535
entity.name.tag#C0622F
entity.other.attribute-name#9B6A3F
support.type.property-name.css#8B7355
support.constant.property-value.css#7A6050
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#A0522D
keyword.operator.module, meta.decorator, punctuation.decorator#B08060
keyword.operator#A07850
punctuation#8B7060
entity.name.namespace, entity.name.module#9B6A3F
markup.heading, entity.name.section.markdown#C0622Fbold
markup.bold#A0522Dbold
markup.italic#9B6A3Fitalic
markup.inline.raw, markup.fenced_code.block#7A6050
markup.underline.link#C0622F
support.type.property-name.json#A0522D
invalid, invalid.deprecated#A0392Bstrikethrough