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#f8f9fa
  • activityBar.border#e9ecef
  • activityBar.foreground#869ec5
  • activityBar.inactiveForeground#9c9c9b
  • button.background#869ec5
  • button.foreground#faf9f6
  • button.hoverBackground#648fff
  • editor.background#faf9f6
  • editor.findMatchBackground#869ec54d
  • editor.findMatchHighlightBackground#869ec533
  • editor.foreground#45494c
  • editor.lineHighlightBackground#f5f6f8
  • editor.lineHighlightBorder#e9ecef
  • editor.selectionBackground#869ec51a
  • editorBracketHighlight.foreground1#869ec5
  • editorBracketHighlight.foreground2#c2570a
  • editorBracketHighlight.foreground3#009e73
  • editorBracketHighlight.foreground4#4387d7
  • editorBracketHighlight.foreground5#89461e
  • editorBracketHighlight.foreground6#869ec5
  • editorBracketHighlight.unexpectedBracket.foreground#dc7c7e
  • editorBracketMatch.background#40b0a640
  • editorBracketMatch.border#009e73
  • editorCursor.foreground#869ec5
  • editorError.foreground#dc7c7e
  • editorHint.foreground#9c9c9b
  • editorIndentGuide.activeBackground#869ec566
  • editorIndentGuide.background#45494c1a
  • editorInfo.foreground#4387d7
  • editorLineNumber.activeForeground#869ec5
  • editorLineNumber.foreground#bbbbbb
  • editorWarning.foreground#9a6700
  • gitDecoration.addedResourceForeground#009e73
  • gitDecoration.conflictingResourceForeground#9a6700
  • gitDecoration.deletedResourceForeground#dc7c7e
  • gitDecoration.ignoredResourceForeground#9c9c9b80
  • gitDecoration.modifiedResourceForeground#9a6700
  • gitDecoration.untrackedResourceForeground#4387d7
  • input.background#ffffff
  • input.border#e9ecef
  • input.foreground#45494c
  • input.placeholderForeground#9c9c9b
  • scrollbarSlider.activeBackground#00000060
  • scrollbarSlider.background#00000020
  • scrollbarSlider.hoverBackground#00000040
  • sideBar.background#f8f9fa
  • sideBar.border#e9ecef
  • sideBar.foreground#45494c
  • sideBarTitle.foreground#869ec5
  • statusBar.background#faf9f6
  • statusBar.border#faf9f6
  • statusBar.foreground#9c9c9b
  • tab.activeBackground#faf9f6
  • tab.activeForeground#869ec5
  • tab.border#e9ecef
  • tab.inactiveBackground#f1f3f5
  • tab.inactiveForeground#9c9c9b
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#869ec5
  • terminal.ansiBrightBlack#9c9c9b
  • terminal.ansiBrightBlue#869ec5
  • terminal.ansiBrightCyan#4387d7
  • terminal.ansiBrightGreen#009e73
  • terminal.ansiBrightMagenta#89461e
  • terminal.ansiBrightRed#dc7c7e
  • terminal.ansiBrightWhite#faf9f6
  • terminal.ansiBrightYellow#9a6700
  • terminal.ansiCyan#4387d7
  • terminal.ansiGreen#009e73
  • terminal.ansiMagenta#89461e
  • terminal.ansiRed#dc7c7e
  • terminal.ansiWhite#9c9c9b
  • terminal.ansiYellow#9a6700
  • titleBar.activeBackground#f8f9fa
  • titleBar.activeForeground#45494c
  • titleBar.border#e9ecef

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, unused#9c9c9bitalic
string, punctuation.definition.string, string.template#4387d7
keyword, keyword.control, keyword.operator, punctuation.separator, punctuation.terminator#869ec5bold
entity.name.function, support.function, variable.function, meta.function-call#c2570a
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#89461e
entity.name.type, entity.name.class, support.class, storage.type, storage.modifier#89461e
support.class.builtin, support.class.js, support.class.ts#869ec5
variable, variable.parameter, variable.other, meta.block variable.other, variable.other.property, support.variable.property#45494c
entity.name.tag, punctuation.definition.tag, meta.tag#869ec5
entity.other.attribute-name, meta.attribute#4387d7
invalid, invalid.illegal#dc7c7ebold underline
punctuation.definition.typeparameters#89461e
support.type.primitive, keyword.type#45494c
support.type.property-name.json, support.type.property-name.yaml, support.type.property-name.toml, entity.name.tag.yaml#869ec5
Hakimi Deuteranopia Safe by hakimi - VS Code Theme