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#39ddfd10
  • activityBar.activeBorder#a48cf280
  • activityBar.background#212337
  • activityBar.foreground#ebfafa
  • activityBar.inactiveForeground#7081d0
  • activityBarBadge.background#a48cf2
  • activityBarBadge.foreground#212337
  • badge.background#323449
  • badge.foreground#ebfafa
  • breadcrumb.activeSelectionForeground#ebfafa
  • breadcrumb.background#212337
  • breadcrumb.focusForeground#ebfafa
  • breadcrumb.foreground#7081d0
  • breadcrumbPicker.background#0e0f1a
  • button.background#171928
  • button.foreground#ebfafa
  • checkbox.background#171928
  • checkbox.border#0e0f1a
  • checkbox.foreground#ebfafa
  • contrastBorder#0e0f1a
  • debugToolBar.background#171928
  • diffEditor.insertedTextBackground#37f49920
  • diffEditor.removedTextBackground#f16c7550
  • dropdown.background#212337
  • dropdown.border#0e0f1a
  • dropdown.foreground#ebfafa
  • editor.background#212337
  • editor.findMatchBackground#f7c67f80
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#3b426175
  • editor.foldBackground#171928
  • editor.foreground#ebfafa
  • editor.hoverHighlightBackground#0e0f1a
  • editor.lineHighlightBorder#323449
  • editor.rangeHighlightBackground#39ddfd15
  • editor.selectionBackground#323449
  • editor.selectionHighlightBackground#323449
  • editor.snippetFinalTabstopHighlightBackground#212337
  • editor.snippetFinalTabstopHighlightBorder#37f499
  • editor.snippetTabstopHighlightBackground#212337
  • editor.snippetTabstopHighlightBorder#7081d0
  • editor.wordHighlightBackground#04d1f950
  • editor.wordHighlightStrongBackground#37f49950
  • editorCodeLens.foreground#7081d0
  • editorError.foreground#f16c75
  • editorGroup.border#39ddfd
  • editorGroup.dropBackground#3b426170
  • editorGroupHeader.tabsBackground#0e0f1a
  • editorGutter.addedBackground#37f49980
  • editorGutter.deletedBackground#f16c7580
  • editorGutter.modifiedBackground#04d1f980
  • editorHoverWidget.background#212337
  • editorHoverWidget.border#7081d0
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#7081d0
  • editorLink.activeForeground#04d1f9
  • editorMarkerNavigation.background#171928
  • editorOverviewRuler.addedForeground#37f49980
  • editorOverviewRuler.border#0e0f1a
  • editorOverviewRuler.currentContentForeground#37f499
  • editorOverviewRuler.deletedForeground#f16c7580
  • editorOverviewRuler.errorForeground#f16c7580
  • editorOverviewRuler.incomingContentForeground#39ddfd
  • editorOverviewRuler.infoForeground#04d1f980
  • editorOverviewRuler.modifiedForeground#04d1f980
  • editorOverviewRuler.selectionHighlightForeground#f7c67f
  • editorOverviewRuler.warningForeground#f7c67f80
  • editorOverviewRuler.wordHighlightForeground#04d1f9
  • editorOverviewRuler.wordHighlightStrongForeground#37f499
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#171928
  • editorSuggestWidget.foreground#ebfafa
  • editorSuggestWidget.selectedBackground#323449
  • editorWarning.foreground#f7c67f
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#171928
  • errorForeground#f16c75
  • extensionButton.prominentBackground#37f49990
  • extensionButton.prominentForeground#ebfafa
  • extensionButton.prominentHoverBackground#37f49960
  • focusBorder#7081d0
  • foreground#ebfafa
  • gitDecoration.conflictingResourceForeground#f7c67f
  • gitDecoration.deletedResourceForeground#f16c75
  • gitDecoration.ignoredResourceForeground#7081d0
  • gitDecoration.modifiedResourceForeground#04d1f9
  • gitDecoration.untrackedResourceForeground#37f499
  • input.background#212337
  • input.border#0e0f1a
  • input.foreground#ebfafa
  • input.placeholderForeground#7081d0
  • inputOption.activeBorder#39ddfd
  • inputValidation.errorBackground#212337
  • inputValidation.errorBorder#f16c75
  • inputValidation.errorForeground#f16c75
  • inputValidation.infoBackground#212337
  • inputValidation.infoBorder#39ddfd
  • inputValidation.infoForeground#39ddfd
  • inputValidation.warningBackground#212337
  • inputValidation.warningBorder#f7c67f
  • inputValidation.warningForeground#f7c67f
  • list.activeSelectionBackground#323449
  • list.activeSelectionForeground#ebfafa
  • list.dropBackground#323449
  • list.errorForeground#f16c75
  • list.focusBackground#3b426175
  • list.highlightForeground#04d1f9
  • list.hoverBackground#3b426175
  • list.inactiveSelectionBackground#3b426175
  • list.warningForeground#f7c67f
  • listFilterWidget.background#212337
  • listFilterWidget.noMatchesOutline#f16c75
  • listFilterWidget.outline#323449
  • merge.currentHeaderBackground#37f49990
  • merge.incomingHeaderBackground#39ddfd90
  • notification.background#212337
  • notification.buttonBackground#323449
  • notification.buttonForeground#ebfafa
  • notification.buttonHoverBackground#3b426175
  • notification.errorBackground#f16c75
  • notification.errorForeground#212337
  • notification.foreground#ebfafa
  • notification.infoBackground#39ddfd
  • notification.infoForeground#212337
  • notification.warningBackground#f7c67f
  • notification.warningForeground#212337
  • notificationCenter.border#171928
  • notificationCenterHeader.background#212337
  • notificationCenterHeader.foreground#ebfafa
  • notificationLink.foreground#04d1f9
  • notifications.background#212337
  • notifications.border#171928
  • notifications.foreground#ebfafa
  • notificationsErrorIcon.foreground#f16c75
  • notificationsInfoIcon.foreground#39ddfd
  • notificationsWarningIcon.foreground#f7c67f
  • notificationToast.border#171928
  • panel.background#212337
  • panel.border#39ddfd
  • panelInput.border#ebfafa
  • panelTitle.activeBorder#a48cf2
  • panelTitle.activeForeground#ebfafa
  • panelTitle.inactiveForeground#7081d0
  • peekView.border#323449
  • peekViewEditor.background#212337
  • peekViewEditor.matchHighlightBackground#f9e9a180
  • peekViewResult.background#171928
  • peekViewResult.fileForeground#ebfafa
  • peekViewResult.lineForeground#ebfafa
  • peekViewResult.matchHighlightBackground#f9e9a180
  • peekViewResult.selectionBackground#323449
  • peekViewResult.selectionForeground#ebfafa
  • peekViewTitle.background#0e0f1a
  • peekViewTitleDescription.foreground#7081d0
  • peekViewTitleLabel.foreground#ebfafa
  • pickerGroup.border#39ddfd
  • pickerGroup.foreground#04d1f9
  • progressBar.background#a48cf2
  • scrollbar.shadow#444444
  • selection.background#39ddfd
  • settings.checkboxBackground#171928
  • settings.checkboxBorder#0e0f1a
  • settings.checkboxForeground#ebfafa
  • settings.dropdownBackground#171928
  • settings.dropdownBorder#0e0f1a
  • settings.dropdownForeground#ebfafa
  • settings.headerForeground#ebfafa
  • settings.modifiedItemIndicator#f7c67f
  • settings.numberInputBackground#171928
  • settings.numberInputBorder#0e0f1a
  • settings.numberInputForeground#ebfafa
  • settings.textInputBackground#171928
  • settings.textInputBorder#0e0f1a
  • settings.textInputForeground#ebfafa
  • sideBar.background#171928
  • sideBarSectionHeader.background#212337
  • sideBarSectionHeader.border#0e0f1a
  • sideBarTitle.foreground#ebfafa
  • statusBar.background#0e0f1a
  • statusBar.debuggingBackground#f16c75
  • statusBar.debuggingForeground#0e0f1a
  • statusBar.foreground#ebfafa
  • statusBar.noFolderBackground#0e0f1a
  • statusBar.noFolderForeground#ebfafa
  • statusBarItem.prominentBackground#f16c75
  • statusBarItem.prominentHoverBackground#f7c67f
  • statusBarItem.remoteBackground#39ddfd
  • statusBarItem.remoteForeground#212337
  • tab.activeBackground#212337
  • tab.activeBorderTop#a48cf280
  • tab.activeForeground#ebfafa
  • tab.border#0e0f1a
  • tab.inactiveBackground#171928
  • tab.inactiveForeground#7081d0
  • terminal.ansiBlack#323449
  • terminal.ansiBlue#39ddfd
  • terminal.ansiBrightBlack#3b4261
  • terminal.ansiBrightBlue#7ae9ff
  • terminal.ansiBrightCyan#6ce9ff
  • terminal.ansiBrightGreen#6fffc1
  • terminal.ansiBrightMagenta#d4b3ff
  • terminal.ansiBrightRed#f89a9d
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f9e9a1
  • terminal.ansiCyan#04d1f9
  • terminal.ansiGreen#37f499
  • terminal.ansiMagenta#a48cf2
  • terminal.ansiRed#f16c75
  • terminal.ansiWhite#f0f2f4
  • terminal.ansiYellow#f7c67f
  • terminal.background#212337
  • terminal.border#ebfafa
  • terminal.foreground#ebfafa
  • terminal.selectionBackground#32344950
  • textBlockQuote.background#171928
  • titleBar.activeBackground#171928
  • titleBar.activeForeground#ebfafa
  • titleBar.inactiveBackground#0e0f1a
  • titleBar.inactiveForeground#7081d0
  • walkThrough.embeddedEditorBackground#171928
  • welcomePage.buttonBackground#323449
  • welcomePage.buttonHoverBackground#3b426175
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#39ddfd
source#ebfafa
meta.diff, meta.diff.header#7081d0
markup.inserted#37f499
markup.deleted#f16c75
markup.changed#f7c67f
invalid#f16c75underline italic
invalid.deprecated#ebfafaunderline italic
entity.name.filename#f9e9a1
markup.error#f16c75
markup.underlineunderline
markup.bold#f7c67fbold
markup.heading#39ddfdbold
markup.italic#f9e9a1italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#04d1f9
markup.inline.raw, markup.raw.restructuredtext#37f499
markup.underline.link, markup.underline.link.image#04d1f9
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#a48cf2
entity.name.directive.restructuredtext, markup.quote#f9e9a1italic
meta.separator.markdown#7081d0
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#37f499
punctuation.definition.constant.restructuredtext#39ddfd
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#39ddfd
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#ebfafa
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#f9e9a1
entity.name.type.class, entity.name.class#04d1f9normal
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#39ddfditalic
entity.other.inherited-class#04d1f9italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7081d0
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#a48cf2
comment.block.documentation entity.name.type#04d1f9italic
comment.block.documentation entity.name.type punctuation.definition.bracket#04d1f9
comment.block.documentation variable#f7c67fitalic
constant, variable.other.constant#39ddfd
constant.character.escape, constant.character.string.escape, constant.regexp#a48cf2
entity.name.tag#a48cf2
entity.other.attribute-name.parent-selector#a48cf2
entity.other.attribute-name#37f499italic
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#37f499
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#f7c67fitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#37f499italic
meta.decorator variable.other.object#37f499
keyword, punctuation.definition.keyword#a48cf2
keyword.control.new, keyword.operator.newbold
meta.selector#a48cf2
support#04d1f9italic
support.function.magic, support.variable, variable.other.predefined#39ddfdregular
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#a48cf2
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#ebfafa
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#a48cf2
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#04d1f9
constant.other.date, constant.other.timestamp#f7c67f
variable.other.alias.yaml#37f499italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#a48cf2regular
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#04d1f9italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#f7c67f
storage.modifier#a48cf2
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#f9e9a1
punctuation.definition.group.capture.regexp#a48cf2
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#f16c75
punctuation.definition.character-class.regexp#04d1f9
punctuation.definition.group.regexp#f7c67f
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#f16c75
meta.assertion.look-ahead.regexp#37f499
string#f9e9a1
punctuation.definition.string.begin, punctuation.definition.string.end#f1fc79
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#39ddfd
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#7081d0
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#ebfafa
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#f7c67fitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#ebfafanormal
meta.selectionset.graphql variable#f9e9a1
meta.selectionset.graphql meta.arguments variable#ebfafa
entity.name.fragment.graphql, variable.fragment.graphql#04d1f9
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#ebfafa
source.shell variable.other#39ddfd
support.constant#39ddfdnormal
meta.scope.prerequisites.makefile#f9e9a1
meta.attribute-selector.scss#f9e9a1
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#ebfafa
meta.preprocessor.haskell#7081d0
Tinted VSCode by Tinted Theming - VS Code Theme