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#F0EFEA
  • activityBar.border#E4E3DD
  • activityBar.foreground#1a1a18
  • activityBar.inactiveForeground#8B8B89
  • activityBarBadge.background#1a1a18
  • activityBarBadge.foreground#FAFAF8
  • badge.background#1a1a18
  • badge.foreground#FAFAF8
  • dropdown.background#FFFFFF
  • dropdown.border#D8D7D0
  • dropdown.foreground#0A0A08
  • editor.background#FAFAF8
  • editor.findMatchBackground#D8D0C5
  • editor.findMatchHighlightBackground#EAE5DC
  • editor.foreground#0A0A08
  • editor.inactiveSelectionBackground#EFEFEA
  • editor.lineHighlightBackground#F4F4F0
  • editor.lineHighlightBorder#EBEAE4
  • editor.selectionBackground#E4E3DF
  • editor.selectionHighlightBackground#E8E7E2
  • editor.wordHighlightBackground#E6E5DF80
  • editorBracketHighlight.foreground1#1a1a18
  • editorBracketHighlight.foreground2#333331
  • editorBracketHighlight.foreground3#5a5a58
  • editorBracketHighlight.foreground4#8B7355
  • editorBracketHighlight.foreground5#666664
  • editorBracketHighlight.foreground6#8B8B89
  • editorBracketHighlight.unexpectedBracket.foreground#A83232
  • editorBracketMatch.background#8B735522
  • editorBracketMatch.border#8B735588
  • editorCursor.foreground#1a1a18
  • editorGroupHeader.tabsBackground#EBEAE4
  • editorGutter.addedBackground#4E7C59
  • editorGutter.background#FAFAF8
  • editorGutter.deletedBackground#A83232
  • editorGutter.modifiedBackground#8B7355
  • editorIndentGuide.activeBackground#C0C0B8
  • editorIndentGuide.background#E8E8E2
  • editorLineNumber.activeForeground#8B8B89
  • editorLineNumber.foreground#C8C8C4
  • editorRuler.foreground#E4E4DE
  • editorWhitespace.foreground#E0E0DA
  • input.background#FFFFFF
  • input.border#D8D7D0
  • input.foreground#0A0A08
  • input.placeholderForeground#8B8B89
  • list.activeSelectionBackground#E6E5DF
  • list.activeSelectionForeground#0A0A08
  • list.hoverBackground#EFEFEA
  • list.hoverForeground#0A0A08
  • list.inactiveSelectionBackground#ECEBE5
  • list.inactiveSelectionForeground#1a1a18
  • panel.background#F5F5F2
  • panel.border#EAEAE4
  • panelTitle.activeForeground#1a1a18
  • panelTitle.inactiveForeground#8B8B89
  • sideBar.background#F5F5F2
  • sideBar.border#EAEAE4
  • sideBar.foreground#333331
  • sideBarSectionHeader.background#EEEEEE
  • sideBarSectionHeader.foreground#1a1a18
  • sideBarTitle.foreground#1a1a18
  • statusBar.background#F0EFEA
  • statusBar.border#E4E3DD
  • statusBar.foreground#333331
  • statusBar.noFolderBackground#F0EFEA
  • statusBarItem.hoverBackground#E4E3DD
  • tab.activeBackground#FAFAF8
  • tab.activeBorderTop#1a1a18
  • tab.activeForeground#0A0A08
  • tab.border#EAEAE4
  • tab.inactiveBackground#F0EFEA
  • tab.inactiveForeground#666664
  • titleBar.activeBackground#F5F5F2
  • titleBar.activeForeground#1a1a18
  • titleBar.border#EAEAE4
  • titleBar.inactiveBackground#FAFAF8
  • titleBar.inactiveForeground#8B8B89

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.control, keyword.other, storage.type, storage.modifier#1a1a18bold
string.quoted.double, string.quoted.single, string.quoted#5a5a58
punctuation.section.embedded.begin, punctuation.section.embedded.end, meta.embedded.line#8B7355
comment, comment.line, comment.block, punctuation.definition.comment#8B8B89italic
entity.name.function, entity.name.function.method, support.function#1a1a18
variable, variable.other, variable.other.property, variable.parameter#333331
keyword.operator, keyword.operator.pipe, keyword.operator.async, keyword.operator.async.chain, keyword.operator.async.parallel, keyword.operator.async.err, keyword.operator.async.finally, keyword.operator.fatarrow, keyword.operator.thinarrow, keyword.operator.method-call, keyword.operator.inheritance, keyword.operator.scope, keyword.operator.fuzzyeq, keyword.operator.comparison, keyword.operator.range, keyword.operator.spread#8B7355
constant.numeric, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal, constant.numeric.decimal#666664
constant.language.boolean#666664bold
constant.language.null, constant.language.undefined#8B8B89italic
entity.name.tag, support.class.component#1a1a18bold
entity.other.attribute-name, entity.other.attribute-name.event#333331
punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag.self-closing#8B7355
entity.name.type, entity.name.type.class, support.class#1a1a18bold
entity.name.type.hint#8B8B89italic bold
punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.section#5a5a58
constant.character.escape#8B7355bold
RIFT and Aperture Language Support by RIFT - VS Code Theme