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#246db210
  • activityBar.activeBorder#b200b280
  • activityBar.background#0f0a05
  • activityBar.foreground#a8a8a8
  • activityBar.inactiveForeground#7c7c7c
  • activityBarBadge.background#b200b2
  • activityBarBadge.foreground#0f0a05
  • badge.background#000000
  • badge.foreground#a8a8a8
  • breadcrumb.activeSelectionForeground#a8a8a8
  • breadcrumb.background#0f0a05
  • breadcrumb.focusForeground#a8a8a8
  • breadcrumb.foreground#7c7c7c
  • breadcrumbPicker.background#222222
  • button.background#444444
  • button.foreground#a8a8a8
  • checkbox.background#444444
  • checkbox.border#222222
  • checkbox.foreground#a8a8a8
  • contrastBorder#222222
  • debugToolBar.background#444444
  • diffEditor.insertedTextBackground#00a60020
  • diffEditor.removedTextBackground#b6204a50
  • dropdown.background#0f0a05
  • dropdown.border#222222
  • dropdown.foreground#a8a8a8
  • editor.background#0f0a05
  • editor.findMatchBackground#bebe0080
  • editor.findMatchHighlightBackground#e5e5e540
  • editor.findRangeHighlightBackground#66666675
  • editor.foldBackground#444444
  • editor.foreground#a8a8a8
  • editor.hoverHighlightBackground#222222
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#246db215
  • editor.selectionBackground#000000
  • editor.selectionHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBackground#0f0a05
  • editor.snippetFinalTabstopHighlightBorder#00a600
  • editor.snippetTabstopHighlightBackground#0f0a05
  • editor.snippetTabstopHighlightBorder#7c7c7c
  • editor.wordHighlightBackground#00a6b250
  • editor.wordHighlightStrongBackground#00a60050
  • editorCodeLens.foreground#7c7c7c
  • editorError.foreground#b6204a
  • editorGroup.border#246db2
  • editorGroup.dropBackground#66666670
  • editorGroupHeader.tabsBackground#222222
  • editorGutter.addedBackground#00a60080
  • editorGutter.deletedBackground#b6204a80
  • editorGutter.modifiedBackground#00a6b280
  • editorHoverWidget.background#0f0a05
  • editorHoverWidget.border#7c7c7c
  • editorIndentGuide.activeBackground#e5e5e545
  • editorIndentGuide.background#e5e5e51A
  • editorLineNumber.foreground#7c7c7c
  • editorLink.activeForeground#00a6b2
  • editorMarkerNavigation.background#444444
  • editorOverviewRuler.addedForeground#00a60080
  • editorOverviewRuler.border#222222
  • editorOverviewRuler.currentContentForeground#00a600
  • editorOverviewRuler.deletedForeground#b6204a80
  • editorOverviewRuler.errorForeground#b6204a80
  • editorOverviewRuler.incomingContentForeground#246db2
  • editorOverviewRuler.infoForeground#00a6b280
  • editorOverviewRuler.modifiedForeground#00a6b280
  • editorOverviewRuler.selectionHighlightForeground#bebe00
  • editorOverviewRuler.warningForeground#bebe0080
  • editorOverviewRuler.wordHighlightForeground#00a6b2
  • editorOverviewRuler.wordHighlightStrongForeground#00a600
  • editorRuler.foreground#e5e5e51A
  • editorSuggestWidget.background#444444
  • editorSuggestWidget.foreground#a8a8a8
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#bebe00
  • editorWhitespace.foreground#e5e5e51A
  • editorWidget.background#444444
  • errorForeground#b6204a
  • extensionButton.prominentBackground#00a60090
  • extensionButton.prominentForeground#a8a8a8
  • extensionButton.prominentHoverBackground#00a60060
  • focusBorder#7c7c7c
  • foreground#a8a8a8
  • gitDecoration.conflictingResourceForeground#bebe00
  • gitDecoration.deletedResourceForeground#b6204a
  • gitDecoration.ignoredResourceForeground#7c7c7c
  • gitDecoration.modifiedResourceForeground#00a6b2
  • gitDecoration.untrackedResourceForeground#00a600
  • input.background#0f0a05
  • input.border#222222
  • input.foreground#a8a8a8
  • input.placeholderForeground#7c7c7c
  • inputOption.activeBorder#246db2
  • inputValidation.errorBackground#0f0a05
  • inputValidation.errorBorder#b6204a
  • inputValidation.errorForeground#b6204a
  • inputValidation.infoBackground#0f0a05
  • inputValidation.infoBorder#246db2
  • inputValidation.infoForeground#246db2
  • inputValidation.warningBackground#0f0a05
  • inputValidation.warningBorder#bebe00
  • inputValidation.warningForeground#bebe00
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#a8a8a8
  • list.dropBackground#000000
  • list.errorForeground#b6204a
  • list.focusBackground#66666675
  • list.highlightForeground#00a6b2
  • list.hoverBackground#66666675
  • list.inactiveSelectionBackground#66666675
  • list.warningForeground#bebe00
  • listFilterWidget.background#0f0a05
  • listFilterWidget.noMatchesOutline#b6204a
  • listFilterWidget.outline#000000
  • merge.currentHeaderBackground#00a60090
  • merge.incomingHeaderBackground#246db290
  • notification.background#0f0a05
  • notification.buttonBackground#000000
  • notification.buttonForeground#a8a8a8
  • notification.buttonHoverBackground#66666675
  • notification.errorBackground#b6204a
  • notification.errorForeground#0f0a05
  • notification.foreground#a8a8a8
  • notification.infoBackground#246db2
  • notification.infoForeground#0f0a05
  • notification.warningBackground#bebe00
  • notification.warningForeground#0f0a05
  • notificationCenter.border#444444
  • notificationCenterHeader.background#0f0a05
  • notificationCenterHeader.foreground#a8a8a8
  • notificationLink.foreground#00a6b2
  • notifications.background#0f0a05
  • notifications.border#444444
  • notifications.foreground#a8a8a8
  • notificationsErrorIcon.foreground#b6204a
  • notificationsInfoIcon.foreground#246db2
  • notificationsWarningIcon.foreground#bebe00
  • notificationToast.border#444444
  • panel.background#0f0a05
  • panel.border#246db2
  • panelInput.border#a8a8a8
  • panelTitle.activeBorder#b200b2
  • panelTitle.activeForeground#a8a8a8
  • panelTitle.inactiveForeground#7c7c7c
  • peekView.border#000000
  • peekViewEditor.background#0f0a05
  • peekViewEditor.matchHighlightBackground#e5e50080
  • peekViewResult.background#444444
  • peekViewResult.fileForeground#a8a8a8
  • peekViewResult.lineForeground#a8a8a8
  • peekViewResult.matchHighlightBackground#e5e50080
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#a8a8a8
  • peekViewTitle.background#222222
  • peekViewTitleDescription.foreground#7c7c7c
  • peekViewTitleLabel.foreground#a8a8a8
  • pickerGroup.border#246db2
  • pickerGroup.foreground#00a6b2
  • progressBar.background#b200b2
  • scrollbar.shadow#444444
  • selection.background#246db2
  • settings.checkboxBackground#444444
  • settings.checkboxBorder#222222
  • settings.checkboxForeground#a8a8a8
  • settings.dropdownBackground#444444
  • settings.dropdownBorder#222222
  • settings.dropdownForeground#a8a8a8
  • settings.headerForeground#a8a8a8
  • settings.modifiedItemIndicator#bebe00
  • settings.numberInputBackground#444444
  • settings.numberInputBorder#222222
  • settings.numberInputForeground#a8a8a8
  • settings.textInputBackground#444444
  • settings.textInputBorder#222222
  • settings.textInputForeground#a8a8a8
  • sideBar.background#444444
  • sideBarSectionHeader.background#0f0a05
  • sideBarSectionHeader.border#222222
  • sideBarTitle.foreground#a8a8a8
  • statusBar.background#222222
  • statusBar.debuggingBackground#b6204a
  • statusBar.debuggingForeground#222222
  • statusBar.foreground#a8a8a8
  • statusBar.noFolderBackground#222222
  • statusBar.noFolderForeground#a8a8a8
  • statusBarItem.prominentBackground#b6204a
  • statusBarItem.prominentHoverBackground#bebe00
  • statusBarItem.remoteBackground#246db2
  • statusBarItem.remoteForeground#0f0a05
  • tab.activeBackground#0f0a05
  • tab.activeBorderTop#b200b280
  • tab.activeForeground#a8a8a8
  • tab.border#222222
  • tab.inactiveBackground#444444
  • tab.inactiveForeground#7c7c7c
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#246db2
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#0000ff
  • terminal.ansiBrightCyan#00e5e5
  • terminal.ansiBrightGreen#86a83e
  • terminal.ansiBrightMagenta#e500e5
  • terminal.ansiBrightRed#e50000
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#e5e500
  • terminal.ansiCyan#00a6b2
  • terminal.ansiGreen#00a600
  • terminal.ansiMagenta#b200b2
  • terminal.ansiRed#b6204a
  • terminal.ansiWhite#bfbfbf
  • terminal.ansiYellow#bebe00
  • terminal.background#0f0a05
  • terminal.border#a8a8a8
  • terminal.foreground#a8a8a8
  • terminal.selectionBackground#00000050
  • textBlockQuote.background#444444
  • titleBar.activeBackground#444444
  • titleBar.activeForeground#a8a8a8
  • titleBar.inactiveBackground#222222
  • titleBar.inactiveForeground#7c7c7c
  • walkThrough.embeddedEditorBackground#444444
  • welcomePage.buttonBackground#000000
  • welcomePage.buttonHoverBackground#66666675
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#246db2
source#a8a8a8
meta.diff, meta.diff.header#7c7c7c
markup.inserted#00a600
markup.deleted#b6204a
markup.changed#bebe00
invalid#b6204aunderline italic
invalid.deprecated#a8a8a8underline italic
entity.name.filename#e5e500
markup.error#b6204a
markup.underlineunderline
markup.bold#bebe00bold
markup.heading#246db2bold
markup.italic#e5e500italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#00a6b2
markup.inline.raw, markup.raw.restructuredtext#00a600
markup.underline.link, markup.underline.link.image#00a6b2
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#b200b2
entity.name.directive.restructuredtext, markup.quote#e5e500italic
meta.separator.markdown#7c7c7c
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#00a600
punctuation.definition.constant.restructuredtext#246db2
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#246db2
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#a8a8a8
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#e5e500
entity.name.type.class, entity.name.class#00a6b2normal
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#246db2italic
entity.other.inherited-class#00a6b2italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7c7c7c
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#b200b2
comment.block.documentation entity.name.type#00a6b2italic
comment.block.documentation entity.name.type punctuation.definition.bracket#00a6b2
comment.block.documentation variable#bebe00italic
constant, variable.other.constant#246db2
constant.character.escape, constant.character.string.escape, constant.regexp#b200b2
entity.name.tag#b200b2
entity.other.attribute-name.parent-selector#b200b2
entity.other.attribute-name#00a600italic
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#00a600
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#bebe00italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#00a600italic
meta.decorator variable.other.object#00a600
keyword, punctuation.definition.keyword#b200b2
keyword.control.new, keyword.operator.newbold
meta.selector#b200b2
support#00a6b2italic
support.function.magic, support.variable, variable.other.predefined#246db2regular
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#b200b2
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#a8a8a8
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#b200b2
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#00a6b2
constant.other.date, constant.other.timestamp#bebe00
variable.other.alias.yaml#00a600italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#b200b2regular
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#00a6b2italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#bebe00
storage.modifier#b200b2
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#e5e500
punctuation.definition.group.capture.regexp#b200b2
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#b6204a
punctuation.definition.character-class.regexp#00a6b2
punctuation.definition.group.regexp#bebe00
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#b6204a
meta.assertion.look-ahead.regexp#00a600
string#e5e500
punctuation.definition.string.begin, punctuation.definition.string.end#0000ff
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#246db2
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#7c7c7c
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#a8a8a8
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#bebe00italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#a8a8a8normal
meta.selectionset.graphql variable#e5e500
meta.selectionset.graphql meta.arguments variable#a8a8a8
entity.name.fragment.graphql, variable.fragment.graphql#00a6b2
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#a8a8a8
source.shell variable.other#246db2
support.constant#246db2normal
meta.scope.prerequisites.makefile#e5e500
meta.attribute-selector.scss#e5e500
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#a8a8a8
meta.preprocessor.haskell#7c7c7c
Tinted VSCode by Tinted Theming - VS Code Theme