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#60bda1
  • activityBar.background#0f0c15d2
  • activityBar.foreground#60bda1
  • activityBar.inactiveForeground#afb3b2
  • activityBarBadge.background#827aeb
  • activityBarBadge.foreground#0f0c15
  • badge.background#8E6BD8
  • badge.foreground#dddddd
  • breadcrumb.foreground#7FAFA0
  • button.background#60bda1
  • button.foreground#0F0C15
  • button.hoverBackground#7FD8BE
  • editor.background#120f18
  • editor.foreground#EDEEFF
  • editor.lineHighlightBackground#1A1426
  • editor.lineHighlightBorder#2A223D
  • editor.selectionBackground#60bda133
  • editor.selectionHighlightBackground#60bda122
  • editorCursor.foreground#60bda1
  • editorGroupHeader.tabsBackground#161220
  • editorIndentGuide.activeBackground1#60bda1
  • editorIndentGuide.background1#2A223D88
  • editorLineNumber.activeForeground#E6FFF7
  • editorLineNumber.foreground#495753
  • editorWidget.background#1b1630
  • editorWidget.border#60bda1e8
  • extensionButton.background#8E6BD8
  • extensionButton.foreground#f5f5f5
  • extensionIcon.verifiedForeground#8E6BD8
  • focusBorder#60bda1
  • input.background#1b1630
  • input.border#60bda1AA
  • input.foreground#E8A763
  • list.activeSelectionBackground#2A223D
  • list.activeSelectionForeground#E6FFF7
  • list.focusOutline#7461b3
  • list.hoverBackground#1F1A2E
  • list.inactiveSelectionBackground#291f3b
  • menu.background#1A1426
  • menu.foreground#E6FFF7
  • menu.separatorBackground#2A223D
  • progressBar.background#60bda1
  • scrollbarSlider.activeBackground#60bda1AA
  • scrollbarSlider.background#2A223D66
  • scrollbarSlider.hoverBackground#60bda188
  • sideBar.background#0F0C15
  • sideBar.border#1F1A2E
  • sideBar.foreground#c2c9c6
  • sideBarTitle.border#60bda1
  • sideBarTitle.foreground#9BE3CC
  • statusBar.background#1A1426
  • statusBar.border#2A223D
  • statusBar.debuggingBackground#ad5a00
  • statusBar.foreground#a3ffbfd3
  • statusBar.noFolderBackground#2A223D
  • statusBarItem.errorBackground#E05A6F
  • statusBarItem.hoverBackground#60bda141
  • statusBarItem.prominentBackground#5b4e97
  • statusBarItem.prominentForeground#dbdbdb
  • statusBarItem.warningBackground#E8A763
  • tab.activeBackground#1F1A2E
  • tab.activeBorderTop#33ccab
  • tab.activeForeground#ddf8ef
  • tab.inactiveBackground#120f18
  • tab.inactiveForeground#68709b
  • terminal.ansiBlack#120f18
  • terminal.ansiBlue#7A83B6
  • terminal.ansiBrightBlack#5C6F6A
  • terminal.ansiBrightBlue#9AA6FF
  • terminal.ansiBrightCyan#9FE8D5
  • terminal.ansiBrightGreen#7FD8BE
  • terminal.ansiBrightMagenta#B794F4
  • terminal.ansiBrightRed#F07178
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F0E68C
  • terminal.ansiCyan#7FE3C5
  • terminal.ansiGreen#60bda1
  • terminal.ansiMagenta#8E6BD8
  • terminal.ansiRed#E05A6F
  • terminal.ansiWhite#E6FFF7
  • terminal.ansiYellow#E8A763
  • terminal.background#0F0C15
  • terminal.foreground#9daefa
  • terminal.selectionBackground#60bda133
  • terminalCursor.foreground#60bda1
  • textLink.activeForeground#9BE3CC
  • textLink.foreground#60bda1
  • titleBar.activeBackground#1B1626
  • titleBar.activeForeground#E6FFF7
  • titleBar.inactiveBackground#120f18
  • titleBar.inactiveForeground#5b9283
  • tree.indentGuidesStroke#60bda1
  • welcomePage.tileBackground#1F1A2E
  • welcomePage.tileHoverBackground#2A223D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header, markup.heading#B07AE6bold
meta.diff, meta.diff.header#6B6E8F
markup.inserted#60bda1
markup.deleted, invalid, markup.error#E05A6F
markup.changed#E8A763
invalid#E05A6Funderline italic
invalid.deprecated#E6E7F2underline italic
entity.name.filename#ECE29C
markup.error#E05A6F
markup.underlineunderline
markup.bold#E8A763bold
markup.heading#B07AE6bold
markup.italic#ECE29Citalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#5F8DF0
markup.inline.raw, markup.raw.restructuredtext#20BB94
markup.underline.link, markup.underline.link.image#60bda1underline
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#CA5DAD
entity.name.directive.restructuredtext, markup.quote#ECE29Citalic
meta.separator.markdown#6B6E8F
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#20BB94
punctuation.definition.constant.restructuredtext#B07AE6
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#B07AE6
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#E6E7F2
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ECE29C
entity.name.type.class, entity.name.class#5fa6d4bold
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#B07AE6italic
entity.other.inherited-class#5F8DF0italic bold
comment, punctuation.definition.comment, unused.comment, wildcard.comment#5C6F6Aitalic
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#CA5DAD
comment.block.documentation entity.name.type#5F8DF0italic bold
comment.block.documentation entity.name.type punctuation.definition.bracket#5F8DF0bold
comment.block.documentation variable#E8A763italic
constant, variable.other.constant#B07AE6
constant.character.escape, constant.character.string.escape, constant.regexp#CA5DAD
entity.name.tag#7854bbbold
entity.other.attribute-name.parent-selector#CA5DAD
entity.other.attribute-name#60BDA1italic
entity.name.function, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix#20BB94bold
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#E8A763italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#20BB94italic
meta.decorator variable.other.object#20BB94
keyword, punctuation.definition.keyword#B07AE6
keyword.control.new, keyword.operator.newbold
meta.selector#CA5DAD
support#5F8DF0italic bold
support.function.magic, support.variable, variable.other.predefined#B07AE6
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#CA5DAD
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#E6E7F2
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile#CA5DAD
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#5F8DF0bold
constant.other.date, constant.other.timestamp#E8A763
variable.other.alias.yaml#20BB94italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#CA5DAD
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml#5F8DF0italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#E8A763
storage.modifier#CA5DAD
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ECE29C
punctuation.definition.group.capture.regexp#CA5DAD
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#E05A6F
punctuation.definition.character-class.regexp#5F8DF0bold
punctuation.definition.group.regexp#E8A763
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#E05A6F
meta.assertion.look-ahead.regexp#20BB94
string#dab870
punctuation.definition.string.begin, punctuation.definition.string.end#ECE29C
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#8ba0fe
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape#6B6E8F
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#E6E7F2
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#E8A763italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#E6E7F2
meta.selectionset.graphql variable#ECE29C
meta.selectionset.graphql meta.arguments variable#E6E7F2
entity.name.fragment.graphql, variable.fragment.graphql#5F8DF0bold
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell#E6E7F2
source.shell variable.other#B07AE6
support.constant#B07AE6
meta.scope.prerequisites.makefile#ECE29C
meta.attribute-selector.scss#ECE29C
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#E6E7F2
meta.preprocessor.haskell#6B6E8F
log.error#E05A6Fbold
log.warning#ECE29Cbold
support.type.property-name.json#9499e2
string.quoted.double.json#60b7bd
constant.numeric.json#E8A763
constant.language.json#B07AE6
punctuation.separator.key-value.json, punctuation.separator.dictionary.json#6B6E8F
punctuation.definition.string.begin.json, punctuation.definition.string.end.json#20BB94