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#2e78c110
  • activityBar.activeBorder#c0226e80
  • activityBar.background#282f32
  • activityBar.foreground#b1b1a3
  • activityBar.inactiveForeground#415050
  • activityBarBadge.background#c0226e
  • activityBarBadge.foreground#282f32
  • badge.background#282f32
  • badge.foreground#b1b1a3
  • breadcrumb.activeSelectionForeground#b1b1a3
  • breadcrumb.background#282f32
  • breadcrumb.focusForeground#b1b1a3
  • breadcrumb.foreground#415050
  • breadcrumbPicker.background#030a0d
  • button.background#06151a
  • button.foreground#b1b1a3
  • checkbox.background#06151a
  • checkbox.border#030a0d
  • checkbox.foreground#b1b1a3
  • contrastBorder#030a0d
  • debugToolBar.background#06151a
  • diffEditor.insertedTextBackground#edb7ab20
  • diffEditor.removedTextBackground#ca1d2c50
  • dropdown.background#282f32
  • dropdown.border#030a0d
  • dropdown.foreground#b1b1a3
  • editor.background#282f32
  • editor.findMatchBackground#b7aa9a80
  • editor.findMatchHighlightBackground#fcf4de40
  • editor.findRangeHighlightBackground#09202775
  • editor.foldBackground#06151a
  • editor.foreground#b1b1a3
  • editor.hoverHighlightBackground#030a0d
  • editor.lineHighlightBorder#282f32
  • editor.rangeHighlightBackground#2e78c115
  • editor.selectionBackground#282f32
  • editor.selectionHighlightBackground#282f32
  • editor.snippetFinalTabstopHighlightBackground#282f32
  • editor.snippetFinalTabstopHighlightBorder#edb7ab
  • editor.snippetTabstopHighlightBackground#282f32
  • editor.snippetTabstopHighlightBorder#415050
  • editor.wordHighlightBackground#30918550
  • editor.wordHighlightStrongBackground#edb7ab50
  • editorCodeLens.foreground#415050
  • editorError.foreground#ca1d2c
  • editorGroup.border#2e78c1
  • editorGroup.dropBackground#09202770
  • editorGroupHeader.tabsBackground#030a0d
  • editorGutter.addedBackground#edb7ab80
  • editorGutter.deletedBackground#ca1d2c80
  • editorGutter.modifiedBackground#30918580
  • editorHoverWidget.background#282f32
  • editorHoverWidget.border#415050
  • editorIndentGuide.activeBackground#fcf4de45
  • editorIndentGuide.background#fcf4de1A
  • editorLineNumber.foreground#415050
  • editorLink.activeForeground#309185
  • editorMarkerNavigation.background#06151a
  • editorOverviewRuler.addedForeground#edb7ab80
  • editorOverviewRuler.border#030a0d
  • editorOverviewRuler.currentContentForeground#edb7ab
  • editorOverviewRuler.deletedForeground#ca1d2c80
  • editorOverviewRuler.errorForeground#ca1d2c80
  • editorOverviewRuler.incomingContentForeground#2e78c1
  • editorOverviewRuler.infoForeground#30918580
  • editorOverviewRuler.modifiedForeground#30918580
  • editorOverviewRuler.selectionHighlightForeground#b7aa9a
  • editorOverviewRuler.warningForeground#b7aa9a80
  • editorOverviewRuler.wordHighlightForeground#309185
  • editorOverviewRuler.wordHighlightStrongForeground#edb7ab
  • editorRuler.foreground#fcf4de1A
  • editorSuggestWidget.background#06151a
  • editorSuggestWidget.foreground#b1b1a3
  • editorSuggestWidget.selectedBackground#282f32
  • editorWarning.foreground#b7aa9a
  • editorWhitespace.foreground#fcf4de1A
  • editorWidget.background#06151a
  • errorForeground#ca1d2c
  • extensionButton.prominentBackground#edb7ab90
  • extensionButton.prominentForeground#b1b1a3
  • extensionButton.prominentHoverBackground#edb7ab60
  • focusBorder#415050
  • foreground#b1b1a3
  • gitDecoration.conflictingResourceForeground#b7aa9a
  • gitDecoration.deletedResourceForeground#ca1d2c
  • gitDecoration.ignoredResourceForeground#415050
  • gitDecoration.modifiedResourceForeground#309185
  • gitDecoration.untrackedResourceForeground#edb7ab
  • input.background#282f32
  • input.border#030a0d
  • input.foreground#b1b1a3
  • input.placeholderForeground#415050
  • inputOption.activeBorder#2e78c1
  • inputValidation.errorBackground#282f32
  • inputValidation.errorBorder#ca1d2c
  • inputValidation.errorForeground#ca1d2c
  • inputValidation.infoBackground#282f32
  • inputValidation.infoBorder#2e78c1
  • inputValidation.infoForeground#2e78c1
  • inputValidation.warningBackground#282f32
  • inputValidation.warningBorder#b7aa9a
  • inputValidation.warningForeground#b7aa9a
  • list.activeSelectionBackground#282f32
  • list.activeSelectionForeground#b1b1a3
  • list.dropBackground#282f32
  • list.errorForeground#ca1d2c
  • list.focusBackground#09202775
  • list.highlightForeground#309185
  • list.hoverBackground#09202775
  • list.inactiveSelectionBackground#09202775
  • list.warningForeground#b7aa9a
  • listFilterWidget.background#282f32
  • listFilterWidget.noMatchesOutline#ca1d2c
  • listFilterWidget.outline#282f32
  • merge.currentHeaderBackground#edb7ab90
  • merge.incomingHeaderBackground#2e78c190
  • notification.background#282f32
  • notification.buttonBackground#282f32
  • notification.buttonForeground#b1b1a3
  • notification.buttonHoverBackground#09202775
  • notification.errorBackground#ca1d2c
  • notification.errorForeground#282f32
  • notification.foreground#b1b1a3
  • notification.infoBackground#2e78c1
  • notification.infoForeground#282f32
  • notification.warningBackground#b7aa9a
  • notification.warningForeground#282f32
  • notificationCenter.border#06151a
  • notificationCenterHeader.background#282f32
  • notificationCenterHeader.foreground#b1b1a3
  • notificationLink.foreground#309185
  • notifications.background#282f32
  • notifications.border#06151a
  • notifications.foreground#b1b1a3
  • notificationsErrorIcon.foreground#ca1d2c
  • notificationsInfoIcon.foreground#2e78c1
  • notificationsWarningIcon.foreground#b7aa9a
  • notificationToast.border#06151a
  • panel.background#282f32
  • panel.border#2e78c1
  • panelInput.border#b1b1a3
  • panelTitle.activeBorder#c0226e
  • panelTitle.activeForeground#b1b1a3
  • panelTitle.inactiveForeground#415050
  • peekView.border#282f32
  • peekViewEditor.background#282f32
  • peekViewEditor.matchHighlightBackground#a8657180
  • peekViewResult.background#06151a
  • peekViewResult.fileForeground#b1b1a3
  • peekViewResult.lineForeground#b1b1a3
  • peekViewResult.matchHighlightBackground#a8657180
  • peekViewResult.selectionBackground#282f32
  • peekViewResult.selectionForeground#b1b1a3
  • peekViewTitle.background#030a0d
  • peekViewTitleDescription.foreground#415050
  • peekViewTitleLabel.foreground#b1b1a3
  • pickerGroup.border#2e78c1
  • pickerGroup.foreground#309185
  • progressBar.background#c0226e
  • scrollbar.shadow#444444
  • selection.background#2e78c1
  • settings.checkboxBackground#06151a
  • settings.checkboxBorder#030a0d
  • settings.checkboxForeground#b1b1a3
  • settings.dropdownBackground#06151a
  • settings.dropdownBorder#030a0d
  • settings.dropdownForeground#b1b1a3
  • settings.headerForeground#b1b1a3
  • settings.modifiedItemIndicator#b7aa9a
  • settings.numberInputBackground#06151a
  • settings.numberInputBorder#030a0d
  • settings.numberInputForeground#b1b1a3
  • settings.textInputBackground#06151a
  • settings.textInputBorder#030a0d
  • settings.textInputForeground#b1b1a3
  • sideBar.background#06151a
  • sideBarSectionHeader.background#282f32
  • sideBarSectionHeader.border#030a0d
  • sideBarTitle.foreground#b1b1a3
  • statusBar.background#030a0d
  • statusBar.debuggingBackground#ca1d2c
  • statusBar.debuggingForeground#030a0d
  • statusBar.foreground#b1b1a3
  • statusBar.noFolderBackground#030a0d
  • statusBar.noFolderForeground#b1b1a3
  • statusBarItem.prominentBackground#ca1d2c
  • statusBarItem.prominentHoverBackground#b7aa9a
  • statusBarItem.remoteBackground#2e78c1
  • statusBarItem.remoteForeground#282f32
  • tab.activeBackground#282f32
  • tab.activeBorderTop#c0226e80
  • tab.activeForeground#b1b1a3
  • tab.border#030a0d
  • tab.inactiveBackground#06151a
  • tab.inactiveForeground#415050
  • terminal.ansiBlack#282f32
  • terminal.ansiBlue#2e78c1
  • terminal.ansiBrightBlack#092027
  • terminal.ansiBrightBlue#7c84c4
  • terminal.ansiBrightCyan#81908f
  • terminal.ansiBrightGreen#d35f5a
  • terminal.ansiBrightMagenta#5b5db2
  • terminal.ansiBrightRed#d35f5a
  • terminal.ansiBrightWhite#fcf4de
  • terminal.ansiBrightYellow#a86571
  • terminal.ansiCyan#309185
  • terminal.ansiGreen#edb7ab
  • terminal.ansiMagenta#c0226e
  • terminal.ansiRed#ca1d2c
  • terminal.ansiWhite#e9e2cd
  • terminal.ansiYellow#b7aa9a
  • terminal.background#282f32
  • terminal.border#b1b1a3
  • terminal.foreground#b1b1a3
  • terminal.selectionBackground#282f3250
  • textBlockQuote.background#06151a
  • titleBar.activeBackground#06151a
  • titleBar.activeForeground#b1b1a3
  • titleBar.inactiveBackground#030a0d
  • titleBar.inactiveForeground#415050
  • walkThrough.embeddedEditorBackground#06151a
  • welcomePage.buttonBackground#282f32
  • welcomePage.buttonHoverBackground#09202775
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#2e78c1
source#b1b1a3
meta.diff, meta.diff.header#415050
markup.inserted#edb7ab
markup.deleted#ca1d2c
markup.changed#b7aa9a
invalid#ca1d2cunderline italic
invalid.deprecated#b1b1a3underline italic
entity.name.filename#a86571
markup.error#ca1d2c
markup.underlineunderline
markup.bold#b7aa9abold
markup.heading#2e78c1bold
markup.italic#a86571italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#309185
markup.inline.raw, markup.raw.restructuredtext#edb7ab
markup.underline.link, markup.underline.link.image#309185
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#c0226e
entity.name.directive.restructuredtext, markup.quote#a86571italic
meta.separator.markdown#415050
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#edb7ab
punctuation.definition.constant.restructuredtext#2e78c1
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#2e78c1
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#b1b1a3
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#a86571
entity.name.type.class, entity.name.class#309185normal
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#2e78c1italic
entity.other.inherited-class#309185italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#415050
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#c0226e
comment.block.documentation entity.name.type#309185italic
comment.block.documentation entity.name.type punctuation.definition.bracket#309185
comment.block.documentation variable#b7aa9aitalic
constant, variable.other.constant#2e78c1
constant.character.escape, constant.character.string.escape, constant.regexp#c0226e
entity.name.tag#c0226e
entity.other.attribute-name.parent-selector#c0226e
entity.other.attribute-name#edb7abitalic
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#edb7ab
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#b7aa9aitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#edb7abitalic
meta.decorator variable.other.object#edb7ab
keyword, punctuation.definition.keyword#c0226e
keyword.control.new, keyword.operator.newbold
meta.selector#c0226e
support#309185italic
support.function.magic, support.variable, variable.other.predefined#2e78c1regular
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#c0226e
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#b1b1a3
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#c0226e
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#309185
constant.other.date, constant.other.timestamp#b7aa9a
variable.other.alias.yaml#edb7abitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#c0226eregular
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#309185italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#b7aa9a
storage.modifier#c0226e
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#a86571
punctuation.definition.group.capture.regexp#c0226e
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ca1d2c
punctuation.definition.character-class.regexp#309185
punctuation.definition.group.regexp#b7aa9a
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ca1d2c
meta.assertion.look-ahead.regexp#edb7ab
string#a86571
punctuation.definition.string.begin, punctuation.definition.string.end#7c84c4
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#2e78c1
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#415050
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#b1b1a3
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#b7aa9aitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#b1b1a3normal
meta.selectionset.graphql variable#a86571
meta.selectionset.graphql meta.arguments variable#b1b1a3
entity.name.fragment.graphql, variable.fragment.graphql#309185
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#b1b1a3
source.shell variable.other#2e78c1
support.constant#2e78c1normal
meta.scope.prerequisites.makefile#a86571
meta.attribute-selector.scss#a86571
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#b1b1a3
meta.preprocessor.haskell#415050
Tinted VSCode by Tinted Theming - VS Code Theme