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 underline
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—