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—