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.activeBackground#4d7f9120
  • activityBar.background#132226
  • activityBar.border#02020245
  • activityBar.foreground#fdf7ecfa
  • activityBar.inactiveForeground#d3cfc7d6
  • activityBarBadge.background#97CAD8
  • activityBarBadge.foreground#192f34
  • badge.background#97CAD8
  • badge.foreground#192f34
  • breadcrumb.background#132226
  • breadcrumb.focusForeground#C6AC8F
  • breadcrumb.foreground#f1ece1f5
  • button.background#348092
  • button.foreground#f1ece1f5
  • button.hoverBackground#2B6A78
  • button.secondaryBackground#34819239
  • button.secondaryForeground#f1ece1f5
  • button.secondaryHoverBackground#2b6b7939
  • editor.background#242b2e
  • editor.foreground#F1ECE1
  • editor.inactiveSelectionBackground#99bbbf83
  • editor.selectionBackground#93b6ba46
  • editorCursor.background#DED0BE
  • editorCursor.foreground#DED0BE
  • editorGroupHeader.tabsBackground#1f2f34
  • editorGroupHeader.tabsBorder#4d7f91
  • editorLineNumber.activeForeground#C6AC8F
  • editorLineNumber.foreground#F1ECE1
  • focusBorder#706354
  • foreground#EAE2D6
  • input.background#34819249
  • input.border#f1ece1f5
  • input.foreground#f1ece1a5
  • input.placeholderForeground#f1ece1a5
  • inputOption.activeBackground#34819239
  • inputOption.activeBorder#f1ece1f5
  • inputOption.activeForeground#f1ece1f5
  • list.activeSelectionBackground#93b6ba5a
  • list.activeSelectionForeground#C1D6D7
  • list.dropBackground#060d0f77
  • list.highlightForeground#ffffff
  • list.hoverBackground#93b6ba17
  • list.hoverForeground#F1ECE1
  • list.inactiveSelectionBackground#93b6ba31
  • list.inactiveSelectionForeground#C1D6D7
  • listFilterWidget.background#93b6bad7
  • listFilterWidget.noMatchesOutline#ff0000
  • listFilterWidget.outline#C1D6D7
  • menu.background#35535ae2
  • menu.border#20373C
  • menu.foreground#f1ece1d6
  • menu.selectionBackground#f1ece130
  • menu.selectionBorder#20373C
  • menu.selectionForeground#f1ece1d6
  • menu.separatorBackground#6599A4
  • menubar.selectionBackground#35535a7b
  • menubar.selectionBorder#ff000000
  • menubar.selectionForeground#e8e1f1d6
  • notifications.background#132226
  • notifications.border#4d7f91bb
  • notifications.foreground#f1ece1f5
  • notificationsErrorIcon.foreground#ff7777
  • notificationsInfoIcon.foreground#7bbffb
  • notificationsWarningIcon.foreground#f9bd73
  • notificationToast.border#4d7f91bb
  • panel.background#132226
  • panel.border#f1ece120
  • panelTitle.activeBorder#93b6ba
  • panelTitle.activeForeground#f1ece1f5
  • panelTitle.inactiveForeground#d3cfc7d6
  • progressBar.background#706354
  • scrollbar.shadow#4C6663
  • scrollbarSlider.activeBackground#4d7f91bb
  • scrollbarSlider.background#4d7f9133
  • scrollbarSlider.hoverBackground#4d7f9164
  • selection.background#4C6663
  • sideBar.background#192f34
  • sideBar.border#20373C
  • sideBar.foreground#f1ece1f5
  • sideBarSectionHeader.background#6599a438
  • sideBarSectionHeader.border#192f34
  • sideBarSectionHeader.foreground#C1D6D7
  • sideBarTitle.foreground#ffffff
  • statusBar.background#348092
  • statusBar.border#22333B
  • statusBar.debuggingBackground#768937
  • statusBar.debuggingBorder#2B5353
  • statusBar.debuggingForeground#F1ECE1
  • statusBar.foreground#F1ECE1
  • statusBar.noFolderBackground#504A8b
  • statusBar.noFolderBorder#373554
  • statusBar.noFolderForeground#F1ECE1
  • statusBarItem.hoverBackground#DCE5E350
  • statusBarItem.remoteBackground#192f34
  • statusBarItem.remoteForeground#F1ECE1
  • tab.activeBackground#f1ece120
  • tab.activeBorder#6599A4
  • tab.activeForeground#fafafaf5
  • tab.border#ff000000
  • tab.hoverBackground#f1ece120
  • tab.inactiveBackground#192f34
  • tab.inactiveForeground#e8e1f1d6
  • tab.unfocusedActiveBorder#f1ece1f5
  • tab.unfocusedActiveForeground#f1ece1f5
  • tab.unfocusedInactiveForeground#f1ece1f5
  • terminal.background#1C1B1A
  • terminal.border#20373C
  • terminal.foreground#f1ece1f5
  • terminal.selectionBackground#93b6ba46
  • terminal.selectionForeground#f1ece1f5
  • textLink.activeForeground#93B6BA
  • textLink.foreground#3C6067
  • titleBar.activeBackground#35535A
  • titleBar.activeForeground#f1ece1b6
  • titleBar.border#93b6ba45
  • titleBar.inactiveBackground#35535A
  • titleBar.inactiveForeground#f1ece19b
  • tree.indentGuidesStroke#F1ECE1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7F7F7Fitalic
variable#D4D4D4
keyword, storage.type, storage.modifier#C594C5
keyword.operator, constant.other.color, punctuation, 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#a9937a
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#e3bc8c
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level#6699CC
support.other.variable, string.other.link#F2777A
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit#F99157
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#99C794
entity.name.class, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter#FAC863
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#E15A60
variable.language#E15A60italic
entity.name.method.js#D8DEE9
meta.class-method.js entity.name.function.js, variable.function.constructor#D8DEE9
entity.other.attribute-name#BB80B3
markup.inserted#99C794
markup.deleted#E15A60
markup.changed#BB80B3
string.regexp#5FB3B3
constant.character.escape#5FB3B3
*url*, *link*, *uri*underline
constant.numeric.line-number.find-in-files - match#AB7967
entity.name.filename.find-in-files#99C794
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#6699CCitalic
source.js constant.other.object.key.js string.unquoted.label.js#E15A60italic
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
source.js entity.other.attribute-name.jsitalic
text.html.basic entity.other.attribute-name.htmlitalic
North Star Theme by AkosoCodes - VS Code Theme