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#FFC933
  • activityBar.background#FFF4D9
  • activityBar.foreground#28323C
  • activityBarBadge.background#FFC933
  • activityBarBadge.foreground#FFF9E6
  • badge.background#FFC933
  • badge.foreground#FFF9E6
  • button.background#FFC933
  • button.foreground#FFF9E6
  • button.hoverBackground#FFDE78
  • dropdown.background#FFFFFF
  • dropdown.border#E0CFA0
  • dropdown.foreground#28323C
  • editor.background#FFF9E6
  • editor.findMatchBackground#FFC93340
  • editor.findMatchHighlightBackground#FFC93320
  • editor.foreground#28323C
  • editor.lineHighlightBackground#FFC93333
  • editor.lineHighlightBorder#FFC93366
  • editor.selectionBackground#4B6CB740
  • editor.selectionHighlightBackground#4B6CB720
  • editorBracketMatch.background#FFC93330
  • editorBracketMatch.border#FFC933
  • editorCursor.foreground#28323C
  • editorGroupHeader.tabsBackground#FFF9E6
  • editorIndentGuide.activeBackground#9E9E9E
  • editorIndentGuide.background#C3B089
  • editorLineNumber.activeForeground#28323C
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#C3B089
  • focusBorder#FFC933
  • gitDecoration.conflictingResourceForeground#FF8C00
  • gitDecoration.deletedResourceForeground#D9534F
  • gitDecoration.modifiedResourceForeground#FFC933
  • gitDecoration.untrackedResourceForeground#A3D977
  • input.background#FFFFFF
  • input.border#E0CFA0
  • input.foreground#28323C
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#FFC933
  • list.activeSelectionBackground#FFC933
  • list.activeSelectionForeground#FFF9E6
  • list.focusBackground#FFC93340
  • list.highlightForeground#FFC933
  • list.hoverBackground#FFC93330
  • minimap.background#FFF9E6
  • minimapSlider.activeBackground#FFC93366
  • minimapSlider.background#FFC93322
  • minimapSlider.hoverBackground#FFC93344
  • panel.background#FFF9E6
  • panel.border#E0CFA0
  • panelTitle.activeBorder#FFC933
  • panelTitle.activeForeground#28323C
  • panelTitle.inactiveForeground#9E9EE
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FFC960
  • scrollbarSlider.background#9E9E9E60
  • scrollbarSlider.hoverBackground#9E9E9E80
  • sideBar.background#FFFAED
  • sideBar.foreground#28323C
  • sideBarSectionHeader.background#FFECC2
  • sideBarSectionHeader.foreground#28323C
  • sideBarTitle.foreground#28323C
  • statusBar.background#FFC933
  • statusBar.debuggingBackground#4B6CB7
  • statusBar.foreground#FFF9E6
  • statusBar.noFolderBackground#FFEDC2
  • statusBarItem.hoverBackground#FFDE78
  • tab.activeBackground#FFF9E6
  • tab.activeBorder#FFC933
  • tab.activeForeground#28323C
  • tab.border#E0CFA0
  • tab.inactiveBackground#FFEFCC
  • tab.inactiveForeground#9E9E9E
  • terminal.ansiBlue#4B6CB7
  • terminal.ansiBrightBlue#6C8DD9
  • terminal.ansiBrightCyan#9AD9E5
  • terminal.ansiBrightGreen#B4E68A
  • terminal.ansiBrightMagenta#E78BB0
  • terminal.ansiBrightRed#FF7F7F
  • terminal.ansiBrightYellow#FFDA70
  • terminal.ansiCyan#7FC7D9
  • terminal.ansiGreen#A3D977
  • terminal.ansiMagenta#D96B9F
  • terminal.ansiRed#D9534F
  • terminal.ansiYellow#FFC933
  • terminal.background#FFF9E6
  • terminal.foreground#28323C
  • titleBar.activeBackground#FFF9E6
  • titleBar.activeForeground#28323C
  • titleBar.inactiveBackground#FFEFCC
  • titleBar.inactiveForeground#6B7C88

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#A3D977
keyword, storage.type, storage.modifier#FFC933bold
keyword.operator, punctuation.accessor#4B6CB7
variable, variable.other#28323C
variable.parameter#FFC933italic
entity.name.function, support.function#FFC933
meta.function-call#4B6CB7
entity.name.class, entity.name.type.class, support.class#D96B9Fbold
entity.name.type, support.type#4B6CB7
entity.name.type.interface#4B6CB7italic
constant.numeric#D96B9F
constant, constant.language, constant.character#D96B9F
constant.language.boolean#D96B9Fbold
variable.other.property, support.variable.property#28323C
meta.object-literal.key#4B6CB7
entity.name.tag, punctuation.definition.tag#FFC933
entity.other.attribute-name#4B6CB7italic
punctuation, meta.brace#28323C
string.regexp#FFC933
constant.character.escape#4B6CB7
meta.decorator, punctuation.decorator#FFC933
invalid, invalid.illegal#FF0000strikethrough
markup.heading, entity.name.section#FFC933bold
markup.bold#FFC933bold
markup.italic#4B6CB7italic
markup.underline.link#4B6CB7
markup.inline.raw, markup.fenced_code#A3D977
support.type.property-name.json#4B6CB7
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFC933
support.type.property-name.css#4B6CB7
support.constant.property-value.css#A3D977