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#d8d37a10
  • activityBar.activeBorder#95cf7980
  • activityBar.background#1a224e
  • activityBar.foreground#d3e0f0
  • activityBar.inactiveForeground#707aae
  • activityBarBadge.background#95cf79
  • activityBarBadge.foreground#1a224e
  • badge.background#95cf79
  • badge.foreground#1a224e
  • breadcrumb.activeSelectionForeground#d3e0f0
  • breadcrumb.background#1a224e
  • breadcrumb.focusForeground#d3e0f0
  • breadcrumb.foreground#707aae
  • breadcrumbPicker.background#10173d
  • button.background#3f6aaa
  • button.foreground#eef4fb
  • button.secondaryBackground#1a224e
  • button.secondaryForeground#d3e0f0
  • button.secondaryHoverBackground#263361
  • debugToolBar.background#141c43
  • diffEditor.insertedTextBackground#95cf7920
  • diffEditor.removedTextBackground#d9897050
  • dropdown.background#263361
  • dropdown.border#10173d
  • dropdown.foreground#d3e0f0
  • editor.background#1a224e
  • editor.findMatchBackground#e1b87a80
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#202c6680
  • editor.foldBackground#141c4380
  • editor.foreground#d3e0f0
  • editor.hoverHighlightBackground#98bee250
  • editor.lineHighlightBackground#202c6680
  • editor.rangeHighlightBackground#a179d015
  • editor.selectionBackground#202c66
  • editor.selectionHighlightBackground#293671
  • editor.snippetFinalTabstopHighlightBackground#1a224e
  • editor.snippetFinalTabstopHighlightBorder#95cf79
  • editor.snippetTabstopHighlightBackground#1a224e
  • editor.snippetTabstopHighlightBorder#707aae
  • editor.wordHighlightBackground#98bee250
  • editor.wordHighlightStrongBackground#95cf7950
  • editorBracketHighlight.foreground1#d3e0f0
  • editorBracketHighlight.foreground2#699ccf
  • editorBracketHighlight.foreground3#98bee2
  • editorBracketHighlight.foreground4#95cf79
  • editorBracketHighlight.foreground5#a179d0
  • editorBracketHighlight.foreground6#e1b87a
  • editorBracketHighlight.unexpectedBracket.foreground#d98970
  • editorCodeLens.foreground#707aae
  • editorError.foreground#d98970
  • editorGroup.border#202c66
  • editorGroup.dropBackground#202c6670
  • editorGroupHeader.tabsBackground#10173d
  • editorGutter.addedBackground#95cf7980
  • editorGutter.deletedBackground#d9897080
  • editorGutter.modifiedBackground#98bee280
  • editorHoverWidget.background#1a224e
  • editorHoverWidget.border#707aae
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorInfo.foreground#98bee2
  • editorLineNumber.foreground#707aae
  • editorLink.activeForeground#98bee2
  • editorMarkerNavigation.background#141c43
  • editorOverviewRuler.addedForeground#95cf7980
  • editorOverviewRuler.border#10173d
  • editorOverviewRuler.currentContentForeground#95cf79
  • editorOverviewRuler.deletedForeground#d9897080
  • editorOverviewRuler.errorForeground#d9897080
  • editorOverviewRuler.incomingContentForeground#a179d0
  • editorOverviewRuler.infoForeground#98bee280
  • editorOverviewRuler.modifiedForeground#98bee280
  • editorOverviewRuler.selectionHighlightForeground#e1b87a
  • editorOverviewRuler.warningForeground#e1b87a80
  • editorOverviewRuler.wordHighlightForeground#98bee2
  • editorOverviewRuler.wordHighlightStrongForeground#95cf79
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#141c43
  • editorSuggestWidget.foreground#d3e0f0
  • editorSuggestWidget.selectedBackground#202c66
  • editorWarning.foreground#e1b87a
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#141c43
  • errorForeground#d98970
  • extensionButton.prominentBackground#3f6aaa
  • extensionButton.prominentForeground#eef4fb
  • extensionButton.prominentHoverBackground#3f6aaa90
  • focusBorder#707aae
  • foreground#d3e0f0
  • gitDecoration.addedResourceForeground#95cf79
  • gitDecoration.conflictingResourceForeground#e1b87a
  • gitDecoration.deletedResourceForeground#d98970
  • gitDecoration.ignoredResourceForeground#707aae
  • gitDecoration.modifiedResourceForeground#98bee2
  • gitDecoration.untrackedResourceForeground#95cf79
  • input.background#1a224e
  • input.border#10173d
  • input.foreground#d3e0f0
  • input.placeholderForeground#707aae
  • inputOption.activeBorder#a179d0
  • inputValidation.errorBorder#d98970
  • inputValidation.infoBorder#87b7e5
  • inputValidation.warningBorder#e1b87a
  • list.activeSelectionBackground#202c66
  • list.activeSelectionForeground#d3e0f0
  • list.dropBackground#202c66
  • list.errorForeground#d98970
  • list.focusBackground#202c6680
  • list.highlightForeground#98bee2
  • list.hoverBackground#202c6680
  • list.inactiveSelectionBackground#202c6680
  • list.warningForeground#e1b87a
  • listFilterWidget.background#263361
  • listFilterWidget.noMatchesOutline#d98970
  • listFilterWidget.outline#293671
  • merge.currentHeaderBackground#95cf7990
  • merge.incomingHeaderBackground#a179d090
  • minimapGutter.addedBackground#95cf79
  • minimapGutter.deletedBackground#d98970
  • minimapGutter.modifiedBackground#98bee2
  • panel.background#1a224e
  • panel.border#202c66
  • panelTitle.activeBorder#95cf79
  • panelTitle.activeForeground#d3e0f0
  • panelTitle.inactiveForeground#707aae
  • peekView.border#202c66
  • peekViewEditor.background#1a224e
  • peekViewEditor.matchHighlightBackground#d8d37a80
  • peekViewResult.background#141c43
  • peekViewResult.fileForeground#d3e0f0
  • peekViewResult.lineForeground#d3e0f0
  • peekViewResult.matchHighlightBackground#d8d37a80
  • peekViewResult.selectionBackground#202c66
  • peekViewResult.selectionForeground#d3e0f0
  • peekViewTitle.background#10173d
  • peekViewTitleDescription.foreground#707aae
  • peekViewTitleLabel.foreground#d3e0f0
  • pickerGroup.border#202c66
  • pickerGroup.foreground#98bee2
  • progressBar.background#95cf79
  • selection.background#699ccf40
  • settings.checkboxBackground#141c43
  • settings.checkboxBorder#10173d
  • settings.checkboxForeground#d3e0f0
  • settings.dropdownBackground#141c43
  • settings.dropdownBorder#10173d
  • settings.dropdownForeground#d3e0f0
  • settings.headerForeground#d3e0f0
  • settings.modifiedItemIndicator#e1b87a
  • settings.numberInputBackground#141c43
  • settings.numberInputBorder#10173d
  • settings.numberInputForeground#d3e0f0
  • settings.textInputBackground#141c43
  • settings.textInputBorder#10173d
  • settings.textInputForeground#d3e0f0
  • sideBar.background#141c43
  • sideBarSectionHeader.background#1a224e
  • sideBarSectionHeader.border#10173d
  • sideBarTitle.foreground#d3e0f0
  • statusBar.background#4a2775
  • statusBar.debuggingBackground#d98970
  • statusBar.debuggingForeground#4a2775
  • statusBar.foreground#d3e0f0
  • statusBar.noFolderBackground#4a2775
  • statusBar.noFolderForeground#d3e0f0
  • statusBarItem.prominentBackground#d98970
  • statusBarItem.prominentHoverBackground#e1b87a
  • statusBarItem.remoteBackground#4a2775
  • statusBarItem.remoteForeground#1a224e
  • tab.activeBackground#1a224e
  • tab.activeBorderTop#95cf79
  • tab.activeForeground#d3e0f0
  • tab.border#10173d
  • tab.inactiveBackground#141c43
  • tab.inactiveForeground#707aae
  • terminal.ansiBlack#263361
  • terminal.ansiBlue#a179d0
  • terminal.ansiBrightBlack#707aae
  • terminal.ansiBrightBlue#ab88d7
  • terminal.ansiBrightCyan#a0c6eb
  • terminal.ansiBrightGreen#acd996
  • terminal.ansiBrightMagenta#e4a6c1
  • terminal.ansiBrightRed#e1a28e
  • terminal.ansiBrightWhite#eef4fb
  • terminal.ansiBrightYellow#dfdb93
  • terminal.ansiCyan#87b7e5
  • terminal.ansiGreen#95cf79
  • terminal.ansiMagenta#dd8fb1
  • terminal.ansiRed#d98970
  • terminal.ansiWhite#d3e0f0
  • terminal.ansiYellow#d8d37a
  • terminal.background#1a224e
  • terminal.foreground#d3e0f0
  • titleBar.activeBackground#141c43
  • titleBar.activeForeground#d3e0f0
  • titleBar.inactiveBackground#10173d
  • titleBar.inactiveForeground#707aae
  • walkThrough.embeddedEditorBackground#141c43

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#a179d0
meta.diff, meta.diff.header#707aae
markup.inserted#95cf79
markup.deleted#d98970
markup.changed#e1b87a
invalid#d98970underline italic
invalid.deprecated#d3e0f0underline italic
entity.name.filename#d8d37a
markup.error#d98970
markup.underlineunderline
markup.bold#e1b87abold
markup.heading#a179d0bold
markup.italic#d8d37aitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#98bee2
markup.inline.raw, markup.raw.restructuredtext#95cf79
markup.underline.link, markup.underline.link.image#98bee2
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#699ccf
entity.name.directive.restructuredtext, markup.quote#d8d37aitalic
meta.separator.markdown#707aae
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#95cf79
punctuation.definition.constant.restructuredtext#a179d0
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#a179d0
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#d3e0f0
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#d8d37a
entity.name.type.class, entity.name.class#e1b87anormal
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#d8d37aitalic
entity.other.inherited-class#e1b87aitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#707aae
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#699ccf
comment.block.documentation entity.name.type#98bee2italic
comment.block.documentation entity.name.type punctuation.definition.bracket#98bee2
comment.block.documentation variable#e1b87aitalic
constant#a179d0
constant.character.escape, constant.character.string.escape, constant.regexp#699ccf
entity.name.tag#699ccf
entity.other.attribute-name.parent-selector#699ccf
entity.other.attribute-name#95cf79italic
entity.name.function, 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#95cf79
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#e1b87aitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#95cf79italic
meta.decorator variable.other.object#95cf79
keyword, punctuation.definition.keyword#699ccf
keyword.control.new, keyword.operator.newbold
meta.selector#699ccf
support#98bee2italic
support.function.magic, support.variable, variable.other.predefined#a179d0regular
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#699ccf
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, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#d3e0f0
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#699ccf
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#98bee2
constant.other.date, constant.other.timestamp#e1b87a
variable.other.alias.yaml#95cf79italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#699ccfregular
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#e1b87aitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#e1b87a
storage.modifier#699ccf
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#d8d37a
punctuation.definition.group.capture.regexp#699ccf
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#d98970
punctuation.definition.character-class.regexp#98bee2
punctuation.definition.group.regexp#e1b87a
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#d98970
meta.assertion.look-ahead.regexp#95cf79
string#d8d37a
punctuation.definition.string.begin, punctuation.definition.string.end#d8d37a
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#afc0db
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#707aae
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#d3e0f0
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#e1b87aitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#d3e0f0normal
meta.selectionset.graphql variable#d8d37a
meta.selectionset.graphql meta.arguments variable#d3e0f0
entity.name.fragment.graphql, variable.fragment.graphql#98bee2
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#d3e0f0
source.shell variable.other#a179d0
support.constant#a179d0normal
meta.scope.prerequisites.makefile#d8d37a
meta.attribute-selector.scss#d8d37a
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#d3e0f0
meta.preprocessor.haskell#707aae
log.error#d98970bold
log.warning#d8d37abold