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.activeBorder#C97800
  • activityBar.background#3B3A34
  • activityBar.foreground#C97800
  • activityBarBadge.background#C97800
  • activityBarBadge.foreground#FAF4E9
  • badge.background#C97800
  • badge.foreground#2C2720
  • button.background#8B5A00
  • button.foreground#FAF4E9
  • button.hoverBackground#C97800
  • dropdown.background#F2ECE2
  • dropdown.border#C5C0B5
  • dropdown.foreground#3B3A34
  • editor.background#FAF4E9
  • editor.findMatchBackground#C9780030
  • editor.findMatchHighlightBackground#C9780020
  • editor.foreground#3B3A34
  • editor.lineHighlightBackground#C9780020
  • editor.lineHighlightBorder#C9780040
  • editor.selectionBackground#8B5A0050
  • editor.selectionHighlightBackground#8B5A0020
  • editorBracketMatch.background#C9780020
  • editorBracketMatch.border#C97800
  • editorCursor.foreground#D14900
  • editorGroupHeader.tabsBackground#FAF4E9
  • editorIndentGuide.activeBackground#CCCCCC80
  • editorIndentGuide.background#CCCCCC40
  • editorLineNumber.activeForeground#C97800
  • editorLineNumber.foreground#7A7A7A
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#C97800
  • gitDecoration.conflictingResourceForeground#FF6F61
  • gitDecoration.deletedResourceForeground#D14900
  • gitDecoration.modifiedResourceForeground#C97800
  • gitDecoration.untrackedResourceForeground#8B5A00
  • input.background#F2ECE2
  • input.border#C5C0B5
  • input.foreground#3B3A34
  • input.placeholderForeground#7A7A7A
  • inputOption.activeBorder#C97800
  • list.activeSelectionBackground#C9780080
  • list.activeSelectionForeground#FAF4E9
  • list.focusBackground#C9780060
  • list.highlightForeground#D14900
  • list.hoverBackground#C9780040
  • minimap.background#FAF4E9
  • minimapSlider.activeBackground#C9780066
  • minimapSlider.background#C9780022
  • minimapSlider.hoverBackground#C9780044
  • panel.background#FAF4E9
  • panel.border#C97800
  • panelTitle.activeBorder#C97800
  • panelTitle.activeForeground#3B3A34
  • panelTitle.inactiveForeground#7A7A7A
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#C9780088
  • scrollbarSlider.background#7A7A7A44
  • scrollbarSlider.hoverBackground#7A7A7A88
  • sideBar.background#F2ECE2
  • sideBar.foreground#3B3A34
  • sideBarSectionHeader.background#E8E2D7
  • sideBarSectionHeader.foreground#C97800
  • sideBarTitle.foreground#C97800
  • statusBar.background#3B3A34
  • statusBar.debuggingBackground#8B5A00
  • statusBar.foreground#FAF4E9
  • statusBar.noFolderBackground#3B3A34
  • statusBarItem.hoverBackground#8B5A00AA
  • tab.activeBackground#FAF4E9
  • tab.activeBorder#C97800
  • tab.activeForeground#3B3A34
  • tab.border#C5C0B5
  • tab.inactiveBackground#EFE9DF
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#5A94D9
  • terminal.ansiBrightBlue#84B9FF
  • terminal.ansiBrightCyan#73E7E8
  • terminal.ansiBrightGreen#A8E05F
  • terminal.ansiBrightMagenta#E0A5FF
  • terminal.ansiBrightRed#FF8A55
  • terminal.ansiBrightYellow#FFBF57
  • terminal.ansiCyan#48C5C8
  • terminal.ansiGreen#8BC34A
  • terminal.ansiMagenta#B285D4
  • terminal.ansiRed#D14900
  • terminal.ansiYellow#C97800
  • terminal.background#2C2720
  • terminal.foreground#FAF4E9
  • titleBar.activeBackground#3B3A34
  • titleBar.activeForeground#FAF4E9
  • titleBar.inactiveBackground#4F4F4F
  • titleBar.inactiveForeground#C0C0C0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7A7Aitalic
string, string.quoted, string.template#D14900—
keyword, storage.type, storage.modifier#C97800bold
keyword.operator, punctuation.accessor#8B5A00—
variable, variable.other#3B3A34—
variable.parameter#8B5A00italic
entity.name.function, support.function#C97800—
meta.function-call#D14900—
entity.name.class, entity.name.type.class, support.class#C97800bold
entity.name.type, support.type#8B5A00—
entity.name.type.interface#C97800italic
constant.numeric#D14900—
constant, constant.language, constant.character#C97800—
constant.language.boolean#D14900bold
variable.other.property, support.variable.property#8B5A00—
meta.object-literal.key#C97800—
entity.name.tag, punctuation.definition.tag#D14900—
entity.other.attribute-name#8B5A00italic
punctuation, meta.brace#3B3A34—
string.regexp#D14900—
constant.character.escape#8B5A00—
meta.decorator, punctuation.decorator#C97800—
invalid, invalid.illegal#D14900strikethrough
markup.heading, entity.name.section#C97800bold
markup.bold#C97800bold
markup.italic#8B5A00italic
markup.underline.link#D14900—
markup.inline.raw, markup.fenced_code#D14900—
support.type.property-name.json#C97800—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D14900—
support.type.property-name.css#8B5A00—
support.constant.property-value.css#C97800—