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#338f8610
  • activityBar.activeBorder#9413e580
  • activityBar.background#131d42
  • activityBar.foreground#b8beba
  • activityBar.inactiveForeground#66786e
  • activityBarBadge.background#9413e5
  • activityBarBadge.foreground#131d42
  • badge.background#000000
  • badge.foreground#b8beba
  • breadcrumb.activeSelectionForeground#b8beba
  • breadcrumb.background#131d42
  • breadcrumb.focusForeground#b8beba
  • breadcrumb.foreground#66786e
  • breadcrumbPicker.background#141c18
  • button.background#293830
  • button.foreground#b8beba
  • checkbox.background#293830
  • checkbox.border#141c18
  • checkbox.foreground#b8beba
  • contrastBorder#141c18
  • debugToolBar.background#293830
  • diffEditor.insertedTextBackground#74af6820
  • diffEditor.removedTextBackground#ff424250
  • dropdown.background#131d42
  • dropdown.border#141c18
  • dropdown.foreground#b8beba
  • editor.background#131d42
  • editor.findMatchBackground#ffad2980
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#3e554875
  • editor.foldBackground#293830
  • editor.foreground#b8beba
  • editor.hoverHighlightBackground#141c18
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#338f8615
  • editor.selectionBackground#000000
  • editor.selectionHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBackground#131d42
  • editor.snippetFinalTabstopHighlightBorder#74af68
  • editor.snippetTabstopHighlightBackground#131d42
  • editor.snippetTabstopHighlightBorder#66786e
  • editor.wordHighlightBackground#23d7d750
  • editor.wordHighlightStrongBackground#74af6850
  • editorCodeLens.foreground#66786e
  • editorError.foreground#ff4242
  • editorGroup.border#338f86
  • editorGroup.dropBackground#3e554870
  • editorGroupHeader.tabsBackground#141c18
  • editorGutter.addedBackground#74af6880
  • editorGutter.deletedBackground#ff424280
  • editorGutter.modifiedBackground#23d7d780
  • editorHoverWidget.background#131d42
  • editorHoverWidget.border#66786e
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#66786e
  • editorLink.activeForeground#23d7d7
  • editorMarkerNavigation.background#293830
  • editorOverviewRuler.addedForeground#74af6880
  • editorOverviewRuler.border#141c18
  • editorOverviewRuler.currentContentForeground#74af68
  • editorOverviewRuler.deletedForeground#ff424280
  • editorOverviewRuler.errorForeground#ff424280
  • editorOverviewRuler.incomingContentForeground#338f86
  • editorOverviewRuler.infoForeground#23d7d780
  • editorOverviewRuler.modifiedForeground#23d7d780
  • editorOverviewRuler.selectionHighlightForeground#ffad29
  • editorOverviewRuler.warningForeground#ffad2980
  • editorOverviewRuler.wordHighlightForeground#23d7d7
  • editorOverviewRuler.wordHighlightStrongForeground#74af68
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#293830
  • editorSuggestWidget.foreground#b8beba
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#ffad29
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#293830
  • errorForeground#ff4242
  • extensionButton.prominentBackground#74af6890
  • extensionButton.prominentForeground#b8beba
  • extensionButton.prominentHoverBackground#74af6860
  • focusBorder#66786e
  • foreground#b8beba
  • gitDecoration.conflictingResourceForeground#ffad29
  • gitDecoration.deletedResourceForeground#ff4242
  • gitDecoration.ignoredResourceForeground#66786e
  • gitDecoration.modifiedResourceForeground#23d7d7
  • gitDecoration.untrackedResourceForeground#74af68
  • input.background#131d42
  • input.border#141c18
  • input.foreground#b8beba
  • input.placeholderForeground#66786e
  • inputOption.activeBorder#338f86
  • inputValidation.errorBackground#131d42
  • inputValidation.errorBorder#ff4242
  • inputValidation.errorForeground#ff4242
  • inputValidation.infoBackground#131d42
  • inputValidation.infoBorder#338f86
  • inputValidation.infoForeground#338f86
  • inputValidation.warningBackground#131d42
  • inputValidation.warningBorder#ffad29
  • inputValidation.warningForeground#ffad29
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#b8beba
  • list.dropBackground#000000
  • list.errorForeground#ff4242
  • list.focusBackground#3e554875
  • list.highlightForeground#23d7d7
  • list.hoverBackground#3e554875
  • list.inactiveSelectionBackground#3e554875
  • list.warningForeground#ffad29
  • listFilterWidget.background#131d42
  • listFilterWidget.noMatchesOutline#ff4242
  • listFilterWidget.outline#000000
  • merge.currentHeaderBackground#74af6890
  • merge.incomingHeaderBackground#338f8690
  • notification.background#131d42
  • notification.buttonBackground#000000
  • notification.buttonForeground#b8beba
  • notification.buttonHoverBackground#3e554875
  • notification.errorBackground#ff4242
  • notification.errorForeground#131d42
  • notification.foreground#b8beba
  • notification.infoBackground#338f86
  • notification.infoForeground#131d42
  • notification.warningBackground#ffad29
  • notification.warningForeground#131d42
  • notificationCenter.border#293830
  • notificationCenterHeader.background#131d42
  • notificationCenterHeader.foreground#b8beba
  • notificationLink.foreground#23d7d7
  • notifications.background#131d42
  • notifications.border#293830
  • notifications.foreground#b8beba
  • notificationsErrorIcon.foreground#ff4242
  • notificationsInfoIcon.foreground#338f86
  • notificationsWarningIcon.foreground#ffad29
  • notificationToast.border#293830
  • panel.background#131d42
  • panel.border#338f86
  • panelInput.border#b8beba
  • panelTitle.activeBorder#9413e5
  • panelTitle.activeForeground#b8beba
  • panelTitle.inactiveForeground#66786e
  • peekView.border#000000
  • peekViewEditor.background#131d42
  • peekViewEditor.matchHighlightBackground#ffb92980
  • peekViewResult.background#293830
  • peekViewResult.fileForeground#b8beba
  • peekViewResult.lineForeground#b8beba
  • peekViewResult.matchHighlightBackground#ffb92980
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#b8beba
  • peekViewTitle.background#141c18
  • peekViewTitleDescription.foreground#66786e
  • peekViewTitleLabel.foreground#b8beba
  • pickerGroup.border#338f86
  • pickerGroup.foreground#23d7d7
  • progressBar.background#9413e5
  • scrollbar.shadow#444444
  • selection.background#338f86
  • settings.checkboxBackground#293830
  • settings.checkboxBorder#141c18
  • settings.checkboxForeground#b8beba
  • settings.dropdownBackground#293830
  • settings.dropdownBorder#141c18
  • settings.dropdownForeground#b8beba
  • settings.headerForeground#b8beba
  • settings.modifiedItemIndicator#ffad29
  • settings.numberInputBackground#293830
  • settings.numberInputBorder#141c18
  • settings.numberInputForeground#b8beba
  • settings.textInputBackground#293830
  • settings.textInputBorder#141c18
  • settings.textInputForeground#b8beba
  • sideBar.background#293830
  • sideBarSectionHeader.background#131d42
  • sideBarSectionHeader.border#141c18
  • sideBarTitle.foreground#b8beba
  • statusBar.background#141c18
  • statusBar.debuggingBackground#ff4242
  • statusBar.debuggingForeground#141c18
  • statusBar.foreground#b8beba
  • statusBar.noFolderBackground#141c18
  • statusBar.noFolderForeground#b8beba
  • statusBarItem.prominentBackground#ff4242
  • statusBarItem.prominentHoverBackground#ffad29
  • statusBarItem.remoteBackground#338f86
  • statusBarItem.remoteForeground#131d42
  • tab.activeBackground#131d42
  • tab.activeBorderTop#9413e580
  • tab.activeForeground#b8beba
  • tab.border#141c18
  • tab.inactiveBackground#293830
  • tab.inactiveForeground#66786e
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#338f86
  • terminal.ansiBrightBlack#3e5548
  • terminal.ansiBrightBlue#23d7d7
  • terminal.ansiBrightCyan#00ede1
  • terminal.ansiBrightGreen#74cd68
  • terminal.ansiBrightMagenta#ff37ff
  • terminal.ansiBrightRed#ff3242
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffb929
  • terminal.ansiCyan#23d7d7
  • terminal.ansiGreen#74af68
  • terminal.ansiMagenta#9413e5
  • terminal.ansiRed#ff4242
  • terminal.ansiWhite#e1e1e1
  • terminal.ansiYellow#ffad29
  • terminal.background#131d42
  • terminal.border#b8beba
  • terminal.foreground#b8beba
  • terminal.selectionBackground#00000050
  • textBlockQuote.background#293830
  • titleBar.activeBackground#293830
  • titleBar.activeForeground#b8beba
  • titleBar.inactiveBackground#141c18
  • titleBar.inactiveForeground#66786e
  • walkThrough.embeddedEditorBackground#293830
  • welcomePage.buttonBackground#000000
  • welcomePage.buttonHoverBackground#3e554875
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#338f86
source#b8beba
meta.diff, meta.diff.header#66786e
markup.inserted#74af68
markup.deleted#ff4242
markup.changed#ffad29
invalid#ff4242underline italic
invalid.deprecated#b8bebaunderline italic
entity.name.filename#ffb929
markup.error#ff4242
markup.underlineunderline
markup.bold#ffad29bold
markup.heading#338f86bold
markup.italic#ffb929italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#23d7d7
markup.inline.raw, markup.raw.restructuredtext#74af68
markup.underline.link, markup.underline.link.image#23d7d7
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#9413e5
entity.name.directive.restructuredtext, markup.quote#ffb929italic
meta.separator.markdown#66786e
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#74af68
punctuation.definition.constant.restructuredtext#338f86
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#338f86
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#b8beba
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffb929
entity.name.type.class, entity.name.class#23d7d7normal
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#338f86italic
entity.other.inherited-class#23d7d7italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#66786e
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#9413e5
comment.block.documentation entity.name.type#23d7d7italic
comment.block.documentation entity.name.type punctuation.definition.bracket#23d7d7
comment.block.documentation variable#ffad29italic
constant, variable.other.constant#338f86
constant.character.escape, constant.character.string.escape, constant.regexp#9413e5
entity.name.tag#9413e5
entity.other.attribute-name.parent-selector#9413e5
entity.other.attribute-name#74af68italic
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#74af68
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#ffad29italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#74af68italic
meta.decorator variable.other.object#74af68
keyword, punctuation.definition.keyword#9413e5
keyword.control.new, keyword.operator.newbold
meta.selector#9413e5
support#23d7d7italic
support.function.magic, support.variable, variable.other.predefined#338f86regular
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#9413e5
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#b8beba
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#9413e5
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#23d7d7
constant.other.date, constant.other.timestamp#ffad29
variable.other.alias.yaml#74af68italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#9413e5regular
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#23d7d7italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ffad29
storage.modifier#9413e5
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffb929
punctuation.definition.group.capture.regexp#9413e5
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff4242
punctuation.definition.character-class.regexp#23d7d7
punctuation.definition.group.regexp#ffad29
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff4242
meta.assertion.look-ahead.regexp#74af68
string#ffb929
punctuation.definition.string.begin, punctuation.definition.string.end#23d7d7
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#338f86
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#66786e
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#b8beba
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#ffad29italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#b8bebanormal
meta.selectionset.graphql variable#ffb929
meta.selectionset.graphql meta.arguments variable#b8beba
entity.name.fragment.graphql, variable.fragment.graphql#23d7d7
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#b8beba
source.shell variable.other#338f86
support.constant#338f86normal
meta.scope.prerequisites.makefile#ffb929
meta.attribute-selector.scss#ffb929
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#b8beba
meta.preprocessor.haskell#66786e
Tinted VSCode by Tinted Theming - VS Code Theme