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#8094FF10
  • activityBar.activeBorder#8094FF80
  • activityBar.background#222433
  • activityBar.foreground#F0F0F5
  • activityBar.inactiveForeground#9093A3
  • activityBarBadge.background#8094FF
  • activityBarBadge.foreground#F0F0F5
  • badge.background#2B2E40
  • badge.foreground#F0F0F5
  • breadcrumb.activeSelectionForeground#F0F0F5
  • breadcrumb.background#1C1E29
  • breadcrumb.focusForeground#F0F0F5
  • breadcrumb.foreground#9093A3
  • breadcrumbPicker.background#14151D
  • button.background#2B2E40
  • button.foreground#F0F0F5
  • button.secondaryBackground#1C1E29
  • button.secondaryForeground#F0F0F5
  • button.secondaryHoverBackground#1C1E29
  • debugToolBar.background#14151D
  • diffEditor.insertedTextBackground#50FA7B20
  • diffEditor.removedTextBackground#FF555550
  • dropdown.background#1C1E29
  • dropdown.border#14151D
  • dropdown.foreground#F0F0F5
  • editor.background#1C1E29
  • editor.findMatchBackground#F0AB7A80
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#2C2F40
  • editor.foldBackground#14151D
  • editor.foreground#F0F0F5
  • editor.hoverHighlightBackground#8BE9FD50
  • editor.lineHighlightBorder#2B2E40
  • editor.rangeHighlightBackground#8094FF15
  • editor.selectionBackground#2B2E40
  • editor.selectionHighlightBackground#2B2E40
  • editor.snippetFinalTabstopHighlightBackground#1C1E29
  • editor.snippetFinalTabstopHighlightBorder#50FA7B
  • editor.snippetTabstopHighlightBackground#1C1E29
  • editor.snippetTabstopHighlightBorder#474C66
  • editor.wordHighlightBackground#8BE9FD50
  • editor.wordHighlightStrongBackground#50FA7B50
  • editorBracketHighlight.foreground1#F0F0F5
  • editorBracketHighlight.foreground2#FF79D0
  • editorBracketHighlight.foreground3#8BE9FD
  • editorBracketHighlight.foreground4#50FA7B
  • editorBracketHighlight.foreground5#8094FF
  • editorBracketHighlight.foreground6#F0AB7A
  • editorBracketHighlight.unexpectedBracket.foreground#FF5555
  • editorCodeLens.foreground#474C66
  • editorError.foreground#FF5555
  • editorGroup.border#8094FF
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#14151D
  • editorGutter.addedBackground#50FA7B80
  • editorGutter.deletedBackground#FF555580
  • editorGutter.modifiedBackground#8BE9FD80
  • editorHoverWidget.background#1C1E29
  • editorHoverWidget.border#474C66
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#3C4058
  • editorLineNumber.foreground#6b6f84
  • editorLink.activeForeground#8BE9FD
  • editorMarkerNavigation.background#14151D
  • editorOverviewRuler.addedForeground#50FA7B80
  • editorOverviewRuler.border#14151D
  • editorOverviewRuler.currentContentForeground#50FA7B
  • editorOverviewRuler.deletedForeground#FF555580
  • editorOverviewRuler.errorForeground#FF555580
  • editorOverviewRuler.incomingContentForeground#8094FF
  • editorOverviewRuler.infoForeground#8BE9FD80
  • editorOverviewRuler.modifiedForeground#8BE9FD80
  • editorOverviewRuler.selectionHighlightForeground#F0AB7A
  • editorOverviewRuler.warningForeground#F0AB7A80
  • editorOverviewRuler.wordHighlightForeground#8BE9FD
  • editorOverviewRuler.wordHighlightStrongForeground#50FA7B
  • editorRuler.foreground#3C4058
  • editorSuggestWidget.background#14151D
  • editorSuggestWidget.foreground#F0F0F5
  • editorSuggestWidget.selectedBackground#2B2E40
  • editorWarning.foreground#8BE9FD
  • editorWhitespace.foreground#3C4058
  • editorWidget.background#14151D
  • errorForeground#FF5555
  • extensionButton.prominentBackground#50FA7B90
  • extensionButton.prominentForeground#F0F0F5
  • extensionButton.prominentHoverBackground#50FA7B60
  • focusBorder#474C66
  • foreground#F0F0F5
  • gitDecoration.conflictingResourceForeground#F0AB7A
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.ignoredResourceForeground#6b6f84
  • gitDecoration.modifiedResourceForeground#8BE9FD
  • gitDecoration.untrackedResourceForeground#50FA7B
  • input.background#1C1E29
  • input.border#14151D
  • input.foreground#F0F0F5
  • input.placeholderForeground#9093A3
  • inputOption.activeBorder#8094FF
  • inputValidation.errorBorder#FF5555
  • inputValidation.infoBorder#FF79D0
  • inputValidation.warningBorder#F0AB7A
  • list.activeSelectionBackground#2B2E40
  • list.activeSelectionForeground#F0F0F5
  • list.dropBackground#2B2E40
  • list.errorForeground#FF5555
  • list.focusBackground#2C2F40
  • list.highlightForeground#8BE9FD
  • list.hoverBackground#2C2F40
  • list.inactiveSelectionBackground#2C2F40
  • list.warningForeground#F0AB7A
  • listFilterWidget.background#1C1E29
  • listFilterWidget.noMatchesOutline#FF5555
  • listFilterWidget.outline#4F5368
  • merge.currentHeaderBackground#50FA7B90
  • merge.incomingHeaderBackground#8094FF90
  • panel.background#1C1E29
  • panel.border#8094FF
  • panelTitle.activeBorder#8094FF
  • panelTitle.activeForeground#F0F0F5
  • panelTitle.inactiveForeground#9093A3
  • peekView.border#2B2E40
  • peekViewEditor.background#1C1E29
  • peekViewEditor.matchHighlightBackground#F4FF7580
  • peekViewResult.background#14151D
  • peekViewResult.fileForeground#F0F0F5
  • peekViewResult.lineForeground#F0F0F5
  • peekViewResult.matchHighlightBackground#F4FF7580
  • peekViewResult.selectionBackground#2B2E40
  • peekViewResult.selectionForeground#F0F0F5
  • peekViewTitle.background#14151D
  • peekViewTitleDescription.foreground#474C66
  • peekViewTitleLabel.foreground#F0F0F5
  • pickerGroup.border#8094FF
  • pickerGroup.foreground#8BE9FD
  • progressBar.background#FF79D0
  • selection.background#8094FF
  • settings.checkboxBackground#14151D
  • settings.checkboxBorder#14151D
  • settings.checkboxForeground#F0F0F5
  • settings.dropdownBackground#14151D
  • settings.dropdownBorder#14151D
  • settings.dropdownForeground#F0F0F5
  • settings.headerForeground#F0F0F5
  • settings.modifiedItemIndicator#F0AB7A
  • settings.numberInputBackground#14151D
  • settings.numberInputBorder#14151D
  • settings.numberInputForeground#F0F0F5
  • settings.textInputBackground#14151D
  • settings.textInputBorder#14151D
  • settings.textInputForeground#F0F0F5
  • sideBar.background#14151D
  • sideBarSectionHeader.background#1C1E29
  • sideBarSectionHeader.border#14151D
  • sideBarTitle.foreground#F0F0F5
  • statusBar.background#14151D
  • statusBar.debuggingBackground#FF5555
  • statusBar.debuggingForeground#14151D
  • statusBar.foreground#F0F0F5
  • statusBar.noFolderBackground#14151D
  • statusBar.noFolderForeground#F0F0F5
  • statusBarItem.prominentBackground#FF5555
  • statusBarItem.prominentHoverBackground#F0AB7A
  • statusBarItem.remoteBackground#8094FF
  • statusBarItem.remoteForeground#1C1E29
  • tab.activeBackground#1C1E29
  • tab.activeBorderTop#8094FF80
  • tab.activeForeground#F0F0F5
  • tab.border#14151D
  • tab.inactiveBackground#14151D
  • tab.inactiveForeground#6b6f84
  • terminal.ansiBlack#21222C
  • terminal.ansiBlue#BD93F9
  • terminal.ansiBrightBlack#6272A4
  • terminal.ansiBrightBlue#D6ACFF
  • terminal.ansiBrightCyan#A4FFFF
  • terminal.ansiBrightGreen#69FF94
  • terminal.ansiBrightMagenta#8094FF
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFFA5
  • terminal.ansiCyan#8BE9FD
  • terminal.ansiGreen#50FA7B
  • terminal.ansiMagenta#8094FF
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#F8F8F2
  • terminal.ansiYellow#f4ff75
  • terminal.background#1C1E29
  • terminal.foreground#F0F0F5
  • titleBar.activeBackground#14151D
  • titleBar.activeForeground#F0F0F5
  • titleBar.inactiveBackground#14151D
  • titleBar.inactiveForeground#474C66
  • walkThrough.embeddedEditorBackground#14151D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#8094FF—
meta.diff, meta.diff.header#474C66—
markup.inserted#50FA7B—
markup.deleted#FF5555—
markup.changed#F0AB7A—
invalid#FF5555underline italic
invalid.deprecated#F0F0F5underline italic
entity.name.filename#F4FF75—
markup.error#FF5555—
markup.underline—underline
markup.bold#F0AB7Abold
markup.heading#8094FFbold
markup.italic#F4FF75italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#8BE9FD—
markup.inline.raw, markup.raw.restructuredtext#50FA7B—
markup.underline.link, markup.underline.link.image#8BE9FD—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#FF79D0—
entity.name.directive.restructuredtext, markup.quote#F4FF75italic
meta.separator.markdown#474C66—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#50FA7B—
punctuation.definition.constant.restructuredtext#8094FF—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#8094FF—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#F0F0F5—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#F4FF75—
entity.name.type.class, entity.name.class#8BE9FD
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#8094FFitalic
entity.other.inherited-class#8BE9FDitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#444a6e—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#FF79D0—
comment.block.documentation entity.name.type#8BE9FDitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#8BE9FD—
comment.block.documentation variable#F0AB7Aitalic
constant, variable.other.constant#8094FF—
constant.character.escape, constant.character.string.escape, constant.regexp#FF79D0—
entity.name.tag#8094FF—
entity.other.attribute-name.parent-selector#FF79D0—
entity.other.attribute-name#50FA7Bitalic
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#50FA7B—
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#F0AB7Aitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#50FA7Bitalic
meta.decorator variable.other.object#50FA7B—
keyword, punctuation.definition.keyword#FF79D0—
keyword.control.new, keyword.operator.new—bold
meta.selector#FF79D0—
support#8BE9FDitalic
support.function.magic, support.variable, variable.other.predefined#8094FF
support.function, support.type.property-name—
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#FF79D0—
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#F0F0F5—
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#FF79D0—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#8BE9FD—
constant.other.date, constant.other.timestamp#F0AB7A—
variable.other.alias.yaml#50FA7Bitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#FF79D0
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#8BE9FDitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#F0AB7A—
storage.modifier#FF79D0—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#F4FF75—
punctuation.definition.group.capture.regexp#FF79D0—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF5555—
punctuation.definition.character-class.regexp#8BE9FD—
punctuation.definition.group.regexp#F0AB7A—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF5555—
meta.assertion.look-ahead.regexp#50FA7B—
string#F4FF75—
punctuation.definition.string.begin, punctuation.definition.string.end#F4FF75—
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#474C66—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#F0F0F5—
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#F0AB7Aitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#F0F0F5
meta.selectionset.graphql variable#F4FF75—
meta.selectionset.graphql meta.arguments variable#F0F0F5—
entity.name.fragment.graphql, variable.fragment.graphql#8BE9FD—
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#F0F0F5—
source.shell variable.other#8094FF—
support.constant#8094FF
meta.scope.prerequisites.makefile#F4FF75—
meta.attribute-selector.scss#F4FF75—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#F0F0F5—
meta.preprocessor.haskell#474C66—
log.error#FF5555bold
log.warning#F4FF75bold
ThemeDatabase All Themes by enes ozturk - VS Code Theme