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#ec775c
  • activityBar.background#22272e
  • activityBar.border#444c56
  • activityBar.foreground#adbac7
  • activityBar.inactiveForeground#768390
  • activityBarBadge.background#316dca
  • activityBarBadge.foreground#cdd9e5
  • badge.background#316dca
  • badge.foreground#cdd9e5
  • breadcrumb.activeSelectionForeground#768390
  • breadcrumb.focusForeground#adbac7
  • breadcrumb.foreground#768390
  • breadcrumbPicker.background#2d333b
  • button.background#347d39
  • button.foreground#ffffff
  • button.hoverBackground#46954a
  • button.secondaryBackground#3d444d
  • button.secondaryForeground#adbac7
  • button.secondaryHoverBackground#444c56
  • checkbox.background#2d333b
  • checkbox.border#444c56
  • debugToolBar.background#2d333b
  • descriptionForeground#768390
  • diffEditor.insertedTextBackground#46954a26
  • diffEditor.removedTextBackground#e5534b26
  • dropdown.background#2d333b
  • dropdown.border#444c56
  • dropdown.foreground#adbac7
  • dropdown.listBackground#2d333b
  • editor.background#22272e
  • editor.findMatchBackground#966600
  • editor.findMatchHighlightBackground#eac55f80
  • editor.focusedStackFrameHighlightBackground#46954a66
  • editor.foldBackground#636e7b1a
  • editor.foreground#adbac7
  • editor.inactiveSelectionBackground#539bf512
  • editor.lineHighlightBackground#636e7b1a
  • editor.linkedEditingBackground#539bf512
  • editor.selectionBackground#539bf533
  • editor.selectionHighlightBackground#57ab5a40
  • editor.stackFrameHighlightBackground#ae7c1466
  • editor.wordHighlightBackground#636e7b80
  • editor.wordHighlightBorder#636e7b99
  • editor.wordHighlightStrongBackground#636e7b4d
  • editor.wordHighlightStrongBorder#636e7b99
  • editorBracketMatch.background#57ab5a40
  • editorBracketMatch.border#57ab5a99
  • editorCursor.foreground#539bf5
  • editorGroup.border#444c56
  • editorGroupHeader.tabsBackground#1c2128
  • editorGroupHeader.tabsBorder#444c56
  • editorGutter.addedBackground#46954a66
  • editorGutter.deletedBackground#e5534b66
  • editorGutter.modifiedBackground#ae7c1466
  • editorIndentGuide.activeBackground#444c56
  • editorIndentGuide.background#373e47
  • editorLineNumber.activeForeground#adbac7
  • editorLineNumber.foreground#768390
  • editorOverviewRuler.border#1c2128
  • editorWhitespace.foreground#545d68
  • editorWidget.background#2d333b
  • errorForeground#e5534b
  • focusBorder#316dca
  • foreground#adbac7
  • gitDecoration.addedResourceForeground#57ab5a
  • gitDecoration.conflictingResourceForeground#cc6b2c
  • gitDecoration.deletedResourceForeground#e5534b
  • gitDecoration.ignoredResourceForeground#545d68
  • gitDecoration.modifiedResourceForeground#c69026
  • gitDecoration.submoduleResourceForeground#768390
  • gitDecoration.untrackedResourceForeground#57ab5a
  • input.background#22272e
  • input.border#444c56
  • input.foreground#adbac7
  • input.placeholderForeground#545d68
  • list.activeSelectionBackground#636e7b66
  • list.activeSelectionForeground#adbac7
  • list.focusBackground#4184e426
  • list.focusForeground#adbac7
  • list.highlightForeground#539bf5
  • list.hoverBackground#636e7b1a
  • list.hoverForeground#adbac7
  • list.inactiveFocusBackground#4184e426
  • list.inactiveSelectionBackground#636e7b66
  • list.inactiveSelectionForeground#adbac7
  • notificationCenterHeader.background#2d333b
  • notificationCenterHeader.foreground#768390
  • notifications.background#2d333b
  • notifications.border#444c56
  • notifications.foreground#adbac7
  • notificationsErrorIcon.foreground#e5534b
  • notificationsInfoIcon.foreground#539bf5
  • notificationsWarningIcon.foreground#c69026
  • panel.background#1c2128
  • panel.border#444c56
  • panelInput.border#444c56
  • panelTitle.activeBorder#ec775c
  • panelTitle.activeForeground#adbac7
  • panelTitle.inactiveForeground#768390
  • peekViewEditor.background#636e7b1a
  • peekViewEditor.matchHighlightBackground#ae7c1466
  • peekViewResult.background#22272e
  • peekViewResult.matchHighlightBackground#ae7c1466
  • pickerGroup.border#444c56
  • pickerGroup.foreground#768390
  • progressBar.background#316dca
  • quickInput.background#2d333b
  • quickInput.foreground#adbac7
  • scrollbar.shadow#545d6833
  • scrollbarSlider.activeBackground#636e7b87
  • scrollbarSlider.background#636e7b33
  • scrollbarSlider.hoverBackground#636e7b45
  • settings.headerForeground#768390
  • settings.modifiedItemIndicator#ae7c1466
  • sideBar.background#1c2128
  • sideBar.border#444c56
  • sideBar.foreground#adbac7
  • sideBarSectionHeader.background#1c2128
  • sideBarSectionHeader.border#444c56
  • sideBarSectionHeader.foreground#adbac7
  • sideBarTitle.foreground#adbac7
  • statusBar.background#22272e
  • statusBar.border#444c56
  • statusBar.debuggingBackground#c93c37
  • statusBar.debuggingForeground#cdd9e5
  • statusBar.foreground#768390
  • statusBar.noFolderBackground#22272e
  • statusBarItem.prominentBackground#2d333b
  • tab.activeBackground#22272e
  • tab.activeBorder#22272e
  • tab.activeBorderTop#ec775c
  • tab.activeForeground#adbac7
  • tab.border#444c56
  • tab.hoverBackground#22272e
  • tab.inactiveBackground#1c2128
  • tab.inactiveForeground#768390
  • tab.unfocusedActiveBorder#22272e
  • tab.unfocusedActiveBorderTop#444c56
  • tab.unfocusedHoverBackground#636e7b1a
  • terminal.ansiBlack#545d68
  • terminal.ansiBlue#539bf5
  • terminal.ansiBrightBlack#636e7b
  • terminal.ansiBrightBlue#6cb6ff
  • terminal.ansiBrightCyan#56d4dd
  • terminal.ansiBrightGreen#6bc46d
  • terminal.ansiBrightMagenta#dcbdfb
  • terminal.ansiBrightRed#ff938a
  • terminal.ansiBrightWhite#cdd9e5
  • terminal.ansiBrightYellow#daaa3f
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#57ab5a
  • terminal.ansiMagenta#b083f0
  • terminal.ansiRed#f47067
  • terminal.ansiWhite#909dab
  • terminal.ansiYellow#c69026
  • terminal.foreground#768390
  • textBlockQuote.background#1c2128
  • textBlockQuote.border#444c56
  • textCodeBlock.background#636e7b66
  • textLink.activeForeground#539bf5
  • textLink.foreground#539bf5
  • textPreformat.foreground#768390
  • textSeparator.foreground#373e47
  • titleBar.activeBackground#22272e
  • titleBar.activeForeground#768390
  • titleBar.border#444c56
  • titleBar.inactiveBackground#1c2128
  • titleBar.inactiveForeground#768390
  • tree.indentGuidesStroke#373e47

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file#A2BFFCitalic
markup.deleted.diff#EF535090italic
markup.inserted.diff#C5E478italic
comment#637777italic
string#ECC48D—
string.quoted, variable.other.readwrite.js#ECC48D—
support.constant.math#C5E478—
constant.numeric, constant.character.numeric#F78C6C
constant.language, punctuation.definition.constant, variable.other.constant#82AAFF—
constant.character, constant.other#82AAFF—
constant.character.escape#F78C6C—
string.regexp, string.regexp keyword.other#5CA7E4—
meta.function punctuation.separator.comma#5F7E97—
variable#C5E478—
punctuation.accessor, keyword#7FDBCAitalic
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx#7FDBCAitalic
storage.type#7FDBCA—
storage.type.function.arrow.js—
entity.name.class, meta.class entity.name.type.class#FFCB8B—
entity.other.inherited-class#C5E478—
entity.name.function#7FDBCAitalic
punctuation.definition.tag, meta.tag#7FDBCA—
entity.name.tag, 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#CAECE6
entity.other.attribute-name#C5E478italic
entity.name.tag.custom#F78C6C—
support.function, support.constant#82AAFF—
support.constant.meta.property-value#7FDBCA—
support.type, support.class#C5E478—
support.variable.dom#C5E478—
invalid#FFFFFF—
invalid.deprecated#FFFFFF—
keyword.operator#7FDBCA
keyword.operator.relational#7FDBCAitalic
keyword.operator.assignment#7FDBCA—
keyword.operator.arithmetic#7FDBCA—
keyword.operator.bitwise#7FDBCA—
keyword.operator.increment#7FDBCA—
keyword.operator.ternary#7FDBCA—
comment.line.double-slash#637777—
object#CDEBF7—
constant.language.null#FF5874—
meta.brace#D6DEEB—
meta.delimiter.period#7FDBCAitalic
punctuation.definition.string#D9F5DD—
punctuation.definition.string.begin.markdown#FF5874—
constant.language.boolean#FF5874—
object.comma#FFFFFF—
variable.parameter.function#7FDBCA
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#80CBC4
meta.property-list entity.name.tag.reference#57EAF1—
constant.other.color.rgb-value punctuation.definition.constant#F78C6C—
constant.other.color#FFEB95—
keyword.other.unit#FFEB95—
meta.selector#7FDBCAitalic
entity.other.attribute-name.id#FAD430—
meta.property-name#80CBC4—
entity.name.tag.doctype, meta.tag.sgml.doctype#7FDBCAitalic
punctuation.definition.parameters#D9F5DD—
keyword.control.operator#7FDBCA—
keyword.operator.logical#7FDBCA
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#BAEBE2—
variable.other.object.property#FAF39Fitalic
variable.other.object.js—
entity.name.function#82AAFFitalic
keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.operator.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#7FDBCAitalic
keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts#7FDBCA
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control#7FDBCA—
support.function#C5E478—
invalid.broken#020E14—
invalid.unimplemented#FFFFFF—
invalid.illegal#FFFFFF—
variable.language#7FDBCA—
support.variable.property#7FDBCA—
variable.function#82AAFF—
variable.interpolation#EC5F67—
meta.function-call#82AAFF—
punctuation.section.embedded#D3423E—
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#D6DEEB—
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#D6DEEB—
italic#7FDBCAitalic
bold#C5E478bold
quote#697098italic
raw#80CBC4—
variable.assignment.coffee#31E1EB—
variable.parameter.function.coffee#D6DEEB—
variable.assignment.coffee#7FDBCA—
variable.other.readwrite.cs#D6DEEB—
entity.name.type.class.cs, storage.type.cs#FFCB8B—
entity.name.type.namespace.cs#B2CCD6—
string.unquoted.preprocessor.message.cs#D6DEEB—
punctuation.separator.hash.cs, keyword.preprocessor.region.cs, keyword.preprocessor.endregion.cs#FFCB8Bbold
variable.other.object.cs#B2CCD6—
entity.name.type.enum.cs#C5E478—
string.interpolated.single.dart, string.interpolated.double.dart#FFCB8B—
support.class.dart#FFCB8B—
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css#FF6363
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#7FDBCA—
keyword.other.unit.css#FFEB95—
meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js#F78C6C—
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#82AAFF—
source.elixir entity.name.function#C5E478—
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#82AAFF—
source.elixir punctuation.definition.string#C5E478—
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#C5E478—
source.elixir .punctuation.binary.elixir#7FDBCAitalic
constant.keyword.clojure#7FDBCA—
source.go meta.function-call.go#DDDDDD—
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go#7FDBCAitalic
source.go constant.language.go, source.go constant.other.placeholder.go#FF5874—
entity.name.function.preprocessor.cpp, entity.scope.name.cpp#7FDBCA—
meta.namespace-block.cpp#E0DEC6—
storage.type.language.primitive.cpp#FF5874—
meta.preprocessor.macro.cpp#D6DEEB—
variable.parameter#FFCB8B—
variable.other.readwrite.powershell#82AAFF—
support.function.powershell#7FDBCA—
entity.other.attribute-name.id.html#C5E478—
punctuation.definition.tag.html#6AE9F0—
meta.tag.sgml.doctype.html#7FDBCAitalic
meta.class entity.name.type.class.js#FFCB8B—
meta.method.declaration storage.type.js#82AAFF—
terminator.js#D6DEEB—
meta.js punctuation.definition.js#D6DEEB—
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#5F7E97—
variable.other.jsdoc, variable.other.phpdoc#78CCF0—
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#D6DEEB—
variable.parameter.function.js#7986E7—
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#D6DEEB—
variable.js, variable.other.js#D6DEEB—
entity.name.type.js, entity.name.type.module.js#FFCB8B
support.class.js#D6DEEB—
support.type.property-name.json#7FDBCA—
support.constant.json#C5E478—
meta.structure.dictionary.value.json string.quoted.double#C789D6—
string.quoted.double.json punctuation.definition.string.json#80CBC4—
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#FF5874—
variable.other.object.js#7FDBCAitalic
variable.other.ruby#D6DEEB—
entity.name.type.class.ruby#ECC48D—
constant.language.symbol.hashkey.ruby#7FDBCA—
constant.language.symbol.ruby#7FDBCA—
entity.name.tag.less#7FDBCA—
keyword.other.unit.css#FFEB95—
meta.attribute-selector.less entity.other.attribute-name.attribute#F78C6C—
markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#82B1FF—
markup.italic.markdown#7FDBCAitalic
markup.bold.markdown#C5E478bold
markup.quote.markdown#697098italic
markup.inline.raw.markdown#80CBC4—
markup.underline.link.markdown, markup.underline.link.image.markdown#FF869A—
string.other.link.title.markdown, string.other.link.description.markdown#D6DEEB—
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#82B1FF—
punctuation.definition.metadata.markdown#7FDBCA—
beginning.punctuation.definition.list.markdown#82B1FF—
markup.inline.raw.string.markdown#C5E478—
variable.other.php, variable.other.property.php#BEC5D4—
support.class.php#FFCB8B—
meta.function-call.php punctuation#D6DEEB—
variable.other.global.php#C5E478—
variable.other.global.php punctuation.definition.variable#C5E478—
constant.language.python#FF5874—
variable.parameter.function.python, meta.function-call.arguments.python#82AAFF—
meta.function-call.python, meta.function-call.generic.python#B2CCD6—
punctuation.python#D6DEEB—
entity.name.function.decorator.python#C5E478—
source.python variable.language.special#8EACE3—
keyword.control#7FDBCAitalic
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#C5E478—
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#82AAFF—
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#BEC5D4—
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#7FDBCA—
keyword.other.unit.scss, keyword.other.unit.sass#FFEB95—
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#D6DEEB—
entity.name.type.ts, entity.name.type.tsx#FFCB8B—
support.class.node.ts, support.class.node.tsx#82AAFF—
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#5F7E97—
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#D6DEEB—
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#82AAFF—
meta.tag.js meta.jsx.children.tsx#82AAFF—
entity.name.tag.yaml#7FDBCA—
variable.other.readwrite.js, variable.parameter#D7DBE0—
support.class.component.js, support.class.component.tsx#F78C6C
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#D6DEEB—
meta.class entity.name.type.class.tsx#FFCB8B—
entity.name.type.tsx, entity.name.type.module.tsx#FFCB8B—
meta.class.ts meta.var.expr.ts storage.type.ts, meta.class.tsx meta.var.expr.tsx storage.type.tsx#7FDBCA—
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#82AAFF—
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, meta.brace, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.relational, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.type, keyword.operator, keyword, punctuation.definintion.string, punctuation, variable.other.readwrite.js, storage.type, source.css, string.quoted—
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—
Correia Dark by Correia Dark - VS Code Theme