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.activeBorder#EEE
  • activityBar.activeFocusBorder#EEE
  • activityBar.background#EEE
  • activityBar.border#EEE
  • activityBar.foreground#666
  • editor.background#FFF
  • editor.findMatchBackground#ffdd88
  • editor.findMatchBorder#ffdd88
  • editor.findMatchHighlightBackground#ffee88
  • editor.findMatchHighlightBorder#ffcc88
  • editor.foreground#000
  • editor.hoverHighlightBackground#efefff
  • editor.inactiveSelectionBackground#eee
  • editor.lineHighlightBackground#F9F9FF
  • editor.lineHighlightBorder#F9F9FF
  • editor.selectionBackground#eef
  • editor.selectionHighlightBackground#eef
  • editor.selectionHighlightBorder#eef
  • editor.wordHighlightBackground#EEE
  • editor.wordHighlightBorder#EEE
  • editor.wordHighlightStrongBackground#ffee99
  • editor.wordHighlightStrongBorder#ffee99
  • editorBracketMatch.background#FFF
  • editorBracketMatch.border#ffcc88
  • editorCursor.foreground#000
  • editorGroup.border#EEE
  • editorGroup.dropBackground#EEE
  • editorGroup.emptyBackground#EEE
  • editorGroup.focusedEmptyBorder#EEE
  • editorGroupHeader.border#EEE
  • editorGroupHeader.tabsBackground#EEE
  • editorGroupHeader.tabsBorder#EEE
  • editorLineNumber.activeForeground#000
  • editorLineNumber.foreground#CCD
  • editorOverviewRuler.addedForeground#FFF0
  • editorOverviewRuler.bracketMatchForeground#FFF0
  • editorOverviewRuler.deletedForeground#FFF0
  • editorOverviewRuler.errorForeground#FFF0
  • editorOverviewRuler.findMatchForeground#FFF0
  • editorOverviewRuler.infoForeground#FFF0
  • editorOverviewRuler.modifiedForeground#FFF0
  • editorOverviewRuler.rangeHighlightForeground#FFF0
  • editorOverviewRuler.selectionHighlightForeground#FFF0
  • editorOverviewRuler.warningForeground#FFF0
  • editorOverviewRuler.wordHighlightForeground#FFF0
  • editorOverviewRuler.wordHighlightStrongForeground#FFF0
  • list.activeSelectionBackground#EEE
  • list.activeSelectionForeground#000
  • list.focusOutline#EEE
  • list.hoverBackground#EEE
  • list.hoverForeground#000
  • list.inactiveSelectionBackground#EEE
  • sideBar.background#EEE
  • sideBar.border#EEE
  • sideBar.foreground#888
  • sideBarSectionHeader.background#EEE
  • sideBarSectionHeader.foreground#444
  • statusBar.background#EEE
  • statusBar.foreground#666
  • tab.activeBackground#FFF
  • tab.activeBorder#FFF
  • tab.border#EEE
  • tab.hoverBackground#EEE
  • tab.hoverBorder#EEE
  • tab.hoverForeground#000
  • tab.inactiveBackground#EEE
  • tab.inactiveForeground#AAA
  • tab.unfocusedHoverBackground#EEE
  • tab.unfocusedHoverForeground#000
  • tree.indentGuidesStroke#EEE

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#AAA
comment.block.preprocessor#AAA
comment.documentation, comment.block.documentation#448C27
invalid.illegal#660000
keyword.control, keyword.control.flow, storage.modifier.async, keyword.control.trycatch, keyword.operator.new, keyword.operator.ternary, keyword.operator.comparison#b60027
punctuation.accessor#e03c3c
storage.type, storage.type.property, punctuation.section.array.begin.ruby#3AF
support.type, support.type.primitive, entity.name.type#0055DD
punctuation.decorator#CCC
entity.name.type.class, entity.other.inherited-class, entity.name.type.interface, support.class.ruby#0055DDbold
storage.type.class.ts, storage.modifier.ts, storage.type.interface.ts#EEAE00
support.constant, variable.language#eeae00
entity.name.function, support.function, entity.name.function-call.elixir, keyword.other.special-method.ruby#00ad00bold
variable.parameter#000
entity.name.exception#660000
entity.name.sectionbold
constant.numeric, constant.character, constant, support.type.primitive#8000bb
string#444
constant.character.escape#777777
string.regexp#4B83CD
constant.other.symbol#AB6526
variable.other#000
string.quoted.double, punctuation.definition.string.begin, punctuation.definition.string.end#333
meta.object.member#444
punctuation#888bold
support.type.property-name.json, punctuation.support.type.property-name#0044BB
punctuation.separator.dictionary.key-value.json#000bold
string.quoted.double.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json#EE4433
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#222
entity.name.tag.html, entity.name.tag#0033CCbold
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.separator.key-value.html, meta.tag.block.any.html#9ae
string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#9ae
entity.name.tag#0055DD
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#EEAE00italic
constant.character.entity, punctuation.definition.entity#AB6526
support.class.component.html#0033CCbold
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#7A3E9D
support.type.property-name.css#000
entity.other.attribute-name.id.css, punctuation.definition.entity.css#8000BB
entity.other.attribute-name.class.css#EEAE00
entity.name.tag.css#0055DDitalic bold
meta.property-value, meta.property-value constant.other, support.constant.property-value#099
support.constant.font-name.css#2BB
keyword.other.importantbold
punctuation.definition.heading.markdown#BBB
punctuation.definition.list.begin.markdown#0055DD
meta.paragraph.markdown#000
entity.name.section.markdown#b60027bold
punctuation.definition.raw.markdown#8000bb
markup.inline.raw.string.markdown#8000bb
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#660000
markup.inserted#000000
meta.link#4B83CD
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#AA3731
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#7A3E9D
markup.list#4B83CD
markup.bold, markup.italic#448C27
markup.inline.raw#AB6526
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343
punctuation.definition.variable.ruby, variable.other.readwrite.instance.ruby#8000BB
keyword.other.special-method.dockerfile#8000bb
keyword.other.special-method.elixir#B60027
variable.other.constant.elixir, entity.name.type.module.elixir#0055DDbold
keyword.operator.other.elixir, keyword.operator.comparison.elixir#00C3DF
meta.jsx.children.tsx#222
support.class.component.tsx#0055DDbold
entity.other.attribute-name.tsx#DDAA00italic
keyword.operator.assignment.tsx#000
Gondolin Light by Stephen Scholtz - VS Code Theme