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#d2a8ff10
  • activityBar.activeBorder#ff7b7280
  • activityBar.background#0d1117
  • activityBar.foreground#c9d1d9
  • activityBar.inactiveForeground#6e7681
  • activityBarBadge.background#ff7b72
  • activityBarBadge.foreground#0d1117
  • badge.background#161b22
  • badge.foreground#c9d1d9
  • breadcrumb.activeSelectionForeground#c9d1d9
  • breadcrumb.background#0d1117
  • breadcrumb.focusForeground#c9d1d9
  • breadcrumb.foreground#6e7681
  • breadcrumbPicker.background#000000
  • button.background#010409
  • button.foreground#c9d1d9
  • checkbox.background#010409
  • checkbox.border#000000
  • checkbox.foreground#c9d1d9
  • contrastBorder#000000
  • debugToolBar.background#010409
  • diffEditor.insertedTextBackground#a5d6ff20
  • diffEditor.removedTextBackground#ffa65750
  • dropdown.background#0d1117
  • dropdown.border#000000
  • dropdown.foreground#c9d1d9
  • editor.background#0d1117
  • editor.findMatchBackground#79c0ff80
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#484f5875
  • editor.foldBackground#010409
  • editor.foreground#c9d1d9
  • editor.hoverHighlightBackground#000000
  • editor.lineHighlightBorder#161b22
  • editor.rangeHighlightBackground#d2a8ff15
  • editor.selectionBackground#161b22
  • editor.selectionHighlightBackground#161b22
  • editor.snippetFinalTabstopHighlightBackground#0d1117
  • editor.snippetFinalTabstopHighlightBorder#a5d6ff
  • editor.snippetTabstopHighlightBackground#0d1117
  • editor.snippetTabstopHighlightBorder#6e7681
  • editor.wordHighlightBackground#7ee78750
  • editor.wordHighlightStrongBackground#a5d6ff50
  • editorCodeLens.foreground#6e7681
  • editorError.foreground#ffa657
  • editorGroup.border#d2a8ff
  • editorGroup.dropBackground#484f5870
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#a5d6ff80
  • editorGutter.deletedBackground#ffa65780
  • editorGutter.modifiedBackground#7ee78780
  • editorHoverWidget.background#0d1117
  • editorHoverWidget.border#6e7681
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#6e7681
  • editorLink.activeForeground#7ee787
  • editorMarkerNavigation.background#010409
  • editorOverviewRuler.addedForeground#a5d6ff80
  • editorOverviewRuler.border#000000
  • editorOverviewRuler.currentContentForeground#a5d6ff
  • editorOverviewRuler.deletedForeground#ffa65780
  • editorOverviewRuler.errorForeground#ffa65780
  • editorOverviewRuler.incomingContentForeground#d2a8ff
  • editorOverviewRuler.infoForeground#7ee78780
  • editorOverviewRuler.modifiedForeground#7ee78780
  • editorOverviewRuler.selectionHighlightForeground#79c0ff
  • editorOverviewRuler.warningForeground#79c0ff80
  • editorOverviewRuler.wordHighlightForeground#7ee787
  • editorOverviewRuler.wordHighlightStrongForeground#a5d6ff
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#010409
  • editorSuggestWidget.foreground#c9d1d9
  • editorSuggestWidget.selectedBackground#161b22
  • editorWarning.foreground#79c0ff
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#010409
  • errorForeground#ffa657
  • extensionButton.prominentBackground#a5d6ff90
  • extensionButton.prominentForeground#c9d1d9
  • extensionButton.prominentHoverBackground#a5d6ff60
  • focusBorder#6e7681
  • foreground#c9d1d9
  • gitDecoration.conflictingResourceForeground#79c0ff
  • gitDecoration.deletedResourceForeground#ffa657
  • gitDecoration.ignoredResourceForeground#6e7681
  • gitDecoration.modifiedResourceForeground#7ee787
  • gitDecoration.untrackedResourceForeground#a5d6ff
  • input.background#0d1117
  • input.border#000000
  • input.foreground#c9d1d9
  • input.placeholderForeground#6e7681
  • inputOption.activeBorder#d2a8ff
  • inputValidation.errorBackground#0d1117
  • inputValidation.errorBorder#ffa657
  • inputValidation.errorForeground#ffa657
  • inputValidation.infoBackground#0d1117
  • inputValidation.infoBorder#d2a8ff
  • inputValidation.infoForeground#d2a8ff
  • inputValidation.warningBackground#0d1117
  • inputValidation.warningBorder#79c0ff
  • inputValidation.warningForeground#79c0ff
  • list.activeSelectionBackground#161b22
  • list.activeSelectionForeground#c9d1d9
  • list.dropBackground#161b22
  • list.errorForeground#ffa657
  • list.focusBackground#484f5875
  • list.highlightForeground#7ee787
  • list.hoverBackground#484f5875
  • list.inactiveSelectionBackground#484f5875
  • list.warningForeground#79c0ff
  • listFilterWidget.background#0d1117
  • listFilterWidget.noMatchesOutline#ffa657
  • listFilterWidget.outline#161b22
  • merge.currentHeaderBackground#a5d6ff90
  • merge.incomingHeaderBackground#d2a8ff90
  • notification.background#0d1117
  • notification.buttonBackground#161b22
  • notification.buttonForeground#c9d1d9
  • notification.buttonHoverBackground#484f5875
  • notification.errorBackground#ffa657
  • notification.errorForeground#0d1117
  • notification.foreground#c9d1d9
  • notification.infoBackground#d2a8ff
  • notification.infoForeground#0d1117
  • notification.warningBackground#79c0ff
  • notification.warningForeground#0d1117
  • notificationCenter.border#010409
  • notificationCenterHeader.background#0d1117
  • notificationCenterHeader.foreground#c9d1d9
  • notificationLink.foreground#7ee787
  • notifications.background#0d1117
  • notifications.border#010409
  • notifications.foreground#c9d1d9
  • notificationsErrorIcon.foreground#ffa657
  • notificationsInfoIcon.foreground#d2a8ff
  • notificationsWarningIcon.foreground#79c0ff
  • notificationToast.border#010409
  • panel.background#0d1117
  • panel.border#d2a8ff
  • panelInput.border#c9d1d9
  • panelTitle.activeBorder#ff7b72
  • panelTitle.activeForeground#c9d1d9
  • panelTitle.inactiveForeground#6e7681
  • peekView.border#161b22
  • peekViewEditor.background#0d1117
  • peekViewEditor.matchHighlightBackground#d2992280
  • peekViewResult.background#010409
  • peekViewResult.fileForeground#c9d1d9
  • peekViewResult.lineForeground#c9d1d9
  • peekViewResult.matchHighlightBackground#d2992280
  • peekViewResult.selectionBackground#161b22
  • peekViewResult.selectionForeground#c9d1d9
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#6e7681
  • peekViewTitleLabel.foreground#c9d1d9
  • pickerGroup.border#d2a8ff
  • pickerGroup.foreground#7ee787
  • progressBar.background#ff7b72
  • scrollbar.shadow#444444
  • selection.background#d2a8ff
  • settings.checkboxBackground#010409
  • settings.checkboxBorder#000000
  • settings.checkboxForeground#c9d1d9
  • settings.dropdownBackground#010409
  • settings.dropdownBorder#000000
  • settings.dropdownForeground#c9d1d9
  • settings.headerForeground#c9d1d9
  • settings.modifiedItemIndicator#79c0ff
  • settings.numberInputBackground#010409
  • settings.numberInputBorder#000000
  • settings.numberInputForeground#c9d1d9
  • settings.textInputBackground#010409
  • settings.textInputBorder#000000
  • settings.textInputForeground#c9d1d9
  • sideBar.background#010409
  • sideBarSectionHeader.background#0d1117
  • sideBarSectionHeader.border#000000
  • sideBarTitle.foreground#c9d1d9
  • statusBar.background#000000
  • statusBar.debuggingBackground#ffa657
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#c9d1d9
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#c9d1d9
  • statusBarItem.prominentBackground#ffa657
  • statusBarItem.prominentHoverBackground#79c0ff
  • statusBarItem.remoteBackground#d2a8ff
  • statusBarItem.remoteForeground#0d1117
  • tab.activeBackground#0d1117
  • tab.activeBorderTop#ff7b7280
  • tab.activeForeground#c9d1d9
  • tab.border#000000
  • tab.inactiveBackground#010409
  • tab.inactiveForeground#6e7681
  • terminal.ansiBlack#161b22
  • terminal.ansiBlue#d2a8ff
  • terminal.ansiBrightBlack#484f58
  • terminal.ansiBrightBlue#58a6ff
  • terminal.ansiBrightCyan#33b3ae
  • terminal.ansiBrightGreen#3fb950
  • terminal.ansiBrightMagenta#bc8cff
  • terminal.ansiBrightRed#ff7b72
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#d29922
  • terminal.ansiCyan#7ee787
  • terminal.ansiGreen#a5d6ff
  • terminal.ansiMagenta#ff7b72
  • terminal.ansiRed#ffa657
  • terminal.ansiWhite#f0f6fc
  • terminal.ansiYellow#79c0ff
  • terminal.background#0d1117
  • terminal.border#c9d1d9
  • terminal.foreground#c9d1d9
  • terminal.selectionBackground#161b2250
  • textBlockQuote.background#010409
  • titleBar.activeBackground#010409
  • titleBar.activeForeground#c9d1d9
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#6e7681
  • walkThrough.embeddedEditorBackground#010409
  • welcomePage.buttonBackground#161b22
  • welcomePage.buttonHoverBackground#484f5875
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#d2a8ff
source#c9d1d9
meta.diff, meta.diff.header#6e7681
markup.inserted#a5d6ff
markup.deleted#ffa657
markup.changed#79c0ff
invalid#ffa657underline italic
invalid.deprecated#c9d1d9underline italic
entity.name.filename#d29922
markup.error#ffa657
markup.underlineunderline
markup.bold#79c0ffbold
markup.heading#d2a8ffbold
markup.italic#d29922italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#7ee787
markup.inline.raw, markup.raw.restructuredtext#a5d6ff
markup.underline.link, markup.underline.link.image#7ee787
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ff7b72
entity.name.directive.restructuredtext, markup.quote#d29922italic
meta.separator.markdown#6e7681
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#a5d6ff
punctuation.definition.constant.restructuredtext#d2a8ff
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#d2a8ff
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#c9d1d9
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#d29922
entity.name.type.class, entity.name.class#7ee787normal
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#d2a8ffitalic
entity.other.inherited-class#7ee787italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6e7681
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ff7b72
comment.block.documentation entity.name.type#7ee787italic
comment.block.documentation entity.name.type punctuation.definition.bracket#7ee787
comment.block.documentation variable#79c0ffitalic
constant, variable.other.constant#d2a8ff
constant.character.escape, constant.character.string.escape, constant.regexp#ff7b72
entity.name.tag#ff7b72
entity.other.attribute-name.parent-selector#ff7b72
entity.other.attribute-name#a5d6ffitalic
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#a5d6ff
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#79c0ffitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#a5d6ffitalic
meta.decorator variable.other.object#a5d6ff
keyword, punctuation.definition.keyword#ff7b72
keyword.control.new, keyword.operator.newbold
meta.selector#ff7b72
support#7ee787italic
support.function.magic, support.variable, variable.other.predefined#d2a8ffregular
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#ff7b72
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#c9d1d9
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#ff7b72
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#7ee787
constant.other.date, constant.other.timestamp#79c0ff
variable.other.alias.yaml#a5d6ffitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ff7b72regular
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#7ee787italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#79c0ff
storage.modifier#ff7b72
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#d29922
punctuation.definition.group.capture.regexp#ff7b72
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ffa657
punctuation.definition.character-class.regexp#7ee787
punctuation.definition.group.regexp#79c0ff
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ffa657
meta.assertion.look-ahead.regexp#a5d6ff
string#d29922
punctuation.definition.string.begin, punctuation.definition.string.end#bb8009
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#d2a8ff
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#6e7681
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#c9d1d9
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#79c0ffitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#c9d1d9normal
meta.selectionset.graphql variable#d29922
meta.selectionset.graphql meta.arguments variable#c9d1d9
entity.name.fragment.graphql, variable.fragment.graphql#7ee787
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#c9d1d9
source.shell variable.other#d2a8ff
support.constant#d2a8ffnormal
meta.scope.prerequisites.makefile#d29922
meta.attribute-selector.scss#d29922
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#c9d1d9
meta.preprocessor.haskell#6e7681
Tinted VSCode by Tinted Theming - VS Code Theme