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#f1f1f1
  • activityBar.dropBackground#e8e8e8
  • activityBar.foreground#383a42
  • activityBarBadge.background#0099e1
  • activityBarBadge.foreground#ffffff
  • badge.background#0099e1
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#009ae5
  • breadcrumb.focusForeground#383a42
  • breadcrumb.foreground#a0a1a7
  • button.background#0083c0
  • button.foreground#ffffff
  • button.hoverBackground#0099e1
  • debugExceptionWidget.background#ffcccc
  • debugExceptionWidget.border#ff2e3f
  • debugToolBar.background#eeeeee
  • diffEditor.insertedTextBackground#1ef1531f
  • diffEditor.removedTextBackground#f33b5127
  • dropdown.background#e8e8e8
  • dropdown.border#7c878d
  • dropdown.foreground#383a42
  • dropdown.listBackground#e8e8e8
  • editor.background#f9f9f9
  • editor.findMatchBackground#99e5c2c5
  • editor.findMatchBorder#f31459
  • editor.findMatchHighlightBackground#99e5c2c5
  • editor.findRangeHighlightBackground#a0a1a72d
  • editor.foreground#383a42
  • editor.hoverHighlightBackground#e8e8e8
  • editor.lineHighlightBackground#f1f1f1
  • editor.rangeHighlightBackground#a0a1a70e
  • editor.selectionBackground#d2ecff
  • editor.selectionHighlightBackground#e8e8e8
  • editor.snippetFinalTabstopHighlightBackground#a0a1a733
  • editor.snippetFinalTabstopHighlightBorder#a0a1a7
  • editor.snippetTabstopHighlightBackground#a0a1a733
  • editor.snippetTabstopHighlightBorder#a0a1a7
  • editor.wordHighlightBackground#d9e6fd
  • editor.wordHighlightStrongBackground#ecd1e5
  • editorBracketMatch.background#00000000
  • editorBracketMatch.border#7a82da
  • editorCodeLens.foreground#a0a1a7
  • editorCursor.background#f9f9f9
  • editorCursor.foreground#f31459
  • editorGroup.border#7c878d
  • editorGroup.dropBackground#009ae128
  • editorGroup.emptyBackground#e8e8e8
  • editorGroup.focusedEmptyBorder#0099e1
  • editorGroupHeader.noTabsBackground#e8e8e8
  • editorGroupHeader.tabsBackground#e8e8e8
  • editorGutter.addedBackground#3cbc66
  • editorGutter.deletedBackground#ff6480
  • editorGutter.modifiedBackground#0099e1
  • editorHint.foreground#a0a1a7
  • editorIndentGuide.activeBackground#c2c4c7
  • editorInfo.foreground#0099e1
  • editorLineNumber.activeForeground#f31459
  • editorLineNumber.foreground#a0a1a7
  • editorLink.activeForeground#0099e1
  • editorMarkerNavigation.background#f9f9f9
  • editorOverviewRuler.addedForeground#3cbc66
  • editorOverviewRuler.bracketMatchForeground#7a82da
  • editorOverviewRuler.deletedForeground#ff6480
  • editorOverviewRuler.errorForeground#ff0000
  • editorOverviewRuler.findMatchForeground#99e5c2c5
  • editorOverviewRuler.infoForeground#0099e1
  • editorOverviewRuler.modifiedForeground#0099e1
  • editorOverviewRuler.selectionHighlightForeground#d2ecff
  • editorOverviewRuler.warningForeground#df631c
  • editorOverviewRuler.wordHighlightForeground#d9e6fd
  • editorPane.background#eeeeee
  • editorRuler.foreground#7c878d
  • editorWarning.foreground#df631c
  • editorWhitespace.foreground#7c878d
  • editorWidget.background#e8e8e8
  • editorWidget.border#7c878d
  • errorForeground#ff0000
  • extensionButton.prominentBackground#1f8642
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#23974a
  • focusBorder#0099e1
  • foreground#383a42
  • gitDecoration.conflictingResourceForeground#d52753
  • gitDecoration.deletedResourceForeground#a05a48
  • gitDecoration.ignoredResourceForeground#a0a1a7
  • gitDecoration.modifiedResourceForeground#0099e1
  • gitDecoration.untrackedResourceForeground#23974a
  • gitlens.gutterBackgroundColor#ffffff55
  • gitlens.gutterForegroundColor#383a42
  • gitlens.gutterUncommittedForegroundColor#0099e1
  • gitlens.lineHighlightBackgroundColor#d2ecff
  • gitlens.lineHighlightOverviewRulerColor#d2ecff
  • gitlens.trailingLineBackgroundColor#d2ecff
  • gitlens.trailingLineForegroundColor#a0a1a7
  • input.background#f9f9f9
  • input.border#7c878d
  • input.foreground#383a42
  • input.placeholderForeground#a0a1a7
  • inputOption.activeBorder#0099e1
  • inputValidation.errorBackground#ffcccc
  • inputValidation.errorBorder#ff2e3f
  • inputValidation.infoBackground#d2ecff
  • inputValidation.infoBorder#0099e1
  • inputValidation.warningBackground#debaa6
  • inputValidation.warningBorder#df631c
  • list.activeSelectionBackground#00a7f5
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#d2ecff
  • list.focusBackground#d2ecff
  • list.focusForeground#000000
  • list.highlightForeground#0098dd
  • list.hoverBackground#f1f1f1
  • list.inactiveSelectionBackground#f6f6f6
  • list.warningForeground#df631c
  • merge.currentContentBackground#a05a481c
  • merge.currentHeaderBackground#a05a483b
  • merge.incomingContentBackground#009ae121
  • merge.incomingHeaderBackground#009ae13b
  • notificationCenter.border#7c878d
  • notificationCenterHeader.background#7c878d
  • notificationCenterHeader.foreground#383a42
  • notificationLink.foreground#0099e1
  • notifications.background#e8e8e8
  • notifications.border#7c878d
  • notifications.foreground#383a42
  • notificationToast.border#7c878d
  • panel.border#7c878d
  • panel.dropBackground#e8e8e8
  • panelTitle.activeBorder#0099e1
  • panelTitle.activeForeground#383a42
  • panelTitle.inactiveForeground#383a42aa
  • peekView.border#0099e1
  • peekViewEditor.background#f9f9f9
  • peekViewEditor.matchHighlightBackground#99e5c1
  • peekViewResult.background#e8e8e8
  • peekViewResult.fileForeground#383a42
  • peekViewResult.lineForeground#383a42
  • peekViewResult.matchHighlightBackground#99e5c1
  • peekViewResult.selectionBackground#0099e1
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#e8e8e8
  • peekViewTitleDescription.foreground#a0a1a7
  • peekViewTitleLabel.foreground#383a42
  • pickerGroup.border#7c878d
  • pickerGroup.foreground#0099e1
  • progressBar.background#0099e1
  • scrollbarSlider.activeBackground#bebebe99
  • scrollbarSlider.background#dedede99
  • scrollbarSlider.hoverBackground#cecece99
  • selection.background#d2ecff
  • sideBar.background#e8e8e8
  • sideBar.border#d1d1d1
  • sideBar.dropBackground#e8e8e8
  • sideBar.foreground#383a42
  • sideBarSectionHeader.background#7c878d
  • sideBarSectionHeader.foreground#383a42
  • sideBarTitle.foreground#383a42
  • statusBar.background#d06534
  • statusBar.debuggingBackground#df631c
  • statusBar.foreground#FFF
  • statusBar.noFolderBackground#823ff1
  • tab.activeBorderTop#0099e1
  • tab.activeForeground#383a42
  • tab.hoverBackground#f1f1f1
  • tab.inactiveBackground#eeeeee
  • tab.inactiveForeground#a0a1a7
  • tab.unfocusedActiveBorderTop#a0a1a7
  • terminal.ansiBlack#d5d6dd
  • terminal.ansiBlue#275fe4
  • terminal.ansiBrightBlack#e4e5ed
  • terminal.ansiBrightBlue#0099e1
  • terminal.ansiBrightCyan#6d93bb
  • terminal.ansiBrightGreen#3cbc66
  • terminal.ansiBrightMagenta#ce33c0
  • terminal.ansiBrightRed#ff6480
  • terminal.ansiBrightWhite#26272d
  • terminal.ansiBrightYellow#c5a332
  • terminal.ansiCyan#27618d
  • terminal.ansiGreen#23974a
  • terminal.ansiMagenta#823ff1
  • terminal.ansiRed#d52753
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#df631c
  • terminalCursor.foreground#f31459
  • textBlockQuote.background#7c878d
  • textBlockQuote.border#0099e1
  • textCodeBlock.background#7c878d
  • textLink.activeForeground#0099e1
  • textLink.foreground#0099e1
  • textPreformat.foreground#a05a48
  • textSeparator.foreground#7c878d
  • titleBar.activeBackground#c2c4c7
  • titleBar.activeForeground#383a42
  • titleBar.inactiveBackground#c2c4c799
  • titleBar.inactiveForeground#383a4299
  • walkThrough.embeddedEditorBackground#e8e8e8
  • welcomePage.buttonBackground#e8e8e8
  • welcomePage.buttonHoverBackground#d2ecff
  • widget.shadow#a0a1a7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
global#5b6c8b
comment#697098italic
string#356615
string.quoted#356615
support.constant.math#e69500
constant.numeric, constant.character.numeric#F78C6C
constant.language, punctuation.definition.constant, variable.other.constant#0037ad
constant.character, constant.other#0037ad
constant.character.escape#F78C6C
string.regexp, string.regexp keyword.other#347f77
meta.function punctuation.separator.comma#70ffff
variable#eb9800
punctuation.accessor, keyword#c792ea
storage#c792ea
storage.type, meta.var.expr storage.type, meta.class meta.method.declaration meta.var.expr storage.type.js#c792ea
entity.name.class, meta.class entity.name.type.class#eb9800
entity.other.inherited-class#a9c77d
entity.name.function#0037ad
variable.parameter#7986E7
punctuation.definition.tag, meta.tag#89DDFF
entity.name.tag support.class.component, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#ff5572
entity.other.attribute-name#eb9800
entity.name.tag.custom#eb9800
support.function, support.constant#0037ad
support.constant.meta.property-value#89DDFF
support.type, support.class#eb9800
support.variable.dom#eb9800
invalid#ffffff
invalid.deprecated#ffffff
keyword.operator#89DDFF
keyword.operator.relational#c792ea
keyword.operator.assignment#c792ea
comment.line.double-slash#697098
object#cdebf7
constant.language.null#ff5874
meta.brace#445269
meta.delimiter.period#c792ea
punctuation.definition.string#d9f5dd
constant.language.boolean#ff5874
object.comma#ffffff
variable.parameter.function#89DDFF
support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag#347f77
meta.property-list entity.name.tag.reference#ff5572
constant.other.color.rgb-value punctuation.definition.constant#F78C6C
constant.other.color#e0b700
keyword.other.unit#e0b700
meta.selector#c792ea
entity.other.attribute-name.id#FAD430
meta.property-name#347f77
entity.name.tag.doctype, meta.tag.sgml.doctype#c792eaitalic
punctuation.definition.parameters#d9f5dd
keyword.control.operator#89DDFF
keyword.operator.logical#c792ea
variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance#ff5572
variable.other.property, variable.other.object.property#89DDFF
entity.name.function#0037ad
keyword.operator.comparison#c792ea
support.constant, keyword.other.special-method, keyword.other.new#89DDFF
support.function#89DDFF
invalid.broken#020e14
invalid.unimplemented#ffffff
invalid.illegal#ffffff
variable.language#ff5572
support.variable.property#89DDFF
variable.function#0037ad
variable.interpolation#ec5f67
meta.function-call#0037ad
punctuation.section.embedded#d3423e
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#445269
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#d9f5dd
string.template meta.template.expression#d3423e
string.template punctuation.definition.string#445269
italic#c792eaitalic
bold#eb9800bold
quote#697098italic
raw#347f77
variable.assignment.coffee#89DDFF
variable.parameter.function.coffee#445269
variable.assignment.coffee#89DDFF
variable.other.readwrite.cs#445269
entity.name.type.class.cs, storage.type.cs#0037ad
entity.name.type.namespace.cs#B2CCD6
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#ff5572
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#ff5572
keyword.other.unit.css#e0b700
meta.attribute-selector.css entity.other.attribute-name.attribute#F78C6C
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#0037ad
source.elixir entity.name.function#eb9800
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#0037ad
source.elixir punctuation.definition.string#a9c77d
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#eb9800
source.elixir .punctuation.binary.elixir#c792ea
source.go meta.function-call.go#8f8f8f
entity.other.attribute-name.id.html#eb9800
punctuation.definition.tag.html#89DDFF
meta.tag.sgml.doctype.html#c792eaitalic
meta.class entity.name.type.class.js#ffcb8b
meta.method.declaration storage.type.js#0037adnormal
terminator.js#445269
meta.js punctuation.definition.js#445269
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#70ffff
variable.other.jsdoc, variable.other.phpdoc#0f658a
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#445269
variable.parameter.function.js#7986E7
variable.other.readwrite.js#445269
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#445269
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#445269
variable.js, variable.other.js#445269
entity.name.type.js, entity.name.type.module.js#ffcb8b
support.class.js#445269
support.type.property-name.json#6d9334
support.constant.json#eb9800
meta.structure.dictionary.value.json string.quoted.double#347f77
string.quoted.double.json punctuation.definition.string.json#347f77
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ff5874
variable.other.ruby#445269
constant.language.symbol.hashkey.ruby#89DDFF
entity.name.tag.less#ff5572
keyword.other.unit.css#e0b700
meta.attribute-selector.less entity.other.attribute-name.attribute#F78C6C
markup.heading.markdown#0056e0
markup.italic.markdown#c792eaitalic
markup.bold.markdown#eb9800bold
markup.quote.markdown#697098italic
markup.inline.raw.markdown#347f77
markup.underline.link.markdown, markup.underline.link.image.markdown#ff869a
string.other.link.title.markdown, string.other.link.description.markdown#445269
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#0056e0
punctuation.definition.metadata.markdown#ff5572
beginning.punctuation.definition.list.markdown#0056e0
variable.other.php#5e6d8d
support.class.php#ffcb8b
meta.function-call.php punctuation#445269
variable.other.global.php#eb9800
variable.other.global.php punctuation.definition.variable#eb9800
constant.language.python#ff5874
variable.parameter.function.python, meta.function-call.arguments.python#7986E7
meta.function-call.python, meta.function-call.generic.python#B2CCD6
punctuation.python#445269
entity.name.function.decorator.python#eb9800
source.python variable.language.special#8EACE3
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#8f8f8f
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#0037ad
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#5e6d8d
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#F78C6C
entity.name.tag.scss, entity.name.tag.sass#ff5572
keyword.other.unit.scss, keyword.other.unit.sass#e0b700
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#445269
entity.name.type.ts, entity.name.type.tsx#0f658a
support.class.node.ts, support.class.node.tsx#0037ad
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#70ffff
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#445269
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#0037ad
meta.tag.js meta.jsx.children.tsx#0037ad
entity.name.tag.yaml#89DDFF
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.type, punctuation.definintion.string, punctuationnormal
folabelle by cooproton - VS Code Theme