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.activeBorder#262b31
  • activityBar.background#262b31
  • activityBar.border#262b31
  • activityBar.foreground#2188ff
  • activityBar.inactiveForeground#444d57
  • activityBarBadge.background#005cc5
  • activityBarBadge.foreground#d1d5da
  • badge.background#005cc5
  • badge.foreground#d1d5da
  • breadcrumb.activeSelectionForeground#d1d5da
  • breadcrumb.background#262b31
  • breadcrumb.focusForeground#868c92
  • breadcrumb.foreground#6a737d
  • breadcrumbPicker.background#000
  • button.background#2188ff
  • button.foreground#000
  • button.hoverBackground#3191ff
  • button.secondaryBackground#929aa3
  • button.secondaryForeground#2f363d
  • button.secondaryHoverBackground#a2a9b1
  • checkbox.background#1f2329
  • checkbox.border#6a737d
  • debugToolBar.background#1f2329
  • debugToolBar.border#6a737d
  • descriptionForeground#e1e4e8
  • diffEditor.insertedTextBackground#34d05813
  • diffEditor.removedTextBackground#d73a4a15
  • dropdown.background#1f2329
  • dropdown.border#6a737d
  • dropdown.foreground#e1e4e8
  • dropdown.listBackground#262b31
  • editor.background#1f2329
  • editor.findMatchBackground#d9ff0000
  • editor.findMatchBorder#ff27f4
  • editor.findMatchHighlightBackground#ff27f43f
  • editor.focusedStackFrameHighlightBackground#28a74525
  • editor.foldBackground#ffffff0c
  • editor.foreground#e1e4e8
  • editor.inactiveSelectionBackground#0365d652
  • editor.lineHighlightBackground#2189ff18
  • editor.selectionBackground#0365d652
  • editor.selectionHighlightBackground#0365d600
  • editor.selectionHighlightBorder#0365d6
  • editor.stackFrameHighlightBackground#ffd33d33
  • editor.wordHighlightBackground#34d05800
  • editor.wordHighlightBorder#00a33f
  • editor.wordHighlightStrongBackground#34d05800
  • editor.wordHighlightStrongBorder#00a33f
  • editorBracketMatch.background#00c3ff5e
  • editorBracketMatch.border#00c3ff00
  • editorCursor.foreground#a7c9f0
  • editorError.foreground#ff5263
  • editorGroup.border#2f363d
  • editorGroupHeader.tabsBackground#2f363d
  • editorGroupHeader.tabsBorder#1f2329
  • editorGutter.addedBackground#28a745
  • editorGutter.background#1f2329
  • editorGutter.deletedBackground#d73a49
  • editorGutter.foldingControlForeground#6a737d
  • editorGutter.modifiedBackground#2188ff
  • editorIndentGuide.activeBackground1#6a737d
  • editorIndentGuide.activeBackground2#6a737d
  • editorIndentGuide.activeBackground3#6a737d
  • editorIndentGuide.activeBackground4#6a737d
  • editorIndentGuide.activeBackground5#6a737d
  • editorIndentGuide.activeBackground6#6a737d
  • editorIndentGuide.background1#6a737d23
  • editorIndentGuide.background2#6a737d23
  • editorIndentGuide.background3#6a737d23
  • editorIndentGuide.background4#6a737d23
  • editorIndentGuide.background5#6a737d23
  • editorIndentGuide.background6#6a737d23
  • editorInfo.foreground#5faaff
  • editorLineNumber.activeForeground#fafbfc
  • editorLineNumber.foreground#fafbfc4d
  • editorOverviewRuler.background#262b31
  • editorOverviewRuler.border#2f363d
  • editorOverviewRuler.findMatchForeground#ff27f4b6
  • editorRuler.foreground#2f363d65
  • editorStickyScroll.background#1f2329
  • editorStickyScroll.border#6a737d
  • editorStickyScroll.shadow#1f2329
  • editorWarning.foreground#ca9400
  • editorWhitespace.foreground#38414b
  • editorWidget.background#2f363d
  • editorWidget.border#1f2329
  • editorWidget.foreground#a2a9b1
  • editorWidget.resizeBorder#6a737d
  • errorForeground#cb2431
  • focusBorder#2188ff
  • foreground#d1d5da
  • gitDecoration.addedResourceForeground#28a745
  • gitDecoration.conflictingResourceForeground#e36209
  • gitDecoration.deletedResourceForeground#ff5263
  • gitDecoration.ignoredResourceForeground#959da5
  • gitDecoration.modifiedResourceForeground#5faaff
  • gitDecoration.renamedResourceForeground#5faaff
  • gitDecoration.stageDeletedResourceForeground#ff5061
  • gitDecoration.stageModifiedResourceForeground#5faaff
  • gitDecoration.submoduleResourceForeground#959da5
  • gitDecoration.untrackedResourceForeground#28a745
  • input.background#1f2329
  • input.border#6a737d
  • input.foreground#e1e4e8
  • input.placeholderForeground#6a737d
  • list.activeSelectionBackground#262b31
  • list.activeSelectionForeground#ebf0f4
  • list.dropBackground#262b31
  • list.dropBetweenBackground#262b31
  • list.errorForeground#ff5263
  • list.focusAndSelectionOutline#6a737d
  • list.focusBackground#262b31
  • list.hoverBackground#262b31
  • list.hoverForeground#ebf0f4
  • list.inactiveFocusBackground#262b31
  • list.inactiveSelectionBackground#262b31
  • list.inactiveSelectionForeground#ebf0f4
  • list.warningForeground#fab700
  • minimap.background#1f2329
  • minimap.findMatchHighlight#ff27f4b6
  • minimap.foregroundOpacity#0000008a
  • minimap.selectionHighlight#0365d652
  • notificationCenterHeader.background#1f2329
  • notificationCenterHeader.foreground#6a737d
  • notifications.background#1f2329
  • notifications.border#6a737d
  • notifications.foreground#d1d5da
  • notificationsErrorIcon.foreground#d73a49
  • notificationsInfoIcon.foreground#2188ff
  • notificationsWarningIcon.foreground#e36209
  • notificationToast.border#6a737d
  • panel.background#2f363d
  • panel.border#262b31
  • panelInput.border#262b31
  • panelSectionHeader.background#262b31
  • panelSectionHeader.border#262b31
  • panelSectionHeader.foreground#868c92
  • panelTitle.activeBorder#6a737d
  • panelTitle.activeForeground#868c92
  • panelTitle.inactiveForeground#6a737d
  • pickerGroup.border#262b31
  • pickerGroup.foreground#d1d5da
  • progressBar.background#2188ff
  • quickInput.background#2f363d
  • quickInput.foreground#e1e4e8
  • scmGraph.historyItemBaseRefColor#54ff62
  • scmGraph.historyItemRefColor#5faaff
  • scmGraph.historyItemRemoteRefColor#b868ff
  • scrollbar.shadow#6a737d33
  • scrollbarSlider.activeBackground#959da588
  • scrollbarSlider.background#959da533
  • scrollbarSlider.hoverBackground#959da544
  • settings.headerForeground#ebf0f4
  • settings.modifiedItemIndicator#005cc5
  • sideBar.background#2f363d
  • sideBar.border#262b31
  • sideBar.foreground#a2a9b1
  • sideBarSectionHeader.background#2f363d
  • sideBarSectionHeader.border#262b31
  • sideBarSectionHeader.foreground#868c92
  • sideBarTitle.foreground#6a737d
  • statusBar.background#2f363d
  • statusBar.border#262b31
  • statusBar.debuggingBackground#005cc5
  • statusBar.debuggingForeground#ffffff88
  • statusBar.foreground#a2a9b1
  • statusBar.noFolderBackground#2f363d
  • statusBarItem.hoverBackground#3a434b
  • statusBarItem.prominentBackground#e8eaed
  • statusBarItem.prominentHoverBackground#3a434b
  • statusBarItem.remoteBackground#005cc5
  • statusBarItem.remoteForeground#e8eaed
  • tab.activeBackground#1f2329
  • tab.activeBorder#ffffff00
  • tab.activeBorderTop#1f2329
  • tab.activeForeground#d7d7d7
  • tab.border#1f2329
  • tab.hoverBackground#262b31
  • tab.inactiveBackground#2f363d
  • tab.inactiveForeground#a2a9b1
  • tab.unfocusedActiveBackground#1f2329
  • tab.unfocusedActiveBorder#ffffff00
  • tab.unfocusedActiveBorderTop#1f2329
  • tab.unfocusedActiveForeground#d7d7d7
  • tab.unfocusedHoverBackground#262b31
  • tab.unfocusedInactiveBackground#2f363d
  • tab.unfocusedInactiveForeground#a2a9b1
  • terminal.foreground#d1d5da
  • terminal.tab.activeBorder#6a737d
  • terminalCursor.background#d1d5da
  • terminalCursor.foreground#005cc5
  • textBlockQuote.background#2f363d
  • textBlockQuote.border#262b31
  • textCodeBlock.background#2f363d
  • textLink.activeForeground#7bb9ff
  • textLink.foreground#5faaff
  • textPreformat.foreground#e1e4e8
  • textSeparator.foreground#d1d5da
  • titleBar.activeBackground#2f363d
  • titleBar.activeForeground#6a737d
  • titleBar.border#262b31
  • titleBar.inactiveBackground#2f363d
  • titleBar.inactiveForeground#6a737d
  • tree.inactiveIndentGuidesStroke#262b31
  • tree.indentGuidesStroke#6a737d
  • welcomePage.background#1e2124
  • welcomePage.progress.background#262b31
  • welcomePage.progress.foreground#2188ff
  • welcomePage.tileBackground#718ca8
  • welcomePage.tileBorder#718ca8
  • welcomePage.tileHoverBackground#839fc0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#8b949e—
constant.other.placeholder, constant.character#ff7b72—
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#79c0ff—
entity.name, meta.export.default, meta.definition.variable#ffa657—
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#e6edf3—
entity.name.function#d2a8ff—
entity.name.tag, support.class.component#7ee787—
keyword#ff7b72—
storage, storage.type#ff7b72—
storage.modifier.package, storage.modifier.import, storage.type.java#e6edf3—
string, string punctuation.section.embedded source#a5d6ff—
support#79c0ff—
meta.property-name#79c0ff—
variable#ffa657—
variable.other#e6edf3—
invalid.broken#ffa198italic
invalid.deprecated#ffa198italic
invalid.illegal#ffa198italic
invalid.unimplemented#ffa198italic
carriage-return#f0f6fcitalic underline
message.error#ffa198—
string variable#79c0ff—
source.regexp, string.regexp#a5d6ff—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#a5d6ff—
string.regexp constant.character.escape#7ee787bold
support.constant#79c0ff—
support.variable#79c0ff—
support.type.property-name.json#7ee787—
meta.module-reference#79c0ff—
punctuation.definition.list.begin.markdown#ffa657—
markup.heading, markup.heading entity.name#79c0ffbold
markup.quote#7ee787—
markup.italic#e6edf3italic
markup.bold#e6edf3bold
markup.underline—underline
markup.strikethrough—strikethrough
markup.inline.raw#79c0ff—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#ffa198—
punctuation.section.embedded#ff7b72—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#7ee787—
markup.changed, punctuation.definition.changed#ffa657—
markup.ignored, markup.untracked#161b22—
meta.diff.range#d2a8ffbold
meta.diff.header#79c0ff—
meta.separator#79c0ffbold
meta.output#79c0ff—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#8b949e—
brackethighlighter.unmatched#ffa198—
constant.other.reference.link, string.other.link#a5d6ff—
entity.name.tag.reference.scss#ffffff—
keyword.control.at-rule.media.css, keyword.control.at-rule.media.scss#87cfff—
constant.numeric.css, constant.numeric.scss#93e2bd—
meta.function.color.css, meta.function.color.scss, variable.parameter.url.scss, support.function.calc.css, support.function.calc.scss, support.function.url.css, support.function.url.scss, support.function.misc.css, support.function.misc.scss#93dde2bold
variable.parameter.misc.css, variable.parameter.misc.scss, meta.function.variable.css, meta.function.variable.scss, variable.scss, variable.argument.css, variable.argument.scss, variable.parameter.scss#00ecfdbold italic
support.constant.property-value.css, support.constant.property-value.scss, meta.property-value.css, meta.property-value.scss, string.quoted.single.css, string.quoted.single.scss#93e2bditalic
support.constant.vendored.property-value.css#60ad89italic
source.css keyword.other.unit, source.css.scss keyword.other.unit#41b17d—
support.constant.media.css, support.constant.media.scss, keyword.operator.logical.and.media.css, keyword.operator.logical.and.media.scss, keyword.operator.logical.scss#8987ff—
entity.name.tag.css, entity.name.tag.scss#ffb8f9bold
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss, meta.property-name.css, meta.property-name.scss, meta.selector.css, meta.selector.scss#ff78f4—
keyword.operator.combinator.css, keyword.operator.combinator.scss, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.scss#ffb8f9italic
support.type.property-name.media.css, support.type.property-name.media.scss, support.type.property-name.css, support.type.property-name.scss#c8b2fd—
support.type.vendored.property-name.css#9880d1—