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#ec8e2c80
  • activityBar.background#0d1117
  • activityBar.foreground#c9d1d9
  • activityBar.inactiveForeground#6e7681
  • activityBarBadge.background#ec8e2c
  • 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#fdac5450
  • 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#a5d6ff50
  • editor.wordHighlightStrongBackground#a5d6ff50
  • editorCodeLens.foreground#6e7681
  • editorError.foreground#fdac54
  • editorGroup.border#d2a8ff
  • editorGroup.dropBackground#484f5870
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#a5d6ff80
  • editorGutter.deletedBackground#fdac5480
  • editorGutter.modifiedBackground#a5d6ff80
  • editorHoverWidget.background#0d1117
  • editorHoverWidget.border#6e7681
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#6e7681
  • editorLink.activeForeground#a5d6ff
  • editorMarkerNavigation.background#010409
  • editorOverviewRuler.addedForeground#a5d6ff80
  • editorOverviewRuler.border#000000
  • editorOverviewRuler.currentContentForeground#a5d6ff
  • editorOverviewRuler.deletedForeground#fdac5480
  • editorOverviewRuler.errorForeground#fdac5480
  • editorOverviewRuler.incomingContentForeground#d2a8ff
  • editorOverviewRuler.infoForeground#a5d6ff80
  • editorOverviewRuler.modifiedForeground#a5d6ff80
  • editorOverviewRuler.selectionHighlightForeground#79c0ff
  • editorOverviewRuler.warningForeground#79c0ff80
  • editorOverviewRuler.wordHighlightForeground#a5d6ff
  • 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#fdac54
  • extensionButton.prominentBackground#a5d6ff90
  • extensionButton.prominentForeground#c9d1d9
  • extensionButton.prominentHoverBackground#a5d6ff60
  • focusBorder#6e7681
  • foreground#c9d1d9
  • gitDecoration.conflictingResourceForeground#79c0ff
  • gitDecoration.deletedResourceForeground#fdac54
  • gitDecoration.ignoredResourceForeground#6e7681
  • gitDecoration.modifiedResourceForeground#a5d6ff
  • gitDecoration.untrackedResourceForeground#a5d6ff
  • input.background#0d1117
  • input.border#000000
  • input.foreground#c9d1d9
  • input.placeholderForeground#6e7681
  • inputOption.activeBorder#d2a8ff
  • inputValidation.errorBackground#0d1117
  • inputValidation.errorBorder#fdac54
  • inputValidation.errorForeground#fdac54
  • 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#fdac54
  • list.focusBackground#484f5875
  • list.highlightForeground#a5d6ff
  • list.hoverBackground#484f5875
  • list.inactiveSelectionBackground#484f5875
  • list.warningForeground#79c0ff
  • listFilterWidget.background#0d1117
  • listFilterWidget.noMatchesOutline#fdac54
  • listFilterWidget.outline#161b22
  • merge.currentHeaderBackground#a5d6ff90
  • merge.incomingHeaderBackground#d2a8ff90
  • notification.background#0d1117
  • notification.buttonBackground#161b22
  • notification.buttonForeground#c9d1d9
  • notification.buttonHoverBackground#484f5875
  • notification.errorBackground#fdac54
  • 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#a5d6ff
  • notifications.background#0d1117
  • notifications.border#010409
  • notifications.foreground#c9d1d9
  • notificationsErrorIcon.foreground#fdac54
  • notificationsInfoIcon.foreground#d2a8ff
  • notificationsWarningIcon.foreground#79c0ff
  • notificationToast.border#010409
  • panel.background#0d1117
  • panel.border#d2a8ff
  • panelInput.border#c9d1d9
  • panelTitle.activeBorder#ec8e2c
  • 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#a5d6ff
  • progressBar.background#ec8e2c
  • 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#fdac54
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#c9d1d9
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#c9d1d9
  • statusBarItem.prominentBackground#fdac54
  • statusBarItem.prominentHoverBackground#79c0ff
  • statusBarItem.remoteBackground#d2a8ff
  • statusBarItem.remoteForeground#0d1117
  • tab.activeBackground#0d1117
  • tab.activeBorderTop#ec8e2c80
  • 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#58a6ff
  • terminal.ansiBrightMagenta#bc8cff
  • terminal.ansiBrightRed#ec8e2c
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#d29922
  • terminal.ansiCyan#a5d6ff
  • terminal.ansiGreen#a5d6ff
  • terminal.ansiMagenta#ec8e2c
  • terminal.ansiRed#fdac54
  • 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#fdac54
markup.changed#79c0ff
invalid#fdac54underline italic
invalid.deprecated#c9d1d9underline italic
entity.name.filename#d29922
markup.error#fdac54
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#a5d6ff
markup.inline.raw, markup.raw.restructuredtext#a5d6ff
markup.underline.link, markup.underline.link.image#a5d6ff
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ec8e2c
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#a5d6ffnormal
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#a5d6ffitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6e7681
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ec8e2c
comment.block.documentation entity.name.type#a5d6ffitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#a5d6ff
comment.block.documentation variable#79c0ffitalic
constant, variable.other.constant#d2a8ff
constant.character.escape, constant.character.string.escape, constant.regexp#ec8e2c
entity.name.tag#ec8e2c
entity.other.attribute-name.parent-selector#ec8e2c
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#ec8e2c
keyword.control.new, keyword.operator.newbold
meta.selector#ec8e2c
support#a5d6ffitalic
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#ec8e2c
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#ec8e2c
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#a5d6ff
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#ec8e2cregular
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#a5d6ffitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#79c0ff
storage.modifier#ec8e2c
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#d29922
punctuation.definition.group.capture.regexp#ec8e2c
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#fdac54
punctuation.definition.character-class.regexp#a5d6ff
punctuation.definition.group.regexp#79c0ff
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#fdac54
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#a5d6ff
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