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#dbb7ff10
  • activityBar.activeBorder#ff949280
  • activityBar.background#0a0c10
  • activityBar.foreground#f0f3f6
  • activityBar.inactiveForeground#9ea7b3
  • activityBarBadge.background#ff9492
  • activityBarBadge.foreground#0a0c10
  • badge.background#272b33
  • badge.foreground#f0f3f6
  • breadcrumb.activeSelectionForeground#f0f3f6
  • breadcrumb.background#0a0c10
  • breadcrumb.focusForeground#f0f3f6
  • breadcrumb.foreground#9ea7b3
  • breadcrumbPicker.background#000000
  • button.background#010409
  • button.foreground#f0f3f6
  • checkbox.background#010409
  • checkbox.border#000000
  • checkbox.foreground#f0f3f6
  • contrastBorder#000000
  • debugToolBar.background#010409
  • diffEditor.insertedTextBackground#addcff20
  • diffEditor.removedTextBackground#ffb75750
  • dropdown.background#0a0c10
  • dropdown.border#000000
  • dropdown.foreground#f0f3f6
  • editor.background#0a0c10
  • editor.findMatchBackground#91cbff80
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#7a828e75
  • editor.foldBackground#010409
  • editor.foreground#f0f3f6
  • editor.hoverHighlightBackground#000000
  • editor.lineHighlightBorder#272b33
  • editor.rangeHighlightBackground#dbb7ff15
  • editor.selectionBackground#272b33
  • editor.selectionHighlightBackground#272b33
  • editor.snippetFinalTabstopHighlightBackground#0a0c10
  • editor.snippetFinalTabstopHighlightBorder#addcff
  • editor.snippetTabstopHighlightBackground#0a0c10
  • editor.snippetTabstopHighlightBorder#9ea7b3
  • editor.wordHighlightBackground#72f08850
  • editor.wordHighlightStrongBackground#addcff50
  • editorCodeLens.foreground#9ea7b3
  • editorError.foreground#ffb757
  • editorGroup.border#dbb7ff
  • editorGroup.dropBackground#7a828e70
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#addcff80
  • editorGutter.deletedBackground#ffb75780
  • editorGutter.modifiedBackground#72f08880
  • editorHoverWidget.background#0a0c10
  • editorHoverWidget.border#9ea7b3
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#9ea7b3
  • editorLink.activeForeground#72f088
  • editorMarkerNavigation.background#010409
  • editorOverviewRuler.addedForeground#addcff80
  • editorOverviewRuler.border#000000
  • editorOverviewRuler.currentContentForeground#addcff
  • editorOverviewRuler.deletedForeground#ffb75780
  • editorOverviewRuler.errorForeground#ffb75780
  • editorOverviewRuler.incomingContentForeground#dbb7ff
  • editorOverviewRuler.infoForeground#72f08880
  • editorOverviewRuler.modifiedForeground#72f08880
  • editorOverviewRuler.selectionHighlightForeground#91cbff
  • editorOverviewRuler.warningForeground#91cbff80
  • editorOverviewRuler.wordHighlightForeground#72f088
  • editorOverviewRuler.wordHighlightStrongForeground#addcff
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#010409
  • editorSuggestWidget.foreground#f0f3f6
  • editorSuggestWidget.selectedBackground#272b33
  • editorWarning.foreground#91cbff
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#010409
  • errorForeground#ffb757
  • extensionButton.prominentBackground#addcff90
  • extensionButton.prominentForeground#f0f3f6
  • extensionButton.prominentHoverBackground#addcff60
  • focusBorder#9ea7b3
  • foreground#f0f3f6
  • gitDecoration.conflictingResourceForeground#91cbff
  • gitDecoration.deletedResourceForeground#ffb757
  • gitDecoration.ignoredResourceForeground#9ea7b3
  • gitDecoration.modifiedResourceForeground#72f088
  • gitDecoration.untrackedResourceForeground#addcff
  • input.background#0a0c10
  • input.border#000000
  • input.foreground#f0f3f6
  • input.placeholderForeground#9ea7b3
  • inputOption.activeBorder#dbb7ff
  • inputValidation.errorBackground#0a0c10
  • inputValidation.errorBorder#ffb757
  • inputValidation.errorForeground#ffb757
  • inputValidation.infoBackground#0a0c10
  • inputValidation.infoBorder#dbb7ff
  • inputValidation.infoForeground#dbb7ff
  • inputValidation.warningBackground#0a0c10
  • inputValidation.warningBorder#91cbff
  • inputValidation.warningForeground#91cbff
  • list.activeSelectionBackground#272b33
  • list.activeSelectionForeground#f0f3f6
  • list.dropBackground#272b33
  • list.errorForeground#ffb757
  • list.focusBackground#7a828e75
  • list.highlightForeground#72f088
  • list.hoverBackground#7a828e75
  • list.inactiveSelectionBackground#7a828e75
  • list.warningForeground#91cbff
  • listFilterWidget.background#0a0c10
  • listFilterWidget.noMatchesOutline#ffb757
  • listFilterWidget.outline#272b33
  • merge.currentHeaderBackground#addcff90
  • merge.incomingHeaderBackground#dbb7ff90
  • notification.background#0a0c10
  • notification.buttonBackground#272b33
  • notification.buttonForeground#f0f3f6
  • notification.buttonHoverBackground#7a828e75
  • notification.errorBackground#ffb757
  • notification.errorForeground#0a0c10
  • notification.foreground#f0f3f6
  • notification.infoBackground#dbb7ff
  • notification.infoForeground#0a0c10
  • notification.warningBackground#91cbff
  • notification.warningForeground#0a0c10
  • notificationCenter.border#010409
  • notificationCenterHeader.background#0a0c10
  • notificationCenterHeader.foreground#f0f3f6
  • notificationLink.foreground#72f088
  • notifications.background#0a0c10
  • notifications.border#010409
  • notifications.foreground#f0f3f6
  • notificationsErrorIcon.foreground#ffb757
  • notificationsInfoIcon.foreground#dbb7ff
  • notificationsWarningIcon.foreground#91cbff
  • notificationToast.border#010409
  • panel.background#0a0c10
  • panel.border#dbb7ff
  • panelInput.border#f0f3f6
  • panelTitle.activeBorder#ff9492
  • panelTitle.activeForeground#f0f3f6
  • panelTitle.inactiveForeground#9ea7b3
  • peekView.border#272b33
  • peekViewEditor.background#0a0c10
  • peekViewEditor.matchHighlightBackground#f0b72f80
  • peekViewResult.background#010409
  • peekViewResult.fileForeground#f0f3f6
  • peekViewResult.lineForeground#f0f3f6
  • peekViewResult.matchHighlightBackground#f0b72f80
  • peekViewResult.selectionBackground#272b33
  • peekViewResult.selectionForeground#f0f3f6
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#9ea7b3
  • peekViewTitleLabel.foreground#f0f3f6
  • pickerGroup.border#dbb7ff
  • pickerGroup.foreground#72f088
  • progressBar.background#ff9492
  • scrollbar.shadow#444444
  • selection.background#dbb7ff
  • settings.checkboxBackground#010409
  • settings.checkboxBorder#000000
  • settings.checkboxForeground#f0f3f6
  • settings.dropdownBackground#010409
  • settings.dropdownBorder#000000
  • settings.dropdownForeground#f0f3f6
  • settings.headerForeground#f0f3f6
  • settings.modifiedItemIndicator#91cbff
  • settings.numberInputBackground#010409
  • settings.numberInputBorder#000000
  • settings.numberInputForeground#f0f3f6
  • settings.textInputBackground#010409
  • settings.textInputBorder#000000
  • settings.textInputForeground#f0f3f6
  • sideBar.background#010409
  • sideBarSectionHeader.background#0a0c10
  • sideBarSectionHeader.border#000000
  • sideBarTitle.foreground#f0f3f6
  • statusBar.background#000000
  • statusBar.debuggingBackground#ffb757
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#f0f3f6
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#f0f3f6
  • statusBarItem.prominentBackground#ffb757
  • statusBarItem.prominentHoverBackground#91cbff
  • statusBarItem.remoteBackground#dbb7ff
  • statusBarItem.remoteForeground#0a0c10
  • tab.activeBackground#0a0c10
  • tab.activeBorderTop#ff949280
  • tab.activeForeground#f0f3f6
  • tab.border#000000
  • tab.inactiveBackground#010409
  • tab.inactiveForeground#9ea7b3
  • terminal.ansiBlack#272b33
  • terminal.ansiBlue#dbb7ff
  • terminal.ansiBrightBlack#7a828e
  • terminal.ansiBrightBlue#71b7ff
  • terminal.ansiBrightCyan#33b3ae
  • terminal.ansiBrightGreen#26cd4d
  • terminal.ansiBrightMagenta#cb9eff
  • terminal.ansiBrightRed#ff9492
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f0b72f
  • terminal.ansiCyan#72f088
  • terminal.ansiGreen#addcff
  • terminal.ansiMagenta#ff9492
  • terminal.ansiRed#ffb757
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#91cbff
  • terminal.background#0a0c10
  • terminal.border#f0f3f6
  • terminal.foreground#f0f3f6
  • terminal.selectionBackground#272b3350
  • textBlockQuote.background#010409
  • titleBar.activeBackground#010409
  • titleBar.activeForeground#f0f3f6
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#9ea7b3
  • walkThrough.embeddedEditorBackground#010409
  • welcomePage.buttonBackground#272b33
  • welcomePage.buttonHoverBackground#7a828e75
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#dbb7ff
source#f0f3f6
meta.diff, meta.diff.header#9ea7b3
markup.inserted#addcff
markup.deleted#ffb757
markup.changed#91cbff
invalid#ffb757underline italic
invalid.deprecated#f0f3f6underline italic
entity.name.filename#f0b72f
markup.error#ffb757
markup.underlineunderline
markup.bold#91cbffbold
markup.heading#dbb7ffbold
markup.italic#f0b72fitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#72f088
markup.inline.raw, markup.raw.restructuredtext#addcff
markup.underline.link, markup.underline.link.image#72f088
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ff9492
entity.name.directive.restructuredtext, markup.quote#f0b72fitalic
meta.separator.markdown#9ea7b3
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#addcff
punctuation.definition.constant.restructuredtext#dbb7ff
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#dbb7ff
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#f0f3f6
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#f0b72f
entity.name.type.class, entity.name.class#72f088normal
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#dbb7ffitalic
entity.other.inherited-class#72f088italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#9ea7b3
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ff9492
comment.block.documentation entity.name.type#72f088italic
comment.block.documentation entity.name.type punctuation.definition.bracket#72f088
comment.block.documentation variable#91cbffitalic
constant, variable.other.constant#dbb7ff
constant.character.escape, constant.character.string.escape, constant.regexp#ff9492
entity.name.tag#ff9492
entity.other.attribute-name.parent-selector#ff9492
entity.other.attribute-name#addcffitalic
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#addcff
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#91cbffitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#addcffitalic
meta.decorator variable.other.object#addcff
keyword, punctuation.definition.keyword#ff9492
keyword.control.new, keyword.operator.newbold
meta.selector#ff9492
support#72f088italic
support.function.magic, support.variable, variable.other.predefined#dbb7ffregular
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#ff9492
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#f0f3f6
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#ff9492
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#72f088
constant.other.date, constant.other.timestamp#91cbff
variable.other.alias.yaml#addcffitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ff9492regular
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#72f088italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#91cbff
storage.modifier#ff9492
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#f0b72f
punctuation.definition.group.capture.regexp#ff9492
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ffb757
punctuation.definition.character-class.regexp#72f088
punctuation.definition.group.regexp#91cbff
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ffb757
meta.assertion.look-ahead.regexp#addcff
string#f0b72f
punctuation.definition.string.begin, punctuation.definition.string.end#e09b13
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#dbb7ff
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#9ea7b3
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#f0f3f6
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#91cbffitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#f0f3f6normal
meta.selectionset.graphql variable#f0b72f
meta.selectionset.graphql meta.arguments variable#f0f3f6
entity.name.fragment.graphql, variable.fragment.graphql#72f088
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#f0f3f6
source.shell variable.other#dbb7ff
support.constant#dbb7ffnormal
meta.scope.prerequisites.makefile#f0b72f
meta.attribute-selector.scss#f0b72f
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#f0f3f6
meta.preprocessor.haskell#9ea7b3
Tinted VSCode by Tinted Theming - VS Code Theme