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#0d2b35
  • activityBar.border#ffffff11
  • activityBar.dropBackground#85a5b4
  • activityBar.foreground#85a5b4
  • activityBarBadge.background#85a5b4
  • activityBarBadge.foreground#ffffff
  • badge.background#85a5b4
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#fafbfc
  • breadcrumb.focusForeground#fafbfc
  • breadcrumb.foreground#ecf1f3
  • breadcrumbPicker.background#0d2b35
  • button.background#7e57c2cc
  • button.foreground#ffffffcc
  • button.hoverBackground#7e57c2
  • contrastActiveBorder#144252
  • contrastBorder#144252
  • debugExceptionWidget.background#0d2b35
  • debugExceptionWidget.border#85a5b4
  • debugToolBar.background#0d2b35
  • diffEditor.insertedTextBackground#F78C6C23
  • diffEditor.insertedTextBorder#addb7b33
  • diffEditor.removedTextBackground#EF535033
  • diffEditor.removedTextBorder#EF53504d
  • dropdown.background#0d2b35
  • dropdown.border#85a5b4
  • dropdown.foreground#ffffffcc
  • editor.background#0d2b35
  • editor.findMatchBackground#85a5b450
  • editor.findMatchHighlightBackground#144252
  • editor.foreground#d6deeb
  • editor.hoverHighlightBackground#7e57c25a
  • editor.inactiveSelectionBackground#7e57c25a
  • editor.lineHighlightBackground#ffffff07
  • editor.rangeHighlightBackground#7e57c25a
  • editor.selectionBackground#144252
  • editor.selectionHighlightBackground#85a5b450
  • editor.wordHighlightBackground#144252
  • editor.wordHighlightStrongBackground#144252
  • editorBracketMatch.background#85a5b44d
  • editorCodeLens.foreground#85a5b494
  • editorCursor.foreground#ecf1f3
  • editorError.foreground#EF5350
  • editorGroup.background#0a232b
  • editorGroup.border#0d2b35
  • editorGroup.dropBackground#7e57c273
  • editorGroupHeader.noTabsBackground#0d2b35
  • editorGroupHeader.tabsBackground#0d2b35
  • editorGroupHeader.tabsBorder#ffffff11
  • editorGutter.addedBackground#addb7b
  • editorGutter.background#0d2b35
  • editorGutter.deletedBackground#EF5350
  • editorGutter.modifiedBackground#ecc48d
  • editorHoverWidget.background#0d2b35
  • editorHoverWidget.border#85a5b4
  • editorIndentGuide.activeBackground#85a5b4
  • editorIndentGuide.background#85a5b452
  • editorLineNumber.activeForeground#ecf1f3
  • editorLineNumber.foreground#5f879a
  • editorMarkerNavigation.background#144252
  • editorMarkerNavigationError.background#EF5350
  • editorMarkerNavigationWarning.background#FFCA28
  • editorOverviewRuler.commonContentForeground#7e57c2
  • editorOverviewRuler.currentContentForeground#7e57c2
  • editorOverviewRuler.incomingContentForeground#7e57c2
  • editorRuler.foreground#85a5b452
  • editorSuggestWidget.background#144252
  • editorSuggestWidget.border#081c23
  • editorSuggestWidget.foreground#d6deeb
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#85a5b4
  • editorWarning.foreground#b39554
  • editorWidget.background#144252
  • editorWidget.border#081c23
  • errorForeground#EF5350
  • extensionButton.prominentBackground#7e57c2cc
  • extensionButton.prominentForeground#ffffffcc
  • extensionButton.prominentHoverBackground#7e57c2
  • focusBorder#144252
  • foreground#d6deeb
  • gitDecoration.conflictingResourceForeground#ffeb95cc
  • gitDecoration.deletedResourceForeground#EF535090
  • gitDecoration.ignoredResourceForeground#ecf1f355
  • gitDecoration.modifiedResourceForeground#ecf1f3
  • gitDecoration.untrackedResourceForeground#addb7bff
  • input.background#081c23
  • input.border#85a5b4
  • input.foreground#ffffffcc
  • input.placeholderForeground#85a5b4
  • inputOption.activeBorder#ffffffcc
  • inputValidation.errorBackground#AB0300F2
  • inputValidation.errorBorder#EF5350
  • inputValidation.infoBackground#00589EF2
  • inputValidation.infoBorder#64B5F6
  • inputValidation.warningBackground#675700F2
  • inputValidation.warningBorder#FFCA28
  • list.activeSelectionBackground#85a5b460
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#0d2b35
  • list.focusBackground#0003
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#0d2b35
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#144252
  • list.inactiveSelectionForeground#85a5b4
  • list.invalidItemForeground#975f94
  • merge.currentHeaderBackground#85a5b4
  • merge.incomingHeaderBackground#7e57c25a
  • meta.objectliteral.js#96beff
  • notificationLink.foreground#78ccf0
  • notifications.background#0d2b35
  • notifications.foreground#ffffffcc
  • panel.background#0d2b35
  • panel.border#ffffff33
  • panelTitle.activeBorder#85a5b4
  • panelTitle.activeForeground#ffffffcc
  • panelTitle.inactiveForeground#d6deeb80
  • peekView.border#85a5b4
  • peekViewEditor.background#0d2b35
  • peekViewEditor.matchHighlightBackground#7e57c25a
  • peekViewResult.background#0d2b35
  • peekViewResult.fileForeground#85a5b4
  • peekViewResult.lineForeground#85a5b4
  • peekViewResult.matchHighlightBackground#ffffffcc
  • peekViewResult.selectionBackground#1b5a6e
  • peekViewResult.selectionForeground#85a5b4
  • peekViewTitle.background#0d2b35
  • peekViewTitleDescription.foreground#789cac
  • peekViewTitleLabel.foreground#85a5b4
  • pickerGroup.border#0d2b35
  • pickerGroup.foreground#d1aaff
  • progress.background#7e57c2
  • punctuation.definition.generic.begin.html#EF5350f2
  • scrollbar.shadow#0d2b35
  • scrollbarSlider.activeBackground#1b5a6e80
  • scrollbarSlider.background#1b5a6e80
  • scrollbarSlider.hoverBackground#1b5a6e80
  • selection.background#85a5b455
  • sideBar.background#0d2b35
  • sideBar.border#ffffff11
  • sideBar.foreground#85a5b4
  • sideBarSectionHeader.background#0d2b35
  • sideBarSectionHeader.foreground#85a5b4
  • sideBarTitle.foreground#85a5b4
  • source.elm#85a5b4
  • statusBar.background#0d2b35
  • statusBar.border#ffffff06
  • statusBar.debuggingBackground#081c23
  • statusBar.debuggingBorder#ffffff06
  • statusBar.foreground#5f879a
  • statusBar.noFolderBackground#0d2b35
  • statusBar.noFolderBorder#ffffff06
  • statusBarItem.activeBackground#081c23
  • statusBarItem.hoverBackground#081c23
  • statusBarItem.prominentBackground#081c23
  • statusBarItem.prominentHoverBackground#081c23
  • string.quoted.single.js#ffffff
  • tab.activeBackground#144252
  • tab.activeBorder#ffffff06
  • tab.activeForeground#d6deeb
  • tab.border#ffffff11
  • tab.inactiveBackground#0a232b
  • tab.inactiveForeground#85a5b4
  • tab.unfocusedActiveBorder#ffffff11
  • tab.unfocusedActiveForeground#85a5b4
  • tab.unfocusedInactiveForeground#85a5b4
  • terminal.ansiBlack#0d2b35
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#575656
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#7fdbca
  • terminal.ansiBrightGreen#22da6e
  • terminal.ansiBrightMagenta#c792ea
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffeb95
  • terminal.ansiCyan#21c7a8
  • terminal.ansiGreen#22da6e
  • terminal.ansiMagenta#c792ea
  • terminal.ansiRed#EF5350
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ecc48d
  • titleBar.activeBackground#0d2b35
  • titleBar.activeForeground#eeefff
  • titleBar.border#ffffff06
  • titleBar.inactiveBackground#0a232b
  • walkThrough.embeddedEditorBackground#0d2b35
  • welcomePage.buttonBackground#0d2b35
  • welcomePage.buttonHoverBackground#0d2b35
  • widget.shadow#0d2b35

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#ecf1f3
markup.deleted.diff#EF535090
markup.inserted.diff#addb7bff
Global settings#d6deeb
comment#789cac
string#addb7b
string.quoted, variable.other.readwrite.js#ecc48d
support.constant.math#addb7b
constant.numeric, constant.character.numeric#F78C6C
constant.language, punctuation.definition.constant, variable.other.constant#96beff
constant.character, constant.other#96beff
constant.character.escape#F78C6C
string.regexp, string.regexp keyword.other#96beff
meta.function punctuation.separator.comma#85a5b4
variable#addb7b
punctuation.accessor, keyword#c792ea
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#c792ea
storage.type#96beffa5
storage.type.function.arrow.js
entity.name.class, meta.class entity.name.type.class#ffcb8b
entity.other.inherited-class#addb7b
entity.name.function#96beff
punctuation.definition.tag, meta.tag#d6deeb99
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#96beff
entity.other.attribute-name#78ccf0
entity.name.tag.custom#78ccf0
support.function, support.constant#96beff
support.constant.meta.property-value#78ccf0
support.type, support.class#4ec9b0
support.variable.dom#addb7b
invalid#ffffff
invalid.deprecated#ffffff
keyword.operator#78ccf0
keyword.operator.relational#c792ea
keyword.operator.assignment#c792ea
keyword.operator.arithmetic#c792ea
keyword.operator.bitwise#c792ea
keyword.operator.increment#c792ea
keyword.operator.ternary#c792ea
comment.line.double-slash#789cac
object#cdebf7
constant.language.null#ff5874
meta.brace#d6deeb
meta.delimiter.period#c792ea
punctuation.definition.string#d9f5dd
constant.language.boolean#ff5874
object.comma#ffffff
variable.parameter.function#78ccf0
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#78ccf0
meta.property-list entity.name.tag.reference#78ccf0
constant.other.color.rgb-value punctuation.definition.constant#F78C6C
constant.other.color#ffeb95
keyword.other.unit#ffeb95
meta.selector#c792ea
entity.other.attribute-name.id#ecc48d
meta.property-name#78ccf0
entity.name.tag.doctype, meta.tag.sgml.doctype#c792ea
punctuation.definition.parameters#d9f5dd
keyword.control.operator#78ccf0
keyword.operator.logical#c792ea
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#78ccf0
variable.other.object.property#fafbfc
variable.other.object.js
entity.name.function#96beff
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#c792ea
keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts#c792ea
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control#78ccf0
support.function#addb7b
invalid.broken#020e14
invalid.unimplemented#ffffff
invalid.illegal#ffffff
variable.language#78ccf0
support.variable.property#78ccf0
variable.function#96beff
variable.interpolation#ff5874
meta.function-call#96beff
punctuation.section.embedded#96beff
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#EF5350
string.template punctuation.definition.string#d6deeb
italic#c792eaitalic
bold#addb7bbold
quote#789cac
raw#78ccf0
variable.assignment.coffee#78ccf0
variable.parameter.function.coffee#d6deeb
variable.assignment.coffee#78ccf0
variable.other.readwrite.cs#d6deeb
entity.name.type.class.cs, storage.type.cs#96beff
entity.name.type.namespace.cs#cdebf7
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css#ff5874
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#78ccf0
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#96beff
source.elixir entity.name.function#addb7b
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#96beff
source.elixir punctuation.definition.string#addb7b
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#addb7b
source.elixir .punctuation.binary.elixir#c792ea
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#c792ea
source.go constant.language.go, source.go constant.other.placeholder.go#ff5874
entity.other.attribute-name.id.html#addb7b
punctuation.definition.tag.html#78ccf0
meta.tag.sgml.doctype.html#c792ea
meta.class entity.name.type.class.js#ffcb8b
meta.method.declaration storage.type.js#96beff
terminator.js#d6deeb
meta.js punctuation.definition.js#d6deeb
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#85a5b4
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#96beff
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#addb7b
support.constant.json#addb7b
meta.structure.dictionary.value.json string.quoted.double#c789d6
string.quoted.double.json punctuation.definition.string.json#78ccf0
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ff5874
variable.other.ruby#d6deeb
entity.name.type.class.ruby#ecc48d
constant.language.symbol.hashkey.ruby#78ccf0
constant.language.symbol.ruby#78ccf0
entity.name.tag.less#78ccf0
keyword.other.unit.css#ffeb95
meta.attribute-selector.less entity.other.attribute-name.attribute#F78C6C
markup.heading.markdown#96beff
markup.italic.markdown#c792eaitalic
markup.bold.markdown#addb7bbold
markup.quote.markdown#789cac
markup.inline.raw.markdown#78ccf0
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#96beff
punctuation.definition.metadata.markdown#78ccf0
beginning.punctuation.definition.list.markdown#96beff
markup.inline.raw.string.markdown#addb7b
variable.other.php, variable.other.property.php#ecf1f3
support.class.php#ffcb8b
meta.function-call.php punctuation#d6deeb
variable.other.global.php#addb7b
variable.other.global.php punctuation.definition.variable#addb7b
constant.language.python#ff5874
variable.parameter.function.python, meta.function-call.arguments.python#96beff
meta.function-call.python, meta.function-call.generic.python#78ccf0
punctuation.python#d6deeb
entity.name.function.decorator.python#addb7b
source.python variable.language.special#96beff
keyword.control#c792ea
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#addb7b
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#96beff
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#ecf1f3
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#78ccf0
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#96beff
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#85a5b4
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#96beff
meta.tag.js meta.jsx.children.tsx#96beff
entity.name.tag.yaml#78ccf0
variable.other.readwrite.js, variable.parameter#fafbfc
support.class.component.js, support.class.component.tsx#4ec9b0
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#96beff
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
Owlet by itsjonq - VS Code Theme