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#73d0ff10
  • activityBar.activeBorder#d4bfff80
  • activityBar.background#1f2430
  • activityBar.foreground#cccac2
  • activityBar.inactiveForeground#4a5059
  • activityBarBadge.background#d4bfff
  • activityBarBadge.foreground#1f2430
  • badge.background#242936
  • badge.foreground#cccac2
  • breadcrumb.activeSelectionForeground#cccac2
  • breadcrumb.background#1f2430
  • breadcrumb.focusForeground#cccac2
  • breadcrumb.foreground#4a5059
  • breadcrumbPicker.background#1a1f29
  • button.background#171b24
  • button.foreground#cccac2
  • checkbox.background#171b24
  • checkbox.border#1a1f29
  • checkbox.foreground#cccac2
  • contrastBorder#1a1f29
  • debugToolBar.background#171b24
  • diffEditor.insertedTextBackground#d5ff8020
  • diffEditor.removedTextBackground#f2877950
  • dropdown.background#1f2430
  • dropdown.border#1a1f29
  • dropdown.foreground#cccac2
  • editor.background#1f2430
  • editor.findMatchBackground#ffad6680
  • editor.findMatchHighlightBackground#f3f4f540
  • editor.findRangeHighlightBackground#32384475
  • editor.foldBackground#171b24
  • editor.foreground#cccac2
  • editor.hoverHighlightBackground#1a1f29
  • editor.lineHighlightBorder#242936
  • editor.rangeHighlightBackground#73d0ff15
  • editor.selectionBackground#242936
  • editor.selectionHighlightBackground#242936
  • editor.snippetFinalTabstopHighlightBackground#1f2430
  • editor.snippetFinalTabstopHighlightBorder#d5ff80
  • editor.snippetTabstopHighlightBackground#1f2430
  • editor.snippetTabstopHighlightBorder#4a5059
  • editor.wordHighlightBackground#95e6cb50
  • editor.wordHighlightStrongBackground#d5ff8050
  • editorCodeLens.foreground#4a5059
  • editorError.foreground#f28779
  • editorGroup.border#73d0ff
  • editorGroup.dropBackground#32384470
  • editorGroupHeader.tabsBackground#1a1f29
  • editorGutter.addedBackground#d5ff8080
  • editorGutter.deletedBackground#f2877980
  • editorGutter.modifiedBackground#95e6cb80
  • editorHoverWidget.background#1f2430
  • editorHoverWidget.border#4a5059
  • editorIndentGuide.activeBackground#f3f4f545
  • editorIndentGuide.background#f3f4f51A
  • editorLineNumber.foreground#4a5059
  • editorLink.activeForeground#95e6cb
  • editorMarkerNavigation.background#171b24
  • editorOverviewRuler.addedForeground#d5ff8080
  • editorOverviewRuler.border#1a1f29
  • editorOverviewRuler.currentContentForeground#d5ff80
  • editorOverviewRuler.deletedForeground#f2877980
  • editorOverviewRuler.errorForeground#f2877980
  • editorOverviewRuler.incomingContentForeground#73d0ff
  • editorOverviewRuler.infoForeground#95e6cb80
  • editorOverviewRuler.modifiedForeground#95e6cb80
  • editorOverviewRuler.selectionHighlightForeground#ffad66
  • editorOverviewRuler.warningForeground#ffad6680
  • editorOverviewRuler.wordHighlightForeground#95e6cb
  • editorOverviewRuler.wordHighlightStrongForeground#d5ff80
  • editorRuler.foreground#f3f4f51A
  • editorSuggestWidget.background#171b24
  • editorSuggestWidget.foreground#cccac2
  • editorSuggestWidget.selectedBackground#242936
  • editorWarning.foreground#ffad66
  • editorWhitespace.foreground#f3f4f51A
  • editorWidget.background#171b24
  • errorForeground#f28779
  • extensionButton.prominentBackground#d5ff8090
  • extensionButton.prominentForeground#cccac2
  • extensionButton.prominentHoverBackground#d5ff8060
  • focusBorder#4a5059
  • foreground#cccac2
  • gitDecoration.conflictingResourceForeground#ffad66
  • gitDecoration.deletedResourceForeground#f28779
  • gitDecoration.ignoredResourceForeground#4a5059
  • gitDecoration.modifiedResourceForeground#95e6cb
  • gitDecoration.untrackedResourceForeground#d5ff80
  • input.background#1f2430
  • input.border#1a1f29
  • input.foreground#cccac2
  • input.placeholderForeground#4a5059
  • inputOption.activeBorder#73d0ff
  • inputValidation.errorBackground#1f2430
  • inputValidation.errorBorder#f28779
  • inputValidation.errorForeground#f28779
  • inputValidation.infoBackground#1f2430
  • inputValidation.infoBorder#73d0ff
  • inputValidation.infoForeground#73d0ff
  • inputValidation.warningBackground#1f2430
  • inputValidation.warningBorder#ffad66
  • inputValidation.warningForeground#ffad66
  • list.activeSelectionBackground#242936
  • list.activeSelectionForeground#cccac2
  • list.dropBackground#242936
  • list.errorForeground#f28779
  • list.focusBackground#32384475
  • list.highlightForeground#95e6cb
  • list.hoverBackground#32384475
  • list.inactiveSelectionBackground#32384475
  • list.warningForeground#ffad66
  • listFilterWidget.background#1f2430
  • listFilterWidget.noMatchesOutline#f28779
  • listFilterWidget.outline#242936
  • merge.currentHeaderBackground#d5ff8090
  • merge.incomingHeaderBackground#73d0ff90
  • notification.background#1f2430
  • notification.buttonBackground#242936
  • notification.buttonForeground#cccac2
  • notification.buttonHoverBackground#32384475
  • notification.errorBackground#f28779
  • notification.errorForeground#1f2430
  • notification.foreground#cccac2
  • notification.infoBackground#73d0ff
  • notification.infoForeground#1f2430
  • notification.warningBackground#ffad66
  • notification.warningForeground#1f2430
  • notificationCenter.border#171b24
  • notificationCenterHeader.background#1f2430
  • notificationCenterHeader.foreground#cccac2
  • notificationLink.foreground#95e6cb
  • notifications.background#1f2430
  • notifications.border#171b24
  • notifications.foreground#cccac2
  • notificationsErrorIcon.foreground#f28779
  • notificationsInfoIcon.foreground#73d0ff
  • notificationsWarningIcon.foreground#ffad66
  • notificationToast.border#171b24
  • panel.background#1f2430
  • panel.border#73d0ff
  • panelInput.border#cccac2
  • panelTitle.activeBorder#d4bfff
  • panelTitle.activeForeground#cccac2
  • panelTitle.inactiveForeground#4a5059
  • peekView.border#242936
  • peekViewEditor.background#1f2430
  • peekViewEditor.matchHighlightBackground#ffcc6680
  • peekViewResult.background#171b24
  • peekViewResult.fileForeground#cccac2
  • peekViewResult.lineForeground#cccac2
  • peekViewResult.matchHighlightBackground#ffcc6680
  • peekViewResult.selectionBackground#242936
  • peekViewResult.selectionForeground#cccac2
  • peekViewTitle.background#1a1f29
  • peekViewTitleDescription.foreground#4a5059
  • peekViewTitleLabel.foreground#cccac2
  • pickerGroup.border#73d0ff
  • pickerGroup.foreground#95e6cb
  • progressBar.background#d4bfff
  • scrollbar.shadow#444444
  • selection.background#73d0ff
  • settings.checkboxBackground#171b24
  • settings.checkboxBorder#1a1f29
  • settings.checkboxForeground#cccac2
  • settings.dropdownBackground#171b24
  • settings.dropdownBorder#1a1f29
  • settings.dropdownForeground#cccac2
  • settings.headerForeground#cccac2
  • settings.modifiedItemIndicator#ffad66
  • settings.numberInputBackground#171b24
  • settings.numberInputBorder#1a1f29
  • settings.numberInputForeground#cccac2
  • settings.textInputBackground#171b24
  • settings.textInputBorder#1a1f29
  • settings.textInputForeground#cccac2
  • sideBar.background#171b24
  • sideBarSectionHeader.background#1f2430
  • sideBarSectionHeader.border#1a1f29
  • sideBarTitle.foreground#cccac2
  • statusBar.background#1a1f29
  • statusBar.debuggingBackground#f28779
  • statusBar.debuggingForeground#1a1f29
  • statusBar.foreground#cccac2
  • statusBar.noFolderBackground#1a1f29
  • statusBar.noFolderForeground#cccac2
  • statusBarItem.prominentBackground#f28779
  • statusBarItem.prominentHoverBackground#ffad66
  • statusBarItem.remoteBackground#73d0ff
  • statusBarItem.remoteForeground#1f2430
  • tab.activeBackground#1f2430
  • tab.activeBorderTop#d4bfff80
  • tab.activeForeground#cccac2
  • tab.border#1a1f29
  • tab.inactiveBackground#171b24
  • tab.inactiveForeground#4a5059
  • terminal.ansiBlack#242936
  • terminal.ansiBlue#73d0ff
  • terminal.ansiBrightBlack#323844
  • terminal.ansiBrightBlue#80b0ff
  • terminal.ansiBrightCyan#5ccfe6
  • terminal.ansiBrightGreen#87d963
  • terminal.ansiBrightMagenta#b692ff
  • terminal.ansiBrightRed#ff6666
  • terminal.ansiBrightWhite#f3f4f5
  • terminal.ansiBrightYellow#ffcc66
  • terminal.ansiCyan#95e6cb
  • terminal.ansiGreen#d5ff80
  • terminal.ansiMagenta#d4bfff
  • terminal.ansiRed#f28779
  • terminal.ansiWhite#d9d7ce
  • terminal.ansiYellow#ffad66
  • terminal.background#1f2430
  • terminal.border#cccac2
  • terminal.foreground#cccac2
  • terminal.selectionBackground#24293650
  • textBlockQuote.background#171b24
  • titleBar.activeBackground#171b24
  • titleBar.activeForeground#cccac2
  • titleBar.inactiveBackground#1a1f29
  • titleBar.inactiveForeground#4a5059
  • walkThrough.embeddedEditorBackground#171b24
  • welcomePage.buttonBackground#242936
  • welcomePage.buttonHoverBackground#32384475
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#73d0ff
source#cccac2
meta.diff, meta.diff.header#4a5059
markup.inserted#d5ff80
markup.deleted#f28779
markup.changed#ffad66
invalid#f28779underline italic
invalid.deprecated#cccac2underline italic
entity.name.filename#ffcc66
markup.error#f28779
markup.underlineunderline
markup.bold#ffad66bold
markup.heading#73d0ffbold
markup.italic#ffcc66italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#95e6cb
markup.inline.raw, markup.raw.restructuredtext#d5ff80
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#d4bfff
entity.name.directive.restructuredtext, markup.quote#ffcc66italic
meta.separator.markdown#4a5059
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#d5ff80
punctuation.definition.constant.restructuredtext#73d0ff
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#73d0ff
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#cccac2
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffcc66
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#73d0ffitalic
entity.other.inherited-class#95e6cbitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#4a5059
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#d4bfff
comment.block.documentation entity.name.type#95e6cbitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#95e6cb
comment.block.documentation variable#ffad66italic
constant, variable.other.constant#73d0ff
constant.character.escape, constant.character.string.escape, constant.regexp#d4bfff
entity.name.tag#d4bfff
entity.other.attribute-name.parent-selector#d4bfff
entity.other.attribute-name#d5ff80italic
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#d5ff80
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#ffad66italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#d5ff80italic
meta.decorator variable.other.object#d5ff80
keyword, punctuation.definition.keyword#d4bfff
keyword.control.new, keyword.operator.newbold
meta.selector#d4bfff
support#95e6cbitalic
support.function.magic, support.variable, variable.other.predefined#73d0ffregular
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#d4bfff
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#cccac2
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#d4bfff
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#95e6cb
constant.other.date, constant.other.timestamp#ffad66
variable.other.alias.yaml#d5ff80italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#d4bfffregular
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#ffad66
storage.modifier#d4bfff
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffcc66
punctuation.definition.group.capture.regexp#d4bfff
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#f28779
punctuation.definition.character-class.regexp#95e6cb
punctuation.definition.group.regexp#ffad66
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#f28779
meta.assertion.look-ahead.regexp#d5ff80
string#ffcc66
punctuation.definition.string.begin, punctuation.definition.string.end#ffd173
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#73d0ff
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#4a5059
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#cccac2
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#ffad66italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#cccac2normal
meta.selectionset.graphql variable#ffcc66
meta.selectionset.graphql meta.arguments variable#cccac2
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#cccac2
source.shell variable.other#73d0ff
support.constant#73d0ffnormal
meta.scope.prerequisites.makefile#ffcc66
meta.attribute-selector.scss#ffcc66
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#cccac2
meta.preprocessor.haskell#4a5059
Tinted VSCode by Tinted Theming - VS Code Theme