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#8ba4b010
  • activityBar.activeBorder#a292a380
  • activityBar.background#181616
  • activityBar.foreground#c5c9c5
  • activityBar.inactiveForeground#625e5a
  • activityBarBadge.background#a292a3
  • activityBarBadge.foreground#181616
  • badge.background#282727
  • badge.foreground#c5c9c5
  • breadcrumb.activeSelectionForeground#c5c9c5
  • breadcrumb.background#181616
  • breadcrumb.focusForeground#c5c9c5
  • breadcrumb.foreground#625e5a
  • breadcrumbPicker.background#0d0c0c
  • button.background#12120f
  • button.foreground#c5c9c5
  • checkbox.background#12120f
  • checkbox.border#0d0c0c
  • checkbox.foreground#c5c9c5
  • contrastBorder#0d0c0c
  • debugToolBar.background#12120f
  • diffEditor.insertedTextBackground#8a9a7b20
  • diffEditor.removedTextBackground#c4746e50
  • dropdown.background#181616
  • dropdown.border#0d0c0c
  • dropdown.foreground#c5c9c5
  • editor.background#181616
  • editor.findMatchBackground#b6927b80
  • editor.findMatchHighlightBackground#c5c9c540
  • editor.findRangeHighlightBackground#39383675
  • editor.foldBackground#12120f
  • editor.foreground#c5c9c5
  • editor.hoverHighlightBackground#0d0c0c
  • editor.lineHighlightBorder#282727
  • editor.rangeHighlightBackground#8ba4b015
  • editor.selectionBackground#282727
  • editor.selectionHighlightBackground#282727
  • editor.snippetFinalTabstopHighlightBackground#181616
  • editor.snippetFinalTabstopHighlightBorder#8a9a7b
  • editor.snippetTabstopHighlightBackground#181616
  • editor.snippetTabstopHighlightBorder#625e5a
  • editor.wordHighlightBackground#8ea4a250
  • editor.wordHighlightStrongBackground#8a9a7b50
  • editorCodeLens.foreground#625e5a
  • editorError.foreground#c4746e
  • editorGroup.border#8ba4b0
  • editorGroup.dropBackground#39383670
  • editorGroupHeader.tabsBackground#0d0c0c
  • editorGutter.addedBackground#8a9a7b80
  • editorGutter.deletedBackground#c4746e80
  • editorGutter.modifiedBackground#8ea4a280
  • editorHoverWidget.background#181616
  • editorHoverWidget.border#625e5a
  • editorIndentGuide.activeBackground#c5c9c545
  • editorIndentGuide.background#c5c9c51A
  • editorLineNumber.foreground#625e5a
  • editorLink.activeForeground#8ea4a2
  • editorMarkerNavigation.background#12120f
  • editorOverviewRuler.addedForeground#8a9a7b80
  • editorOverviewRuler.border#0d0c0c
  • editorOverviewRuler.currentContentForeground#8a9a7b
  • editorOverviewRuler.deletedForeground#c4746e80
  • editorOverviewRuler.errorForeground#c4746e80
  • editorOverviewRuler.incomingContentForeground#8ba4b0
  • editorOverviewRuler.infoForeground#8ea4a280
  • editorOverviewRuler.modifiedForeground#8ea4a280
  • editorOverviewRuler.selectionHighlightForeground#b6927b
  • editorOverviewRuler.warningForeground#b6927b80
  • editorOverviewRuler.wordHighlightForeground#8ea4a2
  • editorOverviewRuler.wordHighlightStrongForeground#8a9a7b
  • editorRuler.foreground#c5c9c51A
  • editorSuggestWidget.background#12120f
  • editorSuggestWidget.foreground#c5c9c5
  • editorSuggestWidget.selectedBackground#282727
  • editorWarning.foreground#b6927b
  • editorWhitespace.foreground#c5c9c51A
  • editorWidget.background#12120f
  • errorForeground#c4746e
  • extensionButton.prominentBackground#8a9a7b90
  • extensionButton.prominentForeground#c5c9c5
  • extensionButton.prominentHoverBackground#8a9a7b60
  • focusBorder#625e5a
  • foreground#c5c9c5
  • gitDecoration.conflictingResourceForeground#b6927b
  • gitDecoration.deletedResourceForeground#c4746e
  • gitDecoration.ignoredResourceForeground#625e5a
  • gitDecoration.modifiedResourceForeground#8ea4a2
  • gitDecoration.untrackedResourceForeground#8a9a7b
  • input.background#181616
  • input.border#0d0c0c
  • input.foreground#c5c9c5
  • input.placeholderForeground#625e5a
  • inputOption.activeBorder#8ba4b0
  • inputValidation.errorBackground#181616
  • inputValidation.errorBorder#c4746e
  • inputValidation.errorForeground#c4746e
  • inputValidation.infoBackground#181616
  • inputValidation.infoBorder#8ba4b0
  • inputValidation.infoForeground#8ba4b0
  • inputValidation.warningBackground#181616
  • inputValidation.warningBorder#b6927b
  • inputValidation.warningForeground#b6927b
  • list.activeSelectionBackground#282727
  • list.activeSelectionForeground#c5c9c5
  • list.dropBackground#282727
  • list.errorForeground#c4746e
  • list.focusBackground#39383675
  • list.highlightForeground#8ea4a2
  • list.hoverBackground#39383675
  • list.inactiveSelectionBackground#39383675
  • list.warningForeground#b6927b
  • listFilterWidget.background#181616
  • listFilterWidget.noMatchesOutline#c4746e
  • listFilterWidget.outline#282727
  • merge.currentHeaderBackground#8a9a7b90
  • merge.incomingHeaderBackground#8ba4b090
  • notification.background#181616
  • notification.buttonBackground#282727
  • notification.buttonForeground#c5c9c5
  • notification.buttonHoverBackground#39383675
  • notification.errorBackground#c4746e
  • notification.errorForeground#181616
  • notification.foreground#c5c9c5
  • notification.infoBackground#8ba4b0
  • notification.infoForeground#181616
  • notification.warningBackground#b6927b
  • notification.warningForeground#181616
  • notificationCenter.border#12120f
  • notificationCenterHeader.background#181616
  • notificationCenterHeader.foreground#c5c9c5
  • notificationLink.foreground#8ea4a2
  • notifications.background#181616
  • notifications.border#12120f
  • notifications.foreground#c5c9c5
  • notificationsErrorIcon.foreground#c4746e
  • notificationsInfoIcon.foreground#8ba4b0
  • notificationsWarningIcon.foreground#b6927b
  • notificationToast.border#12120f
  • panel.background#181616
  • panel.border#8ba4b0
  • panelInput.border#c5c9c5
  • panelTitle.activeBorder#a292a3
  • panelTitle.activeForeground#c5c9c5
  • panelTitle.inactiveForeground#625e5a
  • peekView.border#282727
  • peekViewEditor.background#181616
  • peekViewEditor.matchHighlightBackground#e6c38480
  • peekViewResult.background#12120f
  • peekViewResult.fileForeground#c5c9c5
  • peekViewResult.lineForeground#c5c9c5
  • peekViewResult.matchHighlightBackground#e6c38480
  • peekViewResult.selectionBackground#282727
  • peekViewResult.selectionForeground#c5c9c5
  • peekViewTitle.background#0d0c0c
  • peekViewTitleDescription.foreground#625e5a
  • peekViewTitleLabel.foreground#c5c9c5
  • pickerGroup.border#8ba4b0
  • pickerGroup.foreground#8ea4a2
  • progressBar.background#a292a3
  • scrollbar.shadow#444444
  • selection.background#8ba4b0
  • settings.checkboxBackground#12120f
  • settings.checkboxBorder#0d0c0c
  • settings.checkboxForeground#c5c9c5
  • settings.dropdownBackground#12120f
  • settings.dropdownBorder#0d0c0c
  • settings.dropdownForeground#c5c9c5
  • settings.headerForeground#c5c9c5
  • settings.modifiedItemIndicator#b6927b
  • settings.numberInputBackground#12120f
  • settings.numberInputBorder#0d0c0c
  • settings.numberInputForeground#c5c9c5
  • settings.textInputBackground#12120f
  • settings.textInputBorder#0d0c0c
  • settings.textInputForeground#c5c9c5
  • sideBar.background#12120f
  • sideBarSectionHeader.background#181616
  • sideBarSectionHeader.border#0d0c0c
  • sideBarTitle.foreground#c5c9c5
  • statusBar.background#0d0c0c
  • statusBar.debuggingBackground#c4746e
  • statusBar.debuggingForeground#0d0c0c
  • statusBar.foreground#c5c9c5
  • statusBar.noFolderBackground#0d0c0c
  • statusBar.noFolderForeground#c5c9c5
  • statusBarItem.prominentBackground#c4746e
  • statusBarItem.prominentHoverBackground#b6927b
  • statusBarItem.remoteBackground#8ba4b0
  • statusBarItem.remoteForeground#181616
  • tab.activeBackground#181616
  • tab.activeBorderTop#a292a380
  • tab.activeForeground#c5c9c5
  • tab.border#0d0c0c
  • tab.inactiveBackground#12120f
  • tab.inactiveForeground#625e5a
  • terminal.ansiBlack#282727
  • terminal.ansiBlue#8ba4b0
  • terminal.ansiBrightBlack#393836
  • terminal.ansiBrightBlue#7fb4ca
  • terminal.ansiBrightCyan#7aa89f
  • terminal.ansiBrightGreen#87a987
  • terminal.ansiBrightMagenta#938aa9
  • terminal.ansiBrightRed#e46876
  • terminal.ansiBrightWhite#c5c9c5
  • terminal.ansiBrightYellow#e6c384
  • terminal.ansiCyan#8ea4a2
  • terminal.ansiGreen#8a9a7b
  • terminal.ansiMagenta#a292a3
  • terminal.ansiRed#c4746e
  • terminal.ansiWhite#c8c093
  • terminal.ansiYellow#b6927b
  • terminal.background#181616
  • terminal.border#c5c9c5
  • terminal.foreground#c5c9c5
  • terminal.selectionBackground#28272750
  • textBlockQuote.background#12120f
  • titleBar.activeBackground#12120f
  • titleBar.activeForeground#c5c9c5
  • titleBar.inactiveBackground#0d0c0c
  • titleBar.inactiveForeground#625e5a
  • walkThrough.embeddedEditorBackground#12120f
  • welcomePage.buttonBackground#282727
  • welcomePage.buttonHoverBackground#39383675
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#8ba4b0
source#c5c9c5
meta.diff, meta.diff.header#625e5a
markup.inserted#8a9a7b
markup.deleted#c4746e
markup.changed#b6927b
invalid#c4746eunderline italic
invalid.deprecated#c5c9c5underline italic
entity.name.filename#e6c384
markup.error#c4746e
markup.underlineunderline
markup.bold#b6927bbold
markup.heading#8ba4b0bold
markup.italic#e6c384italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#8ea4a2
markup.inline.raw, markup.raw.restructuredtext#8a9a7b
markup.underline.link, markup.underline.link.image#8ea4a2
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#a292a3
entity.name.directive.restructuredtext, markup.quote#e6c384italic
meta.separator.markdown#625e5a
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#8a9a7b
punctuation.definition.constant.restructuredtext#8ba4b0
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#8ba4b0
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#c5c9c5
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#e6c384
entity.name.type.class, entity.name.class#8ea4a2normal
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#8ba4b0italic
entity.other.inherited-class#8ea4a2italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#625e5a
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#a292a3
comment.block.documentation entity.name.type#8ea4a2italic
comment.block.documentation entity.name.type punctuation.definition.bracket#8ea4a2
comment.block.documentation variable#b6927bitalic
constant, variable.other.constant#8ba4b0
constant.character.escape, constant.character.string.escape, constant.regexp#a292a3
entity.name.tag#a292a3
entity.other.attribute-name.parent-selector#a292a3
entity.other.attribute-name#8a9a7bitalic
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#8a9a7b
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#b6927bitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#8a9a7bitalic
meta.decorator variable.other.object#8a9a7b
keyword, punctuation.definition.keyword#a292a3
keyword.control.new, keyword.operator.newbold
meta.selector#a292a3
support#8ea4a2italic
support.function.magic, support.variable, variable.other.predefined#8ba4b0regular
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#a292a3
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#c5c9c5
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#a292a3
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#8ea4a2
constant.other.date, constant.other.timestamp#b6927b
variable.other.alias.yaml#8a9a7bitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#a292a3regular
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#8ea4a2italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#b6927b
storage.modifier#a292a3
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#e6c384
punctuation.definition.group.capture.regexp#a292a3
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#c4746e
punctuation.definition.character-class.regexp#8ea4a2
punctuation.definition.group.regexp#b6927b
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#c4746e
meta.assertion.look-ahead.regexp#8a9a7b
string#e6c384
punctuation.definition.string.begin, punctuation.definition.string.end#c4b28a
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#8ba4b0
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#625e5a
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#c5c9c5
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#b6927bitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#c5c9c5normal
meta.selectionset.graphql variable#e6c384
meta.selectionset.graphql meta.arguments variable#c5c9c5
entity.name.fragment.graphql, variable.fragment.graphql#8ea4a2
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#c5c9c5
source.shell variable.other#8ba4b0
support.constant#8ba4b0normal
meta.scope.prerequisites.makefile#e6c384
meta.attribute-selector.scss#e6c384
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#c5c9c5
meta.preprocessor.haskell#625e5a
Tinted VSCode by Tinted Theming - VS Code Theme