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#1A1A1A
  • activityBar.border#000000
  • activityBar.foreground#F5E6D3
  • activityBar.inactiveForeground#A89984
  • activityBarBadge.background#FF6B3D
  • activityBarBadge.foreground#1A1A1A
  • button.background#FF6B3D
  • button.foreground#1A1A1A
  • button.hoverBackground#D98E7E
  • button.secondaryBackground#F5E6D3
  • button.secondaryForeground#1A1A1A
  • button.secondaryHoverBackground#E8D4C0
  • editor.background#1A1A1A
  • editor.foreground#F5E6D3
  • editor.lineHighlightBackground#2D2D2D80
  • editor.lineHighlightBorder#000000
  • editor.selectionBackground#FF6B3D40
  • editor.selectionHighlightBackground#FF6B3D30
  • editor.wordHighlightBackground#F5E6D320
  • editor.wordHighlightStrongBackground#F5E6D340
  • editorGroupHeader.tabsBackground#1A1A1A
  • editorHoverWidget.background#2D2D2D
  • editorHoverWidget.border#000000
  • editorWidget.background#2D2D2D
  • editorWidget.border#000000
  • foreground#F5E6D3
  • input.background#2D2D2D
  • input.border#000000
  • input.foreground#F5E6D3
  • input.placeholderForeground#A89984
  • inputValidation.infoBackground#F5E6D3
  • inputValidation.infoBorder#FF6B3D
  • list.activeSelectionBackground#FF6B3D40
  • list.activeSelectionForeground#F5E6D3
  • list.dropBackground#F5E6D320
  • list.highlightForeground#FF6B3D
  • list.hoverBackground#2D2D2D80
  • list.inactiveSelectionBackground#2D2D2D60
  • notifications.background#2D2D2D
  • notifications.border#000000
  • panel.border#000000
  • panelTitle.activeBorder#FF6B3D
  • panelTitle.activeForeground#F5E6D3
  • panelTitle.inactiveForeground#A89984
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#FF6B3D80
  • scrollbarSlider.background#F5E6D340
  • scrollbarSlider.hoverBackground#F5E6D360
  • sideBar.background#1A1A1A
  • sideBar.border#000000
  • sideBar.foreground#F5E6D3
  • sideBarSectionHeader.background#2D2D2D
  • sideBarSectionHeader.border#000000
  • sideBarSectionHeader.foreground#F5E6D3
  • sideBarTitle.foreground#F5E6D3
  • statusBar.background#FF6B3D
  • statusBar.border#000000
  • statusBar.debuggingBackground#D98E7E
  • statusBar.foreground#1A1A1A
  • statusBar.noFolderBackground#F5E6D3
  • tab.activeBackground#2D2D2D
  • tab.activeBorderTop#FF6B3D
  • tab.activeForeground#F5E6D3
  • tab.activeModifiedBorder#FF6B3D
  • tab.border#000000
  • tab.hoverBackground#2D2D2D
  • tab.hoverBorder#FF6B3D
  • tab.inactiveBackground#1A1A1A
  • tab.inactiveForeground#A89984
  • terminal.ansiBlack#1A1A1A
  • terminal.ansiBlue#A89984
  • terminal.ansiBrightBlack#5C5C5C
  • terminal.ansiBrightBlue#C5B8A8
  • terminal.ansiBrightCyan#E8D4C0
  • terminal.ansiBrightGreen#E8D4C0
  • terminal.ansiBrightMagenta#F5D4C8
  • terminal.ansiBrightRed#FF8F6B
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFFFF
  • terminal.ansiCyan#D4BEB2
  • terminal.ansiGreen#D4BEB2
  • terminal.ansiMagenta#E8B4A2
  • terminal.ansiRed#FF6B3D
  • terminal.ansiWhite#F5E6D3
  • terminal.ansiYellow#F5E6D3
  • terminal.background#1A1A1A
  • terminal.foreground#F5E6D3
  • titleBar.activeBackground#1A1A1A
  • titleBar.activeForeground#F5E6D3
  • titleBar.border#000000
  • titleBar.inactiveBackground#1A1A1A
  • titleBar.inactiveForeground#A89984
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#F5E6D3italic
variable, string constant.other.placeholder#FFFFFF
constant.other.color#FFFFFF
invalid, invalid.illegal#FF6B3D
keyword, storage.type, storage.modifier#FF6B3D
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#F5E6D3
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FF6B3D
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#FFFFFF
support.other.variable, string.other.link#FF6B3D
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#F5E6D3
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#FF6B3D
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FFFFFF
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#F5E6D3
support.type#F5E6D3
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF6B3D
variable.language#FF6B3Ditalic
entity.name.method.js#F5E6D3italic
meta.class-method.js entity.name.function.js, variable.function.constructor#F5E6D3
entity.other.attribute-name#FF6B3D
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFFFFFitalic
entity.other.attribute-name.class#FFFFFF
source.sass keyword.control#F5E6D3
markup.inserted#F5E6D3
markup.deleted#FF6B3D
markup.changed#FF6B3D
string.regexp#F5E6D3
*url*, *link*, *uri*underline