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#ece5d8
  • activityBar.border#dfd7c2
  • activityBar.foreground#2f3136
  • activityBar.inactiveForeground#96928b
  • activityBarBadge.background#d03050
  • activityBarBadge.foreground#ffffff
  • descriptionForeground#7e7d77
  • editor.background#faf7f0
  • editor.findMatchBackground#ffd86666
  • editor.findMatchHighlightBackground#ffd86633
  • editor.foreground#2f3136
  • editor.lineHighlightBackground#f3eee2
  • editor.selectionBackground#e7dfcd
  • editor.selectionHighlightBackground#efe8d8
  • editor.wordHighlightBackground#c0770020
  • editor.wordHighlightStrongBackground#d0305020
  • editorBracketMatch.background#c0770022
  • editorBracketMatch.border#c0770088
  • editorCursor.foreground#c07700
  • editorGroupHeader.tabsBackground#ece5d8
  • editorGroupHeader.tabsBorder#e5ded1
  • editorIndentGuide.activeBackground1#a8a295
  • editorIndentGuide.background1#e5dfd2
  • editorLineNumber.activeForeground#c07700
  • editorLineNumber.foreground#aba59a
  • editorRuler.foreground#e7dfce
  • editorSuggestWidget.background#f4efe6
  • editorSuggestWidget.border#dfd7c2
  • editorSuggestWidget.foreground#2f3136
  • editorSuggestWidget.selectedBackground#e5ded1
  • editorWidget.background#f4efe6
  • editorWidget.border#dfd7c2
  • errorForeground#d03050
  • focusBorder#d48b0080
  • foreground#2f3136
  • gitDecoration.addedResourceForeground#4f8a10
  • gitDecoration.deletedResourceForeground#d03050
  • gitDecoration.ignoredResourceForeground#aba59a
  • gitDecoration.modifiedResourceForeground#d96b27
  • gitDecoration.untrackedResourceForeground#008899
  • selection.background#dfd7c2
  • sideBar.background#f4efe6
  • sideBar.border#e5ded1
  • sideBar.foreground#4b4946
  • sideBarSectionHeader.background#ece5d8
  • sideBarSectionHeader.border#dfd7c2
  • sideBarSectionHeader.foreground#7d5000
  • sideBarTitle.foreground#2f3136
  • statusBar.background#ece5d8
  • statusBar.border#dfd7c2
  • statusBar.debuggingBackground#d96b27
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#4b4946
  • statusBar.noFolderBackground#ece5d8
  • statusBarItem.remoteBackground#008899
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#faf7f0
  • tab.activeBorderBottom#c07700
  • tab.activeForeground#2f3136
  • tab.border#dfd7c2
  • tab.inactiveBackground#ece5d8
  • tab.inactiveForeground#7e7d77
  • terminal.ansiBlack#2f3136
  • terminal.ansiBlue#008899
  • terminal.ansiBrightBlack#7e7d77
  • terminal.ansiBrightBlue#008899
  • terminal.ansiBrightCyan#00828a
  • terminal.ansiBrightGreen#4f8a10
  • terminal.ansiBrightMagenta#6e4bb0
  • terminal.ansiBrightRed#d03050
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#c07700
  • terminal.ansiCyan#00828a
  • terminal.ansiGreen#4f8a10
  • terminal.ansiMagenta#6e4bb0
  • terminal.ansiRed#d03050
  • terminal.ansiWhite#faf7f0
  • terminal.ansiYellow#9e6500
  • terminal.background#faf7f0
  • terminal.foreground#2f3136
  • titleBar.activeBackground#ece5d8
  • titleBar.activeForeground#2f3136
  • titleBar.border#dfd7c2
  • titleBar.inactiveBackground#f4efe6
  • titleBar.inactiveForeground#96928b
  • widget.shadow#0000001a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8c877ditalic
comment.line.exclamation, comment.block.exclamation#d03050bold italic
comment.line.question, comment.block.question#c2541aitalic
comment.line.asterisk, comment.block.asterisk#9e6500italic
comment.line.todo, comment.block.todo#007a8abold italic
comment.line.note, comment.block.note#6e4bb0italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete#d03050italic
storage, storage.type, storage.modifier#d03050italic
entity.name.function, meta.function-call, support.function, keyword.other.special-method#4f8a10
entity.name.type, entity.name.class, entity.other.inherited-class, entity.name.struct, entity.name.interface, support.class, support.type#007a8a
variable.parameter, meta.parameter#c2541aitalic
variable, meta.property.object, support.variable.property, variable.other.object.property#2f3136
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#6e4bb0
string, string.quoted, string.template, punctuation.definition.string#8b5f00
entity.name.tag, meta.tag.sgml, punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#d03050
entity.other.attribute-name, support.type.property-name.css, meta.property-name.css#007a8aitalic
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#4f8a10
punctuation.separator, punctuation.terminator, punctuation.accessor, keyword.operator#7e7d77
Hikari Suite by Muhammad Maulana Yusuf - VS Code Theme