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.background#122738
  • activityBar.border#0d3a58
  • activityBar.foreground#fff
  • activityBarBadge.background#ffc600
  • activityBarBadge.foreground#000
  • badge.background#ffc600
  • badge.foreground#000
  • button.background#0088ff
  • button.foreground#fff
  • button.hoverBackground#ff9d00
  • contrastBorder#ffffff00
  • debugExceptionWidget.background#193549
  • debugExceptionWidget.border#aaa
  • debugToolBar.background#193549
  • descriptionForeground#aaa
  • diffEditor.insertedTextBackground#3ad90033
  • diffEditor.insertedTextBorder#3ad90055
  • diffEditor.removedTextBackground#ee3a4333
  • diffEditor.removedTextBorder#ee3a4355
  • dropdown.background#193549
  • dropdown.border#15232d
  • dropdown.foreground#fff
  • editor.background#15232d
  • editor.findMatchBackground#FF720066
  • editor.findMatchHighlightBackground#CAD40F66
  • editor.findRangeHighlightBackground#243E51
  • editor.foreground#fff
  • editor.hoverHighlightBackground#ffc60033
  • editor.inactiveSelectionBackground#003b8b
  • editor.lineHighlightBackground#1F4662
  • editor.lineHighlightBorder#234E6D
  • editor.rangeHighlightBackground#1F4662
  • editor.selectionBackground#0050A4
  • editor.selectionHighlightBackground#0050A480
  • editor.wordHighlightBackground#ffffff21
  • editor.wordHighlightStrongBackground#ffffff21
  • editorBracketHighlight.foreground1#4baefe
  • editorBracketHighlight.foreground2#f8fb4a
  • editorBracketHighlight.foreground3#c172d9
  • editorBracketHighlight.foreground4#36c5d5
  • editorBracketHighlight.foreground5#8bfa1c
  • editorBracketHighlight.foreground6#fbb53d
  • editorBracketHighlight.unexpectedBracket.foreground#ed6367
  • editorBracketMatch.background#0d3a58
  • editorBracketMatch.border#ffc60080
  • editorCodeLens.foreground#aaa
  • editorCursor.foreground#ffc600
  • editorError.border#0d3a58
  • editorError.foreground#A22929
  • editorGroup.border#122738
  • editorGroup.dropBackground#12273899
  • editorGroupHeader.noTabsBackground#193549
  • editorGroupHeader.tabsBackground#122738
  • editorGroupHeader.tabsBorder#15232d
  • editorGutter.addedBackground#3C9F4A
  • editorGutter.background#12273866
  • editorGutter.deletedBackground#A22929
  • editorGutter.modifiedBackground#26506D
  • editorHoverWidget.background#15232d
  • editorHoverWidget.border#0d3a58
  • editorIndentGuide.background1#3B5364
  • editorInlayHint.background#0000001a
  • editorInlayHint.foreground#ff68b8
  • editorLineNumber.foreground#aaa
  • editorLink.activeForeground#aaa
  • editorMarkerNavigation.background#3B536433
  • editorMarkerNavigationError.background#A22929
  • editorMarkerNavigationWarning.background#ffc600
  • editorOverviewRuler.border#0d3a58
  • editorOverviewRuler.commonContentForeground#ffc60055
  • editorOverviewRuler.currentContentForeground#ee3a4355
  • editorOverviewRuler.incomingContentForeground#3ad90055
  • editorRuler.foreground#1F4662
  • editorSuggestWidget.background#15232d
  • editorSuggestWidget.border#15232d
  • editorSuggestWidget.foreground#aaa
  • editorSuggestWidget.highlightForeground#ffc600
  • editorSuggestWidget.selectedBackground#193549
  • editorWarning.border#ffffff00
  • editorWarning.foreground#ffc600
  • editorWhitespace.foreground#ffffff52
  • editorWidget.background#15232d
  • editorWidget.border#0d3a58
  • errorForeground#A22929
  • extensionButton.prominentBackground#0088ff
  • extensionButton.prominentForeground#fff
  • extensionButton.prominentHoverBackground#ff9d00
  • focusBorder#0d3a58
  • foreground#aaa
  • gitDecoration.conflictingResourceForeground#FF7200
  • gitDecoration.deletedResourceForeground#ff628c
  • gitDecoration.ignoredResourceForeground#808080
  • gitDecoration.modifiedResourceForeground#ffc600
  • gitDecoration.untrackedResourceForeground#3ad900
  • input.background#193549
  • input.border#0d3a58
  • input.foreground#ffc600
  • input.placeholderForeground#aaa
  • inputOption.activeBorder#8dffff
  • inputValidation.errorBackground#193549
  • inputValidation.errorBorder#ffc600
  • inputValidation.infoBackground#193549
  • inputValidation.infoBorder#0D3A58
  • inputValidation.warningBackground#193549
  • inputValidation.warningBorder#ffc600
  • list.activeSelectionBackground#193549
  • list.activeSelectionForeground#aaa
  • list.dropBackground#0d3a58
  • list.focusBackground#0d3a58
  • list.focusForeground#aaa
  • list.highlightForeground#ffc600
  • list.hoverBackground#193549
  • list.hoverForeground#aaa
  • list.inactiveSelectionBackground#0d3a58
  • list.inactiveSelectionForeground#aaa
  • menu.background#122738
  • menu.selectionForeground#fff
  • menubar.selectionBackground#0d3a58
  • merge.border#ffffff00
  • merge.commonContentBackground#c97d0c
  • merge.commonHeaderBackground#c97d0c
  • merge.currentContentBackground#2F7366
  • merge.currentHeaderBackground#2F7366
  • merge.incomingContentBackground#185294
  • merge.incomingHeaderBackground#185294
  • notificationCenter.border#ffc600
  • notificationCenterHeader.background#122738
  • notificationCenterHeader.foreground#aaa
  • notificationLink.foreground#ffc600
  • notifications.background#122738
  • notifications.border#ffc600
  • notifications.foreground#aaa
  • notificationToast.border#ffc600
  • panel.background#122738
  • panel.border#ffc600
  • panelTitle.activeBorder#ffc600
  • panelTitle.activeForeground#ffc600
  • panelTitle.inactiveForeground#aaa
  • peekView.border#ffc600
  • peekViewEditor.background#193549
  • peekViewEditor.matchHighlightBackground#19354900
  • peekViewEditorGutter.background#122738
  • peekViewResult.background#15232d
  • peekViewResult.fileForeground#aaa
  • peekViewResult.lineForeground#fff
  • peekViewResult.matchHighlightBackground#0d3a58
  • peekViewResult.selectionBackground#0d3a58
  • peekViewResult.selectionForeground#fff
  • peekViewTitle.background#15232d
  • peekViewTitleDescription.foreground#aaa
  • peekViewTitleLabel.foreground#ffc600
  • pickerGroup.border#0d3a58
  • pickerGroup.foreground#aaa
  • progressBar.background#ffc600
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#355166cc
  • scrollbarSlider.background#1F466280
  • scrollbarSlider.hoverBackground#406179cc
  • selection.background#027dff
  • sideBar.background#15232d
  • sideBar.border#0d3a58
  • sideBar.foreground#aaa
  • sideBarSectionHeader.background#193549
  • sideBarSectionHeader.foreground#fff
  • sideBarTitle.foreground#aaaaaa
  • statusBar.background#15232d
  • statusBar.border#0d3a58
  • statusBar.debuggingBackground#15232d
  • statusBar.debuggingBorder#ffc600
  • statusBar.debuggingForeground#ffc600
  • statusBar.foreground#aaa
  • statusBar.noFolderBackground#15232d
  • statusBar.noFolderBorder#0d3a58
  • statusBar.noFolderForeground#aaa
  • statusBarItem.activeBackground#0088ff
  • statusBarItem.hoverBackground#0d3a58
  • statusBarItem.prominentBackground#15232d
  • statusBarItem.prominentHoverBackground#0d3a58
  • tab.activeBackground#193549
  • tab.activeBorder#ffc600
  • tab.activeForeground#fff
  • tab.border#15232D
  • tab.inactiveBackground#122738
  • tab.inactiveForeground#aaa
  • tab.unfocusedActiveForeground#aaa
  • tab.unfocusedInactiveForeground#aaa
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0088ff
  • terminal.ansiBrightBlack#0050A4
  • terminal.ansiBrightBlue#0088ff
  • terminal.ansiBrightCyan#80fcff
  • terminal.ansiBrightGreen#3ad900
  • terminal.ansiBrightMagenta#fb94ff
  • terminal.ansiBrightRed#ff628c
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffc600
  • terminal.ansiCyan#80fcff
  • terminal.ansiGreen#3ad900
  • terminal.ansiMagenta#fb94ff
  • terminal.ansiRed#ff628c
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffc600
  • terminal.background#122738
  • terminal.foreground#ffffff
  • terminalCursor.background#ffc600
  • terminalCursor.foreground#ffc600
  • textBlockQuote.background#193549
  • textBlockQuote.border#0088ff
  • textCodeBlock.background#193549
  • textLink.activeForeground#0088ff
  • textLink.foreground#0088ff
  • textPreformat.foreground#ffc600
  • textSeparator.foreground#0d3a58
  • titleBar.activeBackground#15232D
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#193549
  • titleBar.inactiveForeground#ffffff33
  • walkThrough.embeddedEditorBackground#0d3a58
  • widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment markup.link, comment, punctuation.definition.comment, unused.comment, wildcard.comment#8D8D8Ditalic underline
text, source#ffffff
emphasisitalic
strongbold
invalid#E6457Bitalic
invalid.deprecated#99611Funderline italic
invalid.illegal#E6457Bunderline italic
variable.language.self, entity.type.enum, variable.other.object.property, entity.name.type.enum#FF9243
entity.name.type#FE2149bold
keyword.operator.accessor, entity.name.tag.class.jsx, JSXNested#50BCFFitalic
keyword.other.unit#fe395d
keyword.other.special-method, entity.name.other.preprocessor.macro, variable.other.event#E6E667
constant.character#4FE0E0
constant.character.escape#FB48C4
entity.name.label, entity.name.namespace#d3d3d3
keyword.control.export.js, keyword.control.import.js#72f1b8
variable, entity.name.variable#BCA5F7italic
variable.parameter, entity.name.type.type-parameter#00D2B3
variable.other.object, string.quoted.template variable.other.readwrite, variable.language.arguments#FFFFFFitalic
support.type#00c3ffitalic
entity.name.section, entity.name.type.module, support.type.primitive, variable.other.enummember#FF4CD2
keyword.control.default, keyword.control.export, keyword.control.from, keyword.control.import, keyword.control.module, support.type.object.module#FF9EE7
meta.protocol-list.objc, meta.return-type.objc, meta.return-type, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name#38B3FF
entity.name.type.class, support.class, variable.other.class, entity.name.class#739FFF
storage.class.std.rust, storage.type.annotation.groovy, storage.type.annotation.java, storage.type.attribute.swift, storage.type.boolean.go, storage.type.byte.go, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.cs, storage.type.error.go, storage.type.generic.cs, storage.type.generic.groovy, storage.type.generic.java, storage.type.groovy, storage.type.groovy, storage.type.haskell, storage.type.java, storage.type.modifier.cs, storage.type.numeric.go, storage.type.objc, storage.type.object.array.groovy, storage.type.object.array.java, storage.type.ocaml, storage.type.parameters.groovy, storage.type.php, storage.type.primitive.array.groovy, storage.type.primitive.array.java, storage.type.primitive.groovy, storage.type.primitive.java, storage.type.rune.go, storage.type.string.go, storage.type.struct, storage.type.token.java, storage.type.uintptr.go, storage.type.variable.cs, variable.css, variable.scss, entity.other.inherited-class, entity.name.scope-resolution, entity.other.attribute, keyword.primitive-datatypes.swift, keyword.type.cs#00F0FFitalic
entity.name.function.accessor, entity.name.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal, meta.method-call.java meta.method, meta.method.groovy, keyword.operator.function.infix, keyword.control.require#07FB3C
entity.name.function.member, support.function, entity.name.function.method#07fb69
keyword.operator#FE2149
support.type.vendored.property-name, variable.other.less, source.coffee.embedded, variable.other.property, variable.other.constant.property, keyword.constant.numeric#FB48C4
support.type.property-name, variable.other.property, variable.other.constant.property#00b4fc
string, meta.embedded.assembly, string.tag, string.value#ECEC0E
meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def, storage.type.accessor, storage.type.class.jsdoc, storage.type.property, storage#35F6F6italic
storage.modifier, storage.type.modifier, entity.name.operator, keyword.control.module.reference, keyword.operator.alignas, keyword.operator.alignof, keyword.operator.cast, keyword.operator.delete, keyword.operator.expression, keyword.operator.in, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.noexcept, keyword.operator.of, keyword.operator.sizeof, keyword.operator.typeid, keyword.operator.typeof, keyword.operator.void, keyword.operator.readonly, keyword.operator.wordlike, keyword.other.operator, source.cpp keyword.operator.new, storgae.type.extends, storage.control, keyword.storage, keyword.constant.storage, punctuation.flowtype, meta.object.flowtype, keyword.operator.new, keyword.control.new, storage, keyword.operator.member, keyword.control.directive, keyword.control, punctuation.definition.keyword, keyword.other.important, keyword.other.new, keyword.other, entity.name.type.keyword, entity.name.type.namespace, keyword.other.using, keyword.other.namespace#FE2149italic
storage.type, storage.type.js#4FE0E0italic bold
variable.other.constant, support.function.magic, variable.other.predefined, constant, constant.variable, constant.language, support.constant#9D59F8bold
constant.numeric, keyword.operator.plus.exponent, keyword.operator.minus.exponent#ff02ee
keyword.expressions-and-types.swift, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#4FE0E0
punctuation.section.embedded, 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#FF9EE7
keyword.operator.decorator, punctuation.decorator, entity.name.class.decorator, variable.other.readwrite.decorator#E6E667
constant.other.color, constant.other.symbol, punctuation.definition.block.tag, punctuation.accessor, punctuation.definition.typeparameters, punctuation.separator, support.class.component#1eff78bold italic
meta.attribute.href.html, punctuation.definition.tag.jsx, punctuation.definition.tag.tsx#fff9fa
support.type.object.console#2FDE73
support.type.object.dom#4FE0E0
variable.interpolation#E6457B
meta.definition.variable.name#FF9EE7
meta.object-literal.key, variable.language.this#FFBEFE
JSXAttrs, JSXNested, support.type.property-name.css, support.type.property-name.scss#15e2e6
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom#2FDE73
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#4FE0E0
comment.block.documentation entity.name.type punctuation.definition.bracket, comment.block.documentation entity.name.type#2FDE73italic
comment.block.documentation variable#D3D1EBitalic
punctuation.separator.parameter, punctuation.terminator.statement, meta.array-binding-pattern-variable, keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.curly, meta.brace.round, meta.brace.square, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag, 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#D3D1EB
punctuation.definition.entity, string.unquoted.heredoc punctuation.definition.string, punctuation.separator.annotation, punctuation.colon.graphql, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, meta.object-binding-pattern-variable punctuation.destructuring, entity.other.attribute-name.placeholder punctuation, constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.pseudo-class punctuation, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice#4FE0E0
meta.embedded, source.groovy.embedded#D3D1EB
entity.name.tag#5A6BC8
entity.other.attribute-name#ff3b58
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.class, entity.other.attribute-name.class.mixin, entity.other.attribute-name.parent-selector, entity.other.attribute-name.attribute, meta.group.double.toml, meta.group.toml, support.other.chomping-indicator.yaml, entity.other.attribute-name.id#739FFF
support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#50B6FF
support.constant.property-value#D3D1EB
punctuation.separator.key-value#4FE0E0
punctuation.definition.constant#FF9EE7
meta.property-list punctuation.separator.key-value#D3D1EB
meta.selector#4FE0E0
header#BA95B3
constant.other.object.key string.unquoted, punctuation.quasi.element, keyword.other.definition, variable.language.prototype, variable.other.jsdoc#F84364
punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml#AB80FF
meta.preprocessor, entity.name.function.preprocessor#E6E667
meta.preprocessor.string#50B6FF
meta.preprocessor.numeric#ff76dd
meta.structure.dictionary.key.python#D74BBE
meta.diff.header#4FE0E0
meta.decorator variable.other.readwrite, meta.decorator variable.other.property, meta.decorator variable.other.object#d3d3d3
entity.name.function.target.makefile, entity.name.section.toml, variable.other.key.toml#D74BBE
constant.other.date, constant.other.timestamp#4FE0E0
meta.indexer.mapped type.declaration entity.name.type, meta.type.parameters entity.name.type#D3D1EB
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#D74BBE
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#50B6FF
source.shell variable.other#2FDE73
meta.scope.prerequisites.makefile#50B6FF
support.function.git-rebase#FF9EE7
constant.sha.git-rebase#FF9EE7
markup.underlineunderline
punctuation.definition.bold.markdown, markup.bold#f9f9f9e5
markup.italic#2FDE73italic
beginning.punctuation.definition.list.markdown, entity.name.section.markdown, markup.heading.setext, markup.heading, punctuation.definition.heading.markdown, punctuation.definition.list.begin.markdown, text.html.markdown invalid.deprecated, text.html.markdown punctuation.definition.tag#D74BBE
markup.heading punctuation.definition.heading#E6E667
markup.error, markup.deleted#fa5170
markup.fenced_code.block.markdown, markup.inline.raw.markdown, markup.inline.raw.string.markdown, markup.inline.raw, markup.inserted, markup.raw.block.markdown, markup.raw, punctuation.definition.markdown, punctuation.definition.raw.markdown#2FDE73
constant.other.reference.link.markdown, string.other.link.description.markdown, string.other.link.title.markdown#FF9EE7
markup.changed, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown, punctuation.definition.constant.markdown, punctuation.definition.metadata.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, string.other.link.description.title.markdown, text.html.markdown string.quoted#AB80FF
beginning.punctuation.definition.quote.markdown, markup.link, markup.quote.markdown, markup.quote, markup.underline.link.image.markdown, markup.underline.link.markdown, meta.attribute.href.html string.quoted.double.html, meta.attribute.href.html string.quoted.single.html, punctuation.definition.link.restructuredtext#34fde6
string.regexp, constant.regexp, keyword.operator.or.regexp#2FDE73
constant.character.escape.backslash.regexp, meta.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, support.other.parenthesis.regexp#4FE0E0
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp, punctuation.definition.group.regexp, punctuation.definition.group.capture.regexp, keyword.control.anchor.regexp#AB80FF
keyword.operator.quantifier.regexp#E6E667
keyword.operator.negation.regexp, constant.character.regexp, punctuation.definition.range.regexp#FF9EE7
keyword.control.new, keyword.operator.newbold italic
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx#FE2149
storage.type.accessor, entity.name.tag.class, entity.name.tag.id#4afe83
entity.other.attribute-name#29caffitalic