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#2d2f32
  • activityBar.border#111111
  • activityBar.foreground#d9d9d9
  • activityBarBadge.background#157dcd
  • activityBarBadge.foreground#ffffff
  • badge.background#157dcd
  • badge.foreground#ffffff
  • button.background#6d6d6d
  • button.foreground#e8e8e8
  • button.hoverBackground#616161
  • descriptionForeground#2e2e2e
  • dropdown.background#ffffff
  • dropdown.border#bfbfbf
  • dropdown.foreground#000000
  • dropdown.listBackground#000000
  • editor.background#1e1e1e
  • editor.findMatchBackground#a8ac94
  • editor.findMatchBorder#ebd12a
  • editor.findMatchHighlightBackground#6e6e6e4d
  • editor.findRangeHighlightBackground#b4b4b44d
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#00000012
  • editor.selectionBackground#646e84
  • editorCursor.background#111111
  • editorCursor.foreground#ffffff
  • editorGroup.border#bfbfbf
  • editorGroup.dropBackground#0369d922
  • editorGroup.emptyBackground#292a30
  • editorGroupHeader.noTabsBackground#373737
  • editorGroupHeader.tabsBackground#373737
  • editorGroupHeader.tabsBorder#373737
  • editorIndentGuide.activeBackground#616161
  • editorIndentGuide.background#2d2f32
  • editorLineNumber.activeForeground#d9d9d9
  • editorLineNumber.foreground#747478
  • editorWhitespace.foreground#bfbfbf
  • errorForeground#ff0000
  • focusBorder#949596
  • foreground#dedcde
  • input.background#2d2f32
  • input.border#111111
  • input.foreground#dedcde
  • input.placeholderForeground#dedcdeaa
  • list.activeSelectionBackground#65676b
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#1e1e1e
  • list.errorForeground#d9d9d9
  • list.focusBackground#6c6d6c
  • list.focusForeground#d9d9d9
  • list.highlightForeground#d9d9d9
  • list.hoverForeground#d9d9d9
  • list.inactiveFocusBackground#2d2f32
  • list.inactiveSelectionBackground#2d2f32
  • list.inactiveSelectionForeground#d9d9d9
  • list.invalidItemForeground#d9d9d9
  • list.warningForeground#d9d9d9
  • notificationCenter.border#111111
  • notificationCenterHeader.background#2d2f32
  • notificationCenterHeader.foreground#ffffff
  • notificationLink.foreground#ffffff
  • notifications.background#2d2f32
  • notifications.border#111111
  • notifications.foreground#ffffff
  • notificationToast.border#111111
  • peekView.border#bfbfbf
  • peekViewEditor.background#2d2f32
  • peekViewEditor.matchHighlightBackground#19354900
  • peekViewEditorGutter.background#1e1e1e
  • peekViewResult.background#111111
  • peekViewResult.fileForeground#aaaaaa
  • peekViewResult.lineForeground#ffffff
  • peekViewResult.matchHighlightBackground#1e1e1e
  • peekViewResult.selectionBackground#2d2f32
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#111111
  • peekViewTitleDescription.foreground#aaaaaa
  • peekViewTitleLabel.foreground#ffffff
  • selection.background#65676b
  • settings.checkboxBackground#2d2f32
  • settings.checkboxBorder#111111
  • settings.checkboxForeground#dedcde
  • settings.dropdownBackground#2d2f32
  • settings.dropdownBorder#111111
  • settings.dropdownForeground#dedcde
  • settings.dropdownListBorder#111111
  • settings.headerForeground#d9d9d9
  • settings.textInputBackground#2d2f32
  • settings.textInputBorder#111111
  • settings.textInputForeground#dedcde
  • sideBar.background#242527
  • sideBar.border#111111
  • sideBar.dropBackground#f9f5f5
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#2d2f32
  • sideBarSectionHeader.foreground#e8e8e8
  • sideBarTitle.foreground#d9d9d9
  • statusBar.background#1e1e1e
  • statusBar.border#1e1e1e
  • statusBar.foreground#d9d9d9
  • statusBar.noFolderBackground#1e1e1e
  • tab.activeBackground#1e1e1e
  • tab.activeBorder#ffffff00
  • tab.activeBorderTop#ffffff00
  • tab.activeForeground#ffffff
  • tab.border#373737
  • tab.inactiveBackground#373737
  • tab.inactiveForeground#ffffff
  • tab.unfocusedActiveBorder#ffffff00
  • tab.unfocusedActiveBorderTop#ffffff00
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0088ff
  • terminal.ansiBrightBlack#2171c7
  • terminal.ansiBrightBlue#0088ff
  • terminal.ansiBrightCyan#74e0e2
  • terminal.ansiBrightGreen#3ad900
  • terminal.ansiBrightMagenta#fb94ff
  • terminal.ansiBrightRed#ff628c
  • terminal.ansiBrightWhite#193549
  • terminal.ansiBrightYellow#ffc600
  • terminal.ansiCyan#80fcff
  • terminal.ansiGreen#3ad900
  • terminal.ansiMagenta#fb94ff
  • terminal.ansiRed#ff628c
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffc600
  • terminal.background#1e1e1e
  • terminal.foreground#ffffff
  • terminalCursor.background#ffffff
  • terminalCursor.foreground#ffffff
  • widget.shadow#373737

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end#e2ad68
source.vue text.html.vue-html expression.embedded.vue punctuation.definition.generic.begin.html#4EC9B0
source.vue text.html.vue-html expression.embedded.vue punctuation.definition.generic.end.html#4EC9B0
comment, punctuation.definition.comment#7f8c98italic
string#ef9b51
constant.numeric#97c1f0
constant.language#97c1f0
constant.character, constant.other#97c1f0
variable#e3f1f3
keyword, keyword.operator.expression, keyword.operator.logical, keyword.operator.comparison, keyword.operator.new#cd83cf
storage#7ae3f7
storage.type#cd83cf
storage.modifier#cd83cf
entity.name, entity.static, entity.name.class.static.function, entity.name.function, entity.name.class, entity.name.type, entity.other.inherited-class#7ae3f7
variable.parameter#e1e1ff
variable.languageitalic
entity.name.tag#7ae3f7
entity.other.attribute-name#cd83cfitalic
support.function#7ae3f7
support.constant#4EC9B0
support.type, support.class#4EC9B0
support.other.variable#000000
invalid#ce4188
invalid.deprecated#ce4188
support.type.property-name.css#e3f1f3italic
text.html.basic#ffffff
text.html.basic entity.name#9effff
meta.toc-list.id.html#ef9b51
text.html.basic entity.other#ffc600italic
meta.tag.metadata.script.html entity.name.tag.html#ffc600
support.variable.dom.js#e1efff
keyword.operator.arithmetic, keyword.operator.arithmetic.js#e1efff
keyword.operator.assignment, keyword.operator.assignment.js#ffffff
punctuation.definition.block.js#ffffff
variable.parameter, variable.parameter.js#cddff3
entity.name.type.js#4EC9B0
punctuation.accessor.js#ffffff
support.variable.property.dom.js#ffffff
punctuation.terminator.statement.js#ffffff
variable.language, entity.name.type.class.js#97c1f0
entity.name.type.module.js#ffffff
meta.object-literal.key.js#e1efff
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js#9effff
source.css entity, source.stylus entity#3ad900
entity.other.attribute-name.id.css#ef9b51
entity.name.tag#7abbf7
source.css support, source.stylus support#a5ff90
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant#97c1f0
source.css keyword.other.unit#b2d4fa
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string#ef9b51
source.css variable, source.stylus variable#4EC9B0
source.css support.constant.property-value.css#97c1f0
support.type.property-name.json#cd83cf
punctuation.definition.dictionary.begin.json#ffffff
source.css entity.other.attribute-name.class.css#ef9b51
source.cas entity.other.attribute-name.pseudo-class.css, source.css entity.other.attribute-name.pseudo-element.css#ffc600
source.css support.type.vendored.property-name.css#e1e1ff
variable.other.normal.shell#94c6ca
markup.underlineunderline
markup.bold#fe8019bold
markup.heading#fe8019bold
markup.italicitalic
markup.inserted#b8bb26
markup.deleted#d65d0e
markup.changed#fe8019
markup.punctuation.quote.beginning#98971a
markup.punctuation.list.beginning#99c6ca
markup.inline.raw#d65d0e
meta.selector#7ec16e
meta.type.name, meta.return.type, meta.return-type, meta.cast, meta.type.annotation, support.type, storage.type.cs, storage.type.java, variable.class#fabd2f
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
Warm Despair by Dark Mode Dev - VS Code Theme