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.background#141e1b
  • activityBar.foreground#68b88e
  • activityBar.inactiveForeground#c6dfc8
  • activityBarBadge.background#141e1b
  • activityBarBadge.foreground#68b88e
  • button.background#68b88e99
  • button.foreground#141e1b
  • button.hoverBackground#68b88edd
  • diffEditor.insertedTextBackground#66f0c213
  • dropdown.background#141820
  • editor.background#141e1b
  • editor.foreground#b7d07a
  • editor.lineHighlightBackground#99bbff0a
  • editor.selectionBackground#314a43
  • editor.wordHighlightBackground#343F56
  • editorBracketHighlight.foreground1#20894d
  • editorBracketHighlight.foreground2#579572
  • editorBracketHighlight.foreground3#83cbac
  • editorBracketHighlight.foreground4#57c3c2
  • editorBracketHighlight.foreground5#63bbd0
  • editorBracketHighlight.foreground6#619ac3
  • editorBracketHighlight.unexpectedBracket.foreground#b7d07a
  • editorBracketMatch.background#68b88e33
  • editorCursor.foreground#b7d07a
  • editorGroup.border#68b88e26
  • editorGroupHeader.tabsBackground#141e1b
  • editorIndentGuide.background#68b88e26
  • editorLineNumber.activeForeground#68b88e
  • editorLineNumber.foreground#c6dfc8
  • editorSuggestWidget.background#141e1bdd
  • editorWhitespace.foreground#68b88e26
  • editorWidget.background#141820
  • foreground#68b88e
  • input.background#141e1b
  • input.border#68b88e
  • input.foreground#68b88e
  • input.placeholderForeground#68b88e
  • list.activeSelectionBackground#141e1b
  • list.activeSelectionForeground#c6dfc8
  • list.errorForeground#d11a2d
  • list.focusBackground#141e1b
  • list.focusForeground#c6dfc8
  • list.hoverBackground#141e1b
  • list.hoverForeground#c6dfc8
  • list.inactiveFocusOutline#c6dfc8
  • list.inactiveSelectionBackground#141e1b
  • list.inactiveSelectionForeground#c6dfc8
  • list.warningForeground#fbb957
  • menu.background#141e1b
  • menu.foreground#68b88e
  • menubar.selectionBackground#141e1b
  • menubar.selectionForeground#68b88e
  • panel.background#141e1b
  • panelTitle.activeForeground#68b88e
  • scrollbar.shadow#11141a11
  • scrollbarSlider.activeBackground#ffffff22
  • scrollbarSlider.background#ffffff11
  • scrollbarSlider.hoverBackground#ffffff22
  • sideBar.background#15231b
  • sideBarSectionHeader.background#141e1b
  • sideBarTitle.foreground#c6dfc8
  • statusBar.background#15231b
  • statusBar.foreground#68b88e
  • tab.activeBackground#141e1b
  • tab.activeBorder#68b88e
  • tab.activeForeground#68b88e
  • tab.inactiveBackground#141e1b
  • tab.inactiveForeground#68b88e
  • titleBar.activeBackground#141e1b
  • titleBar.activeForeground#68b88e
  • titleBar.border#141e1b
  • titleBar.inactiveBackground#141e1b
  • titleBar.inactiveForeground#68b88e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#acacacbold
string.quoted, string.template, punctuation.definition.string, punctuation.definition.block, source#d4ffc7b8bold
string.template meta.embedded.line#f3f3f3
variable, entity.name.variable#85EEA7
variable.language, variable.other.object.js#85EEA7
variable.parameter#68d88ebold
storage.type, storage.modifier#12a182italic underline
constant#85EEA7
string.regexp#85EEA7
constant.numeric#b9dec9bold
constant.language#b9dec9
constant.character.escape#b2cf87
entity.name#87d9a2
entity.name.tag#68d88eitalic bold
punctuation.definition.tag#6ab58362
entity.other.attribute-name#8cffd5bb
entity.name.type#77ffa4italic bold
entity.other.inherited-class#b2cf87
entity.name.function, variable.function#d6ffb0italic
keyword#5f7f78italic bold
keyword.control#d6ffc4italic bold
keyword.operator#b9dec9bold
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#12a182italic bold
keyword.other.unit#85EEA7
support#68d88eitalic
support.function#d6ffb0italic underline
support.variable#d6ffb0bold
meta.object-literal.key, support.type.property-name#68d88e
variable.other.property.js#d6ffb0italic
punctuation.separator.key-value#b9dec9bold
punctuation.section.embedded#b2cf87
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#b9dec9
support.type.property-name.css, support.type.vendored.property-name.css#b2cf87
constant.other.color#b9dec9bold
support.constant.font-name#85EEA7
entity.other.attribute-name.id#b9dec9italic bold
entity.other.attribute-name.class#b9dec9italic
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#b2cf87
support.function.misc.css#b9dec9bold
markup.heading, entity.name.section#85EEA7
markup.quote#FF407Bbold
beginning.punctuation.definition.list#85EEA7
markup.underline.link#b2cf87
string.other.link.description#85EEA7
meta.function-call.generic.python#fcfcfc
storage.type.cs#b9dec9bold
entity.name.variable.local.cs#85EEA7
entity.name.variable.field.cs, entity.name.variable.property.cs#85EEA7
source.cpp keyword.operator#b9dec9bold
punctuation.definition.heading.markdown#b9dec9
punctuation.definition.bold.markdown#85EEA7
punctuation.definition.italic.markdown#ffffff7e
markup.bold.markdownbold
markup.italic.markdownitalic
easy_develop by fghk - VS Code Theme