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
emphasis—italic
strong—bold
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.underline—underline
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.new—bold
meta.selector#ff5cb8—
support#01b7dfitalic
support.function.magic, support.variable, variable.other.predefined#a165f6—
support.function, support.type.property-name—regular
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