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#36a3d910
  • activityBar.activeBorder#f0717880
  • activityBar.background#0f1419
  • activityBar.foreground#cbcbcb
  • activityBar.inactiveForeground#656565
  • activityBarBadge.background#f07178
  • activityBarBadge.foreground#0f1419
  • badge.background#000000
  • badge.foreground#cbcbcb
  • breadcrumb.activeSelectionForeground#cbcbcb
  • breadcrumb.background#0f1419
  • breadcrumb.focusForeground#cbcbcb
  • breadcrumb.foreground#656565
  • breadcrumbPicker.background#101010
  • button.background#212121
  • button.foreground#cbcbcb
  • checkbox.background#212121
  • checkbox.border#101010
  • checkbox.foreground#cbcbcb
  • contrastBorder#101010
  • debugToolBar.background#212121
  • diffEditor.insertedTextBackground#b8cc5220
  • diffEditor.removedTextBackground#ff333350
  • dropdown.background#0f1419
  • dropdown.border#101010
  • dropdown.foreground#cbcbcb
  • editor.background#0f1419
  • editor.findMatchBackground#e7c54780
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#32323275
  • editor.foldBackground#212121
  • editor.foreground#cbcbcb
  • editor.hoverHighlightBackground#101010
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#36a3d915
  • editor.selectionBackground#000000
  • editor.selectionHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBackground#0f1419
  • editor.snippetFinalTabstopHighlightBorder#b8cc52
  • editor.snippetTabstopHighlightBackground#0f1419
  • editor.snippetTabstopHighlightBorder#656565
  • editor.wordHighlightBackground#95e6cb50
  • editor.wordHighlightStrongBackground#b8cc5250
  • editorCodeLens.foreground#656565
  • editorError.foreground#ff3333
  • editorGroup.border#36a3d9
  • editorGroup.dropBackground#32323270
  • editorGroupHeader.tabsBackground#101010
  • editorGutter.addedBackground#b8cc5280
  • editorGutter.deletedBackground#ff333380
  • editorGutter.modifiedBackground#95e6cb80
  • editorHoverWidget.background#0f1419
  • editorHoverWidget.border#656565
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#656565
  • editorLink.activeForeground#95e6cb
  • editorMarkerNavigation.background#212121
  • editorOverviewRuler.addedForeground#b8cc5280
  • editorOverviewRuler.border#101010
  • editorOverviewRuler.currentContentForeground#b8cc52
  • editorOverviewRuler.deletedForeground#ff333380
  • editorOverviewRuler.errorForeground#ff333380
  • editorOverviewRuler.incomingContentForeground#36a3d9
  • editorOverviewRuler.infoForeground#95e6cb80
  • editorOverviewRuler.modifiedForeground#95e6cb80
  • editorOverviewRuler.selectionHighlightForeground#e7c547
  • editorOverviewRuler.warningForeground#e7c54780
  • editorOverviewRuler.wordHighlightForeground#95e6cb
  • editorOverviewRuler.wordHighlightStrongForeground#b8cc52
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#212121
  • editorSuggestWidget.foreground#cbcbcb
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#e7c547
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#212121
  • errorForeground#ff3333
  • extensionButton.prominentBackground#b8cc5290
  • extensionButton.prominentForeground#cbcbcb
  • extensionButton.prominentHoverBackground#b8cc5260
  • focusBorder#656565
  • foreground#cbcbcb
  • gitDecoration.conflictingResourceForeground#e7c547
  • gitDecoration.deletedResourceForeground#ff3333
  • gitDecoration.ignoredResourceForeground#656565
  • gitDecoration.modifiedResourceForeground#95e6cb
  • gitDecoration.untrackedResourceForeground#b8cc52
  • input.background#0f1419
  • input.border#101010
  • input.foreground#cbcbcb
  • input.placeholderForeground#656565
  • inputOption.activeBorder#36a3d9
  • inputValidation.errorBackground#0f1419
  • inputValidation.errorBorder#ff3333
  • inputValidation.errorForeground#ff3333
  • inputValidation.infoBackground#0f1419
  • inputValidation.infoBorder#36a3d9
  • inputValidation.infoForeground#36a3d9
  • inputValidation.warningBackground#0f1419
  • inputValidation.warningBorder#e7c547
  • inputValidation.warningForeground#e7c547
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#cbcbcb
  • list.dropBackground#000000
  • list.errorForeground#ff3333
  • list.focusBackground#32323275
  • list.highlightForeground#95e6cb
  • list.hoverBackground#32323275
  • list.inactiveSelectionBackground#32323275
  • list.warningForeground#e7c547
  • listFilterWidget.background#0f1419
  • listFilterWidget.noMatchesOutline#ff3333
  • listFilterWidget.outline#000000
  • merge.currentHeaderBackground#b8cc5290
  • merge.incomingHeaderBackground#36a3d990
  • notification.background#0f1419
  • notification.buttonBackground#000000
  • notification.buttonForeground#cbcbcb
  • notification.buttonHoverBackground#32323275
  • notification.errorBackground#ff3333
  • notification.errorForeground#0f1419
  • notification.foreground#cbcbcb
  • notification.infoBackground#36a3d9
  • notification.infoForeground#0f1419
  • notification.warningBackground#e7c547
  • notification.warningForeground#0f1419
  • notificationCenter.border#212121
  • notificationCenterHeader.background#0f1419
  • notificationCenterHeader.foreground#cbcbcb
  • notificationLink.foreground#95e6cb
  • notifications.background#0f1419
  • notifications.border#212121
  • notifications.foreground#cbcbcb
  • notificationsErrorIcon.foreground#ff3333
  • notificationsInfoIcon.foreground#36a3d9
  • notificationsWarningIcon.foreground#e7c547
  • notificationToast.border#212121
  • panel.background#0f1419
  • panel.border#36a3d9
  • panelInput.border#cbcbcb
  • panelTitle.activeBorder#f07178
  • panelTitle.activeForeground#cbcbcb
  • panelTitle.inactiveForeground#656565
  • peekView.border#000000
  • peekViewEditor.background#0f1419
  • peekViewEditor.matchHighlightBackground#fff77980
  • peekViewResult.background#212121
  • peekViewResult.fileForeground#cbcbcb
  • peekViewResult.lineForeground#cbcbcb
  • peekViewResult.matchHighlightBackground#fff77980
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#cbcbcb
  • peekViewTitle.background#101010
  • peekViewTitleDescription.foreground#656565
  • peekViewTitleLabel.foreground#cbcbcb
  • pickerGroup.border#36a3d9
  • pickerGroup.foreground#95e6cb
  • progressBar.background#f07178
  • scrollbar.shadow#444444
  • selection.background#36a3d9
  • settings.checkboxBackground#212121
  • settings.checkboxBorder#101010
  • settings.checkboxForeground#cbcbcb
  • settings.dropdownBackground#212121
  • settings.dropdownBorder#101010
  • settings.dropdownForeground#cbcbcb
  • settings.headerForeground#cbcbcb
  • settings.modifiedItemIndicator#e7c547
  • settings.numberInputBackground#212121
  • settings.numberInputBorder#101010
  • settings.numberInputForeground#cbcbcb
  • settings.textInputBackground#212121
  • settings.textInputBorder#101010
  • settings.textInputForeground#cbcbcb
  • sideBar.background#212121
  • sideBarSectionHeader.background#0f1419
  • sideBarSectionHeader.border#101010
  • sideBarTitle.foreground#cbcbcb
  • statusBar.background#101010
  • statusBar.debuggingBackground#ff3333
  • statusBar.debuggingForeground#101010
  • statusBar.foreground#cbcbcb
  • statusBar.noFolderBackground#101010
  • statusBar.noFolderForeground#cbcbcb
  • statusBarItem.prominentBackground#ff3333
  • statusBarItem.prominentHoverBackground#e7c547
  • statusBarItem.remoteBackground#36a3d9
  • statusBarItem.remoteForeground#0f1419
  • tab.activeBackground#0f1419
  • tab.activeBorderTop#f0717880
  • tab.activeForeground#cbcbcb
  • tab.border#101010
  • tab.inactiveBackground#212121
  • tab.inactiveForeground#656565
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#36a3d9
  • terminal.ansiBrightBlack#323232
  • terminal.ansiBrightBlue#68d5ff
  • terminal.ansiBrightCyan#c7fffd
  • terminal.ansiBrightGreen#eafe84
  • terminal.ansiBrightMagenta#ffa3aa
  • terminal.ansiBrightRed#ff6565
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#fff779
  • terminal.ansiCyan#95e6cb
  • terminal.ansiGreen#b8cc52
  • terminal.ansiMagenta#f07178
  • terminal.ansiRed#ff3333
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#e7c547
  • terminal.background#0f1419
  • terminal.border#cbcbcb
  • terminal.foreground#cbcbcb
  • terminal.selectionBackground#00000050
  • textBlockQuote.background#212121
  • titleBar.activeBackground#212121
  • titleBar.activeForeground#cbcbcb
  • titleBar.inactiveBackground#101010
  • titleBar.inactiveForeground#656565
  • walkThrough.embeddedEditorBackground#212121
  • welcomePage.buttonBackground#000000
  • welcomePage.buttonHoverBackground#32323275
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#36a3d9
source#cbcbcb
meta.diff, meta.diff.header#656565
markup.inserted#b8cc52
markup.deleted#ff3333
markup.changed#e7c547
invalid#ff3333underline italic
invalid.deprecated#cbcbcbunderline italic
entity.name.filename#fff779
markup.error#ff3333
markup.underlineunderline
markup.bold#e7c547bold
markup.heading#36a3d9bold
markup.italic#fff779italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#95e6cb
markup.inline.raw, markup.raw.restructuredtext#b8cc52
markup.underline.link, markup.underline.link.image#95e6cb
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#f07178
entity.name.directive.restructuredtext, markup.quote#fff779italic
meta.separator.markdown#656565
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#b8cc52
punctuation.definition.constant.restructuredtext#36a3d9
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#36a3d9
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#cbcbcb
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#fff779
entity.name.type.class, entity.name.class#95e6cbnormal
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#36a3d9italic
entity.other.inherited-class#95e6cbitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#656565
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#f07178
comment.block.documentation entity.name.type#95e6cbitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#95e6cb
comment.block.documentation variable#e7c547italic
constant, variable.other.constant#36a3d9
constant.character.escape, constant.character.string.escape, constant.regexp#f07178
entity.name.tag#f07178
entity.other.attribute-name.parent-selector#f07178
entity.other.attribute-name#b8cc52italic
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#b8cc52
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#e7c547italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#b8cc52italic
meta.decorator variable.other.object#b8cc52
keyword, punctuation.definition.keyword#f07178
keyword.control.new, keyword.operator.newbold
meta.selector#f07178
support#95e6cbitalic
support.function.magic, support.variable, variable.other.predefined#36a3d9regular
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#f07178
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#cbcbcb
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#f07178
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#95e6cb
constant.other.date, constant.other.timestamp#e7c547
variable.other.alias.yaml#b8cc52italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#f07178regular
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#95e6cbitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#e7c547
storage.modifier#f07178
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fff779
punctuation.definition.group.capture.regexp#f07178
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff3333
punctuation.definition.character-class.regexp#95e6cb
punctuation.definition.group.regexp#e7c547
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff3333
meta.assertion.look-ahead.regexp#b8cc52
string#fff779
punctuation.definition.string.begin, punctuation.definition.string.end#68d5ff
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#36a3d9
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#656565
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#cbcbcb
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#e7c547italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#cbcbcbnormal
meta.selectionset.graphql variable#fff779
meta.selectionset.graphql meta.arguments variable#cbcbcb
entity.name.fragment.graphql, variable.fragment.graphql#95e6cb
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#cbcbcb
source.shell variable.other#36a3d9
support.constant#36a3d9normal
meta.scope.prerequisites.makefile#fff779
meta.attribute-selector.scss#fff779
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#cbcbcb
meta.preprocessor.haskell#656565
Tinted VSCode by Tinted Theming - VS Code Theme