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#FFAB40
  • activityBar.background#F0F0EB
  • activityBar.foreground#2E2E2E
  • activityBarBadge.background#FFAB40
  • activityBarBadge.foreground#FAFAF5
  • badge.background#4DB6AC
  • badge.foreground#FAFAF5
  • button.background#FFAB40
  • button.foreground#2E2E2E
  • button.hoverBackground#FFAB4080
  • dropdown.background#FFFFFF
  • dropdown.border#D0D0D0
  • dropdown.foreground#2E2E2E
  • editor.background#FAFAF5
  • editor.findMatchBackground#FFAB4040
  • editor.findMatchHighlightBackground#FFAB4020
  • editor.foreground#2E2E2E
  • editor.lineHighlightBackground#FFAB4020
  • editor.lineHighlightBorder#FFAB4040
  • editor.selectionBackground#4DB6AC80
  • editor.selectionHighlightBackground#4DB6AC40
  • editorBracketMatch.background#4DB6AC30
  • editorBracketMatch.border#4DB6AC
  • editorCursor.foreground#4DB6AC
  • editorGroupHeader.tabsBackground#F0F0EB
  • editorIndentGuide.activeBackground#CCCCCC88
  • editorIndentGuide.background#CCCCCC44
  • editorLineNumber.activeForeground#4DB6AC
  • editorLineNumber.foreground#B0B0B0
  • editorWhitespace.foreground#B0B0B0
  • focusBorder#FFAB40
  • gitDecoration.conflictingResourceForeground#FFAB40
  • gitDecoration.deletedResourceForeground#D32F2F
  • gitDecoration.modifiedResourceForeground#4DB6AC
  • gitDecoration.untrackedResourceForeground#43A047
  • input.background#FFFFFF
  • input.border#D0D0D0
  • input.foreground#2E2E2E
  • input.placeholderForeground#B0B0B0
  • inputOption.activeBorder#FFAB40
  • list.activeSelectionBackground#FFAB4020
  • list.activeSelectionForeground#2E2E2E
  • list.focusBackground#FFAB4015
  • list.highlightForeground#4DB6AC
  • list.hoverBackground#FFAB4010
  • minimap.background#FAFAF5
  • minimapSlider.activeBackground#4DB6AC60
  • minimapSlider.background#4DB6AC20
  • minimapSlider.hoverBackground#4DB6AC40
  • panel.background#FAFAF5
  • panel.border#D0D0D0
  • panelTitle.activeBorder#FFAB40
  • panelTitle.activeForeground#2E2E2E
  • panelTitle.inactiveForeground#4DB6AC
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#CCCCCCCC
  • scrollbarSlider.background#CCCCCC44
  • scrollbarSlider.hoverBackground#CCCCCC88
  • sideBar.background#F5F5F0
  • sideBar.foreground#2E2E2E
  • sideBarSectionHeader.background#F0F0EB
  • sideBarSectionHeader.foreground#4DB6AC
  • sideBarTitle.foreground#4DB6AC
  • statusBar.background#FFAB40
  • statusBar.debuggingBackground#4DB6AC
  • statusBar.foreground#2E2E2E
  • statusBar.noFolderBackground#F0F0EB
  • statusBarItem.hoverBackground#FFAB4080
  • tab.activeBackground#FAFAF5
  • tab.activeBorder#FFAB40
  • tab.activeForeground#2E2E2E
  • tab.border#D0D0D0
  • tab.inactiveBackground#F0F0EB
  • tab.inactiveForeground#4DB6AC
  • terminal.ansiBlue#0288D1
  • terminal.ansiBrightBlue#4A90E2
  • terminal.ansiBrightCyan#26C6DA
  • terminal.ansiBrightGreen#7ED321
  • terminal.ansiBrightMagenta#FF9500
  • terminal.ansiBrightRed#FF3B30
  • terminal.ansiBrightYellow#FFCC00
  • terminal.ansiCyan#0097A7
  • terminal.ansiGreen#43A047
  • terminal.ansiMagenta#FFAB40
  • terminal.ansiRed#D32F2F
  • terminal.ansiYellow#FFAB40
  • terminal.background#FAFAF5
  • terminal.foreground#2E2E2E
  • titleBar.activeBackground#F0F0EB
  • titleBar.activeForeground#2E2E2E
  • titleBar.inactiveBackground#FAFAF5
  • titleBar.inactiveForeground#4DB6AC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#0288D1
keyword, storage.type, storage.modifier#4DB6ACbold
keyword.operator, punctuation.accessor#4DB6AC
variable, variable.other#2E2E2E
variable.parameter#FFAB40italic
entity.name.function, support.function#0288D1
meta.function-call#0288D1
entity.name.class, entity.name.type.class, support.class#FFAB40bold
entity.name.type, support.type#4DB6AC
entity.name.type.interface#4DB6ACitalic
constant.numeric#FFAB40
constant, constant.language, constant.character#FFAB40
constant.language.boolean#FFAB40bold
variable.other.property, support.variable.property#4DB6AC
meta.object-literal.key#4DB6AC
entity.name.tag, punctuation.definition.tag#4DB6AC
entity.other.attribute-name#FFAB40italic
punctuation, meta.brace#2E2E2E
string.regexp#0288D1
constant.character.escape#FFAB40
meta.decorator, punctuation.decorator#FFAB40
invalid, invalid.illegal#D32F2Fstrikethrough
markup.heading, entity.name.section#4DB6ACbold
markup.bold#FFAB40bold
markup.italic#FFAB40italic
markup.underline.link#4DB6AC
markup.inline.raw, markup.fenced_code#0288D1
support.type.property-name.json#4DB6AC
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFAB40
support.type.property-name.css#4DB6AC
support.constant.property-value.css#0288D1