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#181818
  • activityBar.border#2a2a2a
  • activityBar.foreground#6ea9ff
  • activityBar.inactiveForeground#99a0a8
  • button.background#6ea9ff
  • button.foreground#121212
  • button.hoverBackground#785ef0
  • editor.background#121212
  • editor.findMatchBackground#6ea9ff4d
  • editor.findMatchHighlightBackground#6ea9ff33
  • editor.foreground#e0e0e0
  • editor.lineHighlightBackground#1e1e1e
  • editor.lineHighlightBorder#2a2a2a
  • editor.selectionBackground#6ea9ff33
  • editorBracketHighlight.foreground1#6ea9ff
  • editorBracketHighlight.foreground2#e2cb8d
  • editorBracketHighlight.foreground3#40b0a6
  • editorBracketHighlight.foreground4#74d7e3
  • editorBracketHighlight.foreground5#785ef0
  • editorBracketHighlight.foreground6#6ea9ff
  • editorBracketHighlight.unexpectedBracket.foreground#ff7575
  • editorBracketMatch.background#40b0a640
  • editorBracketMatch.border#40b0a6
  • editorCursor.foreground#6ea9ff
  • editorError.foreground#ff7575
  • editorHint.foreground#99a0a8
  • editorIndentGuide.activeBackground#6ea9ff66
  • editorIndentGuide.background#e0e0e01a
  • editorInfo.foreground#74d7e3
  • editorLineNumber.activeForeground#6ea9ff
  • editorLineNumber.foreground#707070
  • editorWarning.foreground#e1be6a
  • gitDecoration.addedResourceForeground#40b0a6
  • gitDecoration.conflictingResourceForeground#e1be6a
  • gitDecoration.deletedResourceForeground#ff7575
  • gitDecoration.ignoredResourceForeground#99a0a880
  • gitDecoration.modifiedResourceForeground#e1be6a
  • gitDecoration.untrackedResourceForeground#74d7e3
  • input.background#1e1e1e
  • input.border#2a2a2a
  • input.foreground#e0e0e0
  • input.placeholderForeground#99a0a8
  • scrollbarSlider.activeBackground#6ea9ff66
  • scrollbarSlider.background#e0e0e02b
  • scrollbarSlider.hoverBackground#6ea9ff4d
  • sideBar.background#181818
  • sideBar.border#2a2a2a
  • sideBar.foreground#e0e0e0
  • sideBarTitle.foreground#6ea9ff
  • statusBar.background#121212
  • statusBar.border#121212
  • statusBar.foreground#99a0a8
  • tab.activeBackground#121212
  • tab.activeForeground#6ea9ff
  • tab.border#2a2a2a
  • tab.inactiveBackground#1a1a1a
  • tab.inactiveForeground#99a0a8
  • terminal.ansiBlack#121212
  • terminal.ansiBlue#6ea9ff
  • terminal.ansiBrightBlack#99a0a8
  • terminal.ansiBrightBlue#6ea9ff
  • terminal.ansiBrightCyan#74d7e3
  • terminal.ansiBrightGreen#40b0a6
  • terminal.ansiBrightMagenta#785ef0
  • terminal.ansiBrightRed#ff7575
  • terminal.ansiBrightWhite#e0e0e0
  • terminal.ansiBrightYellow#e1be6a
  • terminal.ansiCyan#74d7e3
  • terminal.ansiGreen#40b0a6
  • terminal.ansiMagenta#785ef0
  • terminal.ansiRed#ff7575
  • terminal.ansiWhite#99a0a8
  • terminal.ansiYellow#e1be6a
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#e0e0e0
  • titleBar.border#2a2a2a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, unused#99a0a8italic
string, punctuation.definition.string, string.template#74d7e3
keyword, keyword.control, keyword.operator, punctuation.separator, punctuation.terminator#6ea9ffbold
entity.name.function, support.function, variable.function, meta.function-call#e2cb8d
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#f7993f
entity.name.type, entity.name.class, support.class, storage.type, storage.modifier#f7993f
support.class.builtin, support.class.js, support.class.ts#6ea9ff
variable, variable.parameter, variable.other, meta.block variable.other, variable.other.property, support.variable.property#e0e0e0
entity.name.tag, punctuation.definition.tag, meta.tag#6ea9ff
entity.other.attribute-name, meta.attribute#74d7e3
invalid, invalid.illegal#ff7575bold underline
punctuation.definition.typeparameters#f7993f
support.type.primitive, keyword.type#e0e0e0
support.type.property-name.json, support.type.property-name.yaml, support.type.property-name.toml, entity.name.tag.yaml#6ea9ff
Hakimi Deuteranopia Safe by hakimi - VS Code Theme