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#363636
  • activityBarBadge.background#8ab4f8
  • banner.background#1967d2
  • banner.foreground#ffffff
  • banner.iconForeground#ffffff
  • commentsView.unresolvedIcon#fdd663
  • diffEditor.insertedTextBackground#00ff0026
  • dropdown.background#303436
  • dropdown.border#777777
  • dropdown.foreground#acb4be
  • editor.background#1c1d21
  • editor.foreground#b5bcc5
  • editor.lineHighlightBackground#ffffff1a
  • editor.selectionHighlightBackground#4a34d080
  • editorCommentsWidget.unresolvedBorder#fdd663
  • editorGroupHeader.tabsBackground#1c1d21
  • editorGutter.background#2a2a2b
  • editorGutter.commentUnresolvedGlyphForeground#fdd663
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • editorLineNumber.activeForeground#858585
  • editorLineNumber.foreground#858585
  • editorOverviewRuler.commentUnresolvedForeground#fdd663
  • focusBorder#8ab4f8
  • input.background#303436
  • input.border#777777
  • input.foreground#acb4be
  • input.placeholderForeground#a6a6a6
  • list.activeSelectionBackground#3a4659
  • list.activeSelectionForeground#acb4be
  • list.dropBackground#383b3d
  • list.focusBackground#3a4659
  • list.inactiveSelectionForeground#acb4be
  • menu.background#303436
  • menu.foreground#acb4be
  • panel.background#1c1d21
  • sideBar.background#2a2a2b
  • sideBar.border#cccccc33
  • sideBar.foreground#acb4be
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#cccccc33
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#363636
  • statusBarItem.remoteBackground#16825d
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBorderTop#777777
  • tab.border#777777
  • tab.inactiveBackground#2a2a2b
  • tab.lastPinnedBorder#777777
  • textLink.foreground#8ab4f8
  • titleBar.activeBackground#363636
  • titleBar.inactiveBackground#363636

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation, meta.brace, meta.body.function.definition, meta.template.expression#B5BCC5
comment, punctuation.definition.comment#8C9292
#89B2CD
#BD8C65
#BDB265
keyword, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike, meta.var storage.type, meta.interface storage.type, meta.namespace storage.type, meta.type storage.type, variable.language, keyword.control, keyword.control punctuation.definition, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, constant.character, entity.name.operator, constant.language.import-export-all, storage.modifier, storage.type.class, storage.type.function, storage.type.modifier, keyword.operator.noexcept, storage.type.namespace.definition, storage.type.enum, storage.type.struct, storage.type.template, storage.type.function.lambda, meta.method.declaration meta.var.expr storage.type, support.constant.color#D8884B
constant.language, support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, constant.other punctuation.definition#CF7EA9
meta.preprocessor.numeric, constant.numeric, constant.language.unit, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent, keyword.other.unit#79A9C4
meta.method.declaration storage.type, meta.definition variable, meta.definition variable.object.property, keyword.control.at-rule, keyword.control.at-rule punctuation.definition, variable.other.readwrite.alias, meta.definition.variable, meta.definition.function, meta.function, entity.name.variable, meta.definition entity.name.function, meta.method.identifier entity.name.function, meta.function entity.name.function, meta.class entity.name.type.class, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal, constant.other.enum, meta.head.namespace entity.name.namespace, meta.preprocessor, entity.name.function.preprocessor, meta.declaration.type entity.name.type, entity.alias.import, source.go entity.name.function, meta.at-rule.mixing entity.name.function, meta.method.declaration variable, meta.object-literal.key#75B3DB
entity.name.type, support.type, storage.type, meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#EEDE7B
meta.class entity.name.type.class, meta.interface entity.name.type.interface, meta.enum entity.name.type.enum, meta.type entity.name.type.alias, meta.namespace entity.name.type.module#EEDE7B
meta.function entity.name.function.call, meta.function-call entity.name.function, meta.function-call, meta.function-call.arguments, meta.method-call entity.name.function, meta.method-call, meta.method-call.arguments, variable.parameter.function-call, meta.preprocessor.conditional, source.go support.function, source.css meta.function.variable#B5BCC5
variable, support.variable, entity.name.type.module, constant.other, storage.modifier.import, storage.modifier.package#B5BCC5
variable.parameter, variable.scss, markup.inline.raw, markup.fenced_code.block, source.css variable.argument#AAC6E3
entity.name.label, entity.other.attribute-name.pseudo-class#EEDE7B
variable.object.property, variable.other.object.property, variable.other.constant.property, support.type.property-name, support.type.map#B5BCC5
string, string.tag, string.value, string.regexp, string.template, string.other.link.description.title, meta.embedded.assembly, meta.preprocessor.string, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, constant.character.format, punctuation.definition.string, constant.character.escape#97C67B
keyword.operator, storage.modifier.pointer, storage.modifier.reference, storage.type.function.arrow#ACB4BE
entity.name.function.decorator, variable.parameter.function-call, entity.name.variable.parameter, storage.type.annotation, punctuation.definition.decorator, punctuation.definition.annotation, support.type.vendored.property-name, support.type.vendored.property-value#9DBED9
meta.qualified_type entity.name, meta.qualified_type, entity.name.scope-resolution, entity.other.attribute-name.class, entity.other.attribute-name.class.mixin, entity.other.attribute-name.parent-selector, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.id#97C67B
support.function.builtin, meta.function-call support.type, punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown#D8884B
#24C2C7
entity.name.tag, entity.other.attribute-name, punctuation.definition.tag, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#D8884B
#BDBDBD
meta.separator#FFC0CB
meta.link punctuation.definition.link, string.other.link#F4C20B
#BDBDBD
invalid, meta.property-name.css#F28B82
header, markup.heading, punctuation.definition.heading, punctuation.definition.heading punctuation, punctuation.definition.heading constant.character.escape, meta.diff.header#40A0D0
strong, markup.boldbold
emphasis, markup.italicitalic
markup.underlineunderline
markup.underline.link#97C67Bunderline
markup.inserted#229922
markup.deleted#E98686
markup.changed#CA61FF
constant.regexp#97C67B
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#97C67B
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#97C67B
keyword.operator.or.regexp, keyword.control.anchor.regexp#97C67B
keyword.operator.quantifier.regexp#97C67B
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
Scrumpy Dark by Ben Nooner - VS Code Theme