Skip to main content
CodingTheme

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#000000
  • activityBar.border#001323ff
  • activityBar.dropBackground#557187ff
  • activityBar.foreground#557187ff
  • activityBarBadge.background#3d5060ff
  • activityBarBadge.foreground#e5e5e5ff
  • badge.background#557187ff
  • badge.foreground#e5e5e5ff
  • breadcrumb.activeSelectionForeground#e5e5e5ff
  • breadcrumb.focusForeground#e5e5e5ff
  • breadcrumb.foreground#9489d1ff
  • breadcrumbPicker.background#000f1eff
  • button.background#714ee5cc
  • button.foreground#e5e5e5cc
  • button.hoverBackground#714eaeff
  • contrastBorder#10283bff
  • debugExceptionWidget.background#001323ff
  • debugExceptionWidget.border#557187ff
  • debugToolBar.background#001323ff
  • diffEditor.insertedTextBackground#89a4e523
  • diffEditor.insertedTextBorder#b1cde533
  • diffEditor.removedTextBackground#d74ae533
  • diffEditor.removedTextBorder#d74ae54d
  • dropdown.background#001323ff
  • dropdown.border#557187ff
  • dropdown.foreground#e5e5e5cc
  • editor.background#000000
  • editor.findMatchBackground#5571e579
  • editor.findMatchHighlightBackground#0e77e55d
  • editor.foreground#c0c7d3ff
  • editor.hoverHighlightBackground#714ee55a
  • editor.inactiveSelectionBackground#714ee55a
  • editor.lineHighlightBackground#0002e5ff
  • editor.rangeHighlightBackground#714ee55a
  • editor.selectionBackground#1a354aff
  • editor.selectionHighlightBackground#5571e579
  • editorBracketMatch.background#5571e54d
  • editorCodeLens.foreground#5475e5b4
  • editorCursor.foreground#7393aeff
  • editorError.foreground#d74a48ff
  • editorGroup.border#000000
  • editorGroup.dropBackground#000000
  • editorGroup.emptyBackground#000000
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#222533ff
  • editorGutter.addedBackground#8cb75aff
  • editorGutter.background#000000
  • editorGutter.deletedBackground#d74a48ff
  • editorGutter.modifiedBackground#cba636ff
  • editorHoverWidget.background#001323ff
  • editorHoverWidget.border#557187ff
  • editorIndentGuide.activeBackground#000000
  • editorIndentGuide.background#000000
  • editorLineNumber.activeForeground#b1cde3ff
  • editorLineNumber.foreground#435a6cff
  • editorMarkerNavigation.background#09243bff
  • editorMarkerNavigationError.background#d74a48ff
  • editorMarkerNavigationWarning.background#e5b524ff
  • editorOverviewRuler.commonContentForeground#714eaeff
  • editorOverviewRuler.currentContentForeground#714eaeff
  • editorOverviewRuler.incomingContentForeground#714eaeff
  • editorRuler.foreground#5474e552
  • editorSuggestWidget.background#272b3cff
  • editorSuggestWidget.border#262a39ff
  • editorSuggestWidget.foreground#c0c7d3ff
  • editorSuggestWidget.highlightForeground#e5e5e5ff
  • editorSuggestWidget.selectedBackground#557187ff
  • editorWarning.foreground#a1864bff
  • editorWidget.background#01111cff
  • editorWidget.border#557187ff
  • errorForeground#d74a48ff
  • extensionButton.prominentBackground#714ee5cc
  • extensionButton.prominentForeground#e5e5e5cc
  • extensionButton.prominentHoverBackground#714eaeff
  • focusBorder#10283bff
  • foreground#c0c7d3ff
  • gitDecoration.conflictingResourceForeground#e5d3e5cc
  • gitDecoration.deletedResourceForeground#d74ae590
  • gitDecoration.ignoredResourceForeground#335169ff
  • gitDecoration.modifiedResourceForeground#91abe2ff
  • gitDecoration.untrackedResourceForeground#b1cde5ff
  • input.background#092134ff
  • input.border#557187ff
  • input.foreground#e5e5e5cc
  • input.placeholderForeground#557187ff
  • inputOption.activeBorder#e5e5e5cc
  • inputValidation.errorBackground#9902e5f2
  • inputValidation.errorBorder#d74a48ff
  • inputValidation.infoBackground#004fe5f2
  • inputValidation.infoBorder#5aa2ddff
  • inputValidation.warningBackground#5c4ee5f2
  • inputValidation.warningBorder#e5b524ff
  • list.activeSelectionBackground#1f45e58c
  • list.activeSelectionForeground#e5e5e5ff
  • list.dropBackground#001323ff
  • list.focusBackground#000b15ff
  • list.focusForeground#e5e5e5ff
  • list.highlightForeground#e5e5e5ff
  • list.hoverBackground#001323ff
  • list.hoverForeground#e5e5e5ff
  • list.inactiveSelectionBackground#0c2438ff
  • list.inactiveSelectionForeground#557187ff
  • list.invalidItemForeground#875585ff
  • menu.background#000000
  • menu.border#000000
  • merge.currentHeaderBackground#557187ff
  • merge.incomingHeaderBackground#714ee55a
  • meta.objectliteral.js#7599e5ff
  • notificationCenter.border#222533ff
  • notificationLink.foreground#73b6b0ff
  • notifications.background#000f1aff
  • notifications.border#222533ff
  • notifications.foreground#e5e5e5cc
  • notificationToast.border#222533ff
  • panel.background#000000
  • panel.border#557187ff
  • panel.foreground#e5e5e5ff
  • panelTitle.activeBorder#557187ff
  • panelTitle.activeForeground#e5e5e5cc
  • panelTitle.inactiveForeground#c0c7e580
  • peekView.border#557187ff
  • peekViewEditor.background#001323ff
  • peekViewEditor.matchHighlightBackground#714ee55a
  • peekViewResult.background#001323ff
  • peekViewResult.fileForeground#557187ff
  • peekViewResult.lineForeground#557187ff
  • peekViewResult.matchHighlightBackground#e5e5e5cc
  • peekViewResult.selectionBackground#292d48ff
  • peekViewResult.selectionForeground#557187ff
  • peekViewTitle.background#001323ff
  • peekViewTitleDescription.foreground#5e6488ff
  • peekViewTitleLabel.foreground#557187ff
  • pickerGroup.border#001323ff
  • pickerGroup.foreground#bc99e5ff
  • progress.background#714eaeff
  • punctuation.definition.generic.begin.html#d74ae5f2
  • scrollbar.shadow#000912ff
  • selection.background#3c67aeff
  • sideBar.background#000000
  • sideBar.border#001323ff
  • sideBar.foreground#7b93e5ff
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#000000
  • sideBarSectionHeader.foreground#557187ff
  • sideBarTitle.foreground#557187ff
  • source.elm#557187ff
  • statusBar.background#000000
  • statusBar.border#222533ff
  • statusBar.debuggingBackground#1c202cff
  • statusBar.debuggingBorder#1b1f2bff
  • statusBar.foreground#557187ff
  • statusBar.noFolderBackground#001323ff
  • statusBar.noFolderBorder#212434ff
  • statusBarItem.activeBackground#1c202cff
  • statusBarItem.hoverBackground#1c202cff
  • statusBarItem.prominentBackground#1c202cff
  • statusBarItem.prominentHoverBackground#1c202cff
  • statusBarItem.remoteBackground#000000
  • string.quoted.single.js#e5e5e5ff
  • tab.activeBackground#09243bff
  • tab.activeBorder#222533ff
  • tab.activeForeground#bdc7cfff
  • tab.border#232635ff
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#557187ff
  • tab.unfocusedActiveBorder#222533ff
  • tab.unfocusedActiveForeground#557187ff
  • tab.unfocusedInactiveForeground#557187ff
  • terminal.ansiBlack#001323ff
  • terminal.ansiBlue#7599e5ff
  • terminal.ansiBrightBlack#4e4d4dff
  • terminal.ansiBrightBlue#7599e5ff
  • terminal.ansiBrightCyan#72c5b5ff
  • terminal.ansiBrightGreen#1ec463ff
  • terminal.ansiBrightMagenta#b383d2ff
  • terminal.ansiBrightRed#d74a48ff
  • terminal.ansiBrightWhite#e5e5e5ff
  • terminal.ansiBrightYellow#e5d386ff
  • terminal.ansiCyan#1db397ff
  • terminal.ansiGreen#1ec463ff
  • terminal.ansiMagenta#b383d2ff
  • terminal.ansiRed#d74a48ff
  • terminal.ansiWhite#e5e5e5ff
  • terminal.ansiYellow#b1cd6cff
  • terminal.background#000000
  • terminal.foreground#e5e5e5ff
  • terminal.selectionBackground#1881e54d
  • terminalCursor.background#1f4564ff
  • textCodeBlock.background#474747ff
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#d6d7e5ff
  • titleBar.inactiveBackground#000000
  • walkThrough.embeddedEditorBackground#001323ff
  • welcomePage.buttonBackground#001323ff
  • welcomePage.buttonHoverBackground#001323ff
  • widget.shadow#001323ff

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#91abe2ffitalic
markup.deleted.diff#d74ae590italic
markup.inserted.diff#b1cde5ffitalic
Global settings#c0c7d3ff
comment#596b6bffitalic
string#d4b07eff
string.quoted, variable.other.readwrite.js#d4b07eff
support.constant.math#b1cd6cff
constant.numeric, constant.character.numeric#de7e61ff
constant.language, punctuation.definition.constant, variable.other.constant#7599e5ff
constant.character, constant.other#7599e5ff
constant.character.escape#de7e61ff
string.regexp, string.regexp keyword.other#5296cdff
meta.function punctuation.separator.comma#557187ff
variable#b1cd6cff
punctuation.accessor, keyword#b383d2ffitalic
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#b383d2ffitalic
storage.type#b383d2ff
storage.type.function.arrow.js
entity.name.class, meta.class entity.name.type.class#e5b67dff
entity.other.inherited-class#b1cd6cff
entity.name.function#b383d2ffitalic
punctuation.definition.tag, meta.tag#72c5b5ff
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#b5d4cfff
entity.other.attribute-name#b1cd6cffitalic
entity.name.tag.custom#de7e61ff
support.function, support.constant#7599e5ff
support.constant.meta.property-value#72c5b5ff
support.type, support.class#b1cd6cff
support.variable.dom#b1cd6cff
invalid#e5e5e5ff
invalid.deprecated#e5e5e5ff
keyword.operator#72c5b5ff
keyword.operator.relational#b383d2ffitalic
keyword.operator.assignment#b383d2ff
keyword.operator.arithmetic#b383d2ff
keyword.operator.bitwise#b383d2ff
keyword.operator.increment#b383d2ff
keyword.operator.ternary#b383d2ff
comment.line.double-slash#596b6bff
object#b8d3deff
constant.language.null#e54f68ff
meta.brace#c0c7d3ff
meta.delimiter.period#b383d2ffitalic
punctuation.definition.string#c3dcc6ff
punctuation.definition.string.begin.markdown#e54f68ff
constant.language.boolean#e54f68ff
object.comma#e5e5e5ff
variable.parameter.function#72c5b5ff
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#73b6b0ff
meta.property-list entity.name.tag.reference#4ed2d8ff
constant.other.color.rgb-value punctuation.definition.constant#de7e61ff
constant.other.color#e5d386ff
keyword.other.unit#e5d386ff
meta.selector#b383d2ffitalic
entity.other.attribute-name.id#e1be2bff
meta.property-name#73b6b0ff
entity.name.tag.doctype, meta.tag.sgml.doctype#b383d2ffitalic
punctuation.definition.parameters#c3dcc6ff
keyword.control.operator#72c5b5ff
keyword.operator.logical#b383d2ff
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#a7d3cbff
variable.other.object.property#e1da8fffitalic
variable.other.object.js
entity.name.function#7599e5ffitalic
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, keyword.operator.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#b383d2ffitalic
keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts#b383d2ff
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control#72c5b5ff
support.function#b1cd6cff
invalid.broken#010c12ff
invalid.unimplemented#e5e5e5ff
invalid.illegal#e5e5e5ff
variable.language#72c5b5ff
support.variable.property#72c5b5ff
variable.function#7599e5ff
variable.interpolation#d4555cff
meta.function-call#7599e5ff
punctuation.section.embedded#bd3b37ff
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#c0c7d3ff
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#c3dcc6ff
string.template meta.template.expression#bd3b37ff
string.template punctuation.definition.string#c0c7d3ff
italic#b383d2ffitalic
bold#b1cd6cffbold
quote#5e6488ffitalic
raw#73b6b0ff
variable.assignment.coffee#2ccad3ff
variable.parameter.function.coffee#c0c7d3ff
variable.assignment.coffee#72c5b5ff
variable.other.readwrite.cs#c0c7d3ff
entity.name.type.class.cs, storage.type.cs#e5b67dff
entity.name.type.namespace.cs#a0b7c0ff
string.unquoted.preprocessor.message.cs#c0c7d3ff
punctuation.separator.hash.cs, keyword.preprocessor.region.cs, keyword.preprocessor.endregion.cs#e5b67dffbold
variable.other.object.cs#a0b7c0ff
entity.name.type.enum.cs#b1cd6cff
string.interpolated.single.dart, string.interpolated.double.dart#e5b67dff
support.class.dart#e5b67dff
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css#e55959ff
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#72c5b5ff
keyword.other.unit.css#e5d386ff
meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js#de7e61ff
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#7599e5ff
source.elixir entity.name.function#b1cd6cff
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#7599e5ff
source.elixir punctuation.definition.string#b1cd6cff
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#b1cd6cff
source.elixir .punctuation.binary.elixir#b383d2ffitalic
constant.keyword.clojure#72c5b5ff
source.go meta.function-call.go#c6c6c6ff
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#b383d2ffitalic
source.go constant.language.go, source.go constant.other.placeholder.go#e54f68ff
entity.name.function.preprocessor.cpp, entity.scope.name.cpp#72c5e5ff
meta.namespace-block.cpp#c9c7b2ff
storage.type.language.primitive.cpp#e54f68ff
meta.preprocessor.macro.cpp#c0c7d3ff
variable.parameter#e5b67dff
variable.other.readwrite.powershell#7599e5ff
support.function.powershell#72c5e5ff
entity.other.attribute-name.id.html#b1cd6cff
punctuation.definition.tag.html#5fd1d8ff
meta.tag.sgml.doctype.html#b383d2ffitalic
meta.class entity.name.type.class.js#e5b67dff
meta.method.declaration storage.type.js#7599e5ff
terminator.js#c0c7d3ff
meta.js punctuation.definition.js#c0c7d3ff
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#557187ff
variable.other.jsdoc, variable.other.phpdoc#6cb7d8ff
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#c0c7d3ff
variable.parameter.function.js#6c78cfff
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#c0c7d3ff
variable.js, variable.other.js#c0c7d3ff
entity.name.type.js, entity.name.type.module.js#e5b67dff
support.class.js#c0c7d3ff
support.type.property-name.json#72c5b5ff
support.constant.json#b1cd6cff
meta.structure.dictionary.value.json string.quoted.double#b37bc0ff
string.quoted.double.json punctuation.definition.string.json#73b6b0ff
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#e54f68ff
variable.other.object.js#72c5b5ffitalic
variable.other.ruby#c0c7d3ff
entity.name.type.class.ruby#d4b07eff
constant.language.symbol.hashkey.ruby#72c5b5ff
constant.language.symbol.ruby#72c5b5ff
entity.name.tag.less#72c5b5ff
keyword.other.unit.css#e5d386ff
meta.attribute-selector.less entity.other.attribute-name.attribute#de7e61ff
markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#759fe5ff
markup.italic.markdown#b383d2ffitalic
markup.bold.markdown#b1cd6cffbold
markup.quote.markdown#5e6488ffitalic
markup.inline.raw.markdown#73b6b0ff
markup.underline.link.markdown, markup.underline.link.image.markdown#e5788aff
string.other.link.title.markdown, string.other.link.description.markdown#c0c7d3ff
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#759fe5ff
punctuation.definition.metadata.markdown#72c5b5ff
beginning.punctuation.definition.list.markdown#759fe5ff
markup.inline.raw.string.markdown#b1cd6cff
variable.other.php, variable.other.property.php#abb1beff
support.class.php#e5b67dff
meta.function-call.php punctuation#c0c7d3ff
variable.other.global.php#b1cd6cff
variable.other.global.php punctuation.definition.variable#b1cd6cff
constant.language.python#e54f68ff
variable.parameter.function.python, meta.function-call.arguments.python#7599e5ff
meta.function-call.python, meta.function-call.generic.python#a0b7c0ff
punctuation.python#c0c7d3ff
entity.name.function.decorator.python#b1cd6cff
source.python variable.language.special#7f9accff
keyword.control#b383d2ffitalic
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#b1cd6cff
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#7599e5ff
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#abb1beff
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#de7e61ff
entity.name.tag.scss, entity.name.tag.sass#72c5b5ff
keyword.other.unit.scss, keyword.other.unit.sass#e5d386ff
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#c0c7d3ff
entity.name.type.ts, entity.name.type.tsx#e5b67dff
support.class.node.ts, support.class.node.tsx#7599e5ff
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#557187ff
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#c0c7d3ff
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#7599e5ff
meta.tag.js meta.jsx.children.tsx#7599e5ff
entity.name.tag.yaml#72c5b5ff
variable.other.readwrite.js, variable.parameter#c1c5c9ff
support.class.component.js, support.class.component.tsx#de7e61ff
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#c0c7d3ff
meta.class entity.name.type.class.tsx#e5b67dff
entity.name.type.tsx, entity.name.type.module.tsx#e5b67dff
meta.class.ts meta.var.expr.ts storage.type.ts, meta.class.tsx meta.var.expr.tsx storage.type.tsx#b383d2ff
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#7599e5ff
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

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Night Owl Oled Dim by Weiyu Wang - VS Code Theme