Skip to main content
CodingTheme

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.activeBackground#4d414628
  • activityBar.activeBorder#F0388050
  • activityBar.background#0B010B
  • activityBar.border#62405154
  • activityBar.foreground#d4d4d4
  • activityBar.inactiveForeground#624051
  • activityBarBadge.background#F03880
  • activityBarBadge.foreground#0B010B
  • badge.background#4d4146
  • badge.foreground#d4d4d4
  • breadcrumb.activeSelectionForeground#d4d4d4
  • breadcrumb.background#0B010B
  • breadcrumb.focusForeground#d4d4d4
  • breadcrumb.foreground#e089a9
  • breadcrumbPicker.background#0B010B
  • button.background#4d4146
  • button.foreground#d4d4d4
  • contrastBorder#0B010B
  • debugToolBar.background#0B010B
  • diffEditor.insertedTextBackground#5dd46510
  • diffEditor.removedTextBackground#E9637932
  • dropdown.background#0B010B
  • dropdown.border#0B010B
  • dropdown.foreground#d4d4d4
  • editor.background#0B010B
  • editor.findMatchBackground#E89E6450
  • editor.findMatchHighlightBackground#d4d4d428
  • editor.findRangeHighlightBackground#4a353c75
  • editor.foldBackground#0B010B
  • editor.foreground#d4d4d4
  • editor.hoverHighlightBackground#0B010B
  • editor.lineHighlightBackground#0B010B
  • editor.lineHighlightBorder#0B010B
  • editor.rangeHighlightBackground#78D1E110
  • editor.selectionBackground#4d4146
  • editor.selectionHighlightBackground#0B010B
  • editor.selectionHighlightBorder#d4d4d414
  • editor.snippetFinalTabstopHighlightBackground#0B010B
  • editor.snippetFinalTabstopHighlightBorder#5dd465
  • editor.snippetTabstopHighlightBackground#0B010B
  • editor.snippetTabstopHighlightBorder#624051
  • editor.wordHighlightBackground#e089a932
  • editor.wordHighlightBorder#d4d4d414
  • editor.wordHighlightStrongBackground#5dd46532
  • editor.wordHighlightStrongBorder#d4d4d414
  • editorCodeLens.foreground#624051
  • editorError.foreground#E96379
  • editorGroup.border#4d4146
  • editorGroup.dropBackground#4a353c70
  • editorGroupHeader.tabsBackground#0B010B
  • editorGutter.addedBackground#5dd46550
  • editorGutter.deletedBackground#E9637950
  • editorGutter.modifiedBackground#e089a950
  • editorHoverWidget.background#0B010B
  • editorHoverWidget.border#624051
  • editorIndentGuide.activeBackground#d4d4d42d
  • editorIndentGuide.background#d4d4d41A
  • editorLineNumber.foreground#624051
  • editorLink.activeForeground#e089a9
  • editorMarkerNavigation.background#0B010B
  • editorOverviewRuler.addedForeground#5dd46550
  • editorOverviewRuler.border#0B010B
  • editorOverviewRuler.currentContentForeground#5dd465
  • editorOverviewRuler.deletedForeground#E9637950
  • editorOverviewRuler.errorForeground#E9637950
  • editorOverviewRuler.incomingContentForeground#78D1E1
  • editorOverviewRuler.infoForeground#e089a950
  • editorOverviewRuler.modifiedForeground#e089a950
  • editorOverviewRuler.selectionHighlightForeground#E89E64
  • editorOverviewRuler.warningForeground#E89E6450
  • editorOverviewRuler.wordHighlightForeground#e089a9
  • editorOverviewRuler.wordHighlightStrongForeground#5dd465
  • editorRuler.foreground#d4d4d41A
  • editorSuggestWidget.background#0B010B
  • editorSuggestWidget.foreground#d4d4d4
  • editorSuggestWidget.selectedBackground#4d4146
  • editorWarning.foreground#e089a9
  • editorWhitespace.foreground#d4d4d41A
  • editorWidget.background#0B010B
  • errorForeground#E96379
  • extensionButton.prominentBackground#5dd4655a
  • extensionButton.prominentForeground#d4d4d4
  • extensionButton.prominentHoverBackground#5dd4653c
  • focusBorder#624051
  • foreground#d4d4d4
  • gitDecoration.conflictingResourceForeground#E89E64
  • gitDecoration.deletedResourceForeground#E96379
  • gitDecoration.ignoredResourceForeground#e089a980
  • gitDecoration.modifiedResourceForeground#e089a9
  • gitDecoration.untrackedResourceForeground#5dd465
  • input.background#0B010B
  • input.border#0B010B
  • input.foreground#d4d4d4
  • input.placeholderForeground#624051
  • inputOption.activeBorder#78D1E1
  • inputValidation.errorBorder#E96379
  • inputValidation.infoBorder#F03880
  • inputValidation.warningBorder#E89E64
  • list.activeSelectionBackground#4d41463c
  • list.activeSelectionForeground#d4d4d4
  • list.dropBackground#4d4146
  • list.errorForeground#E96379
  • list.focusBackground#4a353c75
  • list.highlightForeground#e089a9
  • list.hoverBackground#4d414641
  • list.inactiveSelectionBackground#4d414628
  • list.warningForeground#E89E64
  • listFilterWidget.background#0B010B
  • listFilterWidget.noMatchesOutline#E96379
  • listFilterWidget.outline#0B010B
  • merge.currentHeaderBackground#5dd4655a
  • merge.incomingHeaderBackground#78D1E15a
  • panel.background#0B010B
  • panel.border#62405154
  • panelTitle.activeBorder#E96379
  • panelTitle.activeForeground#d4d4d4
  • panelTitle.inactiveForeground#d4d4d450
  • peekView.border#4d4146
  • peekViewEditor.background#0B010B
  • peekViewEditor.matchHighlightBackground#dad16f50
  • peekViewResult.background#0B010B
  • peekViewResult.fileForeground#d4d4d4
  • peekViewResult.lineForeground#d4d4d4
  • peekViewResult.matchHighlightBackground#dad16f50
  • peekViewResult.selectionBackground#4d4146
  • peekViewResult.selectionForeground#d4d4d4
  • peekViewTitle.background#0B010B
  • peekViewTitleDescription.foreground#624051
  • peekViewTitleLabel.foreground#d4d4d4
  • pickerGroup.border#78D1E1
  • pickerGroup.foreground#e089a9
  • progressBar.background#F03880
  • selection.background#78D1E1
  • settings.checkboxBackground#0B010B
  • settings.checkboxBorder#0B010B
  • settings.checkboxForeground#d4d4d4
  • settings.dropdownBackground#0B010B
  • settings.dropdownBorder#0B010B
  • settings.dropdownForeground#d4d4d4
  • settings.headerForeground#d4d4d4
  • settings.modifiedItemIndicator#E89E64
  • settings.numberInputBackground#0B010B
  • settings.numberInputBorder#0B010B
  • settings.numberInputForeground#d4d4d4
  • settings.textInputBackground#0B010B
  • settings.textInputBorder#0B010B
  • settings.textInputForeground#d4d4d4
  • sideBar.background#0B010B
  • sideBar.border#62405154
  • sideBarSectionHeader.background#0B010B
  • sideBarSectionHeader.border#0B010B
  • sideBarTitle.foreground#d4d4d4
  • statusBar.background#0B010B
  • statusBar.debuggingBackground#F03880
  • statusBar.debuggingForeground#0B010B
  • statusBar.foreground#d4d4d4
  • statusBar.noFolderBackground#0B010B
  • statusBar.noFolderForeground#d4d4d4
  • statusBarItem.prominentBackground#F03880
  • statusBarItem.prominentForeground#0B010B
  • statusBarItem.prominentHoverBackground#E89E64
  • statusBarItem.remoteBackground#F03880
  • statusBarItem.remoteForeground#0B010B
  • tab.activeBackground#4d414628
  • tab.activeBorderTop#F0388050
  • tab.activeForeground#d4d4d4
  • tab.border#0B010B
  • tab.inactiveBackground#0B010B
  • tab.inactiveForeground#e089a9aa
  • terminal.ansiBlack#0B010B
  • terminal.ansiBlue#78D1E1
  • terminal.ansiBrightBlack#626483
  • terminal.ansiBrightBlue#78D1E1
  • terminal.ansiBrightCyan#A4FFFF
  • terminal.ansiBrightGreen#00F769
  • terminal.ansiBrightMagenta#988bc7
  • terminal.ansiBrightRed#ed4556
  • terminal.ansiBrightWhite#F7F7FB
  • terminal.ansiBrightYellow#dad16f
  • terminal.ansiCyan#A1EFE4
  • terminal.ansiGreen#5dd465
  • terminal.ansiMagenta#988bc7
  • terminal.ansiRed#F03880
  • terminal.ansiWhite#E1E1E6
  • terminal.ansiYellow#dad16f
  • terminal.background#0B010B
  • terminal.foreground#d4d4d4
  • terminal.selectionBackground#6240512d
  • terminalCursor.background#0B010B
  • terminalCursor.foreground#d4d4d4
  • textLink.activeForeground#F03880c8
  • textLink.foreground#F03880
  • titleBar.activeBackground#0B010B
  • titleBar.activeForeground#d4d4d4
  • titleBar.inactiveBackground#0B010B
  • titleBar.inactiveForeground#624051
  • walkThrough.embeddedEditorBackground#0B010B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
strongbold
header#78D1E1
source#d4d4d4
meta.diff, meta.diff.header#624051
markup.inserted#5dd465
markup.deleted#e96389
markup.changed#E89E64
invalid#E96379underline
invalid.deprecated#d4d4d4underline
entity.name.filename#dad16f
markup.error#E96379
markup.underlineunderline
markup.bold#E89E64bold
markup.heading#78D1E1bold
markup.italic#dad16f
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#988bc7
markup.inline.raw, markup.raw.restructuredtext#5dd465
markup.underline.link, markup.underline.link.image#988bc7
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ff79ac
entity.name.directive.restructuredtext, markup.quote#dad16f
meta.separator.markdown#624051
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#5dd465
punctuation.definition.constant.restructuredtext#78D1E1
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#78D1E1
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#d4d4d4
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#dad16f
entity.name.type.class, entity.name.class#988bc7bold
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#78D1E1
entity.other.inherited-class#988bc7
comment, punctuation.definition.comment, unused.comment, wildcard.comment#624051
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ff79ac
comment.block.documentation entity.name.type#988bc7
comment.block.documentation entity.name.type punctuation.definition.bracket#988bc7
comment.block.documentation variable#E89E64
constant, variable.other.constant#78D1E1
constant.character.escape, constant.character.string.escape, constant.regexp#ff79ac
entity.name.tag#ff79ac
entity.other.attribute-name.parent-selector#ff79ac
entity.other.attribute-name.id#dad16f
entity.other.attribute-name#5dd465
meta.tag.inline source#dad16f
entity.name.function, meta.function-call.generic, 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#5dd465
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#E89E64
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#5dd465
meta.decorator variable.other.object#5dd465
keyword.other.unit#78D1E1
keyword, punctuation.definition.keyword#ff79ac
keyword.control.new, keyword.operator.newbold
meta.selector#ff79ac
support#988bc7
support.function.magic, support.variable, variable.other.predefined#78D1E1bold
support.function, support.type.property-namebold
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#ff79ac
support.type.property-name.css#988bc7
punctuation.separator#988bc7
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, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#ff79ac
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, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#d4d4d4
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#ff79ac
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#988bc7
constant.other.date, constant.other.timestamp#E89E64
variable.other.alias.yaml#5dd465underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ff79acbold
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#988bc7
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#E89E64
storage.modifier#ff79ac
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#dad16f
punctuation.definition.group.capture.regexp#ff79ac
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#E96379
punctuation.definition.character-class.regexp#988bc7
punctuation.definition.group.regexp#E89E64
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#E96379
meta.assertion.look-ahead.regexp#5dd465
string#dad16f
punctuation.definition.string.begin, punctuation.definition.string.end#dad16f
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#988bc7
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#624051
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#d4d4d4
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#E89E64
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#d4d4d4bold
meta.selectionset.graphql variable#dad16f
meta.selectionset.graphql meta.arguments variable#d4d4d4
entity.name.fragment.graphql, variable.fragment.graphql#988bc7
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#d4d4d4
source.shell variable.other#78D1E1
support.constant#78D1E1bold
meta.scope.prerequisites.makefile#dad16f
meta.attribute-selector.scss#dad16f
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#d4d4d4
meta.preprocessor.haskell#624051
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file, markup.deleted.diff, markup.inserted.diff, comment, punctuation.accessor, 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, entity.name.function, entity.other.attribute-name, keyword.operator.relational, meta.delimiter.period, meta.selector, entity.name.tag.doctype, meta.tag.sgml.doctype, variable.other.object.property, entity.name.function, 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, italic, quote, source.elixir .punctuation.binary.elixir, 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, meta.tag.sgml.doctype.html, variable.other.object.js, markup.italic.markdown, markup.quote.markdown, keyword.controlitalic
constant.numeric, constant.character.numeric, storage.type.function.arrow.js, storage.type.function.arrow.js, 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, keyword.operator, variable.parameter.function, support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag, keyword.operator.logical, variable.other.object.js, keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts, entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css, entity.name.type.js, entity.name.type.module.js, support.class.component.js, support.class.component.tsx, 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.definition.string, punctuation, variable.other.readwrite.js, storage.type, source.css, string.quoted

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...