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#0071cf10
  • activityBar.activeBorder#ff8ffd80
  • activityBar.background#151144
  • activityBar.foreground#c0c0c0
  • activityBar.inactiveForeground#5e5e5e
  • activityBarBadge.background#ff8ffd
  • activityBarBadge.foreground#151144
  • badge.background#080808
  • badge.foreground#c0c0c0
  • breadcrumb.activeSelectionForeground#c0c0c0
  • breadcrumb.background#151144
  • breadcrumb.focusForeground#c0c0c0
  • breadcrumb.foreground#5e5e5e
  • breadcrumbPicker.background#0f0f0f
  • button.background#1e1e1e
  • button.foreground#c0c0c0
  • checkbox.background#1e1e1e
  • checkbox.border#0f0f0f
  • checkbox.foreground#c0c0c0
  • contrastBorder#0f0f0f
  • debugToolBar.background#1e1e1e
  • diffEditor.insertedTextBackground#00c17220
  • diffEditor.removedTextBackground#ff827250
  • dropdown.background#151144
  • dropdown.border#0f0f0f
  • dropdown.foreground#c0c0c0
  • editor.background#151144
  • editor.findMatchBackground#d2a70080
  • editor.findMatchHighlightBackground#feffff40
  • editor.findRangeHighlightBackground#2d2d2d75
  • editor.foldBackground#1e1e1e
  • editor.foreground#c0c0c0
  • editor.hoverHighlightBackground#0f0f0f
  • editor.lineHighlightBorder#080808
  • editor.rangeHighlightBackground#0071cf15
  • editor.selectionBackground#080808
  • editor.selectionHighlightBackground#080808
  • editor.snippetFinalTabstopHighlightBackground#151144
  • editor.snippetFinalTabstopHighlightBorder#00c172
  • editor.snippetTabstopHighlightBackground#151144
  • editor.snippetTabstopHighlightBorder#5e5e5e
  • editor.wordHighlightBackground#6bffdc50
  • editor.wordHighlightStrongBackground#00c17250
  • editorCodeLens.foreground#5e5e5e
  • editorError.foreground#ff8272
  • editorGroup.border#0071cf
  • editorGroup.dropBackground#2d2d2d70
  • editorGroupHeader.tabsBackground#0f0f0f
  • editorGutter.addedBackground#00c17280
  • editorGutter.deletedBackground#ff827280
  • editorGutter.modifiedBackground#6bffdc80
  • editorHoverWidget.background#151144
  • editorHoverWidget.border#5e5e5e
  • editorIndentGuide.activeBackground#feffff45
  • editorIndentGuide.background#feffff1A
  • editorLineNumber.foreground#5e5e5e
  • editorLink.activeForeground#6bffdc
  • editorMarkerNavigation.background#1e1e1e
  • editorOverviewRuler.addedForeground#00c17280
  • editorOverviewRuler.border#0f0f0f
  • editorOverviewRuler.currentContentForeground#00c172
  • editorOverviewRuler.deletedForeground#ff827280
  • editorOverviewRuler.errorForeground#ff827280
  • editorOverviewRuler.incomingContentForeground#0071cf
  • editorOverviewRuler.infoForeground#6bffdc80
  • editorOverviewRuler.modifiedForeground#6bffdc80
  • editorOverviewRuler.selectionHighlightForeground#d2a700
  • editorOverviewRuler.warningForeground#d2a70080
  • editorOverviewRuler.wordHighlightForeground#6bffdc
  • editorOverviewRuler.wordHighlightStrongForeground#00c172
  • editorRuler.foreground#feffff1A
  • editorSuggestWidget.background#1e1e1e
  • editorSuggestWidget.foreground#c0c0c0
  • editorSuggestWidget.selectedBackground#080808
  • editorWarning.foreground#d2a700
  • editorWhitespace.foreground#feffff1A
  • editorWidget.background#1e1e1e
  • errorForeground#ff8272
  • extensionButton.prominentBackground#00c17290
  • extensionButton.prominentForeground#c0c0c0
  • extensionButton.prominentHoverBackground#00c17260
  • focusBorder#5e5e5e
  • foreground#c0c0c0
  • gitDecoration.conflictingResourceForeground#d2a700
  • gitDecoration.deletedResourceForeground#ff8272
  • gitDecoration.ignoredResourceForeground#5e5e5e
  • gitDecoration.modifiedResourceForeground#6bffdc
  • gitDecoration.untrackedResourceForeground#00c172
  • input.background#151144
  • input.border#0f0f0f
  • input.foreground#c0c0c0
  • input.placeholderForeground#5e5e5e
  • inputOption.activeBorder#0071cf
  • inputValidation.errorBackground#151144
  • inputValidation.errorBorder#ff8272
  • inputValidation.errorForeground#ff8272
  • inputValidation.infoBackground#151144
  • inputValidation.infoBorder#0071cf
  • inputValidation.infoForeground#0071cf
  • inputValidation.warningBackground#151144
  • inputValidation.warningBorder#d2a700
  • inputValidation.warningForeground#d2a700
  • list.activeSelectionBackground#080808
  • list.activeSelectionForeground#c0c0c0
  • list.dropBackground#080808
  • list.errorForeground#ff8272
  • list.focusBackground#2d2d2d75
  • list.highlightForeground#6bffdc
  • list.hoverBackground#2d2d2d75
  • list.inactiveSelectionBackground#2d2d2d75
  • list.warningForeground#d2a700
  • listFilterWidget.background#151144
  • listFilterWidget.noMatchesOutline#ff8272
  • listFilterWidget.outline#080808
  • merge.currentHeaderBackground#00c17290
  • merge.incomingHeaderBackground#0071cf90
  • notification.background#151144
  • notification.buttonBackground#080808
  • notification.buttonForeground#c0c0c0
  • notification.buttonHoverBackground#2d2d2d75
  • notification.errorBackground#ff8272
  • notification.errorForeground#151144
  • notification.foreground#c0c0c0
  • notification.infoBackground#0071cf
  • notification.infoForeground#151144
  • notification.warningBackground#d2a700
  • notification.warningForeground#151144
  • notificationCenter.border#1e1e1e
  • notificationCenterHeader.background#151144
  • notificationCenterHeader.foreground#c0c0c0
  • notificationLink.foreground#6bffdc
  • notifications.background#151144
  • notifications.border#1e1e1e
  • notifications.foreground#c0c0c0
  • notificationsErrorIcon.foreground#ff8272
  • notificationsInfoIcon.foreground#0071cf
  • notificationsWarningIcon.foreground#d2a700
  • notificationToast.border#1e1e1e
  • panel.background#151144
  • panel.border#0071cf
  • panelInput.border#c0c0c0
  • panelTitle.activeBorder#ff8ffd
  • panelTitle.activeForeground#c0c0c0
  • panelTitle.inactiveForeground#5e5e5e
  • peekView.border#080808
  • peekViewEditor.background#151144
  • peekViewEditor.matchHighlightBackground#fefdd580
  • peekViewResult.background#1e1e1e
  • peekViewResult.fileForeground#c0c0c0
  • peekViewResult.lineForeground#c0c0c0
  • peekViewResult.matchHighlightBackground#fefdd580
  • peekViewResult.selectionBackground#080808
  • peekViewResult.selectionForeground#c0c0c0
  • peekViewTitle.background#0f0f0f
  • peekViewTitleDescription.foreground#5e5e5e
  • peekViewTitleLabel.foreground#c0c0c0
  • pickerGroup.border#0071cf
  • pickerGroup.foreground#6bffdc
  • progressBar.background#ff8ffd
  • scrollbar.shadow#444444
  • selection.background#0071cf
  • settings.checkboxBackground#1e1e1e
  • settings.checkboxBorder#0f0f0f
  • settings.checkboxForeground#c0c0c0
  • settings.dropdownBackground#1e1e1e
  • settings.dropdownBorder#0f0f0f
  • settings.dropdownForeground#c0c0c0
  • settings.headerForeground#c0c0c0
  • settings.modifiedItemIndicator#d2a700
  • settings.numberInputBackground#1e1e1e
  • settings.numberInputBorder#0f0f0f
  • settings.numberInputForeground#c0c0c0
  • settings.textInputBackground#1e1e1e
  • settings.textInputBorder#0f0f0f
  • settings.textInputForeground#c0c0c0
  • sideBar.background#1e1e1e
  • sideBarSectionHeader.background#151144
  • sideBarSectionHeader.border#0f0f0f
  • sideBarTitle.foreground#c0c0c0
  • statusBar.background#0f0f0f
  • statusBar.debuggingBackground#ff8272
  • statusBar.debuggingForeground#0f0f0f
  • statusBar.foreground#c0c0c0
  • statusBar.noFolderBackground#0f0f0f
  • statusBar.noFolderForeground#c0c0c0
  • statusBarItem.prominentBackground#ff8272
  • statusBarItem.prominentHoverBackground#d2a700
  • statusBarItem.remoteBackground#0071cf
  • statusBarItem.remoteForeground#151144
  • tab.activeBackground#151144
  • tab.activeBorderTop#ff8ffd80
  • tab.activeForeground#c0c0c0
  • tab.border#0f0f0f
  • tab.inactiveBackground#1e1e1e
  • tab.inactiveForeground#5e5e5e
  • terminal.ansiBlack#080808
  • terminal.ansiBlue#0071cf
  • terminal.ansiBrightBlack#2d2d2d
  • terminal.ansiBrightBlue#c1e3fe
  • terminal.ansiBrightCyan#e5e6fe
  • terminal.ansiBrightGreen#d6fcb9
  • terminal.ansiBrightMagenta#ffb1fe
  • terminal.ansiBrightRed#ffc4bd
  • terminal.ansiBrightWhite#feffff
  • terminal.ansiBrightYellow#fefdd5
  • terminal.ansiCyan#6bffdc
  • terminal.ansiGreen#00c172
  • terminal.ansiMagenta#ff8ffd
  • terminal.ansiRed#ff8272
  • terminal.ansiWhite#f1f1f1
  • terminal.ansiYellow#d2a700
  • terminal.background#151144
  • terminal.border#c0c0c0
  • terminal.foreground#c0c0c0
  • terminal.selectionBackground#08080850
  • textBlockQuote.background#1e1e1e
  • titleBar.activeBackground#1e1e1e
  • titleBar.activeForeground#c0c0c0
  • titleBar.inactiveBackground#0f0f0f
  • titleBar.inactiveForeground#5e5e5e
  • walkThrough.embeddedEditorBackground#1e1e1e
  • welcomePage.buttonBackground#080808
  • welcomePage.buttonHoverBackground#2d2d2d75
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#0071cf
source#c0c0c0
meta.diff, meta.diff.header#5e5e5e
markup.inserted#00c172
markup.deleted#ff8272
markup.changed#d2a700
invalid#ff8272underline italic
invalid.deprecated#c0c0c0underline italic
entity.name.filename#fefdd5
markup.error#ff8272
markup.underlineunderline
markup.bold#d2a700bold
markup.heading#0071cfbold
markup.italic#fefdd5italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#6bffdc
markup.inline.raw, markup.raw.restructuredtext#00c172
markup.underline.link, markup.underline.link.image#6bffdc
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ff8ffd
entity.name.directive.restructuredtext, markup.quote#fefdd5italic
meta.separator.markdown#5e5e5e
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#00c172
punctuation.definition.constant.restructuredtext#0071cf
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#0071cf
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#c0c0c0
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#fefdd5
entity.name.type.class, entity.name.class#6bffdcnormal
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#0071cfitalic
entity.other.inherited-class#6bffdcitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#5e5e5e
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ff8ffd
comment.block.documentation entity.name.type#6bffdcitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#6bffdc
comment.block.documentation variable#d2a700italic
constant, variable.other.constant#0071cf
constant.character.escape, constant.character.string.escape, constant.regexp#ff8ffd
entity.name.tag#ff8ffd
entity.other.attribute-name.parent-selector#ff8ffd
entity.other.attribute-name#00c172italic
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#00c172
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#d2a700italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#00c172italic
meta.decorator variable.other.object#00c172
keyword, punctuation.definition.keyword#ff8ffd
keyword.control.new, keyword.operator.newbold
meta.selector#ff8ffd
support#6bffdcitalic
support.function.magic, support.variable, variable.other.predefined#0071cfregular
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#ff8ffd
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#c0c0c0
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#ff8ffd
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#6bffdc
constant.other.date, constant.other.timestamp#d2a700
variable.other.alias.yaml#00c172italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ff8ffdregular
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#6bffdcitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#d2a700
storage.modifier#ff8ffd
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fefdd5
punctuation.definition.group.capture.regexp#ff8ffd
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff8272
punctuation.definition.character-class.regexp#6bffdc
punctuation.definition.group.regexp#d2a700
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff8272
meta.assertion.look-ahead.regexp#00c172
string#fefdd5
punctuation.definition.string.begin, punctuation.definition.string.end#c1e3fe
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#0071cf
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#5e5e5e
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#c0c0c0
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#d2a700italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#c0c0c0normal
meta.selectionset.graphql variable#fefdd5
meta.selectionset.graphql meta.arguments variable#c0c0c0
entity.name.fragment.graphql, variable.fragment.graphql#6bffdc
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#c0c0c0
source.shell variable.other#0071cf
support.constant#0071cfnormal
meta.scope.prerequisites.makefile#fefdd5
meta.attribute-selector.scss#fefdd5
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#c0c0c0
meta.preprocessor.haskell#5e5e5e
Tinted VSCode by Tinted Theming - VS Code Theme