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#dcbdfb10
  • activityBar.activeBorder#f4706780
  • activityBar.background#22272e
  • activityBar.foreground#adbac7
  • activityBar.inactiveForeground#636e7b
  • activityBarBadge.background#f47067
  • activityBarBadge.foreground#22272e
  • badge.background#2d333b
  • badge.foreground#adbac7
  • breadcrumb.activeSelectionForeground#adbac7
  • breadcrumb.background#22272e
  • breadcrumb.focusForeground#adbac7
  • breadcrumb.foreground#636e7b
  • breadcrumbPicker.background#000000
  • button.background#1c2128
  • button.foreground#adbac7
  • checkbox.background#1c2128
  • checkbox.border#000000
  • checkbox.foreground#adbac7
  • contrastBorder#000000
  • debugToolBar.background#1c2128
  • diffEditor.insertedTextBackground#96d0ff20
  • diffEditor.removedTextBackground#f69d5050
  • dropdown.background#22272e
  • dropdown.border#000000
  • dropdown.foreground#adbac7
  • editor.background#22272e
  • editor.findMatchBackground#6cb6ff80
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#545d6875
  • editor.foldBackground#1c2128
  • editor.foreground#adbac7
  • editor.hoverHighlightBackground#000000
  • editor.lineHighlightBorder#2d333b
  • editor.rangeHighlightBackground#dcbdfb15
  • editor.selectionBackground#2d333b
  • editor.selectionHighlightBackground#2d333b
  • editor.snippetFinalTabstopHighlightBackground#22272e
  • editor.snippetFinalTabstopHighlightBorder#96d0ff
  • editor.snippetTabstopHighlightBackground#22272e
  • editor.snippetTabstopHighlightBorder#636e7b
  • editor.wordHighlightBackground#8ddb8c50
  • editor.wordHighlightStrongBackground#96d0ff50
  • editorCodeLens.foreground#636e7b
  • editorError.foreground#f69d50
  • editorGroup.border#dcbdfb
  • editorGroup.dropBackground#545d6870
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#96d0ff80
  • editorGutter.deletedBackground#f69d5080
  • editorGutter.modifiedBackground#8ddb8c80
  • editorHoverWidget.background#22272e
  • editorHoverWidget.border#636e7b
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#636e7b
  • editorLink.activeForeground#8ddb8c
  • editorMarkerNavigation.background#1c2128
  • editorOverviewRuler.addedForeground#96d0ff80
  • editorOverviewRuler.border#000000
  • editorOverviewRuler.currentContentForeground#96d0ff
  • editorOverviewRuler.deletedForeground#f69d5080
  • editorOverviewRuler.errorForeground#f69d5080
  • editorOverviewRuler.incomingContentForeground#dcbdfb
  • editorOverviewRuler.infoForeground#8ddb8c80
  • editorOverviewRuler.modifiedForeground#8ddb8c80
  • editorOverviewRuler.selectionHighlightForeground#6cb6ff
  • editorOverviewRuler.warningForeground#6cb6ff80
  • editorOverviewRuler.wordHighlightForeground#8ddb8c
  • editorOverviewRuler.wordHighlightStrongForeground#96d0ff
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#1c2128
  • editorSuggestWidget.foreground#adbac7
  • editorSuggestWidget.selectedBackground#2d333b
  • editorWarning.foreground#6cb6ff
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#1c2128
  • errorForeground#f69d50
  • extensionButton.prominentBackground#96d0ff90
  • extensionButton.prominentForeground#adbac7
  • extensionButton.prominentHoverBackground#96d0ff60
  • focusBorder#636e7b
  • foreground#adbac7
  • gitDecoration.conflictingResourceForeground#6cb6ff
  • gitDecoration.deletedResourceForeground#f69d50
  • gitDecoration.ignoredResourceForeground#636e7b
  • gitDecoration.modifiedResourceForeground#8ddb8c
  • gitDecoration.untrackedResourceForeground#96d0ff
  • input.background#22272e
  • input.border#000000
  • input.foreground#adbac7
  • input.placeholderForeground#636e7b
  • inputOption.activeBorder#dcbdfb
  • inputValidation.errorBackground#22272e
  • inputValidation.errorBorder#f69d50
  • inputValidation.errorForeground#f69d50
  • inputValidation.infoBackground#22272e
  • inputValidation.infoBorder#dcbdfb
  • inputValidation.infoForeground#dcbdfb
  • inputValidation.warningBackground#22272e
  • inputValidation.warningBorder#6cb6ff
  • inputValidation.warningForeground#6cb6ff
  • list.activeSelectionBackground#2d333b
  • list.activeSelectionForeground#adbac7
  • list.dropBackground#2d333b
  • list.errorForeground#f69d50
  • list.focusBackground#545d6875
  • list.highlightForeground#8ddb8c
  • list.hoverBackground#545d6875
  • list.inactiveSelectionBackground#545d6875
  • list.warningForeground#6cb6ff
  • listFilterWidget.background#22272e
  • listFilterWidget.noMatchesOutline#f69d50
  • listFilterWidget.outline#2d333b
  • merge.currentHeaderBackground#96d0ff90
  • merge.incomingHeaderBackground#dcbdfb90
  • notification.background#22272e
  • notification.buttonBackground#2d333b
  • notification.buttonForeground#adbac7
  • notification.buttonHoverBackground#545d6875
  • notification.errorBackground#f69d50
  • notification.errorForeground#22272e
  • notification.foreground#adbac7
  • notification.infoBackground#dcbdfb
  • notification.infoForeground#22272e
  • notification.warningBackground#6cb6ff
  • notification.warningForeground#22272e
  • notificationCenter.border#1c2128
  • notificationCenterHeader.background#22272e
  • notificationCenterHeader.foreground#adbac7
  • notificationLink.foreground#8ddb8c
  • notifications.background#22272e
  • notifications.border#1c2128
  • notifications.foreground#adbac7
  • notificationsErrorIcon.foreground#f69d50
  • notificationsInfoIcon.foreground#dcbdfb
  • notificationsWarningIcon.foreground#6cb6ff
  • notificationToast.border#1c2128
  • panel.background#22272e
  • panel.border#dcbdfb
  • panelInput.border#adbac7
  • panelTitle.activeBorder#f47067
  • panelTitle.activeForeground#adbac7
  • panelTitle.inactiveForeground#636e7b
  • peekView.border#2d333b
  • peekViewEditor.background#22272e
  • peekViewEditor.matchHighlightBackground#c6902680
  • peekViewResult.background#1c2128
  • peekViewResult.fileForeground#adbac7
  • peekViewResult.lineForeground#adbac7
  • peekViewResult.matchHighlightBackground#c6902680
  • peekViewResult.selectionBackground#2d333b
  • peekViewResult.selectionForeground#adbac7
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#636e7b
  • peekViewTitleLabel.foreground#adbac7
  • pickerGroup.border#dcbdfb
  • pickerGroup.foreground#8ddb8c
  • progressBar.background#f47067
  • scrollbar.shadow#444444
  • selection.background#dcbdfb
  • settings.checkboxBackground#1c2128
  • settings.checkboxBorder#000000
  • settings.checkboxForeground#adbac7
  • settings.dropdownBackground#1c2128
  • settings.dropdownBorder#000000
  • settings.dropdownForeground#adbac7
  • settings.headerForeground#adbac7
  • settings.modifiedItemIndicator#6cb6ff
  • settings.numberInputBackground#1c2128
  • settings.numberInputBorder#000000
  • settings.numberInputForeground#adbac7
  • settings.textInputBackground#1c2128
  • settings.textInputBorder#000000
  • settings.textInputForeground#adbac7
  • sideBar.background#1c2128
  • sideBarSectionHeader.background#22272e
  • sideBarSectionHeader.border#000000
  • sideBarTitle.foreground#adbac7
  • statusBar.background#000000
  • statusBar.debuggingBackground#f69d50
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#adbac7
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#adbac7
  • statusBarItem.prominentBackground#f69d50
  • statusBarItem.prominentHoverBackground#6cb6ff
  • statusBarItem.remoteBackground#dcbdfb
  • statusBarItem.remoteForeground#22272e
  • tab.activeBackground#22272e
  • tab.activeBorderTop#f4706780
  • tab.activeForeground#adbac7
  • tab.border#000000
  • tab.inactiveBackground#1c2128
  • tab.inactiveForeground#636e7b
  • terminal.ansiBlack#2d333b
  • terminal.ansiBlue#dcbdfb
  • terminal.ansiBrightBlack#545d68
  • terminal.ansiBrightBlue#539bf5
  • terminal.ansiBrightCyan#33b3ae
  • terminal.ansiBrightGreen#57ab5a
  • terminal.ansiBrightMagenta#b083f0
  • terminal.ansiBrightRed#f47067
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#c69026
  • terminal.ansiCyan#8ddb8c
  • terminal.ansiGreen#96d0ff
  • terminal.ansiMagenta#f47067
  • terminal.ansiRed#f69d50
  • terminal.ansiWhite#cdd9e5
  • terminal.ansiYellow#6cb6ff
  • terminal.background#22272e
  • terminal.border#adbac7
  • terminal.foreground#adbac7
  • terminal.selectionBackground#2d333b50
  • textBlockQuote.background#1c2128
  • titleBar.activeBackground#1c2128
  • titleBar.activeForeground#adbac7
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#636e7b
  • walkThrough.embeddedEditorBackground#1c2128
  • welcomePage.buttonBackground#2d333b
  • welcomePage.buttonHoverBackground#545d6875
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#dcbdfb
source#adbac7
meta.diff, meta.diff.header#636e7b
markup.inserted#96d0ff
markup.deleted#f69d50
markup.changed#6cb6ff
invalid#f69d50underline italic
invalid.deprecated#adbac7underline italic
entity.name.filename#c69026
markup.error#f69d50
markup.underlineunderline
markup.bold#6cb6ffbold
markup.heading#dcbdfbbold
markup.italic#c69026italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#8ddb8c
markup.inline.raw, markup.raw.restructuredtext#96d0ff
markup.underline.link, markup.underline.link.image#8ddb8c
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#f47067
entity.name.directive.restructuredtext, markup.quote#c69026italic
meta.separator.markdown#636e7b
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#96d0ff
punctuation.definition.constant.restructuredtext#dcbdfb
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#dcbdfb
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#adbac7
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#c69026
entity.name.type.class, entity.name.class#8ddb8cnormal
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#dcbdfbitalic
entity.other.inherited-class#8ddb8citalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#636e7b
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#f47067
comment.block.documentation entity.name.type#8ddb8citalic
comment.block.documentation entity.name.type punctuation.definition.bracket#8ddb8c
comment.block.documentation variable#6cb6ffitalic
constant, variable.other.constant#dcbdfb
constant.character.escape, constant.character.string.escape, constant.regexp#f47067
entity.name.tag#f47067
entity.other.attribute-name.parent-selector#f47067
entity.other.attribute-name#96d0ffitalic
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#96d0ff
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#6cb6ffitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#96d0ffitalic
meta.decorator variable.other.object#96d0ff
keyword, punctuation.definition.keyword#f47067
keyword.control.new, keyword.operator.newbold
meta.selector#f47067
support#8ddb8citalic
support.function.magic, support.variable, variable.other.predefined#dcbdfbregular
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#f47067
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#adbac7
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#f47067
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#8ddb8c
constant.other.date, constant.other.timestamp#6cb6ff
variable.other.alias.yaml#96d0ffitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#f47067regular
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#8ddb8citalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#6cb6ff
storage.modifier#f47067
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#c69026
punctuation.definition.group.capture.regexp#f47067
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#f69d50
punctuation.definition.character-class.regexp#8ddb8c
punctuation.definition.group.regexp#6cb6ff
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#f69d50
meta.assertion.look-ahead.regexp#96d0ff
string#c69026
punctuation.definition.string.begin, punctuation.definition.string.end#ae7c14
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#dcbdfb
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#636e7b
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#adbac7
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#6cb6ffitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#adbac7normal
meta.selectionset.graphql variable#c69026
meta.selectionset.graphql meta.arguments variable#adbac7
entity.name.fragment.graphql, variable.fragment.graphql#8ddb8c
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#adbac7
source.shell variable.other#dcbdfb
support.constant#dcbdfbnormal
meta.scope.prerequisites.makefile#c69026
meta.attribute-selector.scss#c69026
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#adbac7
meta.preprocessor.haskell#636e7b