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#41454A
  • activityBar.foreground#B9BDC1
  • badge.background#C1255D
  • badge.foreground#E4E7EA
  • breadcrumb.activeSelectionForeground#7F848A
  • breadcrumb.focusForeground#7F848A
  • breadcrumb.foreground#50565B
  • breadcrumbPicker.background#1C1E21
  • button.background#CF2765
  • button.foreground#420D20
  • button.hoverBackground#CF2765
  • debugToolBar.background#25282C
  • diffEditor.insertedTextBackground#3b994a1a
  • diffEditor.removedTextBackground#82193F
  • dropdown.background#1C1E21
  • dropdown.border#33363A
  • dropdown.foreground#969B9F
  • editor.background#15171A
  • editor.foreground#969B9F
  • editor.inactiveSelectionBackground#50565B60
  • editor.lineHighlightBackground#1C1E21
  • editor.selectionBackground#C1255D
  • editor.selectionHighlightBackground#82193F
  • editorCursor.foreground#C1255D
  • editorError.foreground#f27475
  • editorGroup.border#33363A
  • editorGroupHeader.noTabsBackground#15171A
  • editorGroupHeader.tabsBackground#25282C
  • editorGutter.addedBackground#246e30
  • editorGutter.deletedBackground#9d372c
  • editorGutter.modifiedBackground#C1255D
  • editorHint.foreground#CF2765
  • editorInfo.foreground#CF2765
  • editorLineNumber.activeForeground#E4E7EA
  • editorLineNumber.foreground#50565B
  • editorOverviewRuler.addedForeground#246e30
  • editorOverviewRuler.border#15171A
  • editorOverviewRuler.deletedForeground#9d372c
  • editorOverviewRuler.errorForeground#dd5e5e
  • editorOverviewRuler.infoForeground#E68A09
  • editorOverviewRuler.modifiedForeground#C1255D
  • editorOverviewRuler.warningForeground#BF7308
  • editorSuggestWidget.background#15171A
  • editorWarning.foreground#E68A09
  • editorWidget.background#25282C
  • errorForeground#83BED8
  • focusBorder#C1255D
  • foreground#969B9F
  • gitDecoration.addedResourceForeground#52ad5f
  • gitDecoration.conflictingResourceForeground#83BED8
  • gitDecoration.deletedResourceForeground#83BED8
  • gitDecoration.modifiedResourceForeground#CF2765
  • gitDecoration.untrackedResourceForeground#52ad5f
  • input.background#15171A
  • input.border#33363A
  • input.foreground#969B9F
  • input.placeholderForeground#50565B
  • list.activeSelectionBackground#C1255D
  • list.activeSelectionForeground#E4E7EA
  • list.errorForeground#83BED8
  • list.focusBackground#C1255D
  • list.focusForeground#E4E7EA
  • list.highlightForeground#E4E7EA
  • list.hoverBackground#15171A
  • list.inactiveSelectionBackground#50565B
  • list.inactiveSelectionForeground#E4E7EA
  • list.warningForeground#E68A09
  • panel.border#33363A
  • panelTitle.activeBorder#C1255D
  • peekView.border#33363A
  • peekViewEditor.background#33363A
  • peekViewTitle.background#15171A
  • scrollbar.shadow#E4E7EA
  • scrollbarSlider.activeBackground#E4E7EA
  • scrollbarSlider.background#E4E7EA
  • scrollbarSlider.hoverBackground#E4E7EA
  • sideBar.background#1C1E21
  • sideBarSectionHeader.background#33363A
  • sideBarTitle.foreground#E4E7EA
  • statusBar.background#33363A
  • statusBar.debuggingBackground#33363A
  • statusBar.debuggingForeground#969B9F
  • statusBar.foreground#969B9F
  • statusBar.noFolderBackground#33363A
  • statusBar.noFolderForeground#969B9F
  • tab.activeBackground#15171A
  • tab.activeForeground#E4E7EA
  • tab.border#33363A
  • tab.inactiveBackground#25282C
  • tab.inactiveForeground#7F848A
  • terminal.foreground#E4E7EA
  • titleBar.activeBackground#25282C
  • titleBar.activeForeground#B9BDC1
  • titleBar.inactiveBackground#656B71
  • titleBar.inactiveForeground#1C1E21

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, meta.definition.variable.name, support.variable#969B9F
meta.object-literal.key, meta.object-literal.key entity.name.function#969B9F
comment, punctuation.comment, punctuation.definition.comment#50565B
keyword.operator#E4E7EAbold
punctuation, delimiter, bracket, brace, paren, delimiter.tag, punctuation.tag, tag.html, tag.xml, meta.property-value punctuation.separator.key-value, punctuation.definition.metadata.md, string.link.md, meta.brace#7F848A
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js, punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php#E4E7EA
string, meta.property-value.string, support.constant.property-value.string, meta.structure.dictionary.value.json string.quoted.double.json, meta.structure.dictionary.json string.quoted.double.json, meta.preprocessor string#7F848Aitalic
constant.numeric, meta.property-value.numeric, support.constant.property-value.numeric, meta.property-value.color, support.constant.property-value.color, constant.language#E4E7EA
constant.character, constant.other, entity.name.function, entity.name.class, entity.other.inherited-class, entity.other.attribute-name, entity.name, entity.other.attribute-name, entity.other.attribute-name.html, support.type.property-name, entity.name.tag.table, meta.structure.dictionary.json string.quoted.double.json#B9BDC1
keyword, meta.property-value.keyword, support.constant.property-value.keyword, meta.preprocessor.keyword, keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#E4E7EAbold
storage, storage.type, storage.type.ts, storage.type.var.ts, storage.type.js, storage.type.var.js, storage.type.const.ts, storage.type.let.ts, storage.type.let.js, storage.type.const.js, entity.name.tag#E4E7EAbold
meta.ptr, meta.pointer, meta.address, meta.array.cxx
meta.preprocessor#B9BDC1
support.type, support.class, support.function, support.constant#B9BDC1
invalid#83BED8
invalid.deprecated#83BED8
punctuation.definition.heading.md, entity.name.type.md, beginning.punctuation#B9BDC1
markup.heading, entity.name.section#E4E7EAbold
markup.raw, markup.inline.raw, markup.fenced, markup.fenced_code#7F848Aitalic
markup.link, string.other.link.title, string.other.link.description, meta.link.inline, meta.image.inline#B9BDC1
variable.language.makefile, variable.other.makefile#B9BDC1
markup.italicitalic
markup.boldbold
entity.other.attribute-name.class.css#B9BDC1
entity.name.tag.css#E4E7EAbold
meta.property-name.css#B9BDC1
token.info-token#A82052
token.warn-token#FF990A
token.error-token#2BA5D9
token.debug-token#B267E6
Buu by Sammy Fattah - VS Code Theme