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#4f96be10
  • activityBar.activeBorder#695abb80
  • activityBar.background#1c1e20
  • activityBar.foreground#c5c6c4
  • activityBar.inactiveForeground#545552
  • activityBarBadge.background#695abb
  • activityBarBadge.foreground#1c1e20
  • badge.background#1c1d19
  • badge.foreground#c5c6c4
  • breadcrumb.activeSelectionForeground#c5c6c4
  • breadcrumb.background#1c1e20
  • breadcrumb.focusForeground#c5c6c4
  • breadcrumb.foreground#545552
  • breadcrumbPicker.background#090908
  • button.background#121310
  • button.foreground#c5c6c4
  • checkbox.background#121310
  • checkbox.border#090908
  • checkbox.foreground#c5c6c4
  • contrastBorder#090908
  • debugToolBar.background#121310
  • diffEditor.insertedTextBackground#9ed26420
  • diffEditor.removedTextBackground#f1823850
  • dropdown.background#1c1e20
  • dropdown.border#090908
  • dropdown.foreground#c5c6c4
  • editor.background#1c1e20
  • editor.findMatchBackground#f3ef6d80
  • editor.findMatchHighlightBackground#fefffe40
  • editor.findRangeHighlightBackground#1c1d1975
  • editor.foldBackground#121310
  • editor.foreground#c5c6c4
  • editor.hoverHighlightBackground#090908
  • editor.lineHighlightBorder#1c1d19
  • editor.rangeHighlightBackground#4f96be15
  • editor.selectionBackground#1c1d19
  • editor.selectionHighlightBackground#1c1d19
  • editor.snippetFinalTabstopHighlightBackground#1c1e20
  • editor.snippetFinalTabstopHighlightBorder#9ed264
  • editor.snippetTabstopHighlightBackground#1c1e20
  • editor.snippetTabstopHighlightBorder#545552
  • editor.wordHighlightBackground#d5386450
  • editor.wordHighlightStrongBackground#9ed26450
  • editorCodeLens.foreground#545552
  • editorError.foreground#f18238
  • editorGroup.border#4f96be
  • editorGroup.dropBackground#1c1d1970
  • editorGroupHeader.tabsBackground#090908
  • editorGutter.addedBackground#9ed26480
  • editorGutter.deletedBackground#f1823880
  • editorGutter.modifiedBackground#d5386480
  • editorHoverWidget.background#1c1e20
  • editorHoverWidget.border#545552
  • editorIndentGuide.activeBackground#fefffe45
  • editorIndentGuide.background#fefffe1A
  • editorLineNumber.foreground#545552
  • editorLink.activeForeground#d53864
  • editorMarkerNavigation.background#121310
  • editorOverviewRuler.addedForeground#9ed26480
  • editorOverviewRuler.border#090908
  • editorOverviewRuler.currentContentForeground#9ed264
  • editorOverviewRuler.deletedForeground#f1823880
  • editorOverviewRuler.errorForeground#f1823880
  • editorOverviewRuler.incomingContentForeground#4f96be
  • editorOverviewRuler.infoForeground#d5386480
  • editorOverviewRuler.modifiedForeground#d5386480
  • editorOverviewRuler.selectionHighlightForeground#f3ef6d
  • editorOverviewRuler.warningForeground#f3ef6d80
  • editorOverviewRuler.wordHighlightForeground#d53864
  • editorOverviewRuler.wordHighlightStrongForeground#9ed264
  • editorRuler.foreground#fefffe1A
  • editorSuggestWidget.background#121310
  • editorSuggestWidget.foreground#c5c6c4
  • editorSuggestWidget.selectedBackground#1c1d19
  • editorWarning.foreground#f3ef6d
  • editorWhitespace.foreground#fefffe1A
  • editorWidget.background#121310
  • errorForeground#f18238
  • extensionButton.prominentBackground#9ed26490
  • extensionButton.prominentForeground#c5c6c4
  • extensionButton.prominentHoverBackground#9ed26460
  • focusBorder#545552
  • foreground#c5c6c4
  • gitDecoration.conflictingResourceForeground#f3ef6d
  • gitDecoration.deletedResourceForeground#f18238
  • gitDecoration.ignoredResourceForeground#545552
  • gitDecoration.modifiedResourceForeground#d53864
  • gitDecoration.untrackedResourceForeground#9ed264
  • input.background#1c1e20
  • input.border#090908
  • input.foreground#c5c6c4
  • input.placeholderForeground#545552
  • inputOption.activeBorder#4f96be
  • inputValidation.errorBackground#1c1e20
  • inputValidation.errorBorder#f18238
  • inputValidation.errorForeground#f18238
  • inputValidation.infoBackground#1c1e20
  • inputValidation.infoBorder#4f96be
  • inputValidation.infoForeground#4f96be
  • inputValidation.warningBackground#1c1e20
  • inputValidation.warningBorder#f3ef6d
  • inputValidation.warningForeground#f3ef6d
  • list.activeSelectionBackground#1c1d19
  • list.activeSelectionForeground#c5c6c4
  • list.dropBackground#1c1d19
  • list.errorForeground#f18238
  • list.focusBackground#1c1d1975
  • list.highlightForeground#d53864
  • list.hoverBackground#1c1d1975
  • list.inactiveSelectionBackground#1c1d1975
  • list.warningForeground#f3ef6d
  • listFilterWidget.background#1c1e20
  • listFilterWidget.noMatchesOutline#f18238
  • listFilterWidget.outline#1c1d19
  • merge.currentHeaderBackground#9ed26490
  • merge.incomingHeaderBackground#4f96be90
  • notification.background#1c1e20
  • notification.buttonBackground#1c1d19
  • notification.buttonForeground#c5c6c4
  • notification.buttonHoverBackground#1c1d1975
  • notification.errorBackground#f18238
  • notification.errorForeground#1c1e20
  • notification.foreground#c5c6c4
  • notification.infoBackground#4f96be
  • notification.infoForeground#1c1e20
  • notification.warningBackground#f3ef6d
  • notification.warningForeground#1c1e20
  • notificationCenter.border#121310
  • notificationCenterHeader.background#1c1e20
  • notificationCenterHeader.foreground#c5c6c4
  • notificationLink.foreground#d53864
  • notifications.background#1c1e20
  • notifications.border#121310
  • notifications.foreground#c5c6c4
  • notificationsErrorIcon.foreground#f18238
  • notificationsInfoIcon.foreground#4f96be
  • notificationsWarningIcon.foreground#f3ef6d
  • notificationToast.border#121310
  • panel.background#1c1e20
  • panel.border#4f96be
  • panelInput.border#c5c6c4
  • panelTitle.activeBorder#695abb
  • panelTitle.activeForeground#c5c6c4
  • panelTitle.inactiveForeground#545552
  • peekView.border#1c1d19
  • peekViewEditor.background#1c1e20
  • peekViewEditor.matchHighlightBackground#ff894880
  • peekViewResult.background#121310
  • peekViewResult.fileForeground#c5c6c4
  • peekViewResult.lineForeground#c5c6c4
  • peekViewResult.matchHighlightBackground#ff894880
  • peekViewResult.selectionBackground#1c1d19
  • peekViewResult.selectionForeground#c5c6c4
  • peekViewTitle.background#090908
  • peekViewTitleDescription.foreground#545552
  • peekViewTitleLabel.foreground#c5c6c4
  • pickerGroup.border#4f96be
  • pickerGroup.foreground#d53864
  • progressBar.background#695abb
  • scrollbar.shadow#444444
  • selection.background#4f96be
  • settings.checkboxBackground#121310
  • settings.checkboxBorder#090908
  • settings.checkboxForeground#c5c6c4
  • settings.dropdownBackground#121310
  • settings.dropdownBorder#090908
  • settings.dropdownForeground#c5c6c4
  • settings.headerForeground#c5c6c4
  • settings.modifiedItemIndicator#f3ef6d
  • settings.numberInputBackground#121310
  • settings.numberInputBorder#090908
  • settings.numberInputForeground#c5c6c4
  • settings.textInputBackground#121310
  • settings.textInputBorder#090908
  • settings.textInputForeground#c5c6c4
  • sideBar.background#121310
  • sideBarSectionHeader.background#1c1e20
  • sideBarSectionHeader.border#090908
  • sideBarTitle.foreground#c5c6c4
  • statusBar.background#090908
  • statusBar.debuggingBackground#f18238
  • statusBar.debuggingForeground#090908
  • statusBar.foreground#c5c6c4
  • statusBar.noFolderBackground#090908
  • statusBar.noFolderForeground#c5c6c4
  • statusBarItem.prominentBackground#f18238
  • statusBarItem.prominentHoverBackground#f3ef6d
  • statusBarItem.remoteBackground#4f96be
  • statusBarItem.remoteForeground#1c1e20
  • tab.activeBackground#1c1e20
  • tab.activeBorderTop#695abb80
  • tab.activeForeground#c5c6c4
  • tab.border#090908
  • tab.inactiveBackground#121310
  • tab.inactiveForeground#545552
  • terminal.ansiBlack#1c1d19
  • terminal.ansiBlue#4f96be
  • terminal.ansiBrightBlack#1c1d19
  • terminal.ansiBrightBlue#61b8d0
  • terminal.ansiBrightCyan#d53864
  • terminal.ansiBrightGreen#a7d32c
  • terminal.ansiBrightMagenta#695abb
  • terminal.ansiBrightRed#d12a24
  • terminal.ansiBrightWhite#fefffe
  • terminal.ansiBrightYellow#ff8948
  • terminal.ansiCyan#d53864
  • terminal.ansiGreen#9ed264
  • terminal.ansiMagenta#695abb
  • terminal.ansiRed#f18238
  • terminal.ansiWhite#fefffe
  • terminal.ansiYellow#f3ef6d
  • terminal.background#1c1e20
  • terminal.border#c5c6c4
  • terminal.foreground#c5c6c4
  • terminal.selectionBackground#1c1d1950
  • textBlockQuote.background#121310
  • titleBar.activeBackground#121310
  • titleBar.activeForeground#c5c6c4
  • titleBar.inactiveBackground#090908
  • titleBar.inactiveForeground#545552
  • walkThrough.embeddedEditorBackground#121310
  • welcomePage.buttonBackground#1c1d19
  • welcomePage.buttonHoverBackground#1c1d1975
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#4f96be
source#c5c6c4
meta.diff, meta.diff.header#545552
markup.inserted#9ed264
markup.deleted#f18238
markup.changed#f3ef6d
invalid#f18238underline italic
invalid.deprecated#c5c6c4underline italic
entity.name.filename#ff8948
markup.error#f18238
markup.underlineunderline
markup.bold#f3ef6dbold
markup.heading#4f96bebold
markup.italic#ff8948italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#d53864
markup.inline.raw, markup.raw.restructuredtext#9ed264
markup.underline.link, markup.underline.link.image#d53864
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#695abb
entity.name.directive.restructuredtext, markup.quote#ff8948italic
meta.separator.markdown#545552
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#9ed264
punctuation.definition.constant.restructuredtext#4f96be
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#4f96be
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#c5c6c4
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ff8948
entity.name.type.class, entity.name.class#d53864normal
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#4f96beitalic
entity.other.inherited-class#d53864italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#545552
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#695abb
comment.block.documentation entity.name.type#d53864italic
comment.block.documentation entity.name.type punctuation.definition.bracket#d53864
comment.block.documentation variable#f3ef6ditalic
constant, variable.other.constant#4f96be
constant.character.escape, constant.character.string.escape, constant.regexp#695abb
entity.name.tag#695abb
entity.other.attribute-name.parent-selector#695abb
entity.other.attribute-name#9ed264italic
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#9ed264
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#f3ef6ditalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#9ed264italic
meta.decorator variable.other.object#9ed264
keyword, punctuation.definition.keyword#695abb
keyword.control.new, keyword.operator.newbold
meta.selector#695abb
support#d53864italic
support.function.magic, support.variable, variable.other.predefined#4f96beregular
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#695abb
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#c5c6c4
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#695abb
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#d53864
constant.other.date, constant.other.timestamp#f3ef6d
variable.other.alias.yaml#9ed264italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#695abbregular
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#d53864italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#f3ef6d
storage.modifier#695abb
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ff8948
punctuation.definition.group.capture.regexp#695abb
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#f18238
punctuation.definition.character-class.regexp#d53864
punctuation.definition.group.regexp#f3ef6d
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#f18238
meta.assertion.look-ahead.regexp#9ed264
string#ff8948
punctuation.definition.string.begin, punctuation.definition.string.end#61b8d0
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#4f96be
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#545552
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#c5c6c4
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#f3ef6ditalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#c5c6c4normal
meta.selectionset.graphql variable#ff8948
meta.selectionset.graphql meta.arguments variable#c5c6c4
entity.name.fragment.graphql, variable.fragment.graphql#d53864
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#c5c6c4
source.shell variable.other#4f96be
support.constant#4f96benormal
meta.scope.prerequisites.makefile#ff8948
meta.attribute-selector.scss#ff8948
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#c5c6c4
meta.preprocessor.haskell#545552
Tinted VSCode by Tinted Theming - VS Code Theme