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#121419
  • activityBar.activeBorder#121419
  • activityBar.background#121419
  • activityBar.foreground#f1f1e4
  • activityBar.inactiveForeground#4a5882
  • activityBarBadge.background#ff5cb8
  • activityBarBadge.foreground#f1f1e4
  • badge.background#353746
  • badge.foreground#f1f1e4
  • breadcrumb.activeSelectionForeground#f1f1e4
  • breadcrumb.background#121419
  • breadcrumb.focusForeground#f1f1e4
  • breadcrumb.foreground#4a5882
  • breadcrumbPicker.background#111217
  • button.background#353746
  • button.foreground#f1f1e4
  • button.secondaryBackground#121419
  • button.secondaryForeground#f1f1e4
  • button.secondaryHoverBackground#2d303d
  • debugToolBar.background#1a1b23
  • diffEditor.insertedTextBackground#25f85a20
  • diffEditor.removedTextBackground#ff333350
  • dropdown.background#2d303d
  • dropdown.border#111217
  • dropdown.foreground#f1f1e4
  • editor.background#121419
  • editor.findMatchBackground#ff890a80
  • editor.findMatchHighlightBackground#f5f5f540
  • editor.findRangeHighlightBackground#35374675
  • editor.foldBackground#1a1b2380
  • editor.foreground#f1f1e4
  • editor.hoverHighlightBackground#01b7df50
  • editor.lineHighlightBorder#353746
  • editor.rangeHighlightBackground#a165f615
  • editor.selectionBackground#353746
  • editor.selectionHighlightBackground#393b45
  • editor.snippetFinalTabstopHighlightBackground#121419
  • editor.snippetFinalTabstopHighlightBorder#25f85a
  • editor.snippetTabstopHighlightBackground#121419
  • editor.snippetTabstopHighlightBorder#4a5882
  • editor.wordHighlightBackground#01b7df50
  • editor.wordHighlightStrongBackground#25f85a50
  • editorBracketHighlight.foreground1#f1f1e4
  • editorBracketHighlight.foreground2#ff5cb8
  • editorBracketHighlight.foreground3#01b7df
  • editorBracketHighlight.foreground4#25f85a
  • editorBracketHighlight.foreground5#a165f6
  • editorBracketHighlight.foreground6#ff890a
  • editorBracketHighlight.unexpectedBracket.foreground#ff3333
  • editorCodeLens.foreground#4a5882
  • editorError.foreground#ff3333
  • editorGroup.border#a165f6
  • editorGroup.dropBackground#35374670
  • editorGroupHeader.tabsBackground#121419
  • editorGutter.addedBackground#25f85a80
  • editorGutter.deletedBackground#ff333380
  • editorGutter.modifiedBackground#01b7df80
  • editorHoverWidget.background#121419
  • editorHoverWidget.border#4a5882
  • editorIndentGuide.activeBackground#f5f5f545
  • editorIndentGuide.background#f5f5f51A
  • editorLineNumber.activeForeground#f1f1e4
  • editorLineNumber.foreground#4a5882
  • editorLink.activeForeground#01b7df
  • editorMarkerNavigation.background#1a1b23
  • editorOverviewRuler.addedForeground#25f85a80
  • editorOverviewRuler.border#111217
  • editorOverviewRuler.currentContentForeground#25f85a
  • editorOverviewRuler.deletedForeground#ff333380
  • editorOverviewRuler.errorForeground#ff333380
  • editorOverviewRuler.incomingContentForeground#a165f6
  • editorOverviewRuler.infoForeground#01b7df80
  • editorOverviewRuler.modifiedForeground#01b7df80
  • editorOverviewRuler.selectionHighlightForeground#ff890a
  • editorOverviewRuler.warningForeground#ff890a80
  • editorOverviewRuler.wordHighlightForeground#01b7df
  • editorOverviewRuler.wordHighlightStrongForeground#25f85a
  • editorRuler.foreground#f5f5f51A
  • editorSuggestWidget.background#1a1b23
  • editorSuggestWidget.foreground#f1f1e4
  • editorSuggestWidget.selectedBackground#353746
  • editorWarning.foreground#01b7df
  • editorWhitespace.foreground#f5f5f51A
  • editorWidget.background#1a1b23
  • errorForeground#ff3333
  • extensionButton.prominentBackground#25f85a90
  • extensionButton.prominentForeground#f1f1e4
  • extensionButton.prominentHoverBackground#25f85a60
  • focusBorder#4a5882
  • foreground#f1f1e4
  • gitDecoration.conflictingResourceForeground#ff890a
  • gitDecoration.deletedResourceForeground#ff3333
  • gitDecoration.ignoredResourceForeground#4a5882
  • gitDecoration.modifiedResourceForeground#01b7df
  • gitDecoration.untrackedResourceForeground#25f85a
  • input.background#121419
  • input.border#111217
  • input.foreground#f1f1e4
  • input.placeholderForeground#4a5882
  • inputOption.activeBorder#a165f6
  • inputValidation.errorBorder#ff3333
  • inputValidation.infoBorder#ff5cb8
  • inputValidation.warningBorder#ff890a
  • list.activeSelectionBackground#353746
  • list.activeSelectionForeground#f1f1e4
  • list.dropBackground#353746
  • list.errorForeground#ff3333
  • list.focusBackground#35374675
  • list.highlightForeground#01b7df
  • list.hoverBackground#35374675
  • list.inactiveSelectionBackground#35374675
  • list.warningForeground#ff890a
  • listFilterWidget.background#2d303d
  • listFilterWidget.noMatchesOutline#ff3333
  • listFilterWidget.outline#393b45
  • listFilterWidget.shadow#121419
  • merge.currentHeaderBackground#25f85a90
  • merge.incomingHeaderBackground#a165f690
  • panel.background#121419
  • panel.border#a165f6
  • panelTitle.activeBorder#ff5cb8
  • panelTitle.activeForeground#f1f1e4
  • panelTitle.inactiveForeground#4a5882
  • peekView.border#353746
  • peekViewEditor.background#121419
  • peekViewEditor.matchHighlightBackground#e9f75080
  • peekViewResult.background#1a1b23
  • peekViewResult.fileForeground#f1f1e4
  • peekViewResult.lineForeground#f1f1e4
  • peekViewResult.matchHighlightBackground#e9f75080
  • peekViewResult.selectionBackground#353746
  • peekViewResult.selectionForeground#f1f1e4
  • peekViewTitle.background#111217
  • peekViewTitleDescription.foreground#4a5882
  • peekViewTitleLabel.foreground#f1f1e4
  • pickerGroup.border#a165f6
  • pickerGroup.foreground#01b7df
  • progressBar.background#ff5cb8
  • scrollbar.shadow#121419
  • selection.background#a165f6
  • settings.checkboxBackground#1a1b23
  • settings.checkboxBorder#111217
  • settings.checkboxForeground#f1f1e4
  • settings.dropdownBackground#1a1b23
  • settings.dropdownBorder#111217
  • settings.dropdownForeground#f1f1e4
  • settings.headerForeground#f1f1e4
  • settings.modifiedItemIndicator#ff890a
  • settings.numberInputBackground#1a1b23
  • settings.numberInputBorder#111217
  • settings.numberInputForeground#f1f1e4
  • settings.textInputBackground#1a1b23
  • settings.textInputBorder#111217
  • settings.textInputForeground#f1f1e4
  • sideBar.background#121419
  • sideBarSectionHeader.background#121419
  • sideBarSectionHeader.border#121419
  • sideBarTitle.foreground#f1f1e4
  • statusBar.background#121419
  • statusBar.debuggingBackground#ff3333
  • statusBar.debuggingForeground#111217
  • statusBar.foreground#f1f1e4
  • statusBar.noFolderBackground#111217
  • statusBar.noFolderForeground#f1f1e4
  • statusBarItem.prominentBackground#ff3333
  • statusBarItem.prominentHoverBackground#ff890a
  • statusBarItem.remoteBackground#a165f6
  • statusBarItem.remoteForeground#121419
  • tab.activeBackground#121419
  • tab.activeBorder#ff5cb880
  • tab.activeBorderTop#121419
  • tab.activeForeground#f1f1e4
  • tab.border#121419
  • tab.inactiveBackground#121419
  • tab.inactiveForeground#4a5882
  • terminal.ansiBlack#1a1b23
  • terminal.ansiBlue#a165f6
  • terminal.ansiBrightBlack#4a5882
  • terminal.ansiBrightBlue#c285ff
  • terminal.ansiBrightCyan#70ffff
  • terminal.ansiBrightGreen#47ff7b
  • terminal.ansiBrightMagenta#ff70d4
  • terminal.ansiBrightRed#ff5c5c
  • terminal.ansiBrightWhite#f5f5f5
  • terminal.ansiBrightYellow#ffff85
  • terminal.ansiCyan#01b7df
  • terminal.ansiGreen#25f85a
  • terminal.ansiMagenta#ff5cb8
  • terminal.ansiRed#ff3333
  • terminal.ansiWhite#f1f1e4
  • terminal.ansiYellow#e9f750
  • terminal.background#121419
  • terminal.foreground#f1f1e4
  • titleBar.activeBackground#121419
  • titleBar.activeForeground#f1f1e4
  • titleBar.border#121419
  • titleBar.inactiveBackground#121419
  • titleBar.inactiveForeground#4a5882
  • walkThrough.embeddedEditorBackground#1a1b23
  • widget.shadow#121419

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#a165f6
meta.diff, meta.diff.header#4a5882
markup.inserted#25f85a
markup.deleted#ff3333
markup.changed#ff890a
invalid#ff3333underline italic
invalid.deprecated#f1f1e4underline italic
entity.name.filename#e9f750
markup.error#ff3333
markup.underlineunderline
markup.bold#ff890abold
markup.heading#a165f6bold
markup.italic#e9f750italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#01b7df
markup.inline.raw, markup.raw.restructuredtext#25f85a
markup.underline.link, markup.underline.link.image#01b7df
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ff5cb8
entity.name.directive.restructuredtext, markup.quote#e9f750italic
meta.separator.markdown#4a5882
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#25f85a
punctuation.definition.constant.restructuredtext#a165f6
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#a165f6
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#f1f1e4
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#e9f750
entity.name.type.class, entity.name.class#01b7df
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#a165f6italic
entity.other.inherited-class#01b7dfitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#4a5882
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ff5cb8
comment.block.documentation entity.name.type#01b7dfitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#01b7df
comment.block.documentation variable#ff890aitalic
constant, variable.other.constant#a165f6
constant.character.escape, constant.character.string.escape, constant.regexp#ff5cb8
entity.name.tag#ff5cb8
entity.other.attribute-name.parent-selector#ff5cb8
entity.other.attribute-name#25f85aitalic
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#25f85a
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#ff890aitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#25f85aitalic
meta.decorator variable.other.object#25f85a
keyword, punctuation.definition.keyword#ff5cb8
keyword.control.new, keyword.operator.newbold
meta.selector#ff5cb8
support#01b7dfitalic
support.function.magic, support.variable, variable.other.predefined#a165f6
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#ff5cb8
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#f1f1e4
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#ff5cb8
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#01b7df
constant.other.date, constant.other.timestamp#ff890a
variable.other.alias.yaml#25f85aitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ff5cb8
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#01b7dfitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ff890a
storage.modifier#ff5cb8
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#e9f750
punctuation.definition.group.capture.regexp#ff5cb8
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff3333
punctuation.definition.character-class.regexp#01b7df
punctuation.definition.group.regexp#ff890a
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff3333
meta.assertion.look-ahead.regexp#25f85a
string#e9f750
punctuation.definition.string.begin, punctuation.definition.string.end#e4ef6b
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#72e4fe
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#4a5882
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#f1f1e4
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#ff890aitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#f1f1e4
meta.selectionset.graphql variable#e9f750
meta.selectionset.graphql meta.arguments variable#f1f1e4
entity.name.fragment.graphql, variable.fragment.graphql#01b7df
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#f1f1e4
source.shell variable.other#a165f6
support.constant#a165f6
meta.scope.prerequisites.makefile#e9f750
meta.attribute-selector.scss#e9f750
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#f1f1e4
meta.preprocessor.haskell#4a5882
log.error#ff3333bold
log.warning#e9f750bold
Elizabeth Báthory theme by Coachonko - VS Code Theme