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#96cafd10
  • activityBar.activeBorder#ff73fd80
  • activityBar.background#000000
  • activityBar.foreground#d1d1d1
  • activityBar.inactiveForeground#989898
  • activityBarBadge.background#ff73fd
  • activityBarBadge.foreground#000000
  • badge.background#4e4e4e
  • badge.foreground#d1d1d1
  • breadcrumb.activeSelectionForeground#d1d1d1
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#d1d1d1
  • breadcrumb.foreground#989898
  • breadcrumbPicker.background#292929
  • button.background#525252
  • button.foreground#d1d1d1
  • checkbox.background#525252
  • checkbox.border#292929
  • checkbox.foreground#d1d1d1
  • contrastBorder#292929
  • debugToolBar.background#525252
  • diffEditor.insertedTextBackground#a7ff6020
  • diffEditor.removedTextBackground#ff6b6050
  • dropdown.background#000000
  • dropdown.border#292929
  • dropdown.foreground#d1d1d1
  • editor.background#000000
  • editor.findMatchBackground#ffffb680
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#7c7c7c75
  • editor.foldBackground#525252
  • editor.foreground#d1d1d1
  • editor.hoverHighlightBackground#292929
  • editor.lineHighlightBorder#4e4e4e
  • editor.rangeHighlightBackground#96cafd15
  • editor.selectionBackground#4e4e4e
  • editor.selectionHighlightBackground#4e4e4e
  • editor.snippetFinalTabstopHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBorder#a7ff60
  • editor.snippetTabstopHighlightBackground#000000
  • editor.snippetTabstopHighlightBorder#989898
  • editor.wordHighlightBackground#c6c4fd50
  • editor.wordHighlightStrongBackground#a7ff6050
  • editorCodeLens.foreground#989898
  • editorError.foreground#ff6b60
  • editorGroup.border#96cafd
  • editorGroup.dropBackground#7c7c7c70
  • editorGroupHeader.tabsBackground#292929
  • editorGutter.addedBackground#a7ff6080
  • editorGutter.deletedBackground#ff6b6080
  • editorGutter.modifiedBackground#c6c4fd80
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#989898
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#989898
  • editorLink.activeForeground#c6c4fd
  • editorMarkerNavigation.background#525252
  • editorOverviewRuler.addedForeground#a7ff6080
  • editorOverviewRuler.border#292929
  • editorOverviewRuler.currentContentForeground#a7ff60
  • editorOverviewRuler.deletedForeground#ff6b6080
  • editorOverviewRuler.errorForeground#ff6b6080
  • editorOverviewRuler.incomingContentForeground#96cafd
  • editorOverviewRuler.infoForeground#c6c4fd80
  • editorOverviewRuler.modifiedForeground#c6c4fd80
  • editorOverviewRuler.selectionHighlightForeground#ffffb6
  • editorOverviewRuler.warningForeground#ffffb680
  • editorOverviewRuler.wordHighlightForeground#c6c4fd
  • editorOverviewRuler.wordHighlightStrongForeground#a7ff60
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#525252
  • editorSuggestWidget.foreground#d1d1d1
  • editorSuggestWidget.selectedBackground#4e4e4e
  • editorWarning.foreground#ffffb6
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#525252
  • errorForeground#ff6b60
  • extensionButton.prominentBackground#a7ff6090
  • extensionButton.prominentForeground#d1d1d1
  • extensionButton.prominentHoverBackground#a7ff6060
  • focusBorder#989898
  • foreground#d1d1d1
  • gitDecoration.conflictingResourceForeground#ffffb6
  • gitDecoration.deletedResourceForeground#ff6b60
  • gitDecoration.ignoredResourceForeground#989898
  • gitDecoration.modifiedResourceForeground#c6c4fd
  • gitDecoration.untrackedResourceForeground#a7ff60
  • input.background#000000
  • input.border#292929
  • input.foreground#d1d1d1
  • input.placeholderForeground#989898
  • inputOption.activeBorder#96cafd
  • inputValidation.errorBackground#000000
  • inputValidation.errorBorder#ff6b60
  • inputValidation.errorForeground#ff6b60
  • inputValidation.infoBackground#000000
  • inputValidation.infoBorder#96cafd
  • inputValidation.infoForeground#96cafd
  • inputValidation.warningBackground#000000
  • inputValidation.warningBorder#ffffb6
  • inputValidation.warningForeground#ffffb6
  • list.activeSelectionBackground#4e4e4e
  • list.activeSelectionForeground#d1d1d1
  • list.dropBackground#4e4e4e
  • list.errorForeground#ff6b60
  • list.focusBackground#7c7c7c75
  • list.highlightForeground#c6c4fd
  • list.hoverBackground#7c7c7c75
  • list.inactiveSelectionBackground#7c7c7c75
  • list.warningForeground#ffffb6
  • listFilterWidget.background#000000
  • listFilterWidget.noMatchesOutline#ff6b60
  • listFilterWidget.outline#4e4e4e
  • merge.currentHeaderBackground#a7ff6090
  • merge.incomingHeaderBackground#96cafd90
  • notification.background#000000
  • notification.buttonBackground#4e4e4e
  • notification.buttonForeground#d1d1d1
  • notification.buttonHoverBackground#7c7c7c75
  • notification.errorBackground#ff6b60
  • notification.errorForeground#000000
  • notification.foreground#d1d1d1
  • notification.infoBackground#96cafd
  • notification.infoForeground#000000
  • notification.warningBackground#ffffb6
  • notification.warningForeground#000000
  • notificationCenter.border#525252
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#d1d1d1
  • notificationLink.foreground#c6c4fd
  • notifications.background#000000
  • notifications.border#525252
  • notifications.foreground#d1d1d1
  • notificationsErrorIcon.foreground#ff6b60
  • notificationsInfoIcon.foreground#96cafd
  • notificationsWarningIcon.foreground#ffffb6
  • notificationToast.border#525252
  • panel.background#000000
  • panel.border#96cafd
  • panelInput.border#d1d1d1
  • panelTitle.activeBorder#ff73fd
  • panelTitle.activeForeground#d1d1d1
  • panelTitle.inactiveForeground#989898
  • peekView.border#4e4e4e
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#ffffcb80
  • peekViewResult.background#525252
  • peekViewResult.fileForeground#d1d1d1
  • peekViewResult.lineForeground#d1d1d1
  • peekViewResult.matchHighlightBackground#ffffcb80
  • peekViewResult.selectionBackground#4e4e4e
  • peekViewResult.selectionForeground#d1d1d1
  • peekViewTitle.background#292929
  • peekViewTitleDescription.foreground#989898
  • peekViewTitleLabel.foreground#d1d1d1
  • pickerGroup.border#96cafd
  • pickerGroup.foreground#c6c4fd
  • progressBar.background#ff73fd
  • scrollbar.shadow#444444
  • selection.background#96cafd
  • settings.checkboxBackground#525252
  • settings.checkboxBorder#292929
  • settings.checkboxForeground#d1d1d1
  • settings.dropdownBackground#525252
  • settings.dropdownBorder#292929
  • settings.dropdownForeground#d1d1d1
  • settings.headerForeground#d1d1d1
  • settings.modifiedItemIndicator#ffffb6
  • settings.numberInputBackground#525252
  • settings.numberInputBorder#292929
  • settings.numberInputForeground#d1d1d1
  • settings.textInputBackground#525252
  • settings.textInputBorder#292929
  • settings.textInputForeground#d1d1d1
  • sideBar.background#525252
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#292929
  • sideBarTitle.foreground#d1d1d1
  • statusBar.background#292929
  • statusBar.debuggingBackground#ff6b60
  • statusBar.debuggingForeground#292929
  • statusBar.foreground#d1d1d1
  • statusBar.noFolderBackground#292929
  • statusBar.noFolderForeground#d1d1d1
  • statusBarItem.prominentBackground#ff6b60
  • statusBarItem.prominentHoverBackground#ffffb6
  • statusBarItem.remoteBackground#96cafd
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#000000
  • tab.activeBorderTop#ff73fd80
  • tab.activeForeground#d1d1d1
  • tab.border#292929
  • tab.inactiveBackground#525252
  • tab.inactiveForeground#989898
  • terminal.ansiBlack#4e4e4e
  • terminal.ansiBlue#96cafd
  • terminal.ansiBrightBlack#7c7c7c
  • terminal.ansiBrightBlue#b5dcfe
  • terminal.ansiBrightCyan#dfdffe
  • terminal.ansiBrightGreen#ceffab
  • terminal.ansiBrightMagenta#ff9cfe
  • terminal.ansiBrightRed#ffb6b0
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffffcb
  • terminal.ansiCyan#c6c4fd
  • terminal.ansiGreen#a7ff60
  • terminal.ansiMagenta#ff73fd
  • terminal.ansiRed#ff6b60
  • terminal.ansiWhite#eeeeee
  • terminal.ansiYellow#ffffb6
  • terminal.background#000000
  • terminal.border#d1d1d1
  • terminal.foreground#d1d1d1
  • terminal.selectionBackground#4e4e4e50
  • textBlockQuote.background#525252
  • titleBar.activeBackground#525252
  • titleBar.activeForeground#d1d1d1
  • titleBar.inactiveBackground#292929
  • titleBar.inactiveForeground#989898
  • walkThrough.embeddedEditorBackground#525252
  • welcomePage.buttonBackground#4e4e4e
  • welcomePage.buttonHoverBackground#7c7c7c75
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#96cafd
source#d1d1d1
meta.diff, meta.diff.header#989898
markup.inserted#a7ff60
markup.deleted#ff6b60
markup.changed#ffffb6
invalid#ff6b60underline italic
invalid.deprecated#d1d1d1underline italic
entity.name.filename#ffffcb
markup.error#ff6b60
markup.underlineunderline
markup.bold#ffffb6bold
markup.heading#96cafdbold
markup.italic#ffffcbitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#c6c4fd
markup.inline.raw, markup.raw.restructuredtext#a7ff60
markup.underline.link, markup.underline.link.image#c6c4fd
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ff73fd
entity.name.directive.restructuredtext, markup.quote#ffffcbitalic
meta.separator.markdown#989898
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#a7ff60
punctuation.definition.constant.restructuredtext#96cafd
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#96cafd
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#d1d1d1
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffffcb
entity.name.type.class, entity.name.class#c6c4fdnormal
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#96cafditalic
entity.other.inherited-class#c6c4fditalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#989898
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ff73fd
comment.block.documentation entity.name.type#c6c4fditalic
comment.block.documentation entity.name.type punctuation.definition.bracket#c6c4fd
comment.block.documentation variable#ffffb6italic
constant, variable.other.constant#96cafd
constant.character.escape, constant.character.string.escape, constant.regexp#ff73fd
entity.name.tag#ff73fd
entity.other.attribute-name.parent-selector#ff73fd
entity.other.attribute-name#a7ff60italic
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#a7ff60
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#ffffb6italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#a7ff60italic
meta.decorator variable.other.object#a7ff60
keyword, punctuation.definition.keyword#ff73fd
keyword.control.new, keyword.operator.newbold
meta.selector#ff73fd
support#c6c4fditalic
support.function.magic, support.variable, variable.other.predefined#96cafdregular
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#ff73fd
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#d1d1d1
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#ff73fd
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#c6c4fd
constant.other.date, constant.other.timestamp#ffffb6
variable.other.alias.yaml#a7ff60italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ff73fdregular
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#c6c4fditalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ffffb6
storage.modifier#ff73fd
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffffcb
punctuation.definition.group.capture.regexp#ff73fd
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff6b60
punctuation.definition.character-class.regexp#c6c4fd
punctuation.definition.group.regexp#ffffb6
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff6b60
meta.assertion.look-ahead.regexp#a7ff60
string#ffffcb
punctuation.definition.string.begin, punctuation.definition.string.end#b5dcfe
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#96cafd
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#989898
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#d1d1d1
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#ffffb6italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#d1d1d1normal
meta.selectionset.graphql variable#ffffcb
meta.selectionset.graphql meta.arguments variable#d1d1d1
entity.name.fragment.graphql, variable.fragment.graphql#c6c4fd
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#d1d1d1
source.shell variable.other#96cafd
support.constant#96cafdnormal
meta.scope.prerequisites.makefile#ffffcb
meta.attribute-selector.scss#ffffcb
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#d1d1d1
meta.preprocessor.haskell#989898
Tinted VSCode by Tinted Theming - VS Code Theme