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#00c0e2
  • activityBar.background#01111f
  • activityBar.border#01111f
  • activityBar.foreground#5cbcf3
  • activityBarBadge.background#00c0e2
  • activityBarBadge.foreground#000000
  • badge.background#00c0e2
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#a599e9
  • breadcrumbPicker.background#001122
  • button.background#7e57c2cc
  • button.foreground#ffffffcc
  • button.hoverBackground#7e57c2
  • contrastActiveBorder#122d42
  • contrastBorder#122d42
  • debugExceptionWidget.background#01111f
  • debugExceptionWidget.border#5f7e97
  • debugToolBar.background#01111f
  • diffEditor.insertedTextBackground#99b76d23
  • diffEditor.insertedTextBorder#a6dd5433
  • diffEditor.removedTextBackground#ef535033
  • diffEditor.removedTextBorder#ef53504d
  • dropdown.background#01111f
  • dropdown.border#5f7e97
  • dropdown.foreground#ffffffcc
  • editor.background#01111f
  • editor.findMatchBackground#5f7e9779
  • editor.findMatchHighlightBackground#1085bb5d
  • editor.foreground#d6deeb
  • editor.hoverHighlightBackground#7e57c25a
  • editor.inactiveSelectionBackground#7e57c25a
  • editor.lineHighlightBackground#00000033
  • editor.rangeHighlightBackground#7e57c25a
  • editor.selectionBackground#1d3b53
  • editor.selectionHighlightBackground#5f7e9779
  • editor.wordHighlightBackground#32374d
  • editor.wordHighlightStrongBackground#2e3250
  • editorBracketMatch.background#5f7e974d
  • editorCodeLens.foreground#5e82ceb4
  • editorCursor.foreground#80a4c2
  • editorError.foreground#ef5350
  • editorGroup.border#01111f
  • editorGroup.dropBackground#7e57c273
  • editorGroup.emptyBackground#01111f
  • editorGroupHeader.noTabsBackground#01111f
  • editorGroupHeader.tabsBackground#01111f
  • editorGroupHeader.tabsBorder#262a39
  • editorGutter.addedBackground#9ccc65
  • editorGutter.background#01111f
  • editorGutter.deletedBackground#ef5350
  • editorGutter.modifiedBackground#e2b93d
  • editorHoverWidget.background#01111f
  • editorHoverWidget.border#5f7e97
  • editorIndentGuide.activeBackground#7e97ac
  • editorIndentGuide.background#5e81ce52
  • editorLineNumber.activeForeground#c5e4fd
  • editorLineNumber.foreground#4b6479
  • editorMarkerNavigation.background#0b2942
  • editorMarkerNavigationError.background#ef5350
  • editorMarkerNavigationWarning.background#ffca28
  • editorOverviewRuler.commonContentForeground#7e57c2
  • editorOverviewRuler.currentContentForeground#7e57c2
  • editorOverviewRuler.incomingContentForeground#7e57c2
  • editorRuler.foreground#5e81ce52
  • editorSuggestWidget.background#2c3043
  • editorSuggestWidget.border#2b2f40
  • editorSuggestWidget.foreground#d6deeb
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#5f7e97
  • editorWarning.foreground#b39554
  • editorWidget.background#021320
  • editorWidget.border#5f7e97
  • errorForeground#ef5350
  • extensionButton.prominentBackground#7e57c2cc
  • extensionButton.prominentForeground#ffffffcc
  • extensionButton.prominentHoverBackground#7e57c2
  • focusBorder#122d42
  • foreground#d6deeb
  • gitDecoration.conflictingResourceForeground#ffeb95cc
  • gitDecoration.deletedResourceForeground#ef535090
  • gitDecoration.ignoredResourceForeground#395a75
  • gitDecoration.modifiedResourceForeground#a2bffc
  • gitDecoration.untrackedResourceForeground#a6dd54
  • input.background#0b253a
  • input.border#5f7e97
  • input.foreground#ffffffcc
  • input.placeholderForeground#5f7e97
  • inputOption.activeBorder#ffffffcc
  • inputValidation.errorBackground#ab0300f2
  • inputValidation.errorBorder#ef5350
  • inputValidation.infoBackground#00589ef2
  • inputValidation.infoBorder#64b5f6
  • inputValidation.warningBackground#675700f2
  • inputValidation.warningBorder#ffca28
  • list.activeSelectionBackground#083049
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#01111f
  • list.focusBackground#010d18
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#01111f
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#081e30
  • list.inactiveSelectionForeground#5f7e97
  • list.invalidItemForeground#975f94
  • merge.currentHeaderBackground#5f7e97
  • merge.incomingHeaderBackground#7e57c25a
  • notificationCenter.border#262a39
  • notificationLink.foreground#80cbc4
  • notifications.background#01111d
  • notifications.border#262a39
  • notifications.foreground#ffffffcc
  • notificationToast.border#262a39
  • panel.background#01111f
  • panel.border#2e94cf
  • panelTitle.activeBorder#5f7e97
  • panelTitle.activeForeground#ffffffcc
  • panelTitle.inactiveForeground#d6deeb80
  • peekView.border#5f7e97
  • peekViewEditor.background#01111f
  • peekViewEditor.matchHighlightBackground#7e57c25a
  • peekViewResult.background#01111f
  • peekViewResult.fileForeground#5f7e97
  • peekViewResult.lineForeground#5f7e97
  • peekViewResult.matchHighlightBackground#ffffffcc
  • peekViewResult.selectionBackground#2e3250
  • peekViewResult.selectionForeground#5f7e97
  • peekViewTitle.background#01111f
  • peekViewTitleDescription.foreground#697098
  • peekViewTitleLabel.foreground#5f7e97
  • pickerGroup.border#01111f
  • pickerGroup.foreground#d1aaff
  • scrollbar.shadow#010b14
  • scrollbarSlider.activeBackground#084d8180
  • scrollbarSlider.background#084d8180
  • scrollbarSlider.hoverBackground#084d8180
  • selection.background#7cc243
  • sideBar.background#00101d
  • sideBar.border#01111f
  • sideBar.foreground#89a4bb
  • sideBarSectionHeader.background#01111f
  • sideBarSectionHeader.foreground#c2c2c2
  • sideBarTitle.foreground#5f7e97
  • statusBar.background#01111f
  • statusBar.border#262a39
  • statusBar.debuggingBackground#202431
  • statusBar.debuggingBorder#1f2330
  • statusBar.foreground#82aaff
  • statusBar.noFolderBackground#01111f
  • statusBar.noFolderBorder#25293a
  • statusBarItem.activeBackground#202431
  • statusBarItem.hoverBackground#202431
  • statusBarItem.prominentBackground#202431
  • statusBarItem.prominentHoverBackground#202431
  • tab.activeBackground#01111f
  • tab.activeBorder#262a39
  • tab.activeForeground#00c0e2
  • tab.border#272b3b
  • tab.inactiveBackground#041422
  • tab.inactiveForeground#82aaff
  • tab.unfocusedActiveBorder#262a39
  • tab.unfocusedActiveForeground#5f7e97
  • tab.unfocusedInactiveForeground#5f7e97
  • terminal.ansiBlack#01111f
  • terminal.ansiBlue#82aaff
  • terminal.ansiBrightBlack#575656
  • terminal.ansiBrightBlue#82aaff
  • terminal.ansiBrightCyan#7fdbca
  • terminal.ansiBrightGreen#22da6e
  • terminal.ansiBrightMagenta#00c0e2
  • terminal.ansiBrightRed#ef5350
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffeb95
  • terminal.ansiCyan#21c7a8
  • terminal.ansiGreen#22da6e
  • terminal.ansiMagenta#00c0e2
  • terminal.ansiRed#ef5350
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#a6dd54
  • terminal.selectionBackground#1b90dd4d
  • terminalCursor.background#234d70
  • titleBar.activeBackground#01111f
  • titleBar.activeForeground#eeefff
  • titleBar.inactiveBackground#010e1a
  • walkThrough.embeddedEditorBackground#01111f
  • welcomePage.buttonBackground#01111f
  • welcomePage.buttonHoverBackground#01111f
  • widget.shadow#01111f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file#A2BFFCitalic
markup.deleted.diff#EF535090italic
markup.inserted.diff#A6DD54italic
comment#637777italic
string#A6DD54
string.quoted, variable.other.readwrite.js#DFBB08
support.constant.math#A6DD54
constant.numeric, constant.character.numeric#F78C6C
constant.language, punctuation.definition.constant, variable.other.constant#82AAFF
constant.character, constant.other#82AAFF
constant.character.escape#F78C6C
string.regexp, string.regexp keyword.other#5CA7E4
meta.function punctuation.separator.comma#5F7E97
variable#A6DD54
punctuation.accessor, keyword#00C0E2italic
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx#00C0E2italic
storage.type#00C0E2
storage.type.function.arrow.js
entity.name.class, meta.class entity.name.type.class#FFCB8B
entity.other.inherited-class#A6DD54
entity.name.function#00C0E2italic
punctuation.definition.tag, meta.tag#7FDBCA
entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#7FDBCA
entity.other.attribute-name#A6DD54italic
entity.name.tag.custom#A6DD54
support.function, support.constant#82AAFF
support.constant.meta.property-value#7FDBCA
support.type, support.class#A6DD54
support.variable.dom#A6DD54
invalid#FFFFFF
invalid.deprecated#FFFFFF
keyword.operator#7FDBCA
keyword.operator.relational#00C0E2italic
keyword.operator.assignment#00C0E2
keyword.operator.arithmetic#00C0E2
keyword.operator.bitwise#00C0E2
keyword.operator.increment#00C0E2
keyword.operator.ternary#00C0E2
comment.line.double-slash#637777
object#CDEBF7
constant.language.null#FF5874
meta.brace#D6DEEB
meta.delimiter.period#00C0E2italic
punctuation.definition.string#D9F5DD
punctuation.definition.string.begin.markdown#FF5874
constant.language.boolean#FF5874
object.comma#FFFFFF
variable.parameter.function#7FDBCA
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#80CBC4
meta.property-list entity.name.tag.reference#57EAF1
constant.other.color.rgb-value punctuation.definition.constant#F78C6C
constant.other.color#FFEB95
keyword.other.unit#FFEB95
meta.selector#00C0E2italic
entity.other.attribute-name.id#FAD430
meta.property-name#80CBC4
entity.name.tag.doctype, meta.tag.sgml.doctype#00C0E2italic
punctuation.definition.parameters#D9F5DD
keyword.control.operator#7FDBCA
keyword.operator.logical#00C0E2
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#7FDBCA
variable.other.object.property#FAF39Fitalic
variable.other.object.js
entity.name.function#82AAFFitalic
keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx#00C0E2italic
keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts#00C0E2
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control#7FDBCA
support.function#A6DD54
invalid.broken#020E14
invalid.unimplemented#FFFFFF
invalid.illegal#FFFFFF
variable.language#7FDBCA
support.variable.property#7FDBCA
variable.function#82AAFF
variable.interpolation#EC5F67
meta.function-call#82AAFF
punctuation.section.embedded#D3423E
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#D6DEEB
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#D9F5DD
string.template meta.template.expression#D3423E
string.template punctuation.definition.string#D6F0F7
italic#00C0E2italic
bold#A6DD54bold
quote#697098italic
raw#80CBC4
variable.assignment.coffee#31E1EB
variable.parameter.function.coffee#D6DEEB
variable.assignment.coffee#7FDBCA
variable.other.readwrite.cs#D6DEEB
entity.name.type.class.cs, storage.type.cs#82AAFF
entity.name.type.namespace.cs#B2CCD6
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css#FF6363
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#7FDBCA
keyword.other.unit.css#FFEB95
meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js#F78C6C
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#82AAFF
source.elixir entity.name.function#A6DD54
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#82AAFF
source.elixir punctuation.definition.string#A6DD54
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#A6DD54
source.elixir .punctuation.binary.elixir#01CDF1italic
constant.keyword.clojure#7FDBCA
source.go meta.function-call.go#DDDDDD
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go#00C0E2italic
source.go constant.language.go, source.go constant.other.placeholder.go#FF5874
entity.name.function.preprocessor.cpp, entity.scope.name.cpp#7FDBCA
meta.namespace-block.cpp#E0DEC6
storage.type.language.primitive.cpp#FF5874
meta.preprocessor.macro.cpp#D6DEEB
variable.parameter#FFCB8B
variable.other.readwrite.powershell#82AAFF
support.function.powershell#7FDBCA
entity.other.attribute-name.id.html#A6DD54
punctuation.definition.tag.html#6AE9F0
meta.tag.sgml.doctype.html#00C0E2italic
meta.class entity.name.type.class.js#FFCB8B
meta.method.declaration storage.type.js#82AAFF
terminator.js#D6DEEB
meta.js punctuation.definition.js#D6DEEB
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#5F7E97
variable.other.jsdoc, variable.other.phpdoc#78CCF0
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#D6DEEB
variable.parameter.function.js#7986E7
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#D6DEEB
variable.js, variable.other.js#D6DEEB
entity.name.type.js, entity.name.type.module.js#FFCB8B
support.class.js#D6DEEB
support.type.property-name.json#00C0E2
support.constant.json#A6DD54
meta.structure.dictionary.value.json string.quoted.double#DFBB08
string.quoted.double.json punctuation.definition.string.json#80CBC4
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ECECEC
variable.other.object.js#7FDBCAitalic
variable.other.ruby#D6DEEB
entity.name.type.class.ruby#ECC48D
constant.language.symbol.hashkey.ruby#7FDBCA
constant.language.symbol.ruby#7FDBCA
entity.name.tag.less#7FDBCA
keyword.other.unit.css#FFEB95
meta.attribute-selector.less entity.other.attribute-name.attribute#F78C6C
markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#82B1FF
markup.italic.markdown#00C0E2italic
markup.bold.markdown#A6DD54bold
markup.quote.markdown#697098italic
markup.inline.raw.markdown#80CBC4
markup.underline.link.markdown, markup.underline.link.image.markdown#FF869A
string.other.link.title.markdown, string.other.link.description.markdown#D6DEEB
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#82B1FF
punctuation.definition.metadata.markdown#7FDBCA
beginning.punctuation.definition.list.markdown#82B1FF
markup.inline.raw.string.markdown#A6DD54
variable.other.php, variable.other.property.php#BEC5D4
support.class.php#FFCB8B
meta.function-call.php punctuation#D6DEEB
variable.other.global.php#A6DD54
variable.other.global.php punctuation.definition.variable#A6DD54
constant.language.python#FF5874
variable.parameter.function.python, meta.function-call.arguments.python#82AAFF
meta.function-call.python, meta.function-call.generic.python#B2CCD6
punctuation.python#D6DEEB
entity.name.function.decorator.python#A6DD54
source.python variable.language.special#8EACE3
keyword.control#00C0E2italic
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#A6DD54
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#82AAFF
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#BEC5D4
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#F78C6C
entity.name.tag.scss, entity.name.tag.sass#7FDBCA
keyword.other.unit.scss, keyword.other.unit.sass#FFEB95
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#D6DEEB
entity.name.type.ts, entity.name.type.tsx#FFCB8B
support.class.node.ts, support.class.node.tsx#82AAFF
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#5F7E97
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#D6DEEB
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#82AAFF
meta.tag.js meta.jsx.children.tsx#82AAFF
entity.name.tag.yaml#7FDBCA
variable.other.readwrite.js, variable.parameter#D7DBE0
support.class.component.js, support.class.component.tsx#C792EA
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#D6DEEB
meta.class entity.name.type.class.tsx#FFCB8B
entity.name.type.tsx, entity.name.type.module.tsx#FFCB8B
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#82AAFF
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, meta.brace, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.relational, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.type, keyword.operator, keyword, punctuation.definintion.string, punctuation, variable.other.readwrite.js, storage.type, source.css, string.quoted
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6