Skip to main content
Coding Theme

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#121212
  • activityBar.foreground#F8F8F2
  • activityBarBadge.background#FF7A85
  • activityBarBadge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#FF7A85
  • breadcrumb.focusForeground#F8F8F2
  • breadcrumb.foreground#AAAAAA
  • editor.background#1E1E1E
  • editor.findMatchBackground#FF7A8540
  • editor.findMatchHighlightBackground#FF7A8520
  • editor.foreground#F8F8F2
  • editor.selectionBackground#333333
  • editor.selectionHighlightBackground#33333377
  • editor.wordHighlightBackground#33333377
  • editorCursor.foreground#FF7A85
  • editorGroup.border#121212
  • editorGroupHeader.tabsBackground#1A1A1A
  • editorLineNumber.activeForeground#FF7A85
  • editorLineNumber.foreground#666666
  • editorSuggestWidget.background#1A1A1A
  • editorSuggestWidget.border#333333
  • editorSuggestWidget.highlightForeground#FF7A85
  • editorSuggestWidget.selectedBackground#333333
  • editorWidget.background#1A1A1A
  • editorWidget.border#333333
  • list.activeSelectionBackground#333333
  • list.activeSelectionForeground#FF7A85
  • list.hoverBackground#252525
  • list.hoverForeground#F8F8F2
  • list.inactiveSelectionBackground#252525
  • notificationCenterHeader.background#1A1A1A
  • notifications.background#1A1A1A
  • panel.background#1A1A1A
  • panel.border#333333
  • panelTitle.activeForeground#FF7A85
  • panelTitle.inactiveForeground#AAAAAA
  • peekView.border#FF7A85
  • peekViewEditor.background#1A1A1A
  • peekViewResult.background#1A1A1A
  • peekViewTitle.background#121212
  • sideBar.background#1A1A1A
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#121212
  • sideBarSectionHeader.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#1A1A1A
  • statusBar.debuggingBackground#1A1A1A
  • statusBar.foreground#F8F8F2
  • statusBar.noFolderBackground#1A1A1A
  • statusBarItem.remoteBackground#1A1A1A
  • statusBarItem.remoteForeground#F8F8F2
  • tab.activeBackground#1E1E1E
  • tab.activeBorder#56B6C2
  • tab.activeForeground#F8F8F2
  • tab.border#1A1A1A
  • tab.inactiveBackground#1A1A1A
  • tab.inactiveForeground#AAAAAA
  • terminal.ansiBlack#252525
  • terminal.ansiBlue#61AFEF
  • terminal.ansiCyan#56B6C2
  • terminal.ansiGreen#98C379
  • terminal.ansiMagenta#C678DD
  • terminal.ansiRed#FF7A85
  • terminal.ansiWhite#F8F8F2
  • terminal.ansiYellow#E5C07B
  • terminal.background#1E1E1E
  • terminal.foreground#F8F8F2
  • titleBar.activeBackground#121212
  • titleBar.activeForeground#FFFFFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A737Ditalic
variable, string constant.other.placeholder#F8F8F2
constant.other.color#FF7A85
invalid, invalid.illegal#FF7A85
keyword#C678DD
storage.type, storage.modifier#C678DD
keyword.control#FF7A85italic
keyword.operator#56B6C2
punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#BBBBBB
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FF7A85
entity.name.tag.js.jsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag.tsx#FF7A85bold
support.class.component, support.class.component.jsx, support.class.component.tsx#E5C07Bbold
entity.name.function#61AFEF
meta.function-call, variable.function, support.function, keyword.other.special-method#61AFEF
meta.block variable.other#F8F8F2
support.other.variable, string.other.link#C678DD
variable.other.property, variable.other.object.property#56B6C2
constant.numeric#E5C07B
constant.language, support.constant, constant.character, constant.escape#FF7A85
variable.parameter#E5C07Bitalic
keyword.other.unit#E5C07B
string#98C379
punctuation.definition.string.begin, punctuation.definition.string.end#98C379
entity.quasi.element.js, punctuation.quasi.element.begin.js, punctuation.quasi.element.end.js#FF7A85
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FF7A85
entity.name.class, entity.name.type.class#E5C07B
support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#E5C07B
entity.name.type.interface#E5C07B
entity.name.type.ts, entity.name.type.tsx#56B6C2
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#56B6C2
support.constant.property-value.css#98C379
variable.language#FF7A85italic
support.variable.dom, support.variable.property.dom#56B6C2
entity.other.attribute-name#FF7A85
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx#FF7A85italic
entity.other.attribute-name.class.css#E5C07B
entity.other.attribute-name.id.css#FF7A85
entity.other.attribute-name.pseudo-class.css#C678DDitalic
meta.decorator.ts, meta.decorator.tsx#FF7A85italic bold
string.regexp#56B6C2
string.regexp keyword#FF7A85
support.function.console#56B6C2bold
support.type.property-name.json#FF7A85
meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json#98C379
markup.heading#FF7A85bold
markup.bold#E5C07Bbold
markup.italic#FF7A85italic
markup.inline.raw, markup.fenced_code.block#56B6C2
string.other.link#FF7A85underline
string.json.comments meta.structure.dictionary.json string.quoted.double.json#98C379
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF7A85
codewithharshad by codewithharshad - VS Code Theme