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#cd853f10
  • activityBar.activeBorder#ffdead80
  • activityBar.background#333333
  • activityBar.foreground#cdbb9b
  • activityBar.inactiveForeground#7d776c
  • activityBarBadge.background#ffdead
  • activityBarBadge.foreground#333333
  • badge.background#4d4d4d
  • badge.foreground#cdbb9b
  • breadcrumb.activeSelectionForeground#cdbb9b
  • breadcrumb.background#333333
  • breadcrumb.focusForeground#cdbb9b
  • breadcrumb.foreground#7d776c
  • breadcrumbPicker.background#1c1c1c
  • button.background#383838
  • button.foreground#cdbb9b
  • checkbox.background#383838
  • checkbox.border#1c1c1c
  • checkbox.foreground#cdbb9b
  • contrastBorder#1c1c1c
  • debugToolBar.background#383838
  • diffEditor.insertedTextBackground#98fb9820
  • diffEditor.removedTextBackground#ff2b2b50
  • dropdown.background#333333
  • dropdown.border#1c1c1c
  • dropdown.foreground#cdbb9b
  • editor.background#333333
  • editor.findMatchBackground#f0e68c80
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#55555575
  • editor.foldBackground#383838
  • editor.foreground#cdbb9b
  • editor.hoverHighlightBackground#1c1c1c
  • editor.lineHighlightBorder#4d4d4d
  • editor.rangeHighlightBackground#cd853f15
  • editor.selectionBackground#4d4d4d
  • editor.selectionHighlightBackground#4d4d4d
  • editor.snippetFinalTabstopHighlightBackground#333333
  • editor.snippetFinalTabstopHighlightBorder#98fb98
  • editor.snippetTabstopHighlightBackground#333333
  • editor.snippetTabstopHighlightBorder#7d776c
  • editor.wordHighlightBackground#ffa0a050
  • editor.wordHighlightStrongBackground#98fb9850
  • editorCodeLens.foreground#7d776c
  • editorError.foreground#ff2b2b
  • editorGroup.border#cd853f
  • editorGroup.dropBackground#55555570
  • editorGroupHeader.tabsBackground#1c1c1c
  • editorGutter.addedBackground#98fb9880
  • editorGutter.deletedBackground#ff2b2b80
  • editorGutter.modifiedBackground#ffa0a080
  • editorHoverWidget.background#333333
  • editorHoverWidget.border#7d776c
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#7d776c
  • editorLink.activeForeground#ffa0a0
  • editorMarkerNavigation.background#383838
  • editorOverviewRuler.addedForeground#98fb9880
  • editorOverviewRuler.border#1c1c1c
  • editorOverviewRuler.currentContentForeground#98fb98
  • editorOverviewRuler.deletedForeground#ff2b2b80
  • editorOverviewRuler.errorForeground#ff2b2b80
  • editorOverviewRuler.incomingContentForeground#cd853f
  • editorOverviewRuler.infoForeground#ffa0a080
  • editorOverviewRuler.modifiedForeground#ffa0a080
  • editorOverviewRuler.selectionHighlightForeground#f0e68c
  • editorOverviewRuler.warningForeground#f0e68c80
  • editorOverviewRuler.wordHighlightForeground#ffa0a0
  • editorOverviewRuler.wordHighlightStrongForeground#98fb98
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#383838
  • editorSuggestWidget.foreground#cdbb9b
  • editorSuggestWidget.selectedBackground#4d4d4d
  • editorWarning.foreground#f0e68c
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#383838
  • errorForeground#ff2b2b
  • extensionButton.prominentBackground#98fb9890
  • extensionButton.prominentForeground#cdbb9b
  • extensionButton.prominentHoverBackground#98fb9860
  • focusBorder#7d776c
  • foreground#cdbb9b
  • gitDecoration.conflictingResourceForeground#f0e68c
  • gitDecoration.deletedResourceForeground#ff2b2b
  • gitDecoration.ignoredResourceForeground#7d776c
  • gitDecoration.modifiedResourceForeground#ffa0a0
  • gitDecoration.untrackedResourceForeground#98fb98
  • input.background#333333
  • input.border#1c1c1c
  • input.foreground#cdbb9b
  • input.placeholderForeground#7d776c
  • inputOption.activeBorder#cd853f
  • inputValidation.errorBackground#333333
  • inputValidation.errorBorder#ff2b2b
  • inputValidation.errorForeground#ff2b2b
  • inputValidation.infoBackground#333333
  • inputValidation.infoBorder#cd853f
  • inputValidation.infoForeground#cd853f
  • inputValidation.warningBackground#333333
  • inputValidation.warningBorder#f0e68c
  • inputValidation.warningForeground#f0e68c
  • list.activeSelectionBackground#4d4d4d
  • list.activeSelectionForeground#cdbb9b
  • list.dropBackground#4d4d4d
  • list.errorForeground#ff2b2b
  • list.focusBackground#55555575
  • list.highlightForeground#ffa0a0
  • list.hoverBackground#55555575
  • list.inactiveSelectionBackground#55555575
  • list.warningForeground#f0e68c
  • listFilterWidget.background#333333
  • listFilterWidget.noMatchesOutline#ff2b2b
  • listFilterWidget.outline#4d4d4d
  • merge.currentHeaderBackground#98fb9890
  • merge.incomingHeaderBackground#cd853f90
  • notification.background#333333
  • notification.buttonBackground#4d4d4d
  • notification.buttonForeground#cdbb9b
  • notification.buttonHoverBackground#55555575
  • notification.errorBackground#ff2b2b
  • notification.errorForeground#333333
  • notification.foreground#cdbb9b
  • notification.infoBackground#cd853f
  • notification.infoForeground#333333
  • notification.warningBackground#f0e68c
  • notification.warningForeground#333333
  • notificationCenter.border#383838
  • notificationCenterHeader.background#333333
  • notificationCenterHeader.foreground#cdbb9b
  • notificationLink.foreground#ffa0a0
  • notifications.background#333333
  • notifications.border#383838
  • notifications.foreground#cdbb9b
  • notificationsErrorIcon.foreground#ff2b2b
  • notificationsInfoIcon.foreground#cd853f
  • notificationsWarningIcon.foreground#f0e68c
  • notificationToast.border#383838
  • panel.background#333333
  • panel.border#cd853f
  • panelInput.border#cdbb9b
  • panelTitle.activeBorder#ffdead
  • panelTitle.activeForeground#cdbb9b
  • panelTitle.inactiveForeground#7d776c
  • peekView.border#4d4d4d
  • peekViewEditor.background#333333
  • peekViewEditor.matchHighlightBackground#ffff5580
  • peekViewResult.background#383838
  • peekViewResult.fileForeground#cdbb9b
  • peekViewResult.lineForeground#cdbb9b
  • peekViewResult.matchHighlightBackground#ffff5580
  • peekViewResult.selectionBackground#4d4d4d
  • peekViewResult.selectionForeground#cdbb9b
  • peekViewTitle.background#1c1c1c
  • peekViewTitleDescription.foreground#7d776c
  • peekViewTitleLabel.foreground#cdbb9b
  • pickerGroup.border#cd853f
  • pickerGroup.foreground#ffa0a0
  • progressBar.background#ffdead
  • scrollbar.shadow#444444
  • selection.background#cd853f
  • settings.checkboxBackground#383838
  • settings.checkboxBorder#1c1c1c
  • settings.checkboxForeground#cdbb9b
  • settings.dropdownBackground#383838
  • settings.dropdownBorder#1c1c1c
  • settings.dropdownForeground#cdbb9b
  • settings.headerForeground#cdbb9b
  • settings.modifiedItemIndicator#f0e68c
  • settings.numberInputBackground#383838
  • settings.numberInputBorder#1c1c1c
  • settings.numberInputForeground#cdbb9b
  • settings.textInputBackground#383838
  • settings.textInputBorder#1c1c1c
  • settings.textInputForeground#cdbb9b
  • sideBar.background#383838
  • sideBarSectionHeader.background#333333
  • sideBarSectionHeader.border#1c1c1c
  • sideBarTitle.foreground#cdbb9b
  • statusBar.background#1c1c1c
  • statusBar.debuggingBackground#ff2b2b
  • statusBar.debuggingForeground#1c1c1c
  • statusBar.foreground#cdbb9b
  • statusBar.noFolderBackground#1c1c1c
  • statusBar.noFolderForeground#cdbb9b
  • statusBarItem.prominentBackground#ff2b2b
  • statusBarItem.prominentHoverBackground#f0e68c
  • statusBarItem.remoteBackground#cd853f
  • statusBarItem.remoteForeground#333333
  • tab.activeBackground#333333
  • tab.activeBorderTop#ffdead80
  • tab.activeForeground#cdbb9b
  • tab.border#1c1c1c
  • tab.inactiveBackground#383838
  • tab.inactiveForeground#7d776c
  • terminal.ansiBlack#4d4d4d
  • terminal.ansiBlue#cd853f
  • terminal.ansiBrightBlack#555555
  • terminal.ansiBrightBlue#87ceff
  • terminal.ansiBrightCyan#ffd700
  • terminal.ansiBrightGreen#55ff55
  • terminal.ansiBrightMagenta#ff55ff
  • terminal.ansiBrightRed#ff5555
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff55
  • terminal.ansiCyan#ffa0a0
  • terminal.ansiGreen#98fb98
  • terminal.ansiMagenta#ffdead
  • terminal.ansiRed#ff2b2b
  • terminal.ansiWhite#f5deb3
  • terminal.ansiYellow#f0e68c
  • terminal.background#333333
  • terminal.border#cdbb9b
  • terminal.foreground#cdbb9b
  • terminal.selectionBackground#4d4d4d50
  • textBlockQuote.background#383838
  • titleBar.activeBackground#383838
  • titleBar.activeForeground#cdbb9b
  • titleBar.inactiveBackground#1c1c1c
  • titleBar.inactiveForeground#7d776c
  • walkThrough.embeddedEditorBackground#383838
  • welcomePage.buttonBackground#4d4d4d
  • welcomePage.buttonHoverBackground#55555575
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#cd853f
source#cdbb9b
meta.diff, meta.diff.header#7d776c
markup.inserted#98fb98
markup.deleted#ff2b2b
markup.changed#f0e68c
invalid#ff2b2bunderline italic
invalid.deprecated#cdbb9bunderline italic
entity.name.filename#ffff55
markup.error#ff2b2b
markup.underlineunderline
markup.bold#f0e68cbold
markup.heading#cd853fbold
markup.italic#ffff55italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#ffa0a0
markup.inline.raw, markup.raw.restructuredtext#98fb98
markup.underline.link, markup.underline.link.image#ffa0a0
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ffdead
entity.name.directive.restructuredtext, markup.quote#ffff55italic
meta.separator.markdown#7d776c
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#98fb98
punctuation.definition.constant.restructuredtext#cd853f
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#cd853f
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#cdbb9b
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffff55
entity.name.type.class, entity.name.class#ffa0a0normal
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#cd853fitalic
entity.other.inherited-class#ffa0a0italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7d776c
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ffdead
comment.block.documentation entity.name.type#ffa0a0italic
comment.block.documentation entity.name.type punctuation.definition.bracket#ffa0a0
comment.block.documentation variable#f0e68citalic
constant, variable.other.constant#cd853f
constant.character.escape, constant.character.string.escape, constant.regexp#ffdead
entity.name.tag#ffdead
entity.other.attribute-name.parent-selector#ffdead
entity.other.attribute-name#98fb98italic
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#98fb98
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#f0e68citalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#98fb98italic
meta.decorator variable.other.object#98fb98
keyword, punctuation.definition.keyword#ffdead
keyword.control.new, keyword.operator.newbold
meta.selector#ffdead
support#ffa0a0italic
support.function.magic, support.variable, variable.other.predefined#cd853fregular
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#ffdead
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#cdbb9b
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#ffdead
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#ffa0a0
constant.other.date, constant.other.timestamp#f0e68c
variable.other.alias.yaml#98fb98italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ffdeadregular
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#ffa0a0italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#f0e68c
storage.modifier#ffdead
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffff55
punctuation.definition.group.capture.regexp#ffdead
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff2b2b
punctuation.definition.character-class.regexp#ffa0a0
punctuation.definition.group.regexp#f0e68c
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff2b2b
meta.assertion.look-ahead.regexp#98fb98
string#ffff55
punctuation.definition.string.begin, punctuation.definition.string.end#87ceff
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#cd853f
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#7d776c
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#cdbb9b
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#f0e68citalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#cdbb9bnormal
meta.selectionset.graphql variable#ffff55
meta.selectionset.graphql meta.arguments variable#cdbb9b
entity.name.fragment.graphql, variable.fragment.graphql#ffa0a0
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#cdbb9b
source.shell variable.other#cd853f
support.constant#cd853fnormal
meta.scope.prerequisites.makefile#ffff55
meta.attribute-selector.scss#ffff55
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#cdbb9b
meta.preprocessor.haskell#7d776c