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.background#F1AF00
  • activityBar.foreground#1A1500
  • activityBar.inactiveForeground#5C4E00
  • activityBarBadge.background#FF0000
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF0000
  • badge.foreground#FFFFFF
  • button.background#1C98D1
  • button.foreground#FFFFFF
  • button.hoverBackground#3AABDB
  • descriptionForeground#7A7A7A
  • dropdown.background#FFFFFF
  • dropdown.border#D0D0D0
  • dropdown.foreground#1A1500
  • editor.background#FFFFFF
  • editor.findMatchBackground#F1AF0055
  • editor.findMatchHighlightBackground#F1AF0033
  • editor.foreground#1A1500
  • editor.inactiveSelectionBackground#1C98D118
  • editor.lineHighlightBackground#FFF3D0
  • editor.selectionBackground#1C98D133
  • editor.wordHighlightBackground#1C98D122
  • editor.wordHighlightStrongBackground#1C98D133
  • editorBracketMatch.background#1C98D122
  • editorBracketMatch.border#1C98D1
  • editorCursor.foreground#1C98D1
  • editorError.foreground#FF0000
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorGutter.background#FFFFFF
  • editorHint.foreground#7A7A7A
  • editorIndentGuide.activeBackground#1C98D155
  • editorIndentGuide.background#E0E0E0
  • editorInfo.foreground#1C98D1
  • editorLineNumber.activeForeground#B07E00
  • editorLineNumber.foreground#9A9A9A
  • editorWarning.foreground#B07E00
  • editorWhitespace.foreground#D0D0D0
  • focusBorder#1C98D1
  • foreground#1A1500
  • gitDecoration.deletedResourceForeground#FF0000
  • gitDecoration.ignoredResourceForeground#9A9A9A
  • gitDecoration.modifiedResourceForeground#B07E00
  • gitDecoration.untrackedResourceForeground#1C98D1
  • input.background#FFFFFF
  • input.border#D0D0D0
  • input.foreground#1A1500
  • input.placeholderForeground#9A9A9A
  • list.activeSelectionBackground#1C98D133
  • list.activeSelectionForeground#1A1500
  • list.highlightForeground#B07E00
  • list.hoverBackground#1C98D118
  • list.inactiveSelectionBackground#EBEBEB
  • panel.background#FFFFFF
  • panel.border#E0E0E0
  • scrollbarSlider.activeBackground#1C98D177
  • scrollbarSlider.background#1C98D133
  • scrollbarSlider.hoverBackground#1C98D155
  • sideBar.background#F5F5F5
  • sideBar.foreground#1A1500
  • sideBarSectionHeader.background#EBEBEB
  • sideBarSectionHeader.foreground#1A1500
  • sideBarTitle.foreground#B07E00
  • statusBar.background#F1AF00
  • statusBar.debuggingBackground#FF0000
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#1A1500
  • statusBar.noFolderBackground#F1AF00
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#B07E00
  • tab.border#E0E0E0
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#1C98D1
  • terminal.ansiCyan#1C98D1
  • terminal.ansiGreen#1C98D1
  • terminal.ansiMagenta#C45A3A
  • terminal.ansiRed#FF0000
  • terminal.ansiYellow#B07E00
  • terminal.background#FFFFFF
  • terminal.foreground#1A1500
  • textLink.activeForeground#B07E00
  • textLink.foreground#1C98D1
  • titleBar.activeBackground#1A1500
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#2A2400
  • titleBar.inactiveForeground#C0C0C0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7A7Aitalic
keyword, storage.type, storage.modifier, keyword.control#B07E00bold
string, constant.other.symbol#9A6E00
constant.numeric, constant.language#8A6200
constant.language.boolean#C45A3A
entity.name.function, support.function, meta.function-call#1C98D1
entity.name.type, entity.name.class, support.type, support.class#C45A3Abold
variable, variable.other, variable.parameter#1A1500
variable.other.property, support.variable.property#2A2400
entity.name.tag#FF0000
entity.other.attribute-name#B07E00
keyword.operator#7A7A7A
punctuation, meta.brace#7A7A7A
entity.name.namespace, support.type.namespace#C45A3Abold
meta.decorator, entity.name.function.decorator#B07E00italic
keyword.control.import, keyword.control.export, keyword.control.from#1C98D1
string.regexp#C45A3A
constant.character.escape#1C98D1
invalid, invalid.illegal#FF0000bold
markup.heading, entity.name.section.markdown#B07E00bold
markup.bold#9A6E00bold
markup.italic#1C98D1italic
markup.underline.link#1C98D1
markup.inline.raw, markup.fenced_code.block#8A6200
support.type.property-name.json#B07E00
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#B07E00
support.type.property-name.css#1C98D1
support.constant.property-value.css#8A6200