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#1A1A1A
  • activityBar.border#2C2C2C
  • activityBar.foreground#888888
  • activityBar.inactiveForeground#7A7A7A
  • activityBarBadge.background#0075DE
  • activityBarBadge.foreground#FFFFFF
  • badge.background#0075DE
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#E8E9EB
  • breadcrumb.background#1A1A1A
  • breadcrumb.focusForeground#C0C0C0
  • breadcrumb.foreground#8A8A8A
  • breadcrumbPicker.background#222222
  • button.background#0075DE
  • button.foreground#FFFFFF
  • button.hoverBackground#005BB5
  • button.secondaryBackground#222222
  • button.secondaryForeground#C0C0C0
  • button.secondaryHoverBackground#222222
  • contrastBorder#2C2C2C
  • descriptionForeground#8A8A8A
  • diffEditor.insertedLineBackground#30D15810
  • diffEditor.insertedTextBackground#30D15818
  • diffEditor.removedLineBackground#FF375F10
  • diffEditor.removedTextBackground#FF375F18
  • disabledForeground#777777
  • dropdown.background#222222
  • dropdown.border#2C2C2C
  • dropdown.foreground#C0C0C0
  • editor.background#121212
  • editor.findMatchBackground#D4890040
  • editor.findMatchHighlightBackground#D4890022
  • editor.foreground#C0C0C0
  • editor.inactiveSelectionBackground#0075DE1A
  • editor.lineHighlightBackground#181818
  • editor.lineHighlightBorder#1A1A1A
  • editor.selectionBackground#0075DE33
  • editor.selectionHighlightBackground#0075DE18
  • editorBracketMatch.background#222222
  • editorBracketMatch.border#2C2C2C
  • editorCursor.background#1A1A1A
  • editorCursor.foreground#E8E9EB
  • editorGroupHeader.tabsBackground#1A1A1A
  • editorGroupHeader.tabsBorder#2C2C2C
  • editorHoverWidget.background#222222
  • editorHoverWidget.border#2C2C2C
  • editorIndentGuide.activeBackground1#2E2E2E
  • editorIndentGuide.background1#1A1A1A
  • editorLineNumber.activeForeground#7A7A7A
  • editorLineNumber.foreground#555555
  • editorOverviewRuler.border#2C2C2C
  • editorRuler.foreground#2C2C2C
  • editorSuggestWidget.background#222222
  • editorSuggestWidget.border#2C2C2C
  • editorSuggestWidget.foreground#C0C0C0
  • editorSuggestWidget.highlightForeground#0075DE
  • editorSuggestWidget.selectedBackground#222222
  • editorWhitespace.foreground#2C2C2C
  • editorWidget.background#222222
  • editorWidget.border#2C2C2C
  • errorForeground#FF375F
  • focusBorder#0075DE
  • foreground#C0C0C0
  • gitDecoration.conflictingResourceForeground#FF9F0A
  • gitDecoration.deletedResourceForeground#FF375F
  • gitDecoration.ignoredResourceForeground#2C2C2C
  • gitDecoration.modifiedResourceForeground#D4A520
  • gitDecoration.untrackedResourceForeground#30D158
  • input.background#222222
  • input.border#2C2C2C
  • input.foreground#E8E9EB
  • input.placeholderForeground#8A8A8A
  • inputOption.activeBackground#0075DE22
  • inputOption.activeBorder#0075DE
  • list.activeSelectionBackground#222222
  • list.activeSelectionForeground#E8E9EB
  • list.focusBackground#222222
  • list.focusForeground#E8E9EB
  • list.highlightForeground#0075DE
  • list.hoverBackground#222222
  • list.hoverForeground#C0C0C0
  • list.inactiveSelectionBackground#1A1A1A
  • list.inactiveSelectionForeground#B8B8B8
  • menu.background#222222
  • menu.border#2C2C2C
  • menu.foreground#C0C0C0
  • menu.selectionBackground#0075DE
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#2C2C2C
  • notificationCenterHeader.background#222222
  • notificationLink.foreground#0075DE
  • notifications.background#222222
  • notifications.border#2C2C2C
  • panel.background#1A1A1A
  • panel.border#2C2C2C
  • panelTitle.activeBorder#0075DE
  • panelTitle.activeForeground#E8E9EB
  • panelTitle.inactiveForeground#8A8A8A
  • peekView.border#2C2C2C
  • peekViewEditor.background#1A1A1A
  • peekViewEditor.matchHighlightBackground#D4890030
  • peekViewResult.background#222222
  • peekViewResult.matchHighlightBackground#D4890025
  • peekViewResult.selectionBackground#222222
  • peekViewTitle.background#222222
  • peekViewTitleDescription.foreground#555555
  • peekViewTitleLabel.foreground#E8E9EB
  • progressBar.background#0075DE
  • quickInput.background#222222
  • quickInput.foreground#C0C0C0
  • quickInputList.focusBackground#222222
  • quickInputTitle.background#1A1A1A
  • scrollbar.shadow#00000055
  • scrollbarSlider.activeBackground#383838
  • scrollbarSlider.background#2C2C2C
  • scrollbarSlider.hoverBackground#2E2E2E
  • selection.background#0075DE33
  • settings.checkboxBackground#222222
  • settings.checkboxBorder#2C2C2C
  • settings.dropdownBackground#222222
  • settings.dropdownBorder#2C2C2C
  • settings.headerForeground#E8E9EB
  • settings.modifiedItemIndicator#0075DE
  • settings.numberInputBackground#222222
  • settings.numberInputBorder#2C2C2C
  • settings.textInputBackground#222222
  • settings.textInputBorder#2C2C2C
  • sideBar.background#1A1A1A
  • sideBar.border#2C2C2C
  • sideBar.emptyBackground#1A1A1A
  • sideBar.foreground#C0C0C0
  • sideBarSectionHeader.background#1A1A1A
  • sideBarSectionHeader.border#2C2C2C
  • sideBarSectionHeader.foreground#8A8A8A
  • sideBarTitle.foreground#8A8A8A
  • statusBar.background#1A1A1A
  • statusBar.border#2C2C2C
  • statusBar.debuggingBackground#0075DE
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#8A8A8A
  • statusBar.noFolderBackground#1A1A1A
  • tab.activeBackground#1A1A1A
  • tab.activeBorder#0075DE
  • tab.activeForeground#E8E9EB
  • tab.border#2C2C2C
  • tab.hoverBackground#222222
  • tab.inactiveBackground#1A1A1A
  • tab.inactiveForeground#8A8A8A
  • tab.unfocusedActiveBackground#1A1A1A
  • tab.unfocusedActiveForeground#A0A0A0
  • terminal.ansiBlack#1A1A1A
  • terminal.ansiBlue#0075DE
  • terminal.ansiBrightBlack#444444
  • terminal.ansiBrightBlue#3399FF
  • terminal.ansiBrightCyan#64D2FF
  • terminal.ansiBrightGreen#30D158
  • terminal.ansiBrightMagenta#FF9F0A
  • terminal.ansiBrightRed#FF6B81
  • terminal.ansiBrightWhite#E8E9EB
  • terminal.ansiBrightYellow#FFD60A
  • terminal.ansiCyan#32ADE6
  • terminal.ansiGreen#30D158
  • terminal.ansiMagenta#FF6B35
  • terminal.ansiRed#FF375F
  • terminal.ansiWhite#C0C0C0
  • terminal.ansiYellow#D4A520
  • terminal.background#1A1A1A
  • terminal.border#2C2C2C
  • terminal.foreground#C0C0C0
  • titleBar.activeBackground#1A1A1A
  • titleBar.activeForeground#C0C0C0
  • titleBar.border#2C2C2C
  • titleBar.inactiveBackground#1A1A1A
  • titleBar.inactiveForeground#8A8A8A
  • widget.shadow#00000077
  • window.activeBorder#2C2C2C
  • window.inactiveBorder#2C2C2C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6B6B6Bitalic
invalid, invalid.illegal#FF375F
keyword, storage.type, storage.modifier, keyword.control, keyword.control.flow, keyword.other.template, keyword.other.substitution#FF6B6B
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment, keyword.operator.new, keyword.operator.delete#C0C0C0
punctuation, punctuation.separator.inheritance.php, punctuation.section.embedded#666666
meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.begin.jsx, punctuation.definition.tag.end.jsx#777777
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, entity.name.method.js, meta.class-method.js entity.name.function.js, variable.function.constructor#64B5F6
string, constant.other.symbol, constant.other.key, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, string.other.link#CE8C6A
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit#f77462
constant.language#FF9F0A
entity.name, support.class, support.type, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types, entity.name.type, entity.name.class, markup.changed.git_gutter#E8A857
variable, string constant.other.placeholder, meta.block variable.other, support.other.variable, entity.name.module.js, variable.import.parameter.js, variable.other.class.js#C0C0C0
variable.parameter#A8A8A8
variable.language#FF6B6B
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FF6B6B
text.html, text.html.basic, text.html.derivative, meta.jsx.children, meta.tsx.children#C0C0C0
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#f77462
support.type.property-name, source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, source.js support.type.property-name, source.ts support.type.property-name, source.tsx support.type.property-name, source.jsx support.type.property-name#E8A857
entity.other.attribute-name.class#f77462
source.sass keyword.control#FF6B6B
markup.inserted#30D158
markup.deleted#FF375F
markup.changed#f77462
entity.other.inherited-class, markup.heading#64B5F6
constant.other.color#E8E9EB
string.regexp#FF9F0A
constant.character.escape#FF9F0A
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#FF6B6B
source.js constant.other.object.key.js string.unquoted.label.js#C0C0C0
meta.object-literal.key, meta.object-literal.key string, variable.other.object.property, entity.name.label, meta.objectliteral meta.object.member meta.object-literal.key#f77462
source.json meta.structure.dictionary.json support.type.property-name.json#FF6B6B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#64B5F6
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E8A857
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f77462
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#CE8C6A
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF6B6B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#64B5F6
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E8A857
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f77462
text.html.markdown, punctuation.definition.list_item.markdown#8A8A8A
text.html.markdown markup.inline.raw.markdown#CE8C6A
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#6B6B6B
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, punctuation.definition.heading.markdown#64B5F6bold
markup.italic#888888italic
markup.bold, markup.bold string#C0C0C0bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#C0C0C0bold italic
markup.underline#888888underline
markup.quote punctuation.definition.blockquote.markdown#6B6B6B
markup.quote#6B6B6B
string.other.link.title.markdown#64B5F6
string.other.link.description.title.markdown#E8A857
constant.other.reference.link.markdown#CE8C6A
markup.raw.block#CE8C6A
markup.raw.block.fenced.markdown#8A8A8A
punctuation.definition.fenced.markdown#6B6B6B
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#8A8A8A
variable.language.fenced.markdown#E8A857
meta.separator#6B6B6Bbold
markup.table#8A8A8A
Unsafe Dark by Unsafezero - VS Code Theme