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.activeBorder#8B5CF6
  • activityBar.background#1A1A1A
  • activityBar.border#2D2D2D60
  • activityBar.dropBorder#8B5CF6
  • activityBar.foreground#8B5CF6
  • activityBar.inactiveForeground#94A3B866
  • activityBarBadge.background#8B5CF6
  • activityBarBadge.foreground#FFFFFF
  • badge.background#8B5CF6
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#8B5CF6
  • breadcrumb.background#1A1A1A
  • breadcrumb.focusForeground#A78BFA
  • breadcrumb.foreground#94A3B8
  • button.background#8B5CF6
  • button.foreground#FFFFFF
  • button.hoverBackground#A78BFA
  • button.secondaryBackground#2D2D2D
  • button.secondaryForeground#F8FAFC
  • button.secondaryHoverBackground#374151
  • diffEditor.insertedTextBackground#22C55E20
  • diffEditor.removedTextBackground#EF444420
  • editor.background#1A1A1A
  • editor.findMatchBackground#EAB30860
  • editor.findMatchHighlightBackground#EAB30830
  • editor.foreground#F8FAFC
  • editor.lineHighlightBackground#2D2D2D40
  • editor.selectionBackground#8B5CF650
  • editor.selectionHighlightBackground#A78BFA30
  • editor.wordHighlightBackground#8B5CF630
  • editor.wordHighlightStrongBackground#8B5CF650
  • gitDecoration.addedResourceForeground#22C55E
  • gitDecoration.conflictingResourceForeground#F97316
  • gitDecoration.deletedResourceForeground#EF4444
  • gitDecoration.ignoredResourceForeground#94A3B8
  • gitDecoration.modifiedResourceForeground#EAB308
  • gitDecoration.untrackedResourceForeground#06B6D4
  • input.background#2D2D2D
  • input.border#8B5CF6
  • input.foreground#F8FAFC
  • input.placeholderForeground#94A3B8
  • list.activeSelectionBackground#8B5CF650
  • list.activeSelectionForeground#F8FAFC
  • list.focusBackground#8B5CF630
  • list.hoverBackground#2D2D2D60
  • list.inactiveSelectionBackground#2D2D2D40
  • menu.background#2D2D2D
  • menu.foreground#F8FAFC
  • menu.selectionBackground#8B5CF6
  • menu.selectionForeground#FFFFFF
  • menubar.selectionBackground#8B5CF650
  • menubar.selectionForeground#F8FAFC
  • merge.currentContentBackground#22C55E20
  • merge.currentHeaderBackground#22C55E40
  • merge.incomingContentBackground#3B82F620
  • merge.incomingHeaderBackground#3B82F640
  • notificationCenter.border#2D2D2D
  • notificationCenterHeader.background#2D2D2D
  • notifications.background#2D2D2D
  • notifications.border#8B5CF6
  • notifications.foreground#F8FAFC
  • notificationToast.border#2D2D2D
  • panel.background#1A1A1A
  • panel.border#2D2D2D
  • panelTitle.activeBorder#8B5CF6
  • panelTitle.activeForeground#8B5CF6
  • panelTitle.inactiveForeground#94A3B8
  • progressBar.background#8B5CF6
  • scrollbar.shadow#1A1A1A
  • scrollbarSlider.activeBackground#8B5CF680
  • scrollbarSlider.background#8B5CF640
  • scrollbarSlider.hoverBackground#8B5CF660
  • sideBar.background#1A1A1A
  • sideBar.border#2D2D2D
  • sideBar.foreground#F8FAFC
  • sideBarSectionHeader.background#2D2D2D
  • sideBarSectionHeader.foreground#A78BFA
  • sideBarTitle.foreground#8B5CF6
  • statusBar.background#8B5CF6
  • statusBar.border#A78BFA
  • statusBar.debuggingBackground#EF4444
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#6366F1
  • tab.activeBackground#2D2D2D
  • tab.activeBorder#8B5CF6
  • tab.activeForeground#8B5CF6
  • tab.border#2D2D2D
  • tab.inactiveBackground#1A1A1A
  • tab.inactiveForeground#94A3B8
  • terminal.ansiBlack#1A1A1A
  • terminal.ansiBlue#3B82F6
  • terminal.ansiBrightBlack#94A3B8
  • terminal.ansiBrightBlue#60A5FA
  • terminal.ansiBrightCyan#22D3EE
  • terminal.ansiBrightGreen#4ADE80
  • terminal.ansiBrightMagenta#A78BFA
  • terminal.ansiBrightRed#F87171
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FDE047
  • terminal.ansiCyan#06B6D4
  • terminal.ansiGreen#22C55E
  • terminal.ansiMagenta#8B5CF6
  • terminal.ansiRed#EF4444
  • terminal.ansiWhite#F8FAFC
  • terminal.ansiYellow#EAB308
  • terminal.background#1A1A1A
  • terminal.foreground#F8FAFC
  • titleBar.activeBackground#1A1A1A
  • titleBar.activeForeground#F8FAFC
  • titleBar.border#2D2D2D
  • titleBar.inactiveBackground#1A1A1A
  • titleBar.inactiveForeground#94A3B8
  • tree.indentGuidesStroke#2D2D2D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#94A3B8italic
variable, string constant.other.placeholder#F8FAFC
constant.other.color#8B5CF6
invalid, invalid.illegal#EF4444
keyword, storage.type, storage.modifier#8B5CF6
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#06B6D4
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#F87171
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#60A5FAitalic
meta.block variable.other#F87171
support.other.variable, string.other.link#F87171
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#F97316
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#22C55E
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#EAB308
support.type#A78BFA
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#A78BFA
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#EF4444
variable.language#EF4444italic
entity.name.method.js#3B82F6italic
meta.class-method.js entity.name.function.js, variable.function.constructor#3B82F6
entity.other.attribute-name#8B5CF6
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#EAB308italic
entity.other.attribute-name.class#EAB308
source.sass keyword.control#3B82F6
markup.inserted#22C55E
markup.deleted#EF4444
markup.changed#8B5CF6
string.regexp#06B6D4
constant.character.escape#06B6D4
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#3B82F6italic
source.js constant.other.object.key.js string.unquoted.label.js#EF4444italic
source.json meta.structure.dictionary.json support.type.property-name.json#8B5CF6
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#EAB308
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#F97316
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#EF4444
text.html.markdown, punctuation.definition.list_item.markdown#F8FAFC
text.html.markdown markup.inline.raw.markdown#8B5CF6
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#94A3B8
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#22C55E
markup.italic#EAB308italic
markup.bold, markup.bold string#EAB308bold
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#EAB308bold
markup.underline#F97316underline
markup.quote punctuation.definition.blockquote.markdown#94A3B8
markup.quoteitalic
string.other.link.title.markdown#3B82F6
string.other.link.description.title.markdown#8B5CF6
constant.other.reference.link.markdown#EAB308
markup.raw.block#8B5CF6
markup.raw.block.fenced.markdown#94A3B800
punctuation.definition.fenced.markdown#94A3B800
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#F8FAFC
variable.language.fenced.markdown#94A3B8
meta.separator#94A3B8bold
markup.table#F8FAFC
meta.object-literal.key, meta.object.member, variable.other.object.property#e7e6e6
Hakko Ryu Theme Collection by alexandrubb23 - VS Code Theme