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#1d1d2a
  • activityBar.border#00000020
  • activityBar.foreground#ffffff55
  • activityBar.inactiveForeground#ffffff15
  • activityBarBadge.background#076666
  • activityBarBadge.foreground#ffffffff
  • button.background#ffffff09
  • descriptionForeground#848489
  • dropdown.background#1f1f2c
  • dropdown.border#00000020
  • dropdown.foreground#848489
  • dropdown.listBackground#16161e
  • editor.background#1d1d2a
  • editor.lineHighlightBackground#ffffff05
  • editor.lineHighlightBorder#00000000
  • editorGutter.addedBackground#1b6c49
  • editorGutter.modifiedBackground#2665a4
  • editorHint.foreground#ffffff20
  • editorIndentGuide.activeBackground#ffffff15
  • editorIndentGuide.background#ffffff07
  • editorLineNumber.activeForeground#848489
  • editorLineNumber.foreground#32323b
  • editorRuler.foreground#ffffff07
  • editorSuggestWidget.highlightForeground#ffffffcc
  • editorWidget.background#32323b
  • focusBorder#474c9131
  • foreground#848489
  • input.background#16161e
  • list.activeSelectionBackground#00000020
  • list.activeSelectionForeground#96969a
  • list.focusBackground#ffffff09
  • list.focusForeground#ffffffcc
  • list.hoverBackground#00000020
  • list.hoverForeground#96969a
  • list.inactiveSelectionBackground#00000020
  • menu.selectionBackground#252535
  • menu.selectionForeground#ffffffcc
  • menubar.selectionBackground#16161e
  • panel.border#00000020
  • panelTitle.activeForeground#848489
  • panelTitle.inactiveForeground#5b5b62
  • sideBar.background#1d1d2a
  • sideBar.border#00000020
  • sideBar.foreground#848489
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#ffffff70
  • statusBar.background#1d1d2a
  • statusBar.debuggingBackground#a95c3d
  • statusBar.debuggingForeground#ffffffcc
  • statusBar.foreground#5b5b62
  • statusBar.noFolderForeground#ffffffcc
  • tab.activeForeground#848489
  • titleBar.activeBackground#1d1d2a
  • titleBar.activeForeground#7b7b81
  • titleBar.border#00000020
  • titleBar.inactiveBackground#1d1d2a
  • titleBar.inactiveForeground#46464f
  • tree.indentGuidesStroke#ffffff09
  • widget.shadow#00000010

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment, punctuation.definition.comment#52687citalic
variable.other.readwrite, meta.object-literal.key, support.type.property-name, support.type.object.module, meta.property-list, support.function.racket, entity.name.constant.racket#81b5e6
meta.definition.variable, variable.other, variable, support.variable.object, support.class, entity.name.tag, meta.function#81b5e6bold
variable.parameter, meta.function.stylus#81b5e6italic
keyword.operator, storage.type.function.arrow, string.regexp, constant.language#ebaa8c
constant.numeric, string.quoted, string.template, punctuation.definition.string.template, entity.name.label, constant.other.color.rgb-value, meta.property-value#cab7af
storage.type, keyword.control, storage.modifier, entity.other.attribute-name.tag, entity.name.tag.css, entity.other.attribute-name.pseudo-element, meta.selector, meta.attribute-selector, storage.struct.racket#5aaaaa
meta.function-call, entity.name.function, support.function.construct.output, entity.other.attribute-name.class, entity.other.attribute-name.id, entity.other.attribute-name.pseudo-class, keyword.other.unit#e2cb8c
meta.definition.function, support.variable.property#e2cb8cbold
punctuation, meta.brace, constant.name.attribute.tag.pug, attribute_value, meta.tag.other, string.interpolated#57565e
support.function.process, support.function.console, meta.tag.sgml.doctype, keyword.other.racket#d998dbbold
support.variable.property.process#db6868bold
Bourbacode by JamesBourbaki - VS Code Theme