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#cf5ec080
  • activityBar.background#2c1c15
  • activityBar.foreground#a8a8a8
  • activityBar.inactiveForeground#7c7c7c
  • activityBarBadge.background#cf5ec0
  • activityBarBadge.foreground#2c1c15
  • badge.background#2c1d16
  • badge.foreground#a8a8a8
  • breadcrumb.activeSelectionForeground#a8a8a8
  • breadcrumb.background#2c1c15
  • 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#2baf2b20
  • diffEditor.removedTextBackground#ef573450
  • dropdown.background#2c1c15
  • dropdown.border#222222
  • dropdown.foreground#a8a8a8
  • editor.background#2c1c15
  • editor.findMatchBackground#bdbe0080
  • editor.findMatchHighlightBackground#e5e5e540
  • editor.findRangeHighlightBackground#66666675
  • editor.foldBackground#444444
  • editor.foreground#a8a8a8
  • editor.hoverHighlightBackground#222222
  • editor.lineHighlightBorder#2c1d16
  • editor.rangeHighlightBackground#246db215
  • editor.selectionBackground#2c1d16
  • editor.selectionHighlightBackground#2c1d16
  • editor.snippetFinalTabstopHighlightBackground#2c1c15
  • editor.snippetFinalTabstopHighlightBorder#2baf2b
  • editor.snippetTabstopHighlightBackground#2c1c15
  • editor.snippetTabstopHighlightBorder#7c7c7c
  • editor.wordHighlightBackground#00acee50
  • editor.wordHighlightStrongBackground#2baf2b50
  • editorCodeLens.foreground#7c7c7c
  • editorError.foreground#ef5734
  • editorGroup.border#246db2
  • editorGroup.dropBackground#66666670
  • editorGroupHeader.tabsBackground#222222
  • editorGutter.addedBackground#2baf2b80
  • editorGutter.deletedBackground#ef573480
  • editorGutter.modifiedBackground#00acee80
  • editorHoverWidget.background#2c1c15
  • editorHoverWidget.border#7c7c7c
  • editorIndentGuide.activeBackground#e5e5e545
  • editorIndentGuide.background#e5e5e51A
  • editorLineNumber.foreground#7c7c7c
  • editorLink.activeForeground#00acee
  • editorMarkerNavigation.background#444444
  • editorOverviewRuler.addedForeground#2baf2b80
  • editorOverviewRuler.border#222222
  • editorOverviewRuler.currentContentForeground#2baf2b
  • editorOverviewRuler.deletedForeground#ef573480
  • editorOverviewRuler.errorForeground#ef573480
  • editorOverviewRuler.incomingContentForeground#246db2
  • editorOverviewRuler.infoForeground#00acee80
  • editorOverviewRuler.modifiedForeground#00acee80
  • editorOverviewRuler.selectionHighlightForeground#bdbe00
  • editorOverviewRuler.warningForeground#bdbe0080
  • editorOverviewRuler.wordHighlightForeground#00acee
  • editorOverviewRuler.wordHighlightStrongForeground#2baf2b
  • editorRuler.foreground#e5e5e51A
  • editorSuggestWidget.background#444444
  • editorSuggestWidget.foreground#a8a8a8
  • editorSuggestWidget.selectedBackground#2c1d16
  • editorWarning.foreground#bdbe00
  • editorWhitespace.foreground#e5e5e51A
  • editorWidget.background#444444
  • errorForeground#ef5734
  • extensionButton.prominentBackground#2baf2b90
  • extensionButton.prominentForeground#a8a8a8
  • extensionButton.prominentHoverBackground#2baf2b60
  • focusBorder#7c7c7c
  • foreground#a8a8a8
  • gitDecoration.conflictingResourceForeground#bdbe00
  • gitDecoration.deletedResourceForeground#ef5734
  • gitDecoration.ignoredResourceForeground#7c7c7c
  • gitDecoration.modifiedResourceForeground#00acee
  • gitDecoration.untrackedResourceForeground#2baf2b
  • input.background#2c1c15
  • input.border#222222
  • input.foreground#a8a8a8
  • input.placeholderForeground#7c7c7c
  • inputOption.activeBorder#246db2
  • inputValidation.errorBackground#2c1c15
  • inputValidation.errorBorder#ef5734
  • inputValidation.errorForeground#ef5734
  • inputValidation.infoBackground#2c1c15
  • inputValidation.infoBorder#246db2
  • inputValidation.infoForeground#246db2
  • inputValidation.warningBackground#2c1c15
  • inputValidation.warningBorder#bdbe00
  • inputValidation.warningForeground#bdbe00
  • list.activeSelectionBackground#2c1d16
  • list.activeSelectionForeground#a8a8a8
  • list.dropBackground#2c1d16
  • list.errorForeground#ef5734
  • list.focusBackground#66666675
  • list.highlightForeground#00acee
  • list.hoverBackground#66666675
  • list.inactiveSelectionBackground#66666675
  • list.warningForeground#bdbe00
  • listFilterWidget.background#2c1c15
  • listFilterWidget.noMatchesOutline#ef5734
  • listFilterWidget.outline#2c1d16
  • merge.currentHeaderBackground#2baf2b90
  • merge.incomingHeaderBackground#246db290
  • notification.background#2c1c15
  • notification.buttonBackground#2c1d16
  • notification.buttonForeground#a8a8a8
  • notification.buttonHoverBackground#66666675
  • notification.errorBackground#ef5734
  • notification.errorForeground#2c1c15
  • notification.foreground#a8a8a8
  • notification.infoBackground#246db2
  • notification.infoForeground#2c1c15
  • notification.warningBackground#bdbe00
  • notification.warningForeground#2c1c15
  • notificationCenter.border#444444
  • notificationCenterHeader.background#2c1c15
  • notificationCenterHeader.foreground#a8a8a8
  • notificationLink.foreground#00acee
  • notifications.background#2c1c15
  • notifications.border#444444
  • notifications.foreground#a8a8a8
  • notificationsErrorIcon.foreground#ef5734
  • notificationsInfoIcon.foreground#246db2
  • notificationsWarningIcon.foreground#bdbe00
  • notificationToast.border#444444
  • panel.background#2c1c15
  • panel.border#246db2
  • panelInput.border#a8a8a8
  • panelTitle.activeBorder#cf5ec0
  • panelTitle.activeForeground#a8a8a8
  • panelTitle.inactiveForeground#7c7c7c
  • peekView.border#2c1d16
  • peekViewEditor.background#2c1c15
  • peekViewEditor.matchHighlightBackground#e5e50080
  • peekViewResult.background#444444
  • peekViewResult.fileForeground#a8a8a8
  • peekViewResult.lineForeground#a8a8a8
  • peekViewResult.matchHighlightBackground#e5e50080
  • peekViewResult.selectionBackground#2c1d16
  • peekViewResult.selectionForeground#a8a8a8
  • peekViewTitle.background#222222
  • peekViewTitleDescription.foreground#7c7c7c
  • peekViewTitleLabel.foreground#a8a8a8
  • pickerGroup.border#246db2
  • pickerGroup.foreground#00acee
  • progressBar.background#cf5ec0
  • 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#bdbe00
  • settings.numberInputBackground#444444
  • settings.numberInputBorder#222222
  • settings.numberInputForeground#a8a8a8
  • settings.textInputBackground#444444
  • settings.textInputBorder#222222
  • settings.textInputForeground#a8a8a8
  • sideBar.background#444444
  • sideBarSectionHeader.background#2c1c15
  • sideBarSectionHeader.border#222222
  • sideBarTitle.foreground#a8a8a8
  • statusBar.background#222222
  • statusBar.debuggingBackground#ef5734
  • statusBar.debuggingForeground#222222
  • statusBar.foreground#a8a8a8
  • statusBar.noFolderBackground#222222
  • statusBar.noFolderForeground#a8a8a8
  • statusBarItem.prominentBackground#ef5734
  • statusBarItem.prominentHoverBackground#bdbe00
  • statusBarItem.remoteBackground#246db2
  • statusBarItem.remoteForeground#2c1c15
  • tab.activeBackground#2c1c15
  • tab.activeBorderTop#cf5ec080
  • tab.activeForeground#a8a8a8
  • tab.border#222222
  • tab.inactiveBackground#444444
  • tab.inactiveForeground#7c7c7c
  • terminal.ansiBlack#2c1d16
  • 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#00acee
  • terminal.ansiGreen#2baf2b
  • terminal.ansiMagenta#cf5ec0
  • terminal.ansiRed#ef5734
  • terminal.ansiWhite#bfbfbf
  • terminal.ansiYellow#bdbe00
  • terminal.background#2c1c15
  • terminal.border#a8a8a8
  • terminal.foreground#a8a8a8
  • terminal.selectionBackground#2c1d1650
  • textBlockQuote.background#444444
  • titleBar.activeBackground#444444
  • titleBar.activeForeground#a8a8a8
  • titleBar.inactiveBackground#222222
  • titleBar.inactiveForeground#7c7c7c
  • walkThrough.embeddedEditorBackground#444444
  • welcomePage.buttonBackground#2c1d16
  • 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#2baf2b
markup.deleted#ef5734
markup.changed#bdbe00
invalid#ef5734underline italic
invalid.deprecated#a8a8a8underline italic
entity.name.filename#e5e500
markup.error#ef5734
markup.underlineunderline
markup.bold#bdbe00bold
markup.heading#246db2bold
markup.italic#e5e500italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#00acee
markup.inline.raw, markup.raw.restructuredtext#2baf2b
markup.underline.link, markup.underline.link.image#00acee
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#cf5ec0
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#2baf2b
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#00aceenormal
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#00aceeitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7c7c7c
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#cf5ec0
comment.block.documentation entity.name.type#00aceeitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#00acee
comment.block.documentation variable#bdbe00italic
constant, variable.other.constant#246db2
constant.character.escape, constant.character.string.escape, constant.regexp#cf5ec0
entity.name.tag#cf5ec0
entity.other.attribute-name.parent-selector#cf5ec0
entity.other.attribute-name#2baf2bitalic
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#2baf2b
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#bdbe00italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#2baf2bitalic
meta.decorator variable.other.object#2baf2b
keyword, punctuation.definition.keyword#cf5ec0
keyword.control.new, keyword.operator.newbold
meta.selector#cf5ec0
support#00aceeitalic
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#cf5ec0
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#cf5ec0
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#00acee
constant.other.date, constant.other.timestamp#bdbe00
variable.other.alias.yaml#2baf2bitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#cf5ec0regular
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#00aceeitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#bdbe00
storage.modifier#cf5ec0
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#e5e500
punctuation.definition.group.capture.regexp#cf5ec0
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ef5734
punctuation.definition.character-class.regexp#00acee
punctuation.definition.group.regexp#bdbe00
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ef5734
meta.assertion.look-ahead.regexp#2baf2b
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#bdbe00italic
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#00acee
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