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#E8E2C6
  • activityBar.border#DDD4B2
  • activityBar.foreground#1F2428
  • activityBar.inactiveForeground#6E6F62
  • activityBarBadge.background#5C3A1F
  • activityBarBadge.foreground#FFFFFF
  • badge.background#5C3A1F
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#1F2428
  • breadcrumb.background#FCF6E6
  • breadcrumb.foreground#6E6F62
  • breadcrumbPicker.background#F4EED8
  • button.background#3A4148
  • button.foreground#FFFFFF
  • button.hoverBackground#2E3640
  • button.secondaryBackground#DDD4B2
  • button.secondaryForeground#1F2428
  • diffEditor.insertedTextBackground#3D4A2E20
  • diffEditor.removedTextBackground#7A2E1F20
  • dropdown.background#F4EED8
  • dropdown.border#DDD4B2
  • dropdown.foreground#1F2428
  • editor.background#FCF6E6
  • editor.findMatchBackground#5C3A1F70
  • editor.findMatchHighlightBackground#5C3A1F30
  • editor.foreground#1F2428
  • editor.inactiveSelectionBackground#C8C0A040
  • editor.lineHighlightBackground#F4EFDA
  • editor.selectionBackground#C8C0A075
  • editor.selectionHighlightBackground#C8C0A075
  • editor.wordHighlightBackground#C8C0A040
  • editor.wordHighlightStrongBackground#C8C0A075
  • editorBracketMatch.background#C8C0A075
  • editorBracketMatch.border#6E6F62
  • editorCursor.foreground#1F2428
  • editorError.foreground#7A2E1F
  • editorGroup.border#DDD4B2
  • editorGroupHeader.tabsBackground#F0EAD0
  • editorGroupHeader.tabsBorder#DDD4B2
  • editorGutter.background#FCF6E6
  • editorHint.foreground#3A2E1F
  • editorIndentGuide.activeBackground1#A8A593
  • editorIndentGuide.background1#EBE4C8
  • editorInfo.foreground#1F3A40
  • editorLineNumber.activeForeground#3A4148
  • editorLineNumber.foreground#A8A593
  • editorOverviewRuler.border#DDD4B2
  • editorStickyScroll.background#F0EAD0
  • editorStickyScrollHover.background#F4EFDA
  • editorWarning.foreground#8A5818
  • editorWhitespace.foreground#EBE4C8
  • extensionButton.prominentBackground#3A4148
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#2E3640
  • focusBorder#5C3A1F80
  • gitDecoration.addedResourceForeground#3D4A2E
  • gitDecoration.conflictingResourceForeground#8A5818
  • gitDecoration.deletedResourceForeground#7A2E1F
  • gitDecoration.ignoredResourceForeground#A8A593
  • gitDecoration.modifiedResourceForeground#5C3A1F
  • gitDecoration.untrackedResourceForeground#3A2E1F
  • input.background#F4EED8
  • input.border#DDD4B2
  • input.foreground#1F2428
  • input.placeholderForeground#A8A593
  • inputValidation.errorBorder#7A2E1F
  • inputValidation.warningBorder#8A5818
  • list.activeSelectionBackground#E8E2C6
  • list.activeSelectionForeground#1F2428
  • list.focusBackground#E8E2C6
  • list.focusForeground#1F2428
  • list.highlightForeground#5C3A1F
  • list.hoverBackground#F4EFDA
  • list.inactiveSelectionBackground#F0EAD0
  • list.inactiveSelectionForeground#3A4148
  • menu.background#F4EED8
  • menu.border#DDD4B2
  • menu.foreground#1F2428
  • menu.selectionBackground#E8E2C6
  • menu.selectionForeground#1F2428
  • menu.separatorBackground#DDD4B2
  • menubar.selectionBackground#C8C0A040
  • menubar.selectionForeground#1F2428
  • notificationLink.foreground#5C3A1F
  • notifications.background#F0EAD0
  • notifications.border#DDD4B2
  • notifications.foreground#1F2428
  • panel.background#F0EAD0
  • panel.border#DDD4B2
  • panelTitle.activeBorder#5C3A1F
  • panelTitle.activeForeground#1F2428
  • panelTitle.inactiveForeground#6E6F62
  • peekView.border#5C3A1F
  • peekViewEditor.background#F4EED8
  • peekViewEditorGutter.background#F4EED8
  • peekViewResult.background#F0EAD0
  • peekViewResult.fileForeground#1F2428
  • peekViewResult.lineForeground#3A4148
  • peekViewResult.selectionBackground#E8E2C6
  • peekViewResult.selectionForeground#1F2428
  • peekViewTitle.background#E8E2C6
  • peekViewTitleDescription.foreground#6E6F62
  • peekViewTitleLabel.foreground#1F2428
  • quickInput.background#FCF6E6
  • quickInput.foreground#1F2428
  • quickInputList.focusBackground#E8E2C6
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#3A414880
  • scrollbarSlider.background#A8A59360
  • scrollbarSlider.hoverBackground#6E6F6270
  • sideBar.background#F0EAD0
  • sideBar.border#DDD4B2
  • sideBar.foreground#3A4148
  • sideBarSectionHeader.background#E8E2C6
  • sideBarSectionHeader.border#DDD4B2
  • sideBarSectionHeader.foreground#3A4148
  • sideBarTitle.foreground#1F2428
  • statusBar.background#2E3640
  • statusBar.border#2E3640
  • statusBar.foreground#F4EED8
  • statusBar.noFolderBackground#2E3640
  • statusBarItem.hoverBackground#FFFFFF15
  • statusBarItem.remoteBackground#2E3640
  • statusBarItem.remoteForeground#F4EED8
  • symbolIcon.classForeground#3A2E1F
  • symbolIcon.constantForeground#5C3A1F
  • symbolIcon.functionForeground#1F3A40
  • symbolIcon.keywordForeground#1F2428
  • symbolIcon.numberForeground#5C3A1F
  • symbolIcon.propertyForeground#1F2428
  • symbolIcon.stringForeground#3D4A2E
  • symbolIcon.variableForeground#1F2428
  • tab.activeBackground#FCF6E6
  • tab.activeBorderTop#5C3A1F
  • tab.activeForeground#1F2428
  • tab.border#DDD4B2
  • tab.inactiveBackground#F0EAD0
  • tab.inactiveForeground#6E6F62
  • tab.unfocusedActiveBackground#FCF6E6
  • tab.unfocusedActiveForeground#3A4148
  • terminal.ansiBlack#1F2428
  • terminal.ansiBlue#1F3A40
  • terminal.ansiBrightBlack#6E6F62
  • terminal.ansiBrightBlue#1F3A40
  • terminal.ansiBrightCyan#1F3A40
  • terminal.ansiBrightGreen#3A2E1F
  • terminal.ansiBrightMagenta#5C3A1F
  • terminal.ansiBrightRed#7A2E1F
  • terminal.ansiBrightWhite#1F2428
  • terminal.ansiBrightYellow#5C3A1F
  • terminal.ansiCyan#1F3A40
  • terminal.ansiGreen#3D4A2E
  • terminal.ansiMagenta#5C3A1F
  • terminal.ansiRed#7A2E1F
  • terminal.ansiWhite#6E6F62
  • terminal.ansiYellow#5C3A1F
  • terminal.background#FCF6E6
  • terminal.foreground#1F2428
  • terminalCursor.foreground#1F2428
  • titleBar.activeBackground#E8E2C6
  • titleBar.activeForeground#1F2428
  • titleBar.border#DDD4B2
  • titleBar.inactiveBackground#F0EAD0
  • titleBar.inactiveForeground#6E6F62
  • tree.indentGuidesStroke#EBE4C8
  • widget.shadow#00000025

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#847F6Citalic
keyword, keyword.control, keyword.operator.new, keyword.operator.delete, keyword.operator.typeof, keyword.operator.void, storage.modifier#5C3A1Fbold
storage.type#5C3A1F
string, string.quoted, string.template#384E26
constant.character.escape, string.regexp#4A6032
punctuation.definition.template-expression, punctuation.section.embedded#4A6032
constant.numeric, constant.language.numeric#7A5418
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#7A5418italic
constant.other#7A5418
entity.name.function, meta.function-call entity.name.function, support.function, meta.require#3C5A5E
meta.decorator, punctuation.decorator, entity.name.function.decorator#3C5A5Eitalic
entity.name.type, entity.name.class, support.class, entity.other.inherited-class#285058
entity.name.type.interface#285058italic
meta.type.annotation, support.type, entity.name.type.alias#6A4A16
variable, variable.other, variable.other.readwrite#13161A
variable.parameter#4A4030italic
variable.other.property, support.variable.property, meta.object-literal.key#1E222A
variable.language.self, variable.language.this, variable.language.super#5C3A1Fitalic
entity.name.module, entity.name.namespace, variable.other.module#6A4A16
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment#5E5C50
punctuation, meta.brace, punctuation.separator, punctuation.terminator#8A8676
entity.name.tag, meta.tag#285058
entity.other.attribute-name, meta.tag.attributes#6A4A16
support.type.property-name.css, entity.name.tag.css, support.constant.property-value.css#3C5A5E
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#285058
constant.numeric.css, keyword.other.unit.css#7A5418
markup.heading, entity.name.section.markdown#5C3A1Fbold
markup.bold#13161Abold
markup.italic#3A4148italic
markup.underline.link, string.other.link#285058
markup.inline.raw, markup.fenced_code.block#6A4A16
markup.quote#847F6Citalic
variable.parameter.function.language.python#5C3A1Fitalic
support.function.builtin.python#3C5A5E
support.type.property-name.json#3C5A5E
entity.name.tag.yaml#3C5A5E
invalid, invalid.illegal#7A2E1Funderline
invalid.deprecated#8A5818strikethrough