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#437ee610
  • activityBar.activeBorder#9d73b080
  • activityBar.background#202020
  • activityBar.foreground#515151
  • activityBar.inactiveForeground#c5c5c5
  • activityBarBadge.background#9d73b0
  • activityBarBadge.foreground#202020
  • badge.background#acacac
  • badge.foreground#515151
  • breadcrumb.activeSelectionForeground#515151
  • breadcrumb.background#202020
  • breadcrumb.focusForeground#515151
  • breadcrumb.foreground#c5c5c5
  • breadcrumbPicker.background#555454
  • button.background#aaa9a9
  • button.foreground#515151
  • checkbox.background#aaa9a9
  • checkbox.border#555454
  • checkbox.foreground#515151
  • contrastBorder#555454
  • debugToolBar.background#aaa9a9
  • diffEditor.insertedTextBackground#98b61b20
  • diffEditor.removedTextBackground#fb525550
  • dropdown.background#202020
  • dropdown.border#555454
  • dropdown.foreground#515151
  • editor.background#202020
  • editor.findMatchBackground#ccb34380
  • editor.findMatchHighlightBackground#17171740
  • editor.findRangeHighlightBackground#fffefe75
  • editor.foldBackground#aaa9a9
  • editor.foreground#515151
  • editor.hoverHighlightBackground#555454
  • editor.lineHighlightBorder#acacac
  • editor.rangeHighlightBackground#437ee615
  • editor.selectionBackground#acacac
  • editor.selectionHighlightBackground#acacac
  • editor.snippetFinalTabstopHighlightBackground#202020
  • editor.snippetFinalTabstopHighlightBorder#98b61b
  • editor.snippetTabstopHighlightBackground#202020
  • editor.snippetTabstopHighlightBorder#c5c5c5
  • editor.wordHighlightBackground#24888650
  • editor.wordHighlightStrongBackground#98b61b50
  • editorCodeLens.foreground#c5c5c5
  • editorError.foreground#fb5255
  • editorGroup.border#437ee6
  • editorGroup.dropBackground#fffefe70
  • editorGroupHeader.tabsBackground#555454
  • editorGutter.addedBackground#98b61b80
  • editorGutter.deletedBackground#fb525580
  • editorGutter.modifiedBackground#24888680
  • editorHoverWidget.background#202020
  • editorHoverWidget.border#c5c5c5
  • editorIndentGuide.activeBackground#17171745
  • editorIndentGuide.background#1717171A
  • editorLineNumber.foreground#c5c5c5
  • editorLink.activeForeground#248886
  • editorMarkerNavigation.background#aaa9a9
  • editorOverviewRuler.addedForeground#98b61b80
  • editorOverviewRuler.border#555454
  • editorOverviewRuler.currentContentForeground#98b61b
  • editorOverviewRuler.deletedForeground#fb525580
  • editorOverviewRuler.errorForeground#fb525580
  • editorOverviewRuler.incomingContentForeground#437ee6
  • editorOverviewRuler.infoForeground#24888680
  • editorOverviewRuler.modifiedForeground#24888680
  • editorOverviewRuler.selectionHighlightForeground#ccb343
  • editorOverviewRuler.warningForeground#ccb34380
  • editorOverviewRuler.wordHighlightForeground#248886
  • editorOverviewRuler.wordHighlightStrongForeground#98b61b
  • editorRuler.foreground#1717171A
  • editorSuggestWidget.background#aaa9a9
  • editorSuggestWidget.foreground#515151
  • editorSuggestWidget.selectedBackground#acacac
  • editorWarning.foreground#ccb343
  • editorWhitespace.foreground#1717171A
  • editorWidget.background#aaa9a9
  • errorForeground#fb5255
  • extensionButton.prominentBackground#98b61b90
  • extensionButton.prominentForeground#515151
  • extensionButton.prominentHoverBackground#98b61b60
  • focusBorder#c5c5c5
  • foreground#515151
  • gitDecoration.conflictingResourceForeground#ccb343
  • gitDecoration.deletedResourceForeground#fb5255
  • gitDecoration.ignoredResourceForeground#c5c5c5
  • gitDecoration.modifiedResourceForeground#248886
  • gitDecoration.untrackedResourceForeground#98b61b
  • input.background#202020
  • input.border#555454
  • input.foreground#515151
  • input.placeholderForeground#c5c5c5
  • inputOption.activeBorder#437ee6
  • inputValidation.errorBackground#202020
  • inputValidation.errorBorder#fb5255
  • inputValidation.errorForeground#fb5255
  • inputValidation.infoBackground#202020
  • inputValidation.infoBorder#437ee6
  • inputValidation.infoForeground#437ee6
  • inputValidation.warningBackground#202020
  • inputValidation.warningBorder#ccb343
  • inputValidation.warningForeground#ccb343
  • list.activeSelectionBackground#acacac
  • list.activeSelectionForeground#515151
  • list.dropBackground#acacac
  • list.errorForeground#fb5255
  • list.focusBackground#fffefe75
  • list.highlightForeground#248886
  • list.hoverBackground#fffefe75
  • list.inactiveSelectionBackground#fffefe75
  • list.warningForeground#ccb343
  • listFilterWidget.background#202020
  • listFilterWidget.noMatchesOutline#fb5255
  • listFilterWidget.outline#acacac
  • merge.currentHeaderBackground#98b61b90
  • merge.incomingHeaderBackground#437ee690
  • notification.background#202020
  • notification.buttonBackground#acacac
  • notification.buttonForeground#515151
  • notification.buttonHoverBackground#fffefe75
  • notification.errorBackground#fb5255
  • notification.errorForeground#202020
  • notification.foreground#515151
  • notification.infoBackground#437ee6
  • notification.infoForeground#202020
  • notification.warningBackground#ccb343
  • notification.warningForeground#202020
  • notificationCenter.border#aaa9a9
  • notificationCenterHeader.background#202020
  • notificationCenterHeader.foreground#515151
  • notificationLink.foreground#248886
  • notifications.background#202020
  • notifications.border#aaa9a9
  • notifications.foreground#515151
  • notificationsErrorIcon.foreground#fb5255
  • notificationsInfoIcon.foreground#437ee6
  • notificationsWarningIcon.foreground#ccb343
  • notificationToast.border#aaa9a9
  • panel.background#202020
  • panel.border#437ee6
  • panelInput.border#515151
  • panelTitle.activeBorder#9d73b0
  • panelTitle.activeForeground#515151
  • panelTitle.inactiveForeground#c5c5c5
  • peekView.border#acacac
  • peekViewEditor.background#202020
  • peekViewEditor.matchHighlightBackground#ffff0a80
  • peekViewResult.background#aaa9a9
  • peekViewResult.fileForeground#515151
  • peekViewResult.lineForeground#515151
  • peekViewResult.matchHighlightBackground#ffff0a80
  • peekViewResult.selectionBackground#acacac
  • peekViewResult.selectionForeground#515151
  • peekViewTitle.background#555454
  • peekViewTitleDescription.foreground#c5c5c5
  • peekViewTitleLabel.foreground#515151
  • pickerGroup.border#437ee6
  • pickerGroup.foreground#248886
  • progressBar.background#9d73b0
  • scrollbar.shadow#444444
  • selection.background#437ee6
  • settings.checkboxBackground#aaa9a9
  • settings.checkboxBorder#555454
  • settings.checkboxForeground#515151
  • settings.dropdownBackground#aaa9a9
  • settings.dropdownBorder#555454
  • settings.dropdownForeground#515151
  • settings.headerForeground#515151
  • settings.modifiedItemIndicator#ccb343
  • settings.numberInputBackground#aaa9a9
  • settings.numberInputBorder#555454
  • settings.numberInputForeground#515151
  • settings.textInputBackground#aaa9a9
  • settings.textInputBorder#555454
  • settings.textInputForeground#515151
  • sideBar.background#aaa9a9
  • sideBarSectionHeader.background#202020
  • sideBarSectionHeader.border#555454
  • sideBarTitle.foreground#515151
  • statusBar.background#555454
  • statusBar.debuggingBackground#fb5255
  • statusBar.debuggingForeground#555454
  • statusBar.foreground#515151
  • statusBar.noFolderBackground#555454
  • statusBar.noFolderForeground#515151
  • statusBarItem.prominentBackground#fb5255
  • statusBarItem.prominentHoverBackground#ccb343
  • statusBarItem.remoteBackground#437ee6
  • statusBarItem.remoteForeground#202020
  • tab.activeBackground#202020
  • tab.activeBorderTop#9d73b080
  • tab.activeForeground#515151
  • tab.border#555454
  • tab.inactiveBackground#aaa9a9
  • tab.inactiveForeground#c5c5c5
  • terminal.ansiBlack#acacac
  • terminal.ansiBlue#437ee6
  • terminal.ansiBrightBlack#fffefe
  • terminal.ansiBrightBlue#6c9bed
  • terminal.ansiBrightCyan#248886
  • terminal.ansiBrightGreen#98b61b
  • terminal.ansiBrightMagenta#fc7efe
  • terminal.ansiBrightRed#fc6f72
  • terminal.ansiBrightWhite#171717
  • terminal.ansiBrightYellow#ffff0a
  • terminal.ansiCyan#248886
  • terminal.ansiGreen#98b61b
  • terminal.ansiMagenta#9d73b0
  • terminal.ansiRed#fb5255
  • terminal.ansiWhite#171717
  • terminal.ansiYellow#ccb343
  • terminal.background#202020
  • terminal.border#515151
  • terminal.foreground#515151
  • terminal.selectionBackground#acacac50
  • textBlockQuote.background#aaa9a9
  • titleBar.activeBackground#aaa9a9
  • titleBar.activeForeground#515151
  • titleBar.inactiveBackground#555454
  • titleBar.inactiveForeground#c5c5c5
  • walkThrough.embeddedEditorBackground#aaa9a9
  • welcomePage.buttonBackground#acacac
  • welcomePage.buttonHoverBackground#fffefe75
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#437ee6
source#515151
meta.diff, meta.diff.header#c5c5c5
markup.inserted#98b61b
markup.deleted#fb5255
markup.changed#ccb343
invalid#fb5255underline italic
invalid.deprecated#515151underline italic
entity.name.filename#ffff0a
markup.error#fb5255
markup.underlineunderline
markup.bold#ccb343bold
markup.heading#437ee6bold
markup.italic#ffff0aitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#248886
markup.inline.raw, markup.raw.restructuredtext#98b61b
markup.underline.link, markup.underline.link.image#248886
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#9d73b0
entity.name.directive.restructuredtext, markup.quote#ffff0aitalic
meta.separator.markdown#c5c5c5
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#98b61b
punctuation.definition.constant.restructuredtext#437ee6
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#437ee6
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#515151
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffff0a
entity.name.type.class, entity.name.class#248886normal
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#437ee6italic
entity.other.inherited-class#248886italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#c5c5c5
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#9d73b0
comment.block.documentation entity.name.type#248886italic
comment.block.documentation entity.name.type punctuation.definition.bracket#248886
comment.block.documentation variable#ccb343italic
constant, variable.other.constant#437ee6
constant.character.escape, constant.character.string.escape, constant.regexp#9d73b0
entity.name.tag#9d73b0
entity.other.attribute-name.parent-selector#9d73b0
entity.other.attribute-name#98b61bitalic
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#98b61b
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#ccb343italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#98b61bitalic
meta.decorator variable.other.object#98b61b
keyword, punctuation.definition.keyword#9d73b0
keyword.control.new, keyword.operator.newbold
meta.selector#9d73b0
support#248886italic
support.function.magic, support.variable, variable.other.predefined#437ee6regular
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#9d73b0
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#515151
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#9d73b0
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#248886
constant.other.date, constant.other.timestamp#ccb343
variable.other.alias.yaml#98b61bitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#9d73b0regular
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#248886italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ccb343
storage.modifier#9d73b0
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffff0a
punctuation.definition.group.capture.regexp#9d73b0
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#fb5255
punctuation.definition.character-class.regexp#248886
punctuation.definition.group.regexp#ccb343
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#fb5255
meta.assertion.look-ahead.regexp#98b61b
string#ffff0a
punctuation.definition.string.begin, punctuation.definition.string.end#6c9bed
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#437ee6
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#c5c5c5
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#515151
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#ccb343italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#515151normal
meta.selectionset.graphql variable#ffff0a
meta.selectionset.graphql meta.arguments variable#515151
entity.name.fragment.graphql, variable.fragment.graphql#248886
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#515151
source.shell variable.other#437ee6
support.constant#437ee6normal
meta.scope.prerequisites.makefile#ffff0a
meta.attribute-selector.scss#ffff0a
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#515151
meta.preprocessor.haskell#c5c5c5
Tinted VSCode by Tinted Theming - VS Code Theme