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#63d0f010
  • activityBar.activeBorder#ce6fda80
  • activityBar.background#171717
  • activityBar.foreground#a1a1a1
  • activityBar.inactiveForeground#6e6e6e
  • activityBarBadge.background#ce6fda
  • activityBarBadge.foreground#171717
  • badge.background#4c4c4c
  • badge.foreground#a1a1a1
  • breadcrumb.activeSelectionForeground#a1a1a1
  • breadcrumb.background#171717
  • breadcrumb.focusForeground#a1a1a1
  • breadcrumb.foreground#6e6e6e
  • breadcrumbPicker.background#1c1c1c
  • button.background#383838
  • button.foreground#a1a1a1
  • checkbox.background#383838
  • checkbox.border#1c1c1c
  • checkbox.foreground#a1a1a1
  • contrastBorder#1c1c1c
  • debugToolBar.background#383838
  • diffEditor.insertedTextBackground#03f62220
  • diffEditor.removedTextBackground#bb000050
  • dropdown.background#171717
  • dropdown.border#1c1c1c
  • dropdown.foreground#a1a1a1
  • editor.background#171717
  • editor.findMatchBackground#f2f06780
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#55555575
  • editor.foldBackground#383838
  • editor.foreground#a1a1a1
  • editor.hoverHighlightBackground#1c1c1c
  • editor.lineHighlightBorder#4c4c4c
  • editor.rangeHighlightBackground#63d0f015
  • editor.selectionBackground#4c4c4c
  • editor.selectionHighlightBackground#4c4c4c
  • editor.snippetFinalTabstopHighlightBackground#171717
  • editor.snippetFinalTabstopHighlightBorder#03f622
  • editor.snippetTabstopHighlightBackground#171717
  • editor.snippetTabstopHighlightBorder#6e6e6e
  • editor.wordHighlightBackground#00d9df50
  • editor.wordHighlightStrongBackground#03f62250
  • editorCodeLens.foreground#6e6e6e
  • editorError.foreground#bb0000
  • editorGroup.border#63d0f0
  • editorGroup.dropBackground#55555570
  • editorGroupHeader.tabsBackground#1c1c1c
  • editorGutter.addedBackground#03f62280
  • editorGutter.deletedBackground#bb000080
  • editorGutter.modifiedBackground#00d9df80
  • editorHoverWidget.background#171717
  • editorHoverWidget.border#6e6e6e
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#6e6e6e
  • editorLink.activeForeground#00d9df
  • editorMarkerNavigation.background#383838
  • editorOverviewRuler.addedForeground#03f62280
  • editorOverviewRuler.border#1c1c1c
  • editorOverviewRuler.currentContentForeground#03f622
  • editorOverviewRuler.deletedForeground#bb000080
  • editorOverviewRuler.errorForeground#bb000080
  • editorOverviewRuler.incomingContentForeground#63d0f0
  • editorOverviewRuler.infoForeground#00d9df80
  • editorOverviewRuler.modifiedForeground#00d9df80
  • editorOverviewRuler.selectionHighlightForeground#f2f067
  • editorOverviewRuler.warningForeground#f2f06780
  • editorOverviewRuler.wordHighlightForeground#00d9df
  • editorOverviewRuler.wordHighlightStrongForeground#03f622
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#383838
  • editorSuggestWidget.foreground#a1a1a1
  • editorSuggestWidget.selectedBackground#4c4c4c
  • editorWarning.foreground#f2f067
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#383838
  • errorForeground#bb0000
  • extensionButton.prominentBackground#03f62290
  • extensionButton.prominentForeground#a1a1a1
  • extensionButton.prominentHoverBackground#03f62260
  • focusBorder#6e6e6e
  • foreground#a1a1a1
  • gitDecoration.conflictingResourceForeground#f2f067
  • gitDecoration.deletedResourceForeground#bb0000
  • gitDecoration.ignoredResourceForeground#6e6e6e
  • gitDecoration.modifiedResourceForeground#00d9df
  • gitDecoration.untrackedResourceForeground#03f622
  • input.background#171717
  • input.border#1c1c1c
  • input.foreground#a1a1a1
  • input.placeholderForeground#6e6e6e
  • inputOption.activeBorder#63d0f0
  • inputValidation.errorBackground#171717
  • inputValidation.errorBorder#bb0000
  • inputValidation.errorForeground#bb0000
  • inputValidation.infoBackground#171717
  • inputValidation.infoBorder#63d0f0
  • inputValidation.infoForeground#63d0f0
  • inputValidation.warningBackground#171717
  • inputValidation.warningBorder#f2f067
  • inputValidation.warningForeground#f2f067
  • list.activeSelectionBackground#4c4c4c
  • list.activeSelectionForeground#a1a1a1
  • list.dropBackground#4c4c4c
  • list.errorForeground#bb0000
  • list.focusBackground#55555575
  • list.highlightForeground#00d9df
  • list.hoverBackground#55555575
  • list.inactiveSelectionBackground#55555575
  • list.warningForeground#f2f067
  • listFilterWidget.background#171717
  • listFilterWidget.noMatchesOutline#bb0000
  • listFilterWidget.outline#4c4c4c
  • merge.currentHeaderBackground#03f62290
  • merge.incomingHeaderBackground#63d0f090
  • notification.background#171717
  • notification.buttonBackground#4c4c4c
  • notification.buttonForeground#a1a1a1
  • notification.buttonHoverBackground#55555575
  • notification.errorBackground#bb0000
  • notification.errorForeground#171717
  • notification.foreground#a1a1a1
  • notification.infoBackground#63d0f0
  • notification.infoForeground#171717
  • notification.warningBackground#f2f067
  • notification.warningForeground#171717
  • notificationCenter.border#383838
  • notificationCenterHeader.background#171717
  • notificationCenterHeader.foreground#a1a1a1
  • notificationLink.foreground#00d9df
  • notifications.background#171717
  • notifications.border#383838
  • notifications.foreground#a1a1a1
  • notificationsErrorIcon.foreground#bb0000
  • notificationsInfoIcon.foreground#63d0f0
  • notificationsWarningIcon.foreground#f2f067
  • notificationToast.border#383838
  • panel.background#171717
  • panel.border#63d0f0
  • panelInput.border#a1a1a1
  • panelTitle.activeBorder#ce6fda
  • panelTitle.activeForeground#a1a1a1
  • panelTitle.inactiveForeground#6e6e6e
  • peekView.border#4c4c4c
  • peekViewEditor.background#171717
  • peekViewEditor.matchHighlightBackground#ffff5580
  • peekViewResult.background#383838
  • peekViewResult.fileForeground#a1a1a1
  • peekViewResult.lineForeground#a1a1a1
  • peekViewResult.matchHighlightBackground#ffff5580
  • peekViewResult.selectionBackground#4c4c4c
  • peekViewResult.selectionForeground#a1a1a1
  • peekViewTitle.background#1c1c1c
  • peekViewTitleDescription.foreground#6e6e6e
  • peekViewTitleLabel.foreground#a1a1a1
  • pickerGroup.border#63d0f0
  • pickerGroup.foreground#00d9df
  • progressBar.background#ce6fda
  • scrollbar.shadow#444444
  • selection.background#63d0f0
  • settings.checkboxBackground#383838
  • settings.checkboxBorder#1c1c1c
  • settings.checkboxForeground#a1a1a1
  • settings.dropdownBackground#383838
  • settings.dropdownBorder#1c1c1c
  • settings.dropdownForeground#a1a1a1
  • settings.headerForeground#a1a1a1
  • settings.modifiedItemIndicator#f2f067
  • settings.numberInputBackground#383838
  • settings.numberInputBorder#1c1c1c
  • settings.numberInputForeground#a1a1a1
  • settings.textInputBackground#383838
  • settings.textInputBorder#1c1c1c
  • settings.textInputForeground#a1a1a1
  • sideBar.background#383838
  • sideBarSectionHeader.background#171717
  • sideBarSectionHeader.border#1c1c1c
  • sideBarTitle.foreground#a1a1a1
  • statusBar.background#1c1c1c
  • statusBar.debuggingBackground#bb0000
  • statusBar.debuggingForeground#1c1c1c
  • statusBar.foreground#a1a1a1
  • statusBar.noFolderBackground#1c1c1c
  • statusBar.noFolderForeground#a1a1a1
  • statusBarItem.prominentBackground#bb0000
  • statusBarItem.prominentHoverBackground#f2f067
  • statusBarItem.remoteBackground#63d0f0
  • statusBarItem.remoteForeground#171717
  • tab.activeBackground#171717
  • tab.activeBorderTop#ce6fda80
  • tab.activeForeground#a1a1a1
  • tab.border#1c1c1c
  • tab.inactiveBackground#383838
  • tab.inactiveForeground#6e6e6e
  • terminal.ansiBlack#4c4c4c
  • terminal.ansiBlue#63d0f0
  • terminal.ansiBrightBlack#555555
  • terminal.ansiBrightBlue#62cae7
  • terminal.ansiBrightCyan#00ccd7
  • terminal.ansiBrightGreen#7df61c
  • terminal.ansiBrightMagenta#ff9af5
  • terminal.ansiBrightRed#ff5555
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff55
  • terminal.ansiCyan#00d9df
  • terminal.ansiGreen#03f622
  • terminal.ansiMagenta#ce6fda
  • terminal.ansiRed#bb0000
  • terminal.ansiWhite#bbbbbb
  • terminal.ansiYellow#f2f067
  • terminal.background#171717
  • terminal.border#a1a1a1
  • terminal.foreground#a1a1a1
  • terminal.selectionBackground#4c4c4c50
  • textBlockQuote.background#383838
  • titleBar.activeBackground#383838
  • titleBar.activeForeground#a1a1a1
  • titleBar.inactiveBackground#1c1c1c
  • titleBar.inactiveForeground#6e6e6e
  • walkThrough.embeddedEditorBackground#383838
  • welcomePage.buttonBackground#4c4c4c
  • welcomePage.buttonHoverBackground#55555575
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#63d0f0
source#a1a1a1
meta.diff, meta.diff.header#6e6e6e
markup.inserted#03f622
markup.deleted#bb0000
markup.changed#f2f067
invalid#bb0000underline italic
invalid.deprecated#a1a1a1underline italic
entity.name.filename#ffff55
markup.error#bb0000
markup.underlineunderline
markup.bold#f2f067bold
markup.heading#63d0f0bold
markup.italic#ffff55italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#00d9df
markup.inline.raw, markup.raw.restructuredtext#03f622
markup.underline.link, markup.underline.link.image#00d9df
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ce6fda
entity.name.directive.restructuredtext, markup.quote#ffff55italic
meta.separator.markdown#6e6e6e
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#03f622
punctuation.definition.constant.restructuredtext#63d0f0
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#63d0f0
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#a1a1a1
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#00d9dfnormal
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#63d0f0italic
entity.other.inherited-class#00d9dfitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6e6e6e
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ce6fda
comment.block.documentation entity.name.type#00d9dfitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#00d9df
comment.block.documentation variable#f2f067italic
constant, variable.other.constant#63d0f0
constant.character.escape, constant.character.string.escape, constant.regexp#ce6fda
entity.name.tag#ce6fda
entity.other.attribute-name.parent-selector#ce6fda
entity.other.attribute-name#03f622italic
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#03f622
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#f2f067italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#03f622italic
meta.decorator variable.other.object#03f622
keyword, punctuation.definition.keyword#ce6fda
keyword.control.new, keyword.operator.newbold
meta.selector#ce6fda
support#00d9dfitalic
support.function.magic, support.variable, variable.other.predefined#63d0f0regular
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#ce6fda
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#a1a1a1
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#ce6fda
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#00d9df
constant.other.date, constant.other.timestamp#f2f067
variable.other.alias.yaml#03f622italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ce6fdaregular
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#00d9dfitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#f2f067
storage.modifier#ce6fda
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffff55
punctuation.definition.group.capture.regexp#ce6fda
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#bb0000
punctuation.definition.character-class.regexp#00d9df
punctuation.definition.group.regexp#f2f067
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#bb0000
meta.assertion.look-ahead.regexp#03f622
string#ffff55
punctuation.definition.string.begin, punctuation.definition.string.end#62cae7
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#63d0f0
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#6e6e6e
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#a1a1a1
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#f2f067italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#a1a1a1normal
meta.selectionset.graphql variable#ffff55
meta.selectionset.graphql meta.arguments variable#a1a1a1
entity.name.fragment.graphql, variable.fragment.graphql#00d9df
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#a1a1a1
source.shell variable.other#63d0f0
support.constant#63d0f0normal
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#a1a1a1
meta.preprocessor.haskell#6e6e6e
Tinted VSCode by Tinted Theming - VS Code Theme