Skip to main content
CodingTheme

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.activeBackground#1a1a1a
  • activityBar.background#131313
  • activityBarBadge.background#007acc
  • diffEditor.insertedTextBackground#2c440088
  • editor.background#1e1e1e
  • editor.foreground#eeffff
  • editor.selectionBackground#00a8
  • editorBracketHighlight.foreground1#10b579
  • editorBracketHighlight.foreground2#12bbd1
  • editorBracketHighlight.foreground3#1b84fd
  • editorBracketHighlight.foreground4#7148F1
  • editorBracketHighlight.foreground5#CF0DE5
  • editorBracketHighlight.foreground6#e50d84
  • editorBracketMatch.background#00a
  • editorBracketMatch.border#12bbd133
  • editorBracketPairGuide.activeBackground1#10b579
  • editorBracketPairGuide.activeBackground2#12bbd1
  • editorBracketPairGuide.activeBackground3#1b84fd
  • editorBracketPairGuide.activeBackground4#7148F1
  • editorBracketPairGuide.activeBackground5#CF0DE5
  • editorBracketPairGuide.activeBackground6#e50d84
  • editorBracketPairGuide.background1#10b57988
  • editorBracketPairGuide.background2#12bbd188
  • editorBracketPairGuide.background3#1b84fd88
  • editorBracketPairGuide.background4#7148F188
  • editorBracketPairGuide.background5#CF0DE588
  • editorBracketPairGuide.background6#e50d8488
  • editorGroupHeader.tabsBackground#131313
  • notebook.cellBorderColor#0001
  • notebook.cellToolbarSeparator#7771
  • notebook.focusedCellBorder#007acc
  • notebook.inactiveSelectedCellBorder#1a1a1a
  • notebook.selectedCellBorder#007acc
  • panel.background#1a1a1a
  • sash.hoverBorder#007acc
  • sideBar.background#1a1a1a
  • sideBarSectionHeader.background#1a1a1a
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#1e1e1e
  • statusBar.noFolderBackground#1e1e1e
  • tab.activeBackground#1e1e1e
  • tab.border#1a1a1a
  • tab.inactiveBackground#131313

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#546E7Aitalic
variable, string constant.other.placeholder#EEFFFF
constant.other.color#ffffff
invalid, invalid.illegal#aa6666
keyword#ea9292
keyword.operator#79e7c2
storage.type, storage.modifier, keyword.control.import#79e77e
keyword.control, constant.other.color, meta.tag, keyword.other.template, keyword.other.substitution#4fb
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#4548fa
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#fc6bbb
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#8df
meta.block#f07178
variable.other.object.property, variable.other.property, variable.other.constant.property#8ba0ff
support.other.variable, string.other.link#f07178
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other#fc3
keyword.other.unit#44FFBB
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#fc3
entity.name.type.class, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter#FFCB6B
entity.name, support.type.sys-types#9258ff
support.type#FC6BBB
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#B2CCD6
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#6688aa
variable.language#888italic
entity.name.method.js#0fbitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#0fb
entity.other.attribute-name#8BA0FF
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCB6Bitalic
entity.other.attribute-name.class#FFCB6B
source.sass keyword.control#0fb
markup.inserted#C3E88D
markup.deleted#f07178
markup.changed#C792EA
string.regexp#4fb
constant.character.escape#4fb
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#0fbitalic
source.js constant.other.object.key.js string.unquoted.label.js#6688aaitalic
source.json meta.structure.dictionary.json support.type.property-name.json#C792EA
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFCB6B
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#fc3
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#6688aa
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C17E70
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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#0fb
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 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#f07178
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 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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C792EA
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 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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C3E88D
text.html.markdown, punctuation.definition.list_item.markdown#EEFFFF
text.html.markdown markup.inline.raw.markdown#C792EA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#C3E88D
markup.italic#71acf0italic
markup.bold, markup.bold string#f0e371bold
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#8ff071bold
markup.underline#a36df9underline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#0fb
string.other.link.description.title.markdown#C792EA
constant.other.reference.link.markdown#FFCB6B
markup.raw.block#C792EA
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#EEFFFF
variable.other.normal.shell#9999ff
string.interpolated.dollar.shell#88DDFF

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Boundless by rodrigoroar - VS Code Theme