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.activeBorder#00AD9E
  • activityBar.background#E3E4EB
  • activityBar.foreground#0E1E25
  • activityBar.inactiveForeground#616C7A
  • activityBarBadge.background#00AD9E
  • activityBarBadge.foreground#0E1E25
  • badge.background#A6ACBA
  • badge.foreground#0E1E25
  • breadcrumb.activeSelectionForeground#0E1E25
  • breadcrumb.background#FFFFFF
  • breadcrumb.focusForeground#0E1E25
  • breadcrumb.foreground#616C7A
  • breadcrumbPicker.background#FFFFFF
  • button.background#A6ACBA
  • button.foreground#0E1E25
  • contrastBorder#FFFFFF
  • debugToolBar.background#EEEFF2
  • diffEditor.insertedTextBackground#7BA63B20
  • diffEditor.removedTextBackground#D0474750
  • dropdown.background#E3E4EB
  • dropdown.border#FFFFFF
  • dropdown.foreground#0E1E25
  • editor.background#FFFFFF
  • editor.findMatchBackground#E1753380
  • editor.findMatchHighlightBackground#0E1E2540
  • editor.findRangeHighlightBackground#D3D6DF
  • editor.foldBackground#EEEFF2
  • editor.foreground#0E1E25
  • editor.hoverHighlightBackground#FFFFFF
  • editor.lineHighlightBackground#E3E4EB
  • editor.rangeHighlightBackground#6749D015
  • editor.selectionBackground#A6ACBA
  • editor.selectionHighlightBackground#D3D6DF
  • editor.snippetFinalTabstopHighlightBackground#FFFFFF
  • editor.snippetFinalTabstopHighlightBorder#7BA63B
  • editor.snippetTabstopHighlightBackground#FFFFFF
  • editor.snippetTabstopHighlightBorder#616C7A
  • editor.wordHighlightBackground#00978F50
  • editor.wordHighlightStrongBackground#7BA63B50
  • editorCodeLens.foreground#616C7A
  • editorError.foreground#D04747
  • editorGroup.background#FFFFFF
  • editorGroup.border#BCC0CD
  • editorGroup.dropBackground#EEEFF2
  • editorGroupHeader.noTabsBackground#EEEFF2
  • editorGroupHeader.tabsBackground#FFFFFF
  • editorGroupHeader.tabsBorder#FFFFFF
  • editorGutter.addedBackground#7BA63B80
  • editorGutter.deletedBackground#D0474780
  • editorGutter.modifiedBackground#00978F80
  • editorHoverWidget.background#FFFFFF
  • editorHoverWidget.border#616C7A
  • editorIndentGuide.activeBackground#0E1E2545
  • editorIndentGuide.background#0E1E2510
  • editorLineNumber.foreground#616C7A
  • editorLink.activeForeground#00978F
  • editorMarkerNavigation.background#EEEFF2
  • editorOverviewRuler.addedForeground#7BA63B80
  • editorOverviewRuler.border#FFFFFF
  • editorOverviewRuler.currentContentForeground#7BA63B
  • editorOverviewRuler.deletedForeground#D0474780
  • editorOverviewRuler.errorForeground#D0474780
  • editorOverviewRuler.incomingContentForeground#6749D0
  • editorOverviewRuler.infoForeground#00978F80
  • editorOverviewRuler.modifiedForeground#00978F80
  • editorOverviewRuler.selectionHighlightForeground#E17533
  • editorOverviewRuler.warningForeground#E1753380
  • editorOverviewRuler.wordHighlightForeground#00978F
  • editorOverviewRuler.wordHighlightStrongForeground#7BA63B
  • editorRuler.foreground#0E1E2510
  • editorSuggestWidget.background#EEEFF2
  • editorSuggestWidget.foreground#0E1E25
  • editorSuggestWidget.selectedBackground#A6ACBA
  • editorWarning.foreground#E3A323
  • editorWhitespace.foreground#0E1E2510
  • editorWidget.background#E3E4EB
  • errorForeground#D04747
  • extensionButton.prominentBackground#7BA63B90
  • extensionButton.prominentForeground#0E1E25
  • extensionButton.prominentHoverBackground#7BA63B60
  • focusBorder#FFFFFF00
  • foreground#0E1E25
  • gitDecoration.conflictingResourceForeground#E17533
  • gitDecoration.deletedResourceForeground#D04747
  • gitDecoration.ignoredResourceForeground#616C7A
  • gitDecoration.modifiedResourceForeground#00978F
  • gitDecoration.untrackedResourceForeground#7BA63B
  • input.background#FFFFFF
  • input.border#FFFFFF
  • input.foreground#0E1E25
  • input.placeholderForeground#616C7A
  • inputOption.activeBorder#00AD9E
  • inputValidation.errorBorder#D04747
  • inputValidation.infoBorder#6749D0
  • inputValidation.warningBorder#E3A323
  • list.activeSelectionBackground#A6ACBA
  • list.activeSelectionForeground#0E1E25
  • list.dropBackground#A6ACBA
  • list.errorForeground#D04747
  • list.focusBackground#D3D6DF
  • list.highlightForeground#00978F
  • list.hoverBackground#D3D6DF
  • list.inactiveSelectionBackground#D3D6DF
  • list.warningForeground#E17533
  • listFilterWidget.background#E3E4EB
  • listFilterWidget.noMatchesOutline#D04747
  • listFilterWidget.outline#D3D6DF
  • merge.currentHeaderBackground#7BA63B90
  • merge.incomingHeaderBackground#6749D090
  • notification.background#FFFFFF
  • notification.buttonBackground#A6ACBA
  • notification.buttonForeground#0E1E25
  • notification.buttonHoverBackground#D3D6DF
  • notification.errorBackground#D04747
  • notification.errorForeground#0E1E25
  • notification.foreground#0E1E25
  • notification.infoBackground#00978F
  • notification.infoForeground#FFFFFF
  • notification.warningBackground#E17533
  • notification.warningForeground#FFFFFF
  • panel.background#FFFFFF
  • panel.border#BCC0CD
  • panelTitle.activeBorder#00AD9E
  • panelTitle.activeForeground#0E1E25
  • panelTitle.inactiveForeground#616C7A
  • peekView.border#A6ACBA
  • peekViewEditor.background#FFFFFF
  • peekViewEditor.matchHighlightBackground#E3A32380
  • peekViewResult.background#EEEFF2
  • peekViewResult.fileForeground#0E1E25
  • peekViewResult.lineForeground#0E1E25
  • peekViewResult.matchHighlightBackground#E3A32380
  • peekViewResult.selectionBackground#A6ACBA
  • peekViewResult.selectionForeground#0E1E25
  • peekViewTitle.background#FFFFFF
  • peekViewTitleDescription.foreground#616C7A
  • peekViewTitleLabel.foreground#0E1E25
  • pickerGroup.border#BCC0CD
  • pickerGroup.foreground#00978F
  • progressBar.background#00AD9E
  • selection.background#00AD9E
  • settings.checkboxBackground#E3E4EB
  • settings.checkboxBorder#E3E4EB
  • settings.checkboxForeground#0E1E25
  • settings.dropdownBackground#E3E4EB
  • settings.dropdownBorder#E3E4EB
  • settings.dropdownForeground#0E1E25
  • settings.headerForeground#0E1E25
  • settings.modifiedItemForeground#00AD9E
  • settings.modifiedItemIndicator#00AD9E
  • settings.numberInputBackground#E3E4EB
  • settings.numberInputBorder#E3E4EB
  • settings.numberInputForeground#0E1E25
  • settings.textInputBackground#E3E4EB
  • settings.textInputBorder#BCC0CD
  • settings.textInputForeground#0E1E25
  • sideBar.background#EEEFF2
  • sideBarSectionHeader.background#EEEFF2
  • sideBarSectionHeader.border#BCC0CD
  • sideBarTitle.foreground#0E1E25
  • statusBar.background#E3E4EB
  • statusBar.border#BCC0CD
  • statusBar.debuggingBackground#D04747
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#0E1E25
  • statusBar.noFolderBackground#FFFFFF
  • statusBar.noFolderForeground#0E1E25
  • statusBarItem.prominentBackground#D04747
  • statusBarItem.prominentHoverBackground#E17533
  • statusBarItem.remoteBackground#6749D0
  • statusBarItem.remoteForeground#0E1E25
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#00AD9E
  • tab.activeForeground#0E1E25
  • tab.border#FFFFFF
  • tab.inactiveBackground#FFFFFF
  • tab.inactiveForeground#616C7A
  • terminal.ansiBlack#E3E4EB
  • terminal.ansiBlue#6749D0
  • terminal.ansiBrightBlack#616C7A
  • terminal.ansiBrightBlue#BAA6FF
  • terminal.ansiBrightCyan#78F0E6
  • terminal.ansiBrightGreen#CDECA1
  • terminal.ansiBrightMagenta#F5A8E3
  • terminal.ansiBrightRed#FFA5A5
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFE98D
  • terminal.ansiCyan#00978F
  • terminal.ansiGreen#7BA63B
  • terminal.ansiMagenta#B74A9D
  • terminal.ansiRed#D04747
  • terminal.ansiWhite#0E1E25
  • terminal.ansiYellow#E3A323
  • terminal.background#FFFFFF
  • terminal.foreground#0E1E25
  • titleBar.activeBackground#D3D6DF
  • titleBar.activeForeground#0E1E25
  • titleBar.inactiveBackground#E3E4EB
  • titleBar.inactiveForeground#616C7A
  • walkThrough.embeddedEditorBackground#EEEFF2
  • widget.shadow#0E1E2501

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#6749D0
source#0E1E25
meta.diff, meta.diff.header#616C7A
markup.inserted#7BA63B
markup.deleted#D04747
markup.changed#E17533
invalid#D04747underline italic
invalid.deprecated#0E1E25underline italic
entity.name.filename#E3A323
markup.error#D04747
markup.underlineunderline
markup.bold#E17533bold
markup.heading#6749D0bold
markup.italic#E3A323italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#00978F
markup.inline.raw, markup.raw.restructuredtext#7BA63B
markup.underline.link, markup.underline.link.image#00978F
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#B74A9D
entity.name.directive.restructuredtext, markup.quote#E3A323italic
meta.separator.markdown#616C7A
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#7BA63B
punctuation.definition.constant.restructuredtext#6749D0
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#6749D0
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#0E1E25
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#E3A323
entity.name.type.class, entity.name.class#00978Fnormal
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#6749D0italic
entity.other.inherited-class#00978Fitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#616C7A
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#B74A9D
comment.block.documentation entity.name.type#00978Fitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#00978F
comment.block.documentation variable#E17533italic
constant, variable.other.constant#0E1E25
constant.character.escape, constant.character.string.escape, constant.regexp#B74A9D
entity.name.tag#E3A323
entity.other.attribute-name.parent-selector#B74A9D
entity.other.attribute-name#3D7BDEitalic
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#E3A323
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#E17533italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#E3A323italic
meta.decorator variable.other.object#E3A323
keyword, punctuation.definition.keyword#00978F
keyword.control.new, keyword.operator.newbold
meta.selector#B74A9D
support#E3A323italic
support.function.magic, support.variable, variable.other.predefined#6749D0regular
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#0E1E25
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#0E1E25
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#B74A9D
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#00978F
constant.other.date, constant.other.timestamp#E17533
variable.other.alias.yaml#7BA63Bitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#B74A9Dregular
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#00978Fitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#E17533
storage.modifier#B74A9D
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#E3A323
punctuation.definition.group.capture.regexp#B74A9D
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#D04747
punctuation.definition.character-class.regexp#00978F
punctuation.definition.group.regexp#E17533
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#D04747
meta.assertion.look-ahead.regexp#7BA63B
string#6749D0
punctuation.definition.string.begin, punctuation.definition.string.end#7BA63B
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#00978F
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#616C7A
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#0E1E25
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#E17533italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#0E1E25normal
meta.selectionset.graphql variable#E3A323
meta.selectionset.graphql meta.arguments variable#0E1E25
entity.name.fragment.graphql, variable.fragment.graphql#00978F
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#0E1E25
source.shell variable.other#6749D0
support.constant#6749D0normal
meta.scope.prerequisites.makefile#E3A323
meta.attribute-selector.scss#E3A323
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#0E1E25
meta.preprocessor.haskell#616C7A
Netlify Theme by Austin Condiff - VS Code Theme