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.activeBackground#9580ff10
  • activityBar.activeBorder#ff81c180
  • activityBar.background#263340
  • activityBar.foreground#718daa
  • activityBar.inactiveForeground#6272A4
  • activityBarBadge.background#ff81c1
  • activityBarBadge.foreground#fdfdf8
  • badge.background#44475A
  • badge.foreground#fdfdf8
  • breadcrumb.activeSelectionForeground#fdfdf8
  • breadcrumb.background#0b0d0f
  • breadcrumb.focusForeground#fdfdf8
  • breadcrumb.foreground#718daa
  • breadcrumbPicker.background#191A21
  • button.background#44475A
  • button.foreground#fdfdf8
  • button.secondaryBackground#282A36
  • button.secondaryForeground#fdfdf8
  • button.secondaryHoverBackground#343746
  • debugToolBar.background#21222C
  • diffEditor.insertedTextBackground#8dff8220
  • diffEditor.removedTextBackground#FF555550
  • dropdown.background#343746
  • dropdown.border#191A21
  • dropdown.foreground#fdfdf8
  • editor.background#0b0d0f
  • editor.findMatchBackground#ffca8080
  • editor.findMatchHighlightBackground#F0F0F040
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#21222C80
  • editor.foreground#fdfdf8
  • editor.hoverHighlightBackground#85fff450
  • editor.lineHighlightBorder#44475A
  • editor.rangeHighlightBackground#9580ff15
  • editor.selectionBackground#44475A
  • editor.selectionHighlightBackground#424450
  • editor.snippetFinalTabstopHighlightBackground#282A36
  • editor.snippetFinalTabstopHighlightBorder#8dff82
  • editor.snippetTabstopHighlightBackground#282A36
  • editor.snippetTabstopHighlightBorder#6272A4
  • editor.wordHighlightBackground#85fff450
  • editor.wordHighlightStrongBackground#8dff8250
  • editorBracketHighlight.foreground1#fdfdf8
  • editorBracketHighlight.foreground2#ff81c1
  • editorBracketHighlight.foreground3#85fff4
  • editorBracketHighlight.foreground4#8dff82
  • editorBracketHighlight.foreground5#9580ff
  • editorBracketHighlight.foreground6#ffca80
  • editorBracketHighlight.unexpectedBracket.foreground#FF5555
  • editorCodeLens.foreground#6272A4
  • editorError.foreground#FF5555
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#0a0d10
  • editorGutter.addedBackground#8dff8280
  • editorGutter.deletedBackground#FF555580
  • editorGutter.modifiedBackground#85fff480
  • editorHoverWidget.background#282A36
  • editorHoverWidget.border#6272A4
  • editorIndentGuide.activeBackground#F0F0F045
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#728fac
  • editorLink.activeForeground#85fff4
  • editorMarkerNavigation.background#21222C
  • editorOverviewRuler.addedForeground#8dff8280
  • editorOverviewRuler.border#191A21
  • editorOverviewRuler.currentContentForeground#8dff82
  • editorOverviewRuler.deletedForeground#FF555580
  • editorOverviewRuler.errorForeground#FF555580
  • editorOverviewRuler.incomingContentForeground#9580ff
  • editorOverviewRuler.infoForeground#85fff480
  • editorOverviewRuler.modifiedForeground#85fff480
  • editorOverviewRuler.selectionHighlightForeground#ffca80
  • editorOverviewRuler.warningForeground#ffca8080
  • editorOverviewRuler.wordHighlightForeground#85fff4
  • editorOverviewRuler.wordHighlightStrongForeground#8dff82
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#21222C
  • editorSuggestWidget.foreground#fdfdf8
  • editorSuggestWidget.selectedBackground#44475A
  • editorWarning.foreground#85fff4
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#21222C
  • errorForeground#FF5555
  • extensionButton.prominentBackground#8dff8290
  • extensionButton.prominentForeground#fdfdf8
  • extensionButton.prominentHoverBackground#8dff8260
  • focusBorder#6272A4
  • foreground#fdfdf8
  • gitDecoration.conflictingResourceForeground#ffca80
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.ignoredResourceForeground#6272A4
  • gitDecoration.modifiedResourceForeground#85fff4
  • gitDecoration.untrackedResourceForeground#8dff82
  • input.background#282A36
  • input.border#191A21
  • input.foreground#fdfdf8
  • input.placeholderForeground#6272A4
  • inputOption.activeBorder#9580ff
  • inputValidation.errorBorder#FF5555
  • inputValidation.infoBorder#ff81c1
  • inputValidation.warningBorder#ffca80
  • list.activeSelectionBackground#44475A
  • list.activeSelectionForeground#fdfdf8
  • list.dropBackground#44475A
  • list.errorForeground#FF5555
  • list.focusBackground#44475A75
  • list.highlightForeground#85fff4
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#ffca80
  • listFilterWidget.background#343746
  • listFilterWidget.noMatchesOutline#FF5555
  • listFilterWidget.outline#424450
  • merge.currentHeaderBackground#8dff8290
  • merge.incomingHeaderBackground#9580ff90
  • panel.background#282A36
  • panel.border#9580ff
  • panelTitle.activeBorder#ff81c1
  • panelTitle.activeForeground#fdfdf8
  • panelTitle.inactiveForeground#6272A4
  • peekView.border#44475A
  • peekViewEditor.background#282A36
  • peekViewEditor.matchHighlightBackground#ffff8280
  • peekViewResult.background#21222C
  • peekViewResult.fileForeground#fdfdf8
  • peekViewResult.lineForeground#fdfdf8
  • peekViewResult.matchHighlightBackground#ffff8280
  • peekViewResult.selectionBackground#44475A
  • peekViewResult.selectionForeground#fdfdf8
  • peekViewTitle.background#191A21
  • peekViewTitleDescription.foreground#6272A4
  • peekViewTitleLabel.foreground#fdfdf8
  • pickerGroup.border#9580ff
  • pickerGroup.foreground#85fff4
  • progressBar.background#ff81c1
  • selection.background#9580ff
  • settings.checkboxBackground#21222C
  • settings.checkboxBorder#191A21
  • settings.checkboxForeground#fdfdf8
  • settings.dropdownBackground#21222C
  • settings.dropdownBorder#191A21
  • settings.dropdownForeground#fdfdf8
  • settings.headerForeground#fdfdf8
  • settings.modifiedItemIndicator#ffca80
  • settings.numberInputBackground#21222C
  • settings.numberInputBorder#191A21
  • settings.numberInputForeground#fdfdf8
  • settings.textInputBackground#21222C
  • settings.textInputBorder#191A21
  • settings.textInputForeground#fdfdf8
  • sideBar.background#21222C
  • sideBarSectionHeader.background#282A36
  • sideBarTitle.foreground#fdfdf8
  • statusBar.background#21222C
  • statusBar.debuggingBackground#FF5555
  • statusBar.debuggingForeground#191A21
  • statusBar.foreground#fdfdf8
  • statusBar.noFolderBackground#191A21
  • statusBar.noFolderForeground#fdfdf8
  • statusBarItem.prominentBackground#FF5555
  • statusBarItem.prominentHoverBackground#ffca80
  • statusBarItem.remoteBackground#9580ff
  • statusBarItem.remoteForeground#282A36
  • tab.activeBackground#0b0d0f
  • tab.activeBorderTop#ff81c180
  • tab.activeForeground#fdfdf8
  • tab.border#191A21
  • tab.inactiveBackground#131a20
  • tab.inactiveForeground#718daa
  • terminal.ansiBlack#21222C
  • terminal.ansiBlue#9580ff
  • terminal.ansiBrightBlack#728fac
  • terminal.ansiBrightBlue#9580ff
  • terminal.ansiBrightCyan#85fff4
  • terminal.ansiBrightGreen#8dff82
  • terminal.ansiBrightMagenta#ff81c1
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#ffff82
  • terminal.ansiCyan#85fff4
  • terminal.ansiGreen#8dff82
  • terminal.ansiMagenta#ff81c1
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#fdfdf8
  • terminal.ansiYellow#ffff82
  • terminal.background#0b0d0f
  • terminal.foreground#fdfdf8
  • titleBar.activeBackground#282A36
  • titleBar.activeForeground#fdfdf8
  • titleBar.inactiveBackground#191A21
  • titleBar.inactiveForeground#6272A4
  • walkThrough.embeddedEditorBackground#21222C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#9580ff
meta.diff, meta.diff.header#6272A4
markup.inserted#8dff82
markup.deleted#FF5555
markup.changed#ffca80
invalid#FF5555underline italic
invalid.deprecated#fdfdf8underline italic
entity.name.filename#ffff82
markup.error#FF5555
markup.underlineunderline
markup.bold#ffca80bold
markup.heading#9580ffbold
markup.italic#ffff82italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#85fff4
markup.inline.raw, markup.raw.restructuredtext#8dff82
markup.underline.link, markup.underline.link.image#85fff4
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ff81c1
entity.name.directive.restructuredtext, markup.quote#ffff82italic
meta.separator.markdown#6272A4
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#8dff82
punctuation.definition.constant.restructuredtext#9580ff
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#9580ff
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#fdfdf8
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffff82
entity.name.type.class, entity.name.class#85fff4normal
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#9580ffitalic
entity.other.inherited-class#85fff4italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#728fac
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ff81c1
comment.block.documentation entity.name.type#85fff4italic
comment.block.documentation entity.name.type punctuation.definition.bracket#85fff4
comment.block.documentation variable#ffca80italic
constant, variable.other.constant#9580ff
constant.character.escape, constant.character.string.escape, constant.regexp#ff81c1
entity.name.tag#ff81c1
entity.other.attribute-name.parent-selector#ff81c1
entity.other.attribute-name#8dff82italic
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#8dff82
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#ffca80italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#8dff82italic
meta.decorator variable.other.object#8dff82
keyword, punctuation.definition.keyword#ff81c1
keyword.control.new, keyword.operator.newbold
meta.selector#ff81c1
support#85fff4italic
support.function.magic, support.variable, variable.other.predefined#9580ffregular
support.function, support.type.property-nameregular
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#ff81c1
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#fdfdf8
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#ff81c1
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#85fff4
constant.other.date, constant.other.timestamp#ffca80
variable.other.alias.yaml#8dff82italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ff81c1regular
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#85fff4italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ffca80
storage.modifier#ff81c1
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffff82
punctuation.definition.group.capture.regexp#ff81c1
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF5555
punctuation.definition.character-class.regexp#85fff4
punctuation.definition.group.regexp#ffca80
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF5555
meta.assertion.look-ahead.regexp#8dff82
string#ffff82
punctuation.definition.string.begin, punctuation.definition.string.end#E9F284
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#8BE9FE
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#728fac
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#fdfdf8
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#ffca80italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#fdfdf8normal
meta.selectionset.graphql variable#ffff82
meta.selectionset.graphql meta.arguments variable#fdfdf8
entity.name.fragment.graphql, variable.fragment.graphql#85fff4
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#fdfdf8
source.shell variable.other#9580ff
support.constant#9580ffnormal
meta.scope.prerequisites.makefile#ffff82
meta.attribute-selector.scss#ffff82
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#fdfdf8
meta.preprocessor.haskell#728fac
log.error#FF5555bold
log.warning#ffff82bold

Shiki preview

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

Loading...