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#6495ed10
  • activityBar.activeBorder#deb88780
  • activityBar.background#1c1c1c
  • activityBar.foreground#a19083
  • activityBar.inactiveForeground#6e5d59
  • activityBarBadge.background#deb887
  • activityBarBadge.foreground#1c1c1c
  • badge.background#3d352a
  • badge.foreground#a19083
  • breadcrumb.activeSelectionForeground#a19083
  • breadcrumb.background#1c1c1c
  • breadcrumb.focusForeground#a19083
  • breadcrumb.foreground#6e5d59
  • breadcrumbPicker.background#1c1616
  • button.background#382d2d
  • button.foreground#a19083
  • checkbox.background#382d2d
  • checkbox.border#1c1616
  • checkbox.foreground#a19083
  • contrastBorder#1c1616
  • debugToolBar.background#382d2d
  • diffEditor.insertedTextBackground#86af8020
  • diffEditor.removedTextBackground#cd5c5c50
  • dropdown.background#1c1c1c
  • dropdown.border#1c1616
  • dropdown.foreground#a19083
  • editor.background#1c1c1c
  • editor.findMatchBackground#e8ae5b80
  • editor.findMatchHighlightBackground#ddccbb40
  • editor.findRangeHighlightBackground#55444475
  • editor.foldBackground#382d2d
  • editor.foreground#a19083
  • editor.hoverHighlightBackground#1c1616
  • editor.lineHighlightBorder#3d352a
  • editor.rangeHighlightBackground#6495ed15
  • editor.selectionBackground#3d352a
  • editor.selectionHighlightBackground#3d352a
  • editor.snippetFinalTabstopHighlightBackground#1c1c1c
  • editor.snippetFinalTabstopHighlightBorder#86af80
  • editor.snippetTabstopHighlightBackground#1c1c1c
  • editor.snippetTabstopHighlightBorder#6e5d59
  • editor.wordHighlightBackground#b0c4de50
  • editor.wordHighlightStrongBackground#86af8050
  • editorCodeLens.foreground#6e5d59
  • editorError.foreground#cd5c5c
  • editorGroup.border#6495ed
  • editorGroup.dropBackground#55444470
  • editorGroupHeader.tabsBackground#1c1616
  • editorGutter.addedBackground#86af8080
  • editorGutter.deletedBackground#cd5c5c80
  • editorGutter.modifiedBackground#b0c4de80
  • editorHoverWidget.background#1c1c1c
  • editorHoverWidget.border#6e5d59
  • editorIndentGuide.activeBackground#ddccbb45
  • editorIndentGuide.background#ddccbb1A
  • editorLineNumber.foreground#6e5d59
  • editorLink.activeForeground#b0c4de
  • editorMarkerNavigation.background#382d2d
  • editorOverviewRuler.addedForeground#86af8080
  • editorOverviewRuler.border#1c1616
  • editorOverviewRuler.currentContentForeground#86af80
  • editorOverviewRuler.deletedForeground#cd5c5c80
  • editorOverviewRuler.errorForeground#cd5c5c80
  • editorOverviewRuler.incomingContentForeground#6495ed
  • editorOverviewRuler.infoForeground#b0c4de80
  • editorOverviewRuler.modifiedForeground#b0c4de80
  • editorOverviewRuler.selectionHighlightForeground#e8ae5b
  • editorOverviewRuler.warningForeground#e8ae5b80
  • editorOverviewRuler.wordHighlightForeground#b0c4de
  • editorOverviewRuler.wordHighlightStrongForeground#86af80
  • editorRuler.foreground#ddccbb1A
  • editorSuggestWidget.background#382d2d
  • editorSuggestWidget.foreground#a19083
  • editorSuggestWidget.selectedBackground#3d352a
  • editorWarning.foreground#e8ae5b
  • editorWhitespace.foreground#ddccbb1A
  • editorWidget.background#382d2d
  • errorForeground#cd5c5c
  • extensionButton.prominentBackground#86af8090
  • extensionButton.prominentForeground#a19083
  • extensionButton.prominentHoverBackground#86af8060
  • focusBorder#6e5d59
  • foreground#a19083
  • gitDecoration.conflictingResourceForeground#e8ae5b
  • gitDecoration.deletedResourceForeground#cd5c5c
  • gitDecoration.ignoredResourceForeground#6e5d59
  • gitDecoration.modifiedResourceForeground#b0c4de
  • gitDecoration.untrackedResourceForeground#86af80
  • input.background#1c1c1c
  • input.border#1c1616
  • input.foreground#a19083
  • input.placeholderForeground#6e5d59
  • inputOption.activeBorder#6495ed
  • inputValidation.errorBackground#1c1c1c
  • inputValidation.errorBorder#cd5c5c
  • inputValidation.errorForeground#cd5c5c
  • inputValidation.infoBackground#1c1c1c
  • inputValidation.infoBorder#6495ed
  • inputValidation.infoForeground#6495ed
  • inputValidation.warningBackground#1c1c1c
  • inputValidation.warningBorder#e8ae5b
  • inputValidation.warningForeground#e8ae5b
  • list.activeSelectionBackground#3d352a
  • list.activeSelectionForeground#a19083
  • list.dropBackground#3d352a
  • list.errorForeground#cd5c5c
  • list.focusBackground#55444475
  • list.highlightForeground#b0c4de
  • list.hoverBackground#55444475
  • list.inactiveSelectionBackground#55444475
  • list.warningForeground#e8ae5b
  • listFilterWidget.background#1c1c1c
  • listFilterWidget.noMatchesOutline#cd5c5c
  • listFilterWidget.outline#3d352a
  • merge.currentHeaderBackground#86af8090
  • merge.incomingHeaderBackground#6495ed90
  • notification.background#1c1c1c
  • notification.buttonBackground#3d352a
  • notification.buttonForeground#a19083
  • notification.buttonHoverBackground#55444475
  • notification.errorBackground#cd5c5c
  • notification.errorForeground#1c1c1c
  • notification.foreground#a19083
  • notification.infoBackground#6495ed
  • notification.infoForeground#1c1c1c
  • notification.warningBackground#e8ae5b
  • notification.warningForeground#1c1c1c
  • notificationCenter.border#382d2d
  • notificationCenterHeader.background#1c1c1c
  • notificationCenterHeader.foreground#a19083
  • notificationLink.foreground#b0c4de
  • notifications.background#1c1c1c
  • notifications.border#382d2d
  • notifications.foreground#a19083
  • notificationsErrorIcon.foreground#cd5c5c
  • notificationsInfoIcon.foreground#6495ed
  • notificationsWarningIcon.foreground#e8ae5b
  • notificationToast.border#382d2d
  • panel.background#1c1c1c
  • panel.border#6495ed
  • panelInput.border#a19083
  • panelTitle.activeBorder#deb887
  • panelTitle.activeForeground#a19083
  • panelTitle.inactiveForeground#6e5d59
  • peekView.border#3d352a
  • peekViewEditor.background#1c1c1c
  • peekViewEditor.matchHighlightBackground#ffa75d80
  • peekViewResult.background#382d2d
  • peekViewResult.fileForeground#a19083
  • peekViewResult.lineForeground#a19083
  • peekViewResult.matchHighlightBackground#ffa75d80
  • peekViewResult.selectionBackground#3d352a
  • peekViewResult.selectionForeground#a19083
  • peekViewTitle.background#1c1616
  • peekViewTitleDescription.foreground#6e5d59
  • peekViewTitleLabel.foreground#a19083
  • pickerGroup.border#6495ed
  • pickerGroup.foreground#b0c4de
  • progressBar.background#deb887
  • scrollbar.shadow#444444
  • selection.background#6495ed
  • settings.checkboxBackground#382d2d
  • settings.checkboxBorder#1c1616
  • settings.checkboxForeground#a19083
  • settings.dropdownBackground#382d2d
  • settings.dropdownBorder#1c1616
  • settings.dropdownForeground#a19083
  • settings.headerForeground#a19083
  • settings.modifiedItemIndicator#e8ae5b
  • settings.numberInputBackground#382d2d
  • settings.numberInputBorder#1c1616
  • settings.numberInputForeground#a19083
  • settings.textInputBackground#382d2d
  • settings.textInputBorder#1c1616
  • settings.textInputForeground#a19083
  • sideBar.background#382d2d
  • sideBarSectionHeader.background#1c1c1c
  • sideBarSectionHeader.border#1c1616
  • sideBarTitle.foreground#a19083
  • statusBar.background#1c1616
  • statusBar.debuggingBackground#cd5c5c
  • statusBar.debuggingForeground#1c1616
  • statusBar.foreground#a19083
  • statusBar.noFolderBackground#1c1616
  • statusBar.noFolderForeground#a19083
  • statusBarItem.prominentBackground#cd5c5c
  • statusBarItem.prominentHoverBackground#e8ae5b
  • statusBarItem.remoteBackground#6495ed
  • statusBarItem.remoteForeground#1c1c1c
  • tab.activeBackground#1c1c1c
  • tab.activeBorderTop#deb88780
  • tab.activeForeground#a19083
  • tab.border#1c1616
  • tab.inactiveBackground#382d2d
  • tab.inactiveForeground#6e5d59
  • terminal.ansiBlack#3d352a
  • terminal.ansiBlue#6495ed
  • terminal.ansiBrightBlack#554444
  • terminal.ansiBrightBlue#87ceeb
  • terminal.ansiBrightCyan#b0c4de
  • terminal.ansiBrightGreen#88aa22
  • terminal.ansiBrightMagenta#996600
  • terminal.ansiBrightRed#cc5533
  • terminal.ansiBrightWhite#ddccbb
  • terminal.ansiBrightYellow#ffa75d
  • terminal.ansiCyan#b0c4de
  • terminal.ansiGreen#86af80
  • terminal.ansiMagenta#deb887
  • terminal.ansiRed#cd5c5c
  • terminal.ansiWhite#bbaa99
  • terminal.ansiYellow#e8ae5b
  • terminal.background#1c1c1c
  • terminal.border#a19083
  • terminal.foreground#a19083
  • terminal.selectionBackground#3d352a50
  • textBlockQuote.background#382d2d
  • titleBar.activeBackground#382d2d
  • titleBar.activeForeground#a19083
  • titleBar.inactiveBackground#1c1616
  • titleBar.inactiveForeground#6e5d59
  • walkThrough.embeddedEditorBackground#382d2d
  • welcomePage.buttonBackground#3d352a
  • welcomePage.buttonHoverBackground#55444475
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#6495ed
source#a19083
meta.diff, meta.diff.header#6e5d59
markup.inserted#86af80
markup.deleted#cd5c5c
markup.changed#e8ae5b
invalid#cd5c5cunderline italic
invalid.deprecated#a19083underline italic
entity.name.filename#ffa75d
markup.error#cd5c5c
markup.underlineunderline
markup.bold#e8ae5bbold
markup.heading#6495edbold
markup.italic#ffa75ditalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#b0c4de
markup.inline.raw, markup.raw.restructuredtext#86af80
markup.underline.link, markup.underline.link.image#b0c4de
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#deb887
entity.name.directive.restructuredtext, markup.quote#ffa75ditalic
meta.separator.markdown#6e5d59
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#86af80
punctuation.definition.constant.restructuredtext#6495ed
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#6495ed
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#a19083
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffa75d
entity.name.type.class, entity.name.class#b0c4denormal
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#6495editalic
entity.other.inherited-class#b0c4deitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6e5d59
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#deb887
comment.block.documentation entity.name.type#b0c4deitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#b0c4de
comment.block.documentation variable#e8ae5bitalic
constant, variable.other.constant#6495ed
constant.character.escape, constant.character.string.escape, constant.regexp#deb887
entity.name.tag#deb887
entity.other.attribute-name.parent-selector#deb887
entity.other.attribute-name#86af80italic
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#86af80
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#e8ae5bitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#86af80italic
meta.decorator variable.other.object#86af80
keyword, punctuation.definition.keyword#deb887
keyword.control.new, keyword.operator.newbold
meta.selector#deb887
support#b0c4deitalic
support.function.magic, support.variable, variable.other.predefined#6495edregular
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#deb887
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#a19083
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#deb887
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#b0c4de
constant.other.date, constant.other.timestamp#e8ae5b
variable.other.alias.yaml#86af80italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#deb887regular
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#b0c4deitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#e8ae5b
storage.modifier#deb887
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffa75d
punctuation.definition.group.capture.regexp#deb887
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#cd5c5c
punctuation.definition.character-class.regexp#b0c4de
punctuation.definition.group.regexp#e8ae5b
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#cd5c5c
meta.assertion.look-ahead.regexp#86af80
string#ffa75d
punctuation.definition.string.begin, punctuation.definition.string.end#87ceeb
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#6495ed
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#6e5d59
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#a19083
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#e8ae5bitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#a19083normal
meta.selectionset.graphql variable#ffa75d
meta.selectionset.graphql meta.arguments variable#a19083
entity.name.fragment.graphql, variable.fragment.graphql#b0c4de
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#a19083
source.shell variable.other#6495ed
support.constant#6495ednormal
meta.scope.prerequisites.makefile#ffa75d
meta.attribute-selector.scss#ffa75d
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#a19083
meta.preprocessor.haskell#6e5d59
Tinted VSCode by Tinted Theming - VS Code Theme