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#050914
  • activityBar.activeBorder#8C3840
  • activityBar.background#010102
  • activityBar.border#0A0B0D
  • activityBar.foreground#3E5880
  • badge.background#F97583
  • badge.foreground#0D1117
  • breadcrumb.activeSelectionForeground#58A6FF
  • breadcrumb.focusForeground#D0D7DE
  • breadcrumb.foreground#8B949E
  • dropdown.background#0D1117
  • dropdown.border#30363D
  • dropdown.foreground#D0D7DE
  • editor.background#030305
  • editor.findMatchBackground#261407
  • editor.findMatchHighlightBackground#1A0E05
  • editor.findRangeHighlightBackground#0E0F12
  • editor.foreground#8D94A0
  • editor.inactiveSelectionBackground#080F19
  • editor.lineHighlightBackground#060709
  • editor.lineHighlightBorder#060709
  • editor.selectionBackground#0E1A30
  • editor.selectionHighlightBackground#0A1526
  • editor.wordHighlightBackground#0E1015
  • editor.wordHighlightStrongBackground#12161A
  • editorGroupHeader.tabsBackground#020203
  • gitDecoration.addedResourceForeground#56D364
  • gitDecoration.conflictingResourceForeground#DB61A2
  • gitDecoration.deletedResourceForeground#F97583
  • gitDecoration.ignoredResourceForeground#484F58
  • gitDecoration.modifiedResourceForeground#E3B341
  • gitDecoration.untrackedResourceForeground#56D364
  • input.background#0D1117
  • input.border#30363D
  • input.foreground#D0D7DE
  • input.placeholderForeground#6E7681
  • inputOption.activeBackground#1C2938
  • inputOption.activeBorder#58A6FF
  • list.activeSelectionBackground#1C2938
  • list.activeSelectionForeground#D0D7DE
  • list.dropBackground#1C2938
  • list.focusBackground#21262D
  • list.focusForeground#D0D7DE
  • list.highlightForeground#58A6FF
  • list.hoverBackground#21262D
  • list.hoverForeground#D0D7DE
  • list.inactiveSelectionBackground#21262D
  • list.inactiveSelectionForeground#D0D7DE
  • listFilterWidget.background#21262D
  • listFilterWidget.noMatchesOutline#F97583
  • listFilterWidget.outline#21262D
  • notificationCenter.border#171B22
  • notificationCenterHeader.background#0D1117
  • notificationCenterHeader.foreground#D0D7DE
  • notificationLink.foreground#58A6FF
  • notifications.background#0D1117
  • notifications.border#171B22
  • notifications.foreground#D0D7DE
  • panel.background#090D13
  • panel.border#171B22
  • panelTitle.activeBorder#F97583
  • panelTitle.activeForeground#D0D7DE
  • panelTitle.inactiveForeground#8B949E
  • peekView.border#8C3840
  • peekViewEditor.background#050709
  • peekViewEditor.matchHighlightBackground#1E1505
  • peekViewResult.background#020203
  • peekViewTitle.background#050709
  • progressBar.background#58A6FF
  • quickInput.background#0D1117
  • quickInput.foreground#D0D7DE
  • quickInputTitle.background#111620
  • scrollbar.shadow#010409
  • scrollbarSlider.activeBackground#484F5899
  • scrollbarSlider.background#484F5866
  • scrollbarSlider.hoverBackground#484F5899
  • sideBar.background#020203
  • sideBar.border#0A0B0D
  • sideBar.foreground#61676E
  • statusBar.background#070709
  • statusBar.debuggingBackground#0F070F
  • statusBar.foreground#61676E
  • statusBar.noFolderBackground#0E070F
  • tab.activeBackground#030305
  • tab.activeBorderTop#8C3840
  • tab.activeForeground#3E5880
  • tab.inactiveBackground#020203
  • tab.inactiveForeground#4A4E53
  • terminal.ansiBlack#030305
  • terminal.ansiBlue#3E5880
  • terminal.ansiBrightBlack#3E4147
  • terminal.ansiBrightBlue#4A7099
  • terminal.ansiBrightCyan#387F85
  • terminal.ansiBrightGreen#4A8652
  • terminal.ansiBrightMagenta#7A6499
  • terminal.ansiBrightRed#994940
  • terminal.ansiBrightWhite#A0A6AD
  • terminal.ansiBrightYellow#998538
  • terminal.ansiCyan#267078
  • terminal.ansiGreen#387845
  • terminal.ansiMagenta#5E4D85
  • terminal.ansiRed#8C3840
  • terminal.ansiWhite#8D94A0
  • terminal.ansiYellow#856B30
  • terminal.background#030305
  • terminal.foreground#8D94A0
  • titleBar.activeBackground#010102
  • titleBar.activeForeground#61676E
  • titleBar.inactiveBackground#010102
  • titleBar.inactiveForeground#3E4147

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#3E4147italic
variable, string constant.other.placeholder#8D94A0
constant.other.color#4A7099
invalid, invalid.illegal#994940
keyword, storage.type, storage.modifier#994940
keyword.control, constant.other.color, 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#4A7099
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FF7B72
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#58A6FF
meta.block variable.other#D0D7DE
support.other.variable, string.other.link#FF7B72
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#E3B341
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#7EE787
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#D2A8FF
support.type#79C0FF
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#79C0FF
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF7B72
variable.language#FF7B72italic
entity.name.method.js#58A6FF
meta.class-method.js entity.name.function.js, variable.function.constructor#58A6FF
entity.other.attribute-name#79C0FF
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#79C0FFitalic
entity.other.attribute-name.class#79C0FF
source.sass keyword.control#58A6FF
markup.inserted#7EE787
markup.deleted#FF7B72
markup.changed#D2A8FF
string.regexp#56D4DD
constant.character.escape#56D4DD
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#58A6FFitalic
source.json meta.structure.dictionary.json support.type.property-name.json#79C0FF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D2A8FF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#58A6FF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF7B72
text.html.markdown, punctuation.definition.list_item.markdown#D0D7DE
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#58A6FF
markup.italic#FF7B72italic
markup.bold, markup.bold string#FF7B72bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#FF7B72bold italic
markup.underline#E3B341underline
markup.quote punctuation.definition.blockquote.markdown#6E7681
markup.quote#8B949Eitalic
string.other.link.title.markdown#58A6FF
string.other.link.description.title.markdown#D2A8FF
constant.other.reference.link.markdown#7EE787
markup.raw.block#D2A8FF
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#79C0FF
variable.language.fenced.markdown#6E7681
meta.separator#6E7681bold
markup.table#79C0FF
DARK Ultimate by GIRISH KOR - VS Code Theme