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#356e8a10
  • activityBar.activeBorder#6e568980
  • activityBar.background#f5f7f2
  • activityBar.foreground#2d302b
  • activityBar.inactiveForeground#687161
  • activityBarBadge.background#6e5689
  • activityBarBadge.foreground#f5f7f2
  • badge.background#ecefe7
  • badge.foreground#2d302b
  • breadcrumb.activeSelectionForeground#2d302b
  • breadcrumb.background#f5f7f2
  • breadcrumb.focusForeground#2d302b
  • breadcrumb.foreground#687161
  • breadcrumbPicker.background#ffffff
  • button.background#fcfcfa
  • button.foreground#2d302b
  • checkbox.background#fcfcfa
  • checkbox.border#ffffff
  • checkbox.foreground#2d302b
  • contrastBorder#ffffff
  • debugToolBar.background#fcfcfa
  • diffEditor.insertedTextBackground#2f746220
  • diffEditor.removedTextBackground#a3474050
  • dropdown.background#f5f7f2
  • dropdown.border#ffffff
  • dropdown.foreground#2d302b
  • editor.background#f5f7f2
  • editor.findMatchBackground#8b5d2780
  • editor.findMatchHighlightBackground#15161340
  • editor.findRangeHighlightBackground#cfe4ae75
  • editor.foldBackground#fcfcfa
  • editor.foreground#2d302b
  • editor.hoverHighlightBackground#ffffff
  • editor.lineHighlightBorder#ecefe7
  • editor.rangeHighlightBackground#356e8a15
  • editor.selectionBackground#ecefe7
  • editor.selectionHighlightBackground#ecefe7
  • editor.snippetFinalTabstopHighlightBackground#f5f7f2
  • editor.snippetFinalTabstopHighlightBorder#2f7462
  • editor.snippetTabstopHighlightBackground#f5f7f2
  • editor.snippetTabstopHighlightBorder#687161
  • editor.wordHighlightBackground#35656950
  • editor.wordHighlightStrongBackground#2f746250
  • editorCodeLens.foreground#687161
  • editorError.foreground#a34740
  • editorGroup.border#356e8a
  • editorGroup.dropBackground#cfe4ae70
  • editorGroupHeader.tabsBackground#ffffff
  • editorGutter.addedBackground#2f746280
  • editorGutter.deletedBackground#a3474080
  • editorGutter.modifiedBackground#35656980
  • editorHoverWidget.background#f5f7f2
  • editorHoverWidget.border#687161
  • editorIndentGuide.activeBackground#15161345
  • editorIndentGuide.background#1516131A
  • editorLineNumber.foreground#687161
  • editorLink.activeForeground#356569
  • editorMarkerNavigation.background#fcfcfa
  • editorOverviewRuler.addedForeground#2f746280
  • editorOverviewRuler.border#ffffff
  • editorOverviewRuler.currentContentForeground#2f7462
  • editorOverviewRuler.deletedForeground#a3474080
  • editorOverviewRuler.errorForeground#a3474080
  • editorOverviewRuler.incomingContentForeground#356e8a
  • editorOverviewRuler.infoForeground#35656980
  • editorOverviewRuler.modifiedForeground#35656980
  • editorOverviewRuler.selectionHighlightForeground#8b5d27
  • editorOverviewRuler.warningForeground#8b5d2780
  • editorOverviewRuler.wordHighlightForeground#356569
  • editorOverviewRuler.wordHighlightStrongForeground#2f7462
  • editorRuler.foreground#1516131A
  • editorSuggestWidget.background#fcfcfa
  • editorSuggestWidget.foreground#2d302b
  • editorSuggestWidget.selectedBackground#ecefe7
  • editorWarning.foreground#8b5d27
  • editorWhitespace.foreground#1516131A
  • editorWidget.background#fcfcfa
  • errorForeground#a34740
  • extensionButton.prominentBackground#2f746290
  • extensionButton.prominentForeground#2d302b
  • extensionButton.prominentHoverBackground#2f746260
  • focusBorder#687161
  • foreground#2d302b
  • gitDecoration.conflictingResourceForeground#8b5d27
  • gitDecoration.deletedResourceForeground#a34740
  • gitDecoration.ignoredResourceForeground#687161
  • gitDecoration.modifiedResourceForeground#356569
  • gitDecoration.untrackedResourceForeground#2f7462
  • input.background#f5f7f2
  • input.border#ffffff
  • input.foreground#2d302b
  • input.placeholderForeground#687161
  • inputOption.activeBorder#356e8a
  • inputValidation.errorBackground#f5f7f2
  • inputValidation.errorBorder#a34740
  • inputValidation.errorForeground#a34740
  • inputValidation.infoBackground#f5f7f2
  • inputValidation.infoBorder#356e8a
  • inputValidation.infoForeground#356e8a
  • inputValidation.warningBackground#f5f7f2
  • inputValidation.warningBorder#8b5d27
  • inputValidation.warningForeground#8b5d27
  • list.activeSelectionBackground#ecefe7
  • list.activeSelectionForeground#2d302b
  • list.dropBackground#ecefe7
  • list.errorForeground#a34740
  • list.focusBackground#cfe4ae75
  • list.highlightForeground#356569
  • list.hoverBackground#cfe4ae75
  • list.inactiveSelectionBackground#cfe4ae75
  • list.warningForeground#8b5d27
  • listFilterWidget.background#f5f7f2
  • listFilterWidget.noMatchesOutline#a34740
  • listFilterWidget.outline#ecefe7
  • merge.currentHeaderBackground#2f746290
  • merge.incomingHeaderBackground#356e8a90
  • notification.background#f5f7f2
  • notification.buttonBackground#ecefe7
  • notification.buttonForeground#2d302b
  • notification.buttonHoverBackground#cfe4ae75
  • notification.errorBackground#a34740
  • notification.errorForeground#f5f7f2
  • notification.foreground#2d302b
  • notification.infoBackground#356e8a
  • notification.infoForeground#f5f7f2
  • notification.warningBackground#8b5d27
  • notification.warningForeground#f5f7f2
  • notificationCenter.border#fcfcfa
  • notificationCenterHeader.background#f5f7f2
  • notificationCenterHeader.foreground#2d302b
  • notificationLink.foreground#356569
  • notifications.background#f5f7f2
  • notifications.border#fcfcfa
  • notifications.foreground#2d302b
  • notificationsErrorIcon.foreground#a34740
  • notificationsInfoIcon.foreground#356e8a
  • notificationsWarningIcon.foreground#8b5d27
  • notificationToast.border#fcfcfa
  • panel.background#f5f7f2
  • panel.border#356e8a
  • panelInput.border#2d302b
  • panelTitle.activeBorder#6e5689
  • panelTitle.activeForeground#2d302b
  • panelTitle.inactiveForeground#687161
  • peekView.border#ecefe7
  • peekViewEditor.background#f5f7f2
  • peekViewEditor.matchHighlightBackground#875e2080
  • peekViewResult.background#fcfcfa
  • peekViewResult.fileForeground#2d302b
  • peekViewResult.lineForeground#2d302b
  • peekViewResult.matchHighlightBackground#875e2080
  • peekViewResult.selectionBackground#ecefe7
  • peekViewResult.selectionForeground#2d302b
  • peekViewTitle.background#ffffff
  • peekViewTitleDescription.foreground#687161
  • peekViewTitleLabel.foreground#2d302b
  • pickerGroup.border#356e8a
  • pickerGroup.foreground#356569
  • progressBar.background#6e5689
  • scrollbar.shadow#444444
  • selection.background#356e8a
  • settings.checkboxBackground#fcfcfa
  • settings.checkboxBorder#ffffff
  • settings.checkboxForeground#2d302b
  • settings.dropdownBackground#fcfcfa
  • settings.dropdownBorder#ffffff
  • settings.dropdownForeground#2d302b
  • settings.headerForeground#2d302b
  • settings.modifiedItemIndicator#8b5d27
  • settings.numberInputBackground#fcfcfa
  • settings.numberInputBorder#ffffff
  • settings.numberInputForeground#2d302b
  • settings.textInputBackground#fcfcfa
  • settings.textInputBorder#ffffff
  • settings.textInputForeground#2d302b
  • sideBar.background#fcfcfa
  • sideBarSectionHeader.background#f5f7f2
  • sideBarSectionHeader.border#ffffff
  • sideBarTitle.foreground#2d302b
  • statusBar.background#ffffff
  • statusBar.debuggingBackground#a34740
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#2d302b
  • statusBar.noFolderBackground#ffffff
  • statusBar.noFolderForeground#2d302b
  • statusBarItem.prominentBackground#a34740
  • statusBarItem.prominentHoverBackground#8b5d27
  • statusBarItem.remoteBackground#356e8a
  • statusBarItem.remoteForeground#f5f7f2
  • tab.activeBackground#f5f7f2
  • tab.activeBorderTop#6e568980
  • tab.activeForeground#2d302b
  • tab.border#ffffff
  • tab.inactiveBackground#fcfcfa
  • tab.inactiveForeground#687161
  • terminal.ansiBlack#ecefe7
  • terminal.ansiBlue#356e8a
  • terminal.ansiBrightBlack#cfe4ae
  • terminal.ansiBrightBlue#3b6d86
  • terminal.ansiBrightCyan#3f6464
  • terminal.ansiBrightGreen#506b29
  • terminal.ansiBrightMagenta#8a4f67
  • terminal.ansiBrightRed#a34740
  • terminal.ansiBrightWhite#151613
  • terminal.ansiBrightYellow#875e20
  • terminal.ansiCyan#356569
  • terminal.ansiGreen#2f7462
  • terminal.ansiMagenta#6e5689
  • terminal.ansiRed#a34740
  • terminal.ansiWhite#232420
  • terminal.ansiYellow#8b5d27
  • terminal.background#f5f7f2
  • terminal.border#2d302b
  • terminal.foreground#2d302b
  • terminal.selectionBackground#ecefe750
  • textBlockQuote.background#fcfcfa
  • titleBar.activeBackground#fcfcfa
  • titleBar.activeForeground#2d302b
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#687161
  • walkThrough.embeddedEditorBackground#fcfcfa
  • welcomePage.buttonBackground#ecefe7
  • welcomePage.buttonHoverBackground#cfe4ae75
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#356e8a
source#2d302b
meta.diff, meta.diff.header#687161
markup.inserted#2f7462
markup.deleted#a34740
markup.changed#8b5d27
invalid#a34740underline italic
invalid.deprecated#2d302bunderline italic
entity.name.filename#875e20
markup.error#a34740
markup.underlineunderline
markup.bold#8b5d27bold
markup.heading#356e8abold
markup.italic#875e20italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#356569
markup.inline.raw, markup.raw.restructuredtext#2f7462
markup.underline.link, markup.underline.link.image#356569
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#6e5689
entity.name.directive.restructuredtext, markup.quote#875e20italic
meta.separator.markdown#687161
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#2f7462
punctuation.definition.constant.restructuredtext#356e8a
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#356e8a
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#2d302b
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#875e20
entity.name.type.class, entity.name.class#356569normal
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#356e8aitalic
entity.other.inherited-class#356569italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#687161
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#6e5689
comment.block.documentation entity.name.type#356569italic
comment.block.documentation entity.name.type punctuation.definition.bracket#356569
comment.block.documentation variable#8b5d27italic
constant, variable.other.constant#356e8a
constant.character.escape, constant.character.string.escape, constant.regexp#6e5689
entity.name.tag#6e5689
entity.other.attribute-name.parent-selector#6e5689
entity.other.attribute-name#2f7462italic
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#2f7462
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#8b5d27italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#2f7462italic
meta.decorator variable.other.object#2f7462
keyword, punctuation.definition.keyword#6e5689
keyword.control.new, keyword.operator.newbold
meta.selector#6e5689
support#356569italic
support.function.magic, support.variable, variable.other.predefined#356e8aregular
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#6e5689
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#2d302b
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#6e5689
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#356569
constant.other.date, constant.other.timestamp#8b5d27
variable.other.alias.yaml#2f7462italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#6e5689regular
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#356569italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#8b5d27
storage.modifier#6e5689
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#875e20
punctuation.definition.group.capture.regexp#6e5689
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#a34740
punctuation.definition.character-class.regexp#356569
punctuation.definition.group.regexp#8b5d27
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#a34740
meta.assertion.look-ahead.regexp#2f7462
string#875e20
punctuation.definition.string.begin, punctuation.definition.string.end#506b29
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#356e8a
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#687161
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#2d302b
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#8b5d27italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#2d302bnormal
meta.selectionset.graphql variable#875e20
meta.selectionset.graphql meta.arguments variable#2d302b
entity.name.fragment.graphql, variable.fragment.graphql#356569
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#2d302b
source.shell variable.other#356e8a
support.constant#356e8anormal
meta.scope.prerequisites.makefile#875e20
meta.attribute-selector.scss#875e20
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#2d302b
meta.preprocessor.haskell#687161
Tinted VSCode by Tinted Theming - VS Code Theme