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#FFFFFF
  • activityBar.border#FFFFFF60
  • activityBar.foreground#2A9D8F
  • activityBarBadge.background#F2CC8F
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FFFFFF30
  • badge.foreground#FF0D0D
  • breadcrumb.activeSelectionForeground#FF0D0D
  • breadcrumb.background#FFFFFF
  • breadcrumb.focusForeground#2A9D8F
  • breadcrumb.foreground#B80AFF
  • breadcrumbPicker.background#FFFFFF
  • button.background#FF0D0D50
  • contrastBorder#FF0D0D40
  • debugToolBar.background#FFFFFF
  • diffEditor.insertedTextBackground#8A80A315
  • diffEditor.removedTextBackground#FFD97D20
  • dropdown.background#FFFFFF
  • dropdown.border#FFFFFF10
  • editor.background#FFFFFF
  • editor.findMatchBackground#FFFFFF
  • editor.findMatchBorder#FF0D0D
  • editor.findMatchHighlightBackground#FF0D0D93
  • editor.findMatchHighlightBorder#FFFFFF30
  • editor.foreground#2A9D8F
  • editor.lineHighlightBackground#FFFFFF50
  • editor.selectionBackground#F2CC8F30
  • editor.selectionHighlightBackground#FF0D0D6b
  • editor.selectionHighlightBorder#F2CC8Ff0
  • editorBracketMatch.background#FFFFFF
  • editorBracketMatch.border#457B9D7f
  • editorCursor.foreground#457B9D
  • editorError.foreground#FFD97D70
  • editorGroup.border#FFFFFF30
  • editorGroupHeader.tabsBackground#FFFFFF
  • editorGutter.addedBackground#8A80A360
  • editorGutter.deletedBackground#FFD97D60
  • editorGutter.modifiedBackground#F2CC8F60
  • editorHoverWidget.background#FFFFFF
  • editorHoverWidget.border#FFFFFF10
  • editorIndentGuide.activeBackground#E1E9FF
  • editorIndentGuide.background#E1E9FF70
  • editorInfo.foreground#F2CC8F70
  • editorLineNumber.activeForeground#F2CC8F
  • editorLineNumber.foreground#FF0D0Dc0
  • editorLink.activeForeground#2A9D8F
  • editorMarkerNavigation.background#2A9D8F05
  • editorOverviewRuler.border#FFFFFF
  • editorOverviewRuler.errorForeground#FFD97D40
  • editorOverviewRuler.findMatchForeground#FF0D0D
  • editorOverviewRuler.infoForeground#F2CC8F40
  • editorOverviewRuler.warningForeground#457B9D70
  • editorRuler.foreground#E1E9FF
  • editorSuggestWidget.background#FFFFFF
  • editorSuggestWidget.border#FFFFFF10
  • editorSuggestWidget.foreground#2A9D8F
  • editorSuggestWidget.highlightForeground#457B9D
  • editorSuggestWidget.selectedBackground#FF0D0D20
  • editorWarning.foreground#8A80A3
  • editorWhitespace.foreground#2A9D8F40
  • editorWidget.background#FFFFFF
  • editorWidget.border#457B9D
  • editorWidget.resizeBorder#FF0D0D
  • extensionButton.prominentBackground#8A80A390
  • extensionButton.prominentHoverBackground#FFD97D
  • focusBorder#FFFFFF00
  • gitDecoration.conflictingResourceForeground#457B9D
  • gitDecoration.deletedResourceForeground#FFD97D
  • gitDecoration.ignoredResourceForeground#FF0D0D
  • gitDecoration.modifiedResourceForeground#B80AFF
  • gitDecoration.untrackedResourceForeground#F2CC8F
  • input.background#F4FFFC
  • input.border#FFFFFF10
  • input.foreground#2A9D8F
  • input.placeholderForeground#2A9D8F60
  • inputOption.activeBackground#2A9D8F30
  • inputOption.activeBorder#2A9D8F30
  • inputValidation.errorBorder#FFD97D50
  • inputValidation.infoBorder#F2CC8F50
  • inputValidation.warningBorder#457B9D50
  • list.activeSelectionBackground#FFFFFF
  • list.activeSelectionForeground#FF0D0D
  • list.focusBackground#F4FFFC
  • list.focusForeground#F2CC8F
  • list.highlightForeground#FF0D0D
  • list.hoverBackground#E1E9FF
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#FFFFFF30
  • list.inactiveSelectionForeground#FF0D0D
  • list.warningForeground#457B9D
  • listFilterWidget.background#FFFFFF30
  • listFilterWidget.noMatchesOutline#FFFFFF30
  • listFilterWidget.outline#FFFFFF30
  • menu.background#FFFFFFf8
  • menu.border#FF0D0D50
  • menu.foreground#2A9D8F
  • menu.selectionBackground#F4FFFC
  • menu.selectionBorder#FFFFFF30
  • menu.selectionForeground#2A9D8F
  • menu.separatorBackground#2A9D8F
  • menubar.selectionBackground#F4FFFC
  • menubar.selectionBorder#FF0D0D50
  • menubar.selectionForeground#2A9D8F
  • minimap.background#FFFFFF
  • minimapGutter.addedBackground#FFD97D
  • minimapGutter.deletedBackground#457B9D
  • minimapGutter.modifiedBackground#8A80A3
  • minimapSlider.activeBackground#8A80A3b0
  • minimapSlider.background#8A80A380
  • minimapSlider.hoverBackground#8A80A3a0
  • notificationLink.foreground#FF0D0D
  • notifications.background#FFFFFF
  • notifications.foreground#2A9D8F
  • panel.background#FFFFFF
  • panel.border#FFFFFF60
  • panelSectionHeader.foreground#ff0000
  • panelTitle.activeBorder#FF0D0D
  • panelTitle.activeForeground#005f70
  • panelTitle.inactiveForeground#2A9D8F
  • peekView.border#FFFFFF30
  • peekViewEditor.background#2A9D8F05
  • peekViewEditor.matchHighlightBackground#FF0D0D50
  • peekViewEditorGutter.background#2A9D8F05
  • peekViewResult.background#2A9D8F05
  • peekViewResult.matchHighlightBackground#FF0D0D50
  • peekViewResult.selectionBackground#FF0D0D70
  • peekViewTitle.background#2A9D8F05
  • peekViewTitleDescription.foreground#2A9D8F60
  • pickerGroup.foreground#FF0D0D
  • progressBar.background#FF0D0D
  • scrollbar.shadow#FFFFFF00
  • scrollbarSlider.activeBackground#FF0D0Dcc
  • scrollbarSlider.background#FF0D0Dbb
  • scrollbarSlider.hoverBackground#FF0D0Dee
  • selection.background#FF0D0D
  • settings.checkboxBackground#FFFFFF
  • settings.checkboxForeground#2A9D8F
  • settings.dropdownBackground#FFFFFF
  • settings.dropdownForeground#2A9D8F
  • settings.headerForeground#FF0D0D
  • settings.modifiedItemIndicator#FF0D0D
  • settings.numberInputBackground#FFFFFF
  • settings.numberInputForeground#2A9D8F
  • settings.textInputBackground#FFFFFF
  • settings.textInputForeground#2A9D8F
  • sideBar.background#fafafa
  • sideBar.border#FF0D0D50
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#FFFFFF
  • sideBarSectionHeader.border#FFFFFF60
  • sideBarSectionHeader.foreground#F2CC8F
  • sideBarTitle.foreground#2A9D8F
  • statusBar.background#000000
  • statusBar.border#FFFFFF60
  • statusBar.debuggingBackground#457B9D
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#fbfbfb
  • statusBar.noFolderBackground#FFFFFF
  • statusBarItem.hoverBackground#FF0D0D20
  • statusBarItem.remoteBackground#FF0D0D
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#FF0D0D50
  • tab.activeBorder#FF0D0D
  • tab.activeForeground#000000
  • tab.activeModifiedBorder#FF0D0D
  • tab.border#FFFFFF
  • tab.inactiveBackground#FF0D0D20
  • tab.inactiveForeground#2A9D8Faf
  • tab.unfocusedActiveBackground#FF0D0D40
  • tab.unfocusedActiveBorder#FF0D0D
  • tab.unfocusedActiveForeground#2A9D8F
  • tab.unfocusedInactiveBackground#FF0D0D10
  • tab.unfocusedInactiveForeground#2A9D8F7f
  • terminal.ansiBlack#7f7f7f
  • terminal.ansiBlue#F2CC8F
  • terminal.ansiBrightBlack#FF0D0D
  • terminal.ansiBrightBlue#F2CC8F
  • terminal.ansiBrightCyan#118AB2
  • terminal.ansiBrightGreen#8A80A3
  • terminal.ansiBrightMagenta#457B9D
  • terminal.ansiBrightRed#FFD97D
  • terminal.ansiBrightWhite#9d9b9b
  • terminal.ansiBrightYellow#457B9D
  • terminal.ansiCyan#118AB2
  • terminal.ansiGreen#8A80A3
  • terminal.ansiMagenta#457B9D
  • terminal.ansiRed#FFD97D
  • terminal.ansiWhite#a9a9a9
  • terminal.ansiYellow#457B9D
  • terminalCursor.background#a7a7a7
  • terminalCursor.foreground#457B9D
  • textLink.activeForeground#2A9D8F
  • textLink.foreground#FF0D0D
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#2A9D8F
  • titleBar.border#FFFFFF60
  • titleBar.inactiveBackground#FFFFFF
  • titleBar.inactiveForeground#FF0D0D
  • tree.indentGuidesStroke#E1E9FF
  • widget.shadow#FFFFFF30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#457B9D
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scssitalic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss#8A80A3
constant.other.php#457B9D
constant.other.color#FFFFFF
invalid, invalid.illegal#FFD97D
Keyword, Storageitalic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss#A7A8AF
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js#B80AFF
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js#2A9D8F
punctuation.definition, string.quoted.single.scss#A7A8AF
keyword.controlbold
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html#6D6F7C
text.html.derivative#A7A8AF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#2A9D8F
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#457B9D
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#B80AFF
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control#F2CC8F
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#118AB2
support.other.variable, string.other.link, markup.table#2A9D8F
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#457B9D
variable.parameter.function.language.special, variable.parameter#FFD97D
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js#8A80A3
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.html#457B9D
support.type#B2CCD6
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#B80AFF
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FFD97D
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#F2CC8Fitalic
entity.other.attribute-name, support.function#457B9D
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key#2A9D8F
source.scss keyword.control#457B9D
markup.inserted#8A80A3
markup.deleted#FFD97D
markup.changed#457B9D
string.regexp#118AB2
constant.character.escape#118AB2
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#2A9D8Fitalic
support.type.property-name.json#2A9D8F
text.html.markdown, punctuation.definition.list_item.markdown#2A9D8F
text.html.markdown markup.inline.raw.markdown#457B9D
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#FF0D0D50
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown#B80AFFbold
markup.underline#F2CC8Funderline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#FF0D0D50
markup.quoteitalic
string.other.link.description.title.markdown#457B9D
constant.other.reference.link.markdown#457B9D
markup.raw.block#457B9D
punctuation.definition.raw.markdown, punctuation.definition.markdown#118AB2
variable.language.fenced.markdown#FF0D0D
meta.separator#A7A8AFbold
token.info-token#FF0D0D
token.warn-token#457B9D
token.error-token#FF293B
token.debug-token#118AB2
BladeX by LevelUp - VS Code Theme