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#f9826c
  • activityBar.background#24292e
  • activityBar.border#1b1f23
  • activityBar.foreground#e1e4e8
  • activityBar.inactiveForeground#6a737d
  • activityBarBadge.background#0366d6
  • activityBarBadge.foreground#fff
  • 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
  • button.secondaryBackground#444d56
  • button.secondaryForeground#fff
  • button.secondaryHoverBackground#586069
  • 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#2b6a3033
  • editor.foldBackground#58606915
  • editor.foreground#e1e4e8
  • editor.inactiveSelectionBackground#2188ff26
  • editor.lineHighlightBackground#2b3036
  • editor.linkedEditingBackground#79b8ff52
  • editor.selectionBackground#2188ff3b
  • editor.selectionHighlightBackground#17E5E633
  • editor.selectionHighlightBorder#17E5E600
  • editor.stackFrameHighlightBackground#C6902625
  • editor.wordHighlightBackground#17E5E600
  • editor.wordHighlightBorder#17E5E699
  • editor.wordHighlightStrongBackground#17E5E600
  • editor.wordHighlightStrongBorder#17E5E666
  • editorBracketHighlight.foreground1#79b8ff
  • editorBracketHighlight.foreground2#f692ce
  • editorBracketHighlight.foreground3#b392f0
  • editorBracketHighlight.foreground4#79b8ff
  • editorBracketHighlight.foreground5#ffab70
  • editorBracketHighlight.foreground6#b392f0
  • editorBracketMatch.background#17E5E650
  • editorBracketMatch.border#17E5E600
  • editorCursor.foreground#c8e1ff
  • editorError.foreground#f97583
  • editorGhostText.background#34d0581a
  • editorGroup.border#1b1f23
  • editorGroupHeader.tabsBackground#1f2428
  • editorGroupHeader.tabsBorder#1b1f23
  • editorGutter.addedBackground#28a745
  • editorGutter.deletedBackground#ea4a5a
  • editorGutter.modifiedBackground#2188ff
  • editorIndentGuide.activeBackground#444d56
  • editorIndentGuide.background#2f363d
  • editorLineNumber.activeForeground#e1e4e8
  • editorLineNumber.foreground#444d56
  • editorOverviewRuler.border#1b1f23
  • editorStickyScroll.background#24292e
  • editorStickyScroll.border#2f363d
  • editorStickyScroll.shadow#24292e
  • editorStickyScrollHover.background#2f363d
  • editorWarning.foreground#79b8ff
  • editorWhitespace.foreground#444d56
  • editorWidget.background#1f2428
  • errorForeground#f97583
  • focusBorder#005cc5
  • foreground#d1d5da
  • gitDecoration.addedResourceForeground#34d058
  • gitDecoration.conflictingResourceForeground#ffab70
  • gitDecoration.deletedResourceForeground#ea4a5a
  • gitDecoration.ignoredResourceForeground#6a737d
  • gitDecoration.modifiedResourceForeground#79b8ff
  • gitDecoration.submoduleResourceForeground#6a737d
  • gitDecoration.untrackedResourceForeground#34d058
  • 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#2f363d
  • notifications.foreground#e1e4e8
  • notificationsErrorIcon.foreground#ea4a5a
  • notificationsInfoIcon.foreground#79b8ff
  • notificationsWarningIcon.foreground#ffab70
  • panel.background#1f2428
  • panel.border#1b1f23
  • panelInput.border#2f363d
  • panelTitle.activeBorder#f9826c
  • panelTitle.activeForeground#e1e4e8
  • panelTitle.inactiveForeground#959da5
  • peekViewEditor.background#1f242888
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#1f2428
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#1b1f23
  • pickerGroup.foreground#e1e4e8
  • progressBar.background#0366d6
  • quickInput.background#24292e
  • quickInput.foreground#e1e4e8
  • scrollbar.shadow#24292e
  • 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
  • sideBarStickyScroll.border#444d56
  • sideBarStickyScroll.shadow#1f2428
  • sideBarTitle.foreground#e1e4e8
  • statusBar.background#24292e
  • statusBar.border#1b1f23
  • statusBar.debuggingBackground#931c06
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#d1d5da
  • statusBar.noFolderBackground#24292e
  • statusBarItem.prominentBackground#282e34
  • statusBarItem.remoteBackground#24292e
  • statusBarItem.remoteForeground#d1d5da
  • tab.activeBackground#24292e
  • tab.activeBorder#24292e
  • tab.activeBorderTop#f9826c
  • tab.activeForeground#e1e4e8
  • tab.border#1b1f23
  • tab.hoverBackground#24292e
  • tab.inactiveBackground#1f2428
  • tab.inactiveForeground#959da5
  • tab.unfocusedActiveBorder#24292e
  • tab.unfocusedActiveBorderTop#1b1f23
  • tab.unfocusedHoverBackground#24292e
  • terminal.ansiBlack#586069
  • terminal.ansiBlue#2188ff
  • terminal.ansiBrightBlack#959da5
  • terminal.ansiBrightBlue#79b8ff
  • terminal.ansiBrightCyan#56d4dd
  • terminal.ansiBrightGreen#85e89d
  • terminal.ansiBrightMagenta#b392f0
  • terminal.ansiBrightRed#f97583
  • terminal.ansiBrightWhite#fafbfc
  • terminal.ansiBrightYellow#ffea7f
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#34d058
  • terminal.ansiMagenta#b392f0
  • terminal.ansiRed#ea4a5a
  • terminal.ansiWhite#d1d5da
  • terminal.ansiYellow#ffea7f
  • terminal.foreground#d1d5da
  • terminal.tab.activeBorder#f9826c
  • terminalCursor.background#586069
  • terminalCursor.foreground#79b8ff
  • textBlockQuote.background#24292e
  • textBlockQuote.border#444d56
  • textCodeBlock.background#2f363d
  • textLink.activeForeground#c8e1ff
  • textLink.foreground#79b8ff
  • textPreformat.foreground#d1d5da
  • textSeparator.foreground#586069
  • titleBar.activeBackground#24292e
  • titleBar.activeForeground#e1e4e8
  • titleBar.border#1b1f23
  • titleBar.inactiveBackground#1f2428
  • titleBar.inactiveForeground#959da5
  • tree.indentGuidesStroke#2f363d
  • welcomePage.buttonBackground#2f363d
  • welcomePage.buttonHoverBackground#444d56
  • widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#6a737ditalic
entity.name, meta.export.default, meta.definition.variable#ffab70
constant, entity.name.constant, meta.definition.variable, variable.other.constant, variable.other.enummember, variable.language, entity#79b8ff
variable.parameter.function#e1e4e8italic
entity.name.type.instance.jsdoc, variable.other.jsdocregular
entity.name.type.instance.jsdoc#79b8ff
variable.other#e1e4e8
meta.decorator, entity.name.decorator#b392f0
entity.name.tag, support.type.property-name.json#85e89d
entity.name.function, support.function, entity.name.function.templated, entity.name.function.member.static, entity.name.command.shell#b392f0
entity.other.inherited-class#ffab70
entity.other.attribute-name#b392f0
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.css, entity.other.attribute-name.css#85e89d
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css, entity.other.attribute-name.pseudo-element.css#b392f0italic
meta.selector.css#b392f0
keyword#f97583
storage.js, storage.ts, storage.type, keyword.type.go, keyword.control, source.cpp keyword.other, source.rust keyword.other, keyword.proto#f97583italic
storage.type.function.arrow.ts, storage.type.function.arrow.js#f97583regular
keyword.control.flow.block-scalar.literal.yamlregular
storage.modifier#f97583italic
storage.modifier.package, storage.modifier.import, storage.type.java#e1e4e8
string, punctuation.definition.string, string punctuation.section.embedded source#9ecbff
punctuation.definition.string, punctuation.definition.string.begin, punctuation.definition.string.end, string.quoted.template punctuation.definition.string.begin, string.quoted.template punctuation.definition.string.end, punctuation.definition.tag, punctuation.section.embedded.end, punctuation.section.embedded.begin, punctuation.definition.typeparameters, punctuation.separator.comma, punctuation.definition.table.inline.toml, punctuation.definition.markdown, punctuation.semi, punctuation.comma, keyword.operator.key-value.rust, punctuation.brackets.angle, punctuation.separator#6a737d
punctuation.definition.heading#6a737dregular
markup.fenced_code.block.markdown#d1d5da
source.json meta.mapping.key string punctuation.definition.string, source.yaml meta.mapping.key string punctuation.definition.string#6a737d
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, source.json meta.mapping.key string.quoted.single.json punctuation.definition.string.begin, source.json meta.mapping.key string.quoted.single.json punctuation.definition.string.end, support.type.property-name.json punctuation.definition.string#6a737d
source.json meta.mapping.key string - punctuation#79b8ff
support#79b8ff
meta.property-name#79b8ff
variable#ffab70
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#79b8ffitalic
source.sass variable.other, source.sass variable.sass, source.scss variable.other, source.scss variable.scss, source.scss variable.sass, source.css variable.other, source.css variable.scss, source.less variable.other, source.less variable.other.less, source.less variable.declaration.less#ffab70
invalid.broken#fdaeb7italic
invalid.deprecated#fdaeb7italic
invalid.illegal#fdaeb7italic
invalid.unimplemented#fdaeb7italic
carriage-return#24292eitalic underline
punctuation.terminator#6a737d
message.error#fdaeb7
string variable#79b8ff
source.regexp, string.regexp#dbedff
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#dbedff
entity.name.type.rust, source.js entity.name.type, entity.name.type#79b8ff
keyword.other.fn.rustitalic
entity.name.lifetime.rust#f97583
meta.type_params.rust#e1e4e8
meta.annotation.rust, variable.language.rust#79b8ffitalic
source.ansible entity.name.tag#85e89d
support.function.builtin.python, meta.function-call.generic.python#79b8ff
meta.function-call.python meta.function-call.arguments.python#e1e4e8
keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby#f97583
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby#79b8ff
constant.other.elm#79b8ff
keyword.other.parenthesis.elm, punctuation.definition.block.begin.svelte, punctuation.definition.block.end.svelte#6a737d
storage.type.built-in, storage.type.numeric, source.go storage.type#79b8ffregular
storage.modifier.referenceregular
string.regexp constant.character.escape#85e89dbold
entity.name.tag.js.jsx, entity.name.tag support.class.component, source.vue support.class.component#85e89d
entity.other.attribute-name.id.css#ffab70
support.type.vendor-prefix.css#d1d5da
support.type.property-name.css, meta.property-name.scss#d1d5da
support.type.vendored.property-name.css#d1d5daitalic
source.json meta.mapping.key string#79b8ff
source.yaml meta.mapping.key string#f97583
entity.other.jinja2.delimiter#d1d5da
source.jinja2 variable.other.jinja2.block#85e89d
source.jinja2 variable.other.jinja2#ffab70
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext#d1d5da
constant.other.citation.latex#79b8ff
support.constant.handlebars#d1d5da
entity.name.function.operator, keyword.function, keyword.package#f97583italic
entity.name.operator.custom-literal.string#9ecbff
entity.name.operator.custom-literal.number#79b8ff
punctuation.section.embedded#ffab70
support.constant#79b8ff
support.variable#79b8ff
meta.module-reference#79b8ff
punctuation.definition.list.begin.markdown#ffab70
markup.heading, markup.heading entity.name#79b8ffbold
markup.quote#85e89ditalic
support.type.property-name.toml, support.type.property-name.array.toml, support.type.property-name.table.toml, keyword.other.definition.ini#85e89d
markup.italic#e1e4e8italic
markup.bold#e1e4e8bold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#79b8ff
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#fdaeb7
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#85e89d
markup.changed, punctuation.definition.changed#ffab70
markup.ignored, markup.untracked#2f363d
meta.diff.range#b392f0bold
meta.diff.header#79b8ff
meta.separator#79b8ffbold
meta.output#79b8ff
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#d1d5da
source.json meta.mapping.key string.quoted.double.json punctuation.definition.string.begin, source.json meta.mapping.key string.quoted.double.json punctuation.definition.string.end, source.json meta.mapping.key string.quoted.single.json punctuation.definition.string.begin, source.json meta.mapping.key string.quoted.single.json punctuation.definition.string.end, support.type.property-name.json punctuation.definition.string, punctuation.section.angle-brackets, punctuation.eq.toml#6a737d
support.type.property-name.json string.quoted.double.json - punctuation, support.type.property-name.json string.quoted.single.json - punctuation, source.json meta.mapping.key string.quoted.double.json - punctuation, source.json meta.mapping.key string.quoted.single.json - punctuation, source.json meta.object-literal.key string.quoted.double.json - punctuation, source.json meta.object-literal.key string.quoted.single.json - punctuation#79b8ff
support.type.property-name.json string.quoted.double.json punctuation.definition.string.begin, support.type.property-name.json string.quoted.double.json punctuation.definition.string.end, support.type.property-name.json string.quoted.single.json punctuation.definition.string.begin, support.type.property-name.json string.quoted.single.json punctuation.definition.string.end, source.json meta.object-literal.key string.quoted.double.json punctuation.definition.string.begin, source.json meta.object-literal.key string.quoted.double.json punctuation.definition.string.end, source.json meta.object-literal.key string.quoted.single.json punctuation.definition.string.begin, source.json meta.object-literal.key string.quoted.single.json punctuation.definition.string.end#6a737d
brackethighlighter.unmatched#fdaeb7
constant.other.reference.link, string.other.link#dbedffunderline
entity.name.type.class#79b8ff
meta.function.definition.rust variable.other#ffab70
meta.attribute.rust#d1d5da
meta.type.parameters.ts entity.name.type.parameter, entity.name.type.ts#ffab70
keyword.other.crate.rust, support.function.target.PHONY.makefile#f97583
variable.language.self.rust, variable.language.this.js, variable.language.this.ts#ffab70italic
constant.character.escape#ffab70
entity.name.function.preprocessor#d0b7ff
entity.other.attribute-name.pragma.preprocessor.cpp#ffab70