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.activeBorder#0366d6
  • activityBar.background#24292e
  • activityBar.border#1b1f23
  • activityBar.foreground#e1e4e8
  • activityBar.inactiveForeground#6a737d
  • activityBarBadge.background#0366d6
  • activityBarBadge.foreground#ffffff
  • badge.background#044289
  • badge.foreground#c8e1ff
  • breadcrumb.activeSelectionForeground#d1d5da
  • breadcrumb.focusForeground#e1e4e8
  • breadcrumb.foreground#959da5
  • breadcrumbPicker.background#2b3036
  • button.background#176f2c
  • button.foreground#dcffe4
  • button.hoverBackground#22863a
  • checkbox.background#444d56
  • checkbox.border#1b1f23
  • debugToolBar.background#2b3036
  • descriptionForeground#959da5
  • diffEditor.insertedTextBackground#28a74530
  • diffEditor.removedTextBackground#d73a4930
  • dropdown.background#2f363d
  • dropdown.border#1b1f23
  • dropdown.foreground#e1e4e8
  • dropdown.listBackground#24292e
  • editor.background#24292e
  • editor.findMatchBackground#ffd33d44
  • editor.findMatchHighlightBackground#ffd33d22
  • editor.focusedStackFrameHighlightBackground#bb880088
  • editor.foldBackground#282e33
  • editor.foreground#e1e4e8
  • editor.inactiveSelectionBackground#3392ff22
  • editor.lineHighlightBackground#ffffff0a
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#3392ff44
  • editor.selectionHighlightBackground#17e5e633
  • editor.selectionHighlightBorder#17e5e600
  • editor.stackFrameHighlightBackground#aa770077
  • editor.wordHighlightBackground#17e5e600
  • editor.wordHighlightBorder#17e5e699
  • editor.wordHighlightStrongBackground#17e5e600
  • editor.wordHighlightStrongBorder#17e5e666
  • editorBracketMatch.background#17e5e650
  • editorBracketMatch.border#17e5e600
  • editorCursor.background#8a680b
  • editorCursor.foreground#ffe96e
  • editorGroup.border#1b1f23
  • editorGroupHeader.tabsBackground#1f2428
  • editorGroupHeader.tabsBorder#1b1f23
  • editorGutter.addedBackground#28a745
  • editorGutter.deletedBackground#ea4a5a
  • editorGutter.foldingControlForeground#ffffff33
  • editorGutter.modifiedBackground#2188ff
  • editorIndentGuide.activeBackground1#ffffff15
  • editorIndentGuide.background1#00000000
  • editorLineNumber.activeForeground#ffffff55
  • editorLineNumber.foreground#ffffff0a
  • editorOverviewRuler.border#1b1f23
  • editorPane.background#00000022
  • editorWhitespace.foreground#444d56
  • editorWidget.background#1f2428
  • errorForeground#f97583
  • focusBorder#005cc5
  • foreground#d1d5da
  • gitDecoration.conflictingResourceForeground#eed29b
  • gitDecoration.deletedResourceForeground#c36b74
  • gitDecoration.ignoredResourceForeground#c0c5cea6
  • gitDecoration.modifiedResourceForeground#79b8ff
  • gitDecoration.untrackedResourceForeground#92b179
  • input.background#2f363d
  • input.border#1b1f23
  • input.foreground#e1e4e8
  • input.placeholderForeground#959da5
  • list.activeSelectionBackground#39414a
  • list.activeSelectionForeground#e1e4e8
  • list.focusBackground#044289
  • list.hoverBackground#282e34
  • list.hoverForeground#e1e4e8
  • list.inactiveFocusBackground#1d2d3e
  • list.inactiveSelectionBackground#282e34
  • list.inactiveSelectionForeground#e1e4e8
  • notificationCenterHeader.background#24292e
  • notificationCenterHeader.foreground#959da5
  • notifications.background#2f363d
  • notifications.border#1b1f23
  • notifications.foreground#e1e4e8
  • notificationsErrorIcon.foreground#ea4a5a
  • notificationsInfoIcon.foreground#79b8ff
  • notificationsWarningIcon.foreground#ffab70
  • panel.background#1f2428
  • panel.border#1b1f23
  • panelInput.border#2f363d
  • panelTitle.activeBorder#0366d6
  • panelTitle.activeForeground#e1e4e8
  • panelTitle.inactiveForeground#959da5
  • peekViewEditor.background#1f242888
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#1f2428
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#444d56
  • pickerGroup.foreground#e1e4e8
  • progressBar.background#0366d6
  • quickInput.background#24292e
  • quickInput.foreground#e1e4e8
  • scrollbar.shadow#00000088
  • scrollbarSlider.activeBackground#6a737d88
  • scrollbarSlider.background#6a737d33
  • scrollbarSlider.hoverBackground#6a737d44
  • settings.headerForeground#e1e4e8
  • settings.modifiedItemIndicator#0366d6
  • sideBar.background#1f2428
  • sideBar.border#1b1f23
  • sideBar.foreground#d1d5da
  • sideBarSectionHeader.background#1f2428
  • sideBarSectionHeader.border#1b1f23
  • sideBarSectionHeader.foreground#e1e4e8
  • sideBarTitle.foreground#e1e4e8
  • statusBar.background#1e2428
  • statusBar.border#1b1f23
  • statusBar.debuggingBackground#1e2428
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#d1d5da
  • statusBar.noFolderBackground#1e2428
  • statusBarItem.prominentBackground#282e34
  • tab.activeBackground#24292e
  • tab.activeBorder#24292e
  • tab.activeBorderTop#0366d6
  • tab.activeForeground#e1e4e8
  • tab.border#1b1f23
  • tab.hoverBackground#24292e
  • tab.inactiveBackground#1f2428
  • tab.inactiveForeground#959da5
  • tab.unfocusedActiveBorder#24292e
  • tab.unfocusedActiveBorderTop#1b1f23
  • tab.unfocusedHoverBackground#24292e
  • textBlockQuote.background#24292e
  • textBlockQuote.border#444d56
  • textCodeBlock.background#2f363d
  • textLink.activeForeground#c8e1ff
  • textLink.foreground#79b8ff
  • textPreformat.foreground#d1d5da
  • textSeparator.foreground#586069
  • titleBar.activeBackground#1F2429
  • titleBar.activeForeground#e1e4e8
  • titleBar.border#1b1f23
  • titleBar.inactiveBackground#1f2428
  • titleBar.inactiveForeground#959da5
  • tree.indentGuidesStroke#2f363d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment#676F7Ditalic
string, string.template#79B8FF
string.quoted, string.quoted.double, string.quoted.single, string.quoted.triple#E5C07B
constant.numeric#C678DD
string.embedded.begin, string.embedded.end, punctuation.definition.template-expression, punctuation.section.embedded#C678DD
punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, source.elixir.embedded, punctuation.separator, punctuation.accessor, meta.brace#ABB2BF
constant.language#56B6C2
constant.character, constant.other#56B6C2
variable.language#6cb5e0
keyword, keyword.operator.logical, keyword.operator.constructor, punctuation.definition.decorator.python#6cb5e0
keyword.operator#6cb5e0
storage, storage.type.function.python#6cb5e0
storage.type#84B3FD
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#4DAAF6
variable.other.object, variable.other.constant, variable.other.global, variable.other.readwrite.class, variable.other.readwrite.instance, variable.other.readwrite.batchfile, variable.readwrite, variable.readwrite.other.block#6AD9FE
variable.other, variable.other.property, variable.other.block, source.go, source.python#C2E0F8
entity.other.inherited-class#98C379
storage.modifier.import, storage.modifier.package#61AFEF
entity.name.function, support.function#98C379italic
variable.parameter, entity.name.variable.parameter, parameter.variable#D19A66italic
entity.name.function-call#ABB2BF
function.support.builtin, function.support.core#98C379
entity.name.tag, entity.name.tag.class.js#6cb5e0
entity.name.tag.class, entity.name.tag.id#56B6C2
entity.other.attribute-name#98C379
support.constant#56B6C2
support.type, support.variable#56B6C2
support.dictionary.json#4DAAF6
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#ABB2BF
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-class.less, entity.other.attribute-name.pseudo-class.sass, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-element.sass#56B6C2
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#98C379
variable.css, variable.scss, variable.less, variable.sass#56B6C2
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#E5C07B
unit.css, unit.scss, unit.less, unit.sass#C678DD
function.css, function.scss, function.less, function.sass#56B6C2
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
support.type.property-name.json#4DAAF6
string.detected-link#61AFEF
meta.diff, meta.diff.header#75715E
markup.deleted#6cb5e0
markup.inserted#98C379
markup.changed#E5C07B
constant.numeric.line-number.find-in-files - match#56B6C2A0
entity.name.filename.find-in-files#E5C07B
markup.italic, markup.italic.markdownitalic
punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown#676F7D
punctuation.definition.italic.markdownitalic
markup.underline.link.markdown#61AFEF
markup.bold.markdownbold
markup.heading.markdown#6cb5e0bold
markup.quote.markdown#98C379
meta.separator.markdown#C678DDbold
markup.raw.inline.markdown, markup.raw.block.markdown#56B6C2
punctuation.definition.list_item.markdown#FFFFFFbold
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
Cool Walk by Per Ragnar Edin - VS Code Theme