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#dc6b8244
  • activityBar.background#ffffff
  • activityBar.border#dc6b8244
  • activityBar.foreground#000000
  • diffEditor.insertedTextBackground#59886722
  • diffEditor.removedTextBackground#c4626c22
  • editor.background#ffffff
  • editor.findMatchBackground#ffee6f88
  • editor.findMatchHighlightBackground#ffee6f88
  • editor.findRangeHighlightBackground#ffee6f88
  • editor.foreground#444444
  • editor.hoverHighlightBackground#f9d3e388
  • editor.lineHighlightBackground#f9d3e388
  • editor.rangeHighlightBackground#f9d3e388
  • editor.selectionBackground#f9d3e388
  • editor.selectionHighlightBorder#dc6b8288
  • editor.wordHighlightBackground#f9d3e388
  • editor.wordHighlightStrongBackground#f9d3e388
  • editorCursor.foreground#dc6b82aa
  • editorGroup.border#dc6b8244
  • editorGroupHeader.border#dc6b8244
  • editorGroupHeader.noTabsBackground#ffffff
  • editorGroupHeader.tabsBackground#ffffff
  • editorGroupHeader.tabsBorder#dc6b8244
  • editorIndentGuide.background#82828255
  • editorLineNumber.activeForeground#828282
  • editorLineNumber.foreground#999999
  • editorMarkerNavigationWarning.background#c99e00
  • editorOverviewRuler.warningForeground#c99e00
  • editorRuler.foreground#82828255
  • editorWarning.foreground#c99e00
  • editorWhitespace.foreground#82828255
  • list.activeSelectionBackground#dc6b8244
  • list.activeSelectionForeground#444444
  • list.hoverBackground#80bbe344
  • list.inactiveSelectionBackground#80bbe344
  • peekView.border#828282
  • peekViewEditor.background#fefef5
  • peekViewEditor.matchHighlightBackground#b4eacf88
  • peekViewResult.matchHighlightBackground#b4eacf88
  • sideBar.background#ffffff
  • sideBar.border#dc6b8244
  • sideBarSectionHeader.background#dc6b8244
  • sideBarSectionHeader.border#dc6b8244
  • sideBarTitle.foreground#222222
  • sideBySideEditor.horizontalBorder#dc6b8244
  • sideBySideEditor.verticalBorder#dc6b8244
  • statusBar.background#ffffff
  • statusBar.border#dc6b8244
  • statusBar.foreground#444444
  • statusBar.noFolderBackground#ffffff
  • statusBar.noFolderBorder#dc6b8244
  • statusBar.noFolderForeground#444444
  • statusBarItem.hoverBackground#dc6b8244
  • tab.activeBackground#dc6b8244
  • tab.activeForeground#000000
  • tab.border#dc6b8244
  • tab.inactiveBackground#ffffff
  • tab.inactiveForeground#888888
  • titleBar.activeBackground#ffffff
  • titleBar.border#dc6b8244

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.block.comment#8aabccitalic
storage.type.class.jsdoc, variable.other.jsdoc, punctuation.definition.block.tag.jsdoc#8aabccbold italic
string#a6559dunderline
constant.numeric#f091a0
constant.language, variable.language#3271aebold
constant.character, constant.other#3271aebold
variable, variable.other.property, support.variable.property#31322c
keyword#f091a0bold
keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python#f091a0bold
keyword.operator, punctuation.definition.block, meta.template.expression#f091a0
storage, storage.type#3271aebold
entity.name.type, entity.other.inherited-class, support.type, support.class#cb523ebold
entity.name.function, punctuation.decorator#84a729
variable.parameter#a6559ditalic
entity.name.tag#f091a0
entity.other.attribute-name#b7d332
support.function#4a8f8f
support.constant#3271ae
support.other.variable
invalid.illegal#828282
invalid.deprecated#828282
meta.object-literal.key, support.type.property-name.json, entity.name.tag.yaml#84769b
constant.character.entity.html#84769b
string.quoted.double.html#598867
entity.name.tag.css, meta.property-name.css, support.type.property-name, support.type.vendored.property-name#455a64
meta.selector.css, source.css entity.other.attribute-name#84769b
support.constant.property-value.css, support.constant.property-value.scss#598867
entity.name.tag.css#57749b
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css#c4626c
source.css keyword.other.unit#598867
support.constant.media.css#598867
variable.language.special.self.python#c99e00
markup.heading.markdown, markup.bold.markdownbold
markup.italic.markdownitalic
meta.link.inline.markdown, string.other.link.title.markdown#57749bunderline
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#8d9baa
Ever Green Light Theme by Reyn5&Teens7 - VS Code Theme