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