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#00b0fe10
  • activityBar.activeBorder#d47bfe80
  • activityBar.background#0f1115
  • activityBar.foreground#afafaf
  • activityBar.inactiveForeground#7f7f7f
  • activityBarBadge.background#d47bfe
  • activityBarBadge.foreground#0f1115
  • badge.background#101116
  • badge.foreground#afafaf
  • breadcrumb.activeSelectionForeground#afafaf
  • breadcrumb.background#0f1115
  • breadcrumb.focusForeground#afafaf
  • breadcrumb.foreground#7f7f7f
  • breadcrumbPicker.background#222222
  • button.background#444444
  • button.foreground#afafaf
  • checkbox.background#444444
  • checkbox.border#222222
  • checkbox.foreground#afafaf
  • contrastBorder#222222
  • debugToolBar.background#444444
  • diffEditor.insertedTextBackground#00ff9b20
  • diffEditor.removedTextBackground#ff567f50
  • dropdown.background#0f1115
  • dropdown.border#222222
  • dropdown.foreground#afafaf
  • editor.background#0f1115
  • editor.findMatchBackground#fefc5780
  • editor.findMatchHighlightBackground#feffff40
  • editor.findRangeHighlightBackground#67676775
  • editor.foldBackground#444444
  • editor.foreground#afafaf
  • editor.hoverHighlightBackground#222222
  • editor.lineHighlightBorder#101116
  • editor.rangeHighlightBackground#00b0fe15
  • editor.selectionBackground#101116
  • editor.selectionHighlightBackground#101116
  • editor.snippetFinalTabstopHighlightBackground#0f1115
  • editor.snippetFinalTabstopHighlightBorder#00ff9b
  • editor.snippetTabstopHighlightBackground#0f1115
  • editor.snippetTabstopHighlightBorder#7f7f7f
  • editor.wordHighlightBackground#75c1fe50
  • editor.wordHighlightStrongBackground#00ff9b50
  • editorCodeLens.foreground#7f7f7f
  • editorError.foreground#ff567f
  • editorGroup.border#00b0fe
  • editorGroup.dropBackground#67676770
  • editorGroupHeader.tabsBackground#222222
  • editorGutter.addedBackground#00ff9b80
  • editorGutter.deletedBackground#ff567f80
  • editorGutter.modifiedBackground#75c1fe80
  • editorHoverWidget.background#0f1115
  • editorHoverWidget.border#7f7f7f
  • editorIndentGuide.activeBackground#feffff45
  • editorIndentGuide.background#feffff1A
  • editorLineNumber.foreground#7f7f7f
  • editorLink.activeForeground#75c1fe
  • editorMarkerNavigation.background#444444
  • editorOverviewRuler.addedForeground#00ff9b80
  • editorOverviewRuler.border#222222
  • editorOverviewRuler.currentContentForeground#00ff9b
  • editorOverviewRuler.deletedForeground#ff567f80
  • editorOverviewRuler.errorForeground#ff567f80
  • editorOverviewRuler.incomingContentForeground#00b0fe
  • editorOverviewRuler.infoForeground#75c1fe80
  • editorOverviewRuler.modifiedForeground#75c1fe80
  • editorOverviewRuler.selectionHighlightForeground#fefc57
  • editorOverviewRuler.warningForeground#fefc5780
  • editorOverviewRuler.wordHighlightForeground#75c1fe
  • editorOverviewRuler.wordHighlightStrongForeground#00ff9b
  • editorRuler.foreground#feffff1A
  • editorSuggestWidget.background#444444
  • editorSuggestWidget.foreground#afafaf
  • editorSuggestWidget.selectedBackground#101116
  • editorWarning.foreground#fefc57
  • editorWhitespace.foreground#feffff1A
  • editorWidget.background#444444
  • errorForeground#ff567f
  • extensionButton.prominentBackground#00ff9b90
  • extensionButton.prominentForeground#afafaf
  • extensionButton.prominentHoverBackground#00ff9b60
  • focusBorder#7f7f7f
  • foreground#afafaf
  • gitDecoration.conflictingResourceForeground#fefc57
  • gitDecoration.deletedResourceForeground#ff567f
  • gitDecoration.ignoredResourceForeground#7f7f7f
  • gitDecoration.modifiedResourceForeground#75c1fe
  • gitDecoration.untrackedResourceForeground#00ff9b
  • input.background#0f1115
  • input.border#222222
  • input.foreground#afafaf
  • input.placeholderForeground#7f7f7f
  • inputOption.activeBorder#00b0fe
  • inputValidation.errorBackground#0f1115
  • inputValidation.errorBorder#ff567f
  • inputValidation.errorForeground#ff567f
  • inputValidation.infoBackground#0f1115
  • inputValidation.infoBorder#00b0fe
  • inputValidation.infoForeground#00b0fe
  • inputValidation.warningBackground#0f1115
  • inputValidation.warningBorder#fefc57
  • inputValidation.warningForeground#fefc57
  • list.activeSelectionBackground#101116
  • list.activeSelectionForeground#afafaf
  • list.dropBackground#101116
  • list.errorForeground#ff567f
  • list.focusBackground#67676775
  • list.highlightForeground#75c1fe
  • list.hoverBackground#67676775
  • list.inactiveSelectionBackground#67676775
  • list.warningForeground#fefc57
  • listFilterWidget.background#0f1115
  • listFilterWidget.noMatchesOutline#ff567f
  • listFilterWidget.outline#101116
  • merge.currentHeaderBackground#00ff9b90
  • merge.incomingHeaderBackground#00b0fe90
  • notification.background#0f1115
  • notification.buttonBackground#101116
  • notification.buttonForeground#afafaf
  • notification.buttonHoverBackground#67676775
  • notification.errorBackground#ff567f
  • notification.errorForeground#0f1115
  • notification.foreground#afafaf
  • notification.infoBackground#00b0fe
  • notification.infoForeground#0f1115
  • notification.warningBackground#fefc57
  • notification.warningForeground#0f1115
  • notificationCenter.border#444444
  • notificationCenterHeader.background#0f1115
  • notificationCenterHeader.foreground#afafaf
  • notificationLink.foreground#75c1fe
  • notifications.background#0f1115
  • notifications.border#444444
  • notifications.foreground#afafaf
  • notificationsErrorIcon.foreground#ff567f
  • notificationsInfoIcon.foreground#00b0fe
  • notificationsWarningIcon.foreground#fefc57
  • notificationToast.border#444444
  • panel.background#0f1115
  • panel.border#00b0fe
  • panelInput.border#afafaf
  • panelTitle.activeBorder#d47bfe
  • panelTitle.activeForeground#afafaf
  • panelTitle.inactiveForeground#7f7f7f
  • peekView.border#101116
  • peekViewEditor.background#0f1115
  • peekViewEditor.matchHighlightBackground#fefb6780
  • peekViewResult.background#444444
  • peekViewResult.fileForeground#afafaf
  • peekViewResult.lineForeground#afafaf
  • peekViewResult.matchHighlightBackground#fefb6780
  • peekViewResult.selectionBackground#101116
  • peekViewResult.selectionForeground#afafaf
  • peekViewTitle.background#222222
  • peekViewTitleDescription.foreground#7f7f7f
  • peekViewTitleLabel.foreground#afafaf
  • pickerGroup.border#00b0fe
  • pickerGroup.foreground#75c1fe
  • progressBar.background#d47bfe
  • scrollbar.shadow#444444
  • selection.background#00b0fe
  • settings.checkboxBackground#444444
  • settings.checkboxBorder#222222
  • settings.checkboxForeground#afafaf
  • settings.dropdownBackground#444444
  • settings.dropdownBorder#222222
  • settings.dropdownForeground#afafaf
  • settings.headerForeground#afafaf
  • settings.modifiedItemIndicator#fefc57
  • settings.numberInputBackground#444444
  • settings.numberInputBorder#222222
  • settings.numberInputForeground#afafaf
  • settings.textInputBackground#444444
  • settings.textInputBorder#222222
  • settings.textInputForeground#afafaf
  • sideBar.background#444444
  • sideBarSectionHeader.background#0f1115
  • sideBarSectionHeader.border#222222
  • sideBarTitle.foreground#afafaf
  • statusBar.background#222222
  • statusBar.debuggingBackground#ff567f
  • statusBar.debuggingForeground#222222
  • statusBar.foreground#afafaf
  • statusBar.noFolderBackground#222222
  • statusBar.noFolderForeground#afafaf
  • statusBarItem.prominentBackground#ff567f
  • statusBarItem.prominentHoverBackground#fefc57
  • statusBarItem.remoteBackground#00b0fe
  • statusBarItem.remoteForeground#0f1115
  • tab.activeBackground#0f1115
  • tab.activeBorderTop#d47bfe80
  • tab.activeForeground#afafaf
  • tab.border#222222
  • tab.inactiveBackground#444444
  • tab.inactiveForeground#7f7f7f
  • terminal.ansiBlack#101116
  • terminal.ansiBlue#00b0fe
  • terminal.ansiBrightBlack#676767
  • terminal.ansiBrightBlue#6871ff
  • terminal.ansiBrightCyan#5ffdff
  • terminal.ansiBrightGreen#5ff967
  • terminal.ansiBrightMagenta#d582eb
  • terminal.ansiBrightRed#ff6d67
  • terminal.ansiBrightWhite#feffff
  • terminal.ansiBrightYellow#fefb67
  • terminal.ansiCyan#75c1fe
  • terminal.ansiGreen#00ff9b
  • terminal.ansiMagenta#d47bfe
  • terminal.ansiRed#ff567f
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#fefc57
  • terminal.background#0f1115
  • terminal.border#afafaf
  • terminal.foreground#afafaf
  • terminal.selectionBackground#10111650
  • textBlockQuote.background#444444
  • titleBar.activeBackground#444444
  • titleBar.activeForeground#afafaf
  • titleBar.inactiveBackground#222222
  • titleBar.inactiveForeground#7f7f7f
  • walkThrough.embeddedEditorBackground#444444
  • welcomePage.buttonBackground#101116
  • welcomePage.buttonHoverBackground#67676775
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#00b0fe
source#afafaf
meta.diff, meta.diff.header#7f7f7f
markup.inserted#00ff9b
markup.deleted#ff567f
markup.changed#fefc57
invalid#ff567funderline italic
invalid.deprecated#afafafunderline italic
entity.name.filename#fefb67
markup.error#ff567f
markup.underlineunderline
markup.bold#fefc57bold
markup.heading#00b0febold
markup.italic#fefb67italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#75c1fe
markup.inline.raw, markup.raw.restructuredtext#00ff9b
markup.underline.link, markup.underline.link.image#75c1fe
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#d47bfe
entity.name.directive.restructuredtext, markup.quote#fefb67italic
meta.separator.markdown#7f7f7f
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#00ff9b
punctuation.definition.constant.restructuredtext#00b0fe
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#00b0fe
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#afafaf
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#fefb67
entity.name.type.class, entity.name.class#75c1fenormal
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#00b0feitalic
entity.other.inherited-class#75c1feitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7f7f7f
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#d47bfe
comment.block.documentation entity.name.type#75c1feitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#75c1fe
comment.block.documentation variable#fefc57italic
constant, variable.other.constant#00b0fe
constant.character.escape, constant.character.string.escape, constant.regexp#d47bfe
entity.name.tag#d47bfe
entity.other.attribute-name.parent-selector#d47bfe
entity.other.attribute-name#00ff9bitalic
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#00ff9b
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#fefc57italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#00ff9bitalic
meta.decorator variable.other.object#00ff9b
keyword, punctuation.definition.keyword#d47bfe
keyword.control.new, keyword.operator.newbold
meta.selector#d47bfe
support#75c1feitalic
support.function.magic, support.variable, variable.other.predefined#00b0feregular
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#d47bfe
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#afafaf
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#d47bfe
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#75c1fe
constant.other.date, constant.other.timestamp#fefc57
variable.other.alias.yaml#00ff9bitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#d47bferegular
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#75c1feitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#fefc57
storage.modifier#d47bfe
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fefb67
punctuation.definition.group.capture.regexp#d47bfe
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff567f
punctuation.definition.character-class.regexp#75c1fe
punctuation.definition.group.regexp#fefc57
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff567f
meta.assertion.look-ahead.regexp#00ff9b
string#fefb67
punctuation.definition.string.begin, punctuation.definition.string.end#6871ff
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#00b0fe
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#7f7f7f
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#afafaf
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#fefc57italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#afafafnormal
meta.selectionset.graphql variable#fefb67
meta.selectionset.graphql meta.arguments variable#afafaf
entity.name.fragment.graphql, variable.fragment.graphql#75c1fe
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#afafaf
source.shell variable.other#00b0fe
support.constant#00b0fenormal
meta.scope.prerequisites.makefile#fefb67
meta.attribute-selector.scss#fefb67
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#afafaf
meta.preprocessor.haskell#7f7f7f
Tinted VSCode by Tinted Theming - VS Code Theme