Skip to main content
Coding Theme

Color themes

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#131313
  • activityBar.foreground#e0e0e0
  • activityBarBadge.background#e0e0e0
  • activityBarBadge.foreground#0f0f0f
  • badge.background#e0e0e0
  • badge.foreground#0f0f0f
  • button.background#e0e0e0
  • button.foreground#0f0f0f
  • button.hoverBackground#e2e2e2
  • descriptionForeground#575757
  • diffEditor.insertedLineBackground#9fdfac15
  • diffEditor.insertedTextBackground#9fdfac15
  • diffEditor.removedLineBackground#df9f9f33
  • diffEditor.removedTextBackground#df9f9f33
  • editor.background#131313
  • editor.findMatchBackground#e0e0e054
  • editor.foreground#e0e0e0
  • editor.hoverHighlightBackground#fafafa26
  • editor.selectionBackground#ffffff1f
  • editor.selectionHighlightBackground#e0e0e026
  • editor.wordHighlightBackground#e0e0e016
  • editor.wordHighlightStrongBackground#e0e0e016
  • editorBracketHighlight.unexpectedBracket.foreground#df9f9f
  • editorCursor.foreground#ffffff
  • editorError.foreground#df9f9f
  • editorGroupHeader.tabsBackground#131313
  • editorGutter.addedBackground#b3b3b3
  • editorGutter.deletedBackground#df9f9f
  • editorGutter.modifiedBackground#b3b3b3
  • editorHoverWidget.background#1a1a1a
  • editorHoverWidget.border#454545
  • editorHoverWidget.foreground#e0e0e0
  • editorInlayHint.background#1a1a1a
  • editorInlayHint.foreground#575757
  • editorLineNumber.activeForeground#9e9e9e
  • editorLineNumber.foreground#3b3b3b
  • editorLink.activeForeground#fafafa
  • editorLink.foreground#c2c2c2
  • editorOverviewRuler.border#131313
  • editorWarning.foreground#dfc59f
  • editorWidget.background#1a1a1a
  • focusBorder#e0e0e0
  • foreground#e0e0e0
  • gitDecoration.conflictingResourceForeground#df9f9f
  • gitDecoration.deletedResourceForeground#df9f9f
  • gitDecoration.ignoredResourceForeground#575757
  • gitDecoration.modifiedResourceForeground#e0e0e0
  • gitDecoration.untrackedResourceForeground#e0e0e0
  • icon.foreground#e0e0e0
  • input.background#1a1a1a
  • input.foreground#e0e0e0
  • inputOption.activeForeground#fafafa
  • list.activeSelectionBackground#ffffff14
  • list.activeSelectionForeground#e0e0e0
  • list.errorForeground#df9f9f
  • list.focusOutline#00000000
  • list.highlightForeground#e0e0e0
  • list.hoverBackground#ffffff0a
  • list.inactiveSelectionBackground#ffffff14
  • list.warningForeground#dfc59f
  • pickerGroup.foreground#e0e0e0
  • quickInput.background#1a1a1a
  • quickInput.foreground#e0e0e0
  • quickInputList.focusBackground#ffffff1f
  • quickInputList.focusForeground#fafafa
  • scrollbarSlider.background#ffffff12
  • scrollbarSlider.hoverBackground#ffffff24
  • selection.background#ffffff1f
  • settings.modifiedItemIndicator#e0e0e0
  • sideBar.background#131313
  • sideBar.foreground#9e9e9e
  • sideBarSectionHeader.background#131313
  • sideBarSectionHeader.foreground#e0e0e0
  • sideBarTitle.foreground#9e9e9e
  • statusBar.background#131313
  • statusBar.debuggingBackground#dfc59f
  • statusBar.debuggingForeground#0f0f0f
  • statusBar.foreground#e0e0e0
  • statusBar.noFolderBackground#131313
  • statusBar.noFolderForeground#e0e0e0
  • statusBarItem.hoverBackground#ffffff0a
  • statusBarItem.hoverForeground#e0e0e0
  • statusBarItem.remoteBackground#e0e0e0
  • statusBarItem.remoteForeground#0f0f0f
  • tab.activeBackground#1a1a1a
  • tab.activeBorder#e0e0e0
  • tab.activeForeground#fafafa
  • tab.border#131313
  • tab.inactiveBackground#131313
  • tab.inactiveForeground#b3b3b3
  • textLink.activeForeground#fafafa
  • textLink.foreground#c2c2c2
  • titleBar.activeBackground#131313
  • titleBar.activeForeground#b3b3b3
  • titleBar.inactiveBackground#131313
  • titleBar.inactiveForeground#9d9d9d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#575757italic
keyword, storage.type, storage.modifier#9e9e9e—
keyword.control#9e9e9e—
entity.name.function, variable.function, support.function, keyword.other.special-method#fafafa—
variable, string constant.other.placeholder#e0e0e0—
variable.parameter#e0e0e0italic
variable.language#9e9e9e—
string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#b3b3b3—
meta.object-literal.key string.quoted.single.ts, meta.object-literal.key string.quoted.double.ts, meta.object-literal.key string.quoted.single.js, meta.object-literal.key string.quoted.double.js, meta.object-literal.key string.quoted.single.tsx, meta.object-literal.key string.quoted.double.tsx, meta.object.member string.quoted.single.ts, meta.object.member string.quoted.double.ts, meta.object.member string.quoted.single.js, meta.object.member string.quoted.double.js, meta.object.member string.quoted.single.tsx, meta.object.member string.quoted.double.tsx, meta.array.literal string.quoted.single.ts, meta.array.literal string.quoted.double.ts, meta.array.literal string.quoted.single.js, meta.array.literal string.quoted.double.js, meta.array.literal string.quoted.single.tsx, meta.array.literal string.quoted.double.tsx, meta.enum.declaration string.quoted.single.ts, meta.enum.declaration string.quoted.double.ts, meta.enum.declaration string.quoted.single.js, meta.enum.declaration string.quoted.double.js, meta.enum.declaration string.quoted.single.tsx, meta.enum.declaration string.quoted.double.tsx#b3b3b3—
string.template.js, string.template.ts#b3b3b3—
meta.tag string.quoted.single.ts, meta.tag string.quoted.double.ts, meta.tag string.quoted.single.js, meta.tag string.quoted.double.js, meta.tag string.quoted.single.tsx, meta.tag string.quoted.double.tsx, meta.attribute string.quoted.single.ts, meta.attribute string.quoted.double.ts, meta.attribute string.quoted.single.js, meta.attribute string.quoted.double.js, meta.attribute string.quoted.single.tsx, meta.attribute string.quoted.double.tsx#b3b3b3—
meta.import string.quoted.single.ts, meta.import string.quoted.double.ts, meta.import string.quoted.single.js, meta.import string.quoted.double.js, meta.import string.quoted.single.tsx, meta.import string.quoted.double.tsx#b3b3b3—
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, constant.language.boolean#b3b3b3—
keyword.operator#9e9e9e—
keyword.operator.logical, keyword.operator.bitwise, keyword.operator.channel, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.decrement, keyword.operator.increment, keyword.operator.relational, keyword.operator.assignment.compound.js, keyword.operator.assignment.compound.ts, keyword.operator.assignment, keyword.operator.spread, keyword.operator.rest, keyword.operator.optional, keyword.operator.expression.typeof, keyword.operator.expression.keyof, storage.type.function.arrow, keyword.operator.type, keyword.operator.as, keyword.control.as, punctuation.accessor.optional#9e9e9e—
entity.name.class#e0e0e0—
entity.name.type, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#e0e0e0—
entity.name.tag, support.class.component#fafafa—
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#9e9e9e—
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#e0e0e0—
entity.other.attribute-name.js, entity.other.attribute-name.ts, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.html, variable.language.super#9e9e9eitalic
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#e0e0e0—
entity.other.attribute-name.class, entity.other.attribute-name.class.css#fafafa—
entity.other.attribute-name.id#fafafa—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#9e9e9e—
support.function#9e9e9e—
constant.other.symbol#9e9e9e—
support.type.object.dom#9e9e9e—
support.type.property-name.json#e0e0e0—
constant.language.json, source.json meta.structure.dictionary.json constant.language.json, source.json meta.structure.array.json constant.language.json#9e9e9e—
markup.heading, markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#ffffff—
markup.bold, markup.bold string#e0e0e0bold
markup.italic#e0e0e0italic
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#e0e0e0bold italic
markup.inline.raw.markdown#b3b3b3—
markup.underline.link, string.other.link.title.markdown, string.other.link.description.title.markdown#c2c2c2underline
meta.function string.quoted.double.ts, meta.function string.quoted.single.ts, meta.function string.quoted.double.js, meta.function string.quoted.single.js, meta.function string.quoted.double.tsx, meta.function string.quoted.single.tsx#b3b3b3—
invalid, invalid.illegal#df9f9f—
string.regexp#9e9e9e—
constant.character.escape#9e9e9e—
Baseline by Dmytro Ulianov - VS Code Theme