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#001221ff
  • activityBar.dropBackground#506b80ff
  • activityBar.foreground#506b80ff
  • activityBarBadge.background#394b5aff
  • activityBarBadge.foreground#d8d8d8ff
  • badge.background#506b80ff
  • badge.foreground#d8d8d8ff
  • breadcrumb.activeSelectionForeground#d8d8d8ff
  • breadcrumb.focusForeground#d8d8d8ff
  • breadcrumb.foreground#8c82c6ff
  • breadcrumbPicker.background#000e1cff
  • button.background#6b49d8cc
  • button.foreground#d8d8d8cc
  • button.hoverBackground#6b49a4ff
  • contrastBorder#0f2638ff
  • debugExceptionWidget.background#001221ff
  • debugExceptionWidget.border#506b80ff
  • debugToolBar.background#001221ff
  • diffEditor.insertedTextBackground#829bd823
  • diffEditor.insertedTextBorder#a7c1d833
  • diffEditor.removedTextBackground#cb46d833
  • diffEditor.removedTextBorder#cb46d84d
  • dropdown.background#001221ff
  • dropdown.border#506b80ff
  • dropdown.foreground#d8d8d8cc
  • editor.background#000000
  • editor.findMatchBackground#506bd879
  • editor.findMatchHighlightBackground#0d71d85d
  • editor.foreground#b5bcc7ff
  • editor.hoverHighlightBackground#6b49d85a
  • editor.inactiveSelectionBackground#6b49d85a
  • editor.lineHighlightBackground#0002d8ff
  • editor.rangeHighlightBackground#6b49d85a
  • editor.selectionBackground#183246ff
  • editor.selectionHighlightBackground#506bd879
  • editorBracketMatch.background#506bd84d
  • editorCodeLens.foreground#4f6ed8b4
  • editorCursor.foreground#6c8ba4ff
  • editorError.foreground#cb4644ff
  • editorGroup.border#000000
  • editorGroup.dropBackground#000000
  • editorGroup.emptyBackground#000000
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#202330ff
  • editorGutter.addedBackground#84ad55ff
  • editorGutter.background#000000
  • editorGutter.deletedBackground#cb4644ff
  • editorGutter.modifiedBackground#c09d33ff
  • editorHoverWidget.background#001221ff
  • editorHoverWidget.border#506b80ff
  • editorIndentGuide.activeBackground#000000
  • editorIndentGuide.background#000000
  • editorLineNumber.activeForeground#a7c1d7ff
  • editorLineNumber.foreground#3f5566ff
  • editorMarkerNavigation.background#092238ff
  • editorMarkerNavigationError.background#cb4644ff
  • editorMarkerNavigationWarning.background#d8ab22ff
  • editorOverviewRuler.commonContentForeground#6b49a4ff
  • editorOverviewRuler.currentContentForeground#6b49a4ff
  • editorOverviewRuler.incomingContentForeground#6b49a4ff
  • editorRuler.foreground#4f6dd852
  • editorSuggestWidget.background#252838ff
  • editorSuggestWidget.border#242736ff
  • editorSuggestWidget.foreground#b5bcc7ff
  • editorSuggestWidget.highlightForeground#d8d8d8ff
  • editorSuggestWidget.selectedBackground#506b80ff
  • editorWarning.foreground#987e47ff
  • editorWidget.background#01101bff
  • editorWidget.border#506b80ff
  • errorForeground#cb4644ff
  • extensionButton.prominentBackground#6b49d8cc
  • extensionButton.prominentForeground#d8d8d8cc
  • extensionButton.prominentHoverBackground#6b49a4ff
  • focusBorder#0f2638ff
  • foreground#b5bcc7ff
  • gitDecoration.conflictingResourceForeground#d8c7d8cc
  • gitDecoration.deletedResourceForeground#cb46d890
  • gitDecoration.ignoredResourceForeground#304c63ff
  • gitDecoration.modifiedResourceForeground#89a2d6ff
  • gitDecoration.untrackedResourceForeground#a7c1d8ff
  • input.background#091f31ff
  • input.border#506b80ff
  • input.foreground#d8d8d8cc
  • input.placeholderForeground#506b80ff
  • inputOption.activeBorder#d8d8d8cc
  • inputValidation.errorBackground#9102d8f2
  • inputValidation.errorBorder#cb4644ff
  • inputValidation.infoBackground#004ad8f2
  • inputValidation.infoBorder#5599d1ff
  • inputValidation.warningBackground#5749d8f2
  • inputValidation.warningBorder#d8ab22ff
  • list.activeSelectionBackground#1d41d88c
  • list.activeSelectionForeground#d8d8d8ff
  • list.dropBackground#001221ff
  • list.focusBackground#000b14ff
  • list.focusForeground#d8d8d8ff
  • list.highlightForeground#d8d8d8ff
  • list.hoverBackground#001221ff
  • list.hoverForeground#d8d8d8ff
  • list.inactiveSelectionBackground#0b2235ff
  • list.inactiveSelectionForeground#506b80ff
  • list.invalidItemForeground#80507dff
  • menu.background#000000
  • menu.border#000000
  • merge.currentHeaderBackground#506b80ff
  • merge.incomingHeaderBackground#6b49d85a
  • meta.objectliteral.js#6e90d8ff
  • notificationCenter.border#202330ff
  • notificationLink.foreground#6caca6ff
  • notifications.background#000e18ff
  • notifications.border#202330ff
  • notifications.foreground#d8d8d8cc
  • notificationToast.border#202330ff
  • panel.background#000000
  • panel.border#506b80ff
  • panel.foreground#d8d8d8ff
  • panelTitle.activeBorder#506b80ff
  • panelTitle.activeForeground#d8d8d8cc
  • panelTitle.inactiveForeground#b5bcd880
  • peekView.border#506b80ff
  • peekViewEditor.background#001221ff
  • peekViewEditor.matchHighlightBackground#6b49d85a
  • peekViewResult.background#001221ff
  • peekViewResult.fileForeground#506b80ff
  • peekViewResult.lineForeground#506b80ff
  • peekViewResult.matchHighlightBackground#d8d8d8cc
  • peekViewResult.selectionBackground#272a44ff
  • peekViewResult.selectionForeground#506b80ff
  • peekViewTitle.background#001221ff
  • peekViewTitleDescription.foreground#595f81ff
  • peekViewTitleLabel.foreground#506b80ff
  • pickerGroup.border#001221ff
  • pickerGroup.foreground#b190d8ff
  • progress.background#6b49a4ff
  • punctuation.definition.generic.begin.html#cb46d8f2
  • scrollbar.shadow#000911ff
  • selection.background#3861a4ff
  • sideBar.background#000000
  • sideBar.border#001221ff
  • sideBar.foreground#748bd8ff
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#000000
  • sideBarSectionHeader.foreground#506b80ff
  • sideBarTitle.foreground#506b80ff
  • source.elm#506b80ff
  • statusBar.background#000000
  • statusBar.border#202330ff
  • statusBar.debuggingBackground#1b1e29ff
  • statusBar.debuggingBorder#1a1d28ff
  • statusBar.foreground#506b80ff
  • statusBar.noFolderBackground#001221ff
  • statusBar.noFolderBorder#1f2231ff
  • statusBarItem.activeBackground#1b1e29ff
  • statusBarItem.hoverBackground#1b1e29ff
  • statusBarItem.prominentBackground#1b1e29ff
  • statusBarItem.prominentHoverBackground#1b1e29ff
  • statusBarItem.remoteBackground#000000
  • string.quoted.single.js#d8d8d8ff
  • tab.activeBackground#092238ff
  • tab.activeBorder#202330ff
  • tab.activeForeground#b2bcc4ff
  • tab.border#212432ff
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#506b80ff
  • tab.unfocusedActiveBorder#202330ff
  • tab.unfocusedActiveForeground#506b80ff
  • tab.unfocusedInactiveForeground#506b80ff
  • terminal.ansiBlack#001221ff
  • terminal.ansiBlue#6e90d8ff
  • terminal.ansiBrightBlack#494949ff
  • terminal.ansiBrightBlue#6e90d8ff
  • terminal.ansiBrightCyan#6bbaabff
  • terminal.ansiBrightGreen#1cb95dff
  • terminal.ansiBrightMagenta#a97cc6ff
  • terminal.ansiBrightRed#cb4644ff
  • terminal.ansiBrightWhite#d8d8d8ff
  • terminal.ansiBrightYellow#d8c77eff
  • terminal.ansiCyan#1ca98eff
  • terminal.ansiGreen#1cb95dff
  • terminal.ansiMagenta#a97cc6ff
  • terminal.ansiRed#cb4644ff
  • terminal.ansiWhite#d8d8d8ff
  • terminal.ansiYellow#a7c166ff
  • terminal.background#000000
  • terminal.foreground#d8d8d8ff
  • terminal.selectionBackground#167ad84d
  • terminalCursor.background#1d415fff
  • textCodeBlock.background#434343ff
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#cacbd8ff
  • titleBar.inactiveBackground#000000
  • walkThrough.embeddedEditorBackground#001221ff
  • welcomePage.buttonBackground#001221ff
  • welcomePage.buttonHoverBackground#001221ff
  • widget.shadow#001221ff

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#89a2d6ffitalic
markup.deleted.diff#cb46d890italic
markup.inserted.diff#a7c1d8ffitalic
Global settings#b5bcc7ff
comment#546565ffitalic
string#c8a677ff
string.quoted, variable.other.readwrite.js#c8a677ff
support.constant.math#a7c166ff
constant.numeric, constant.character.numeric#d1775bff
constant.language, punctuation.definition.constant, variable.other.constant#6e90d8ff
constant.character, constant.other#6e90d8ff
constant.character.escape#d1775bff
string.regexp, string.regexp keyword.other#4e8dc1ff
meta.function punctuation.separator.comma#506b80ff
variable#a7c166ff
punctuation.accessor, keyword#a97cc6ffitalic
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#a97cc6ffitalic
storage.type#a97cc6ff
storage.type.function.arrow.js
entity.name.class, meta.class entity.name.type.class#d8ac76ff
entity.other.inherited-class#a7c166ff
entity.name.function#a97cc6ffitalic
punctuation.definition.tag, meta.tag#6bbaabff
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#abc8c3ff
entity.other.attribute-name#a7c166ffitalic
entity.name.tag.custom#d1775bff
support.function, support.constant#6e90d8ff
support.constant.meta.property-value#6bbaabff
support.type, support.class#a7c166ff
support.variable.dom#a7c166ff
invalid#d8d8d8ff
invalid.deprecated#d8d8d8ff
keyword.operator#6bbaabff
keyword.operator.relational#a97cc6ffitalic
keyword.operator.assignment#a97cc6ff
keyword.operator.arithmetic#a97cc6ff
keyword.operator.bitwise#a97cc6ff
keyword.operator.increment#a97cc6ff
keyword.operator.ternary#a97cc6ff
comment.line.double-slash#546565ff
object#aec7d1ff
constant.language.null#d84a62ff
meta.brace#b5bcc7ff
meta.delimiter.period#a97cc6ffitalic
punctuation.definition.string#b8d0bbff
punctuation.definition.string.begin.markdown#d84a62ff
constant.language.boolean#d84a62ff
object.comma#d8d8d8ff
variable.parameter.function#6bbaabff
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#6caca6ff
meta.property-list entity.name.tag.reference#49c6ccff
constant.other.color.rgb-value punctuation.definition.constant#d1775bff
constant.other.color#d8c77eff
keyword.other.unit#d8c77eff
meta.selector#a97cc6ffitalic
entity.other.attribute-name.id#d4b428ff
meta.property-name#6caca6ff
entity.name.tag.doctype, meta.tag.sgml.doctype#a97cc6ffitalic
punctuation.definition.parameters#b8d0bbff
keyword.control.operator#6bbaabff
keyword.operator.logical#a97cc6ff
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#9ec7c0ff
variable.other.object.property#d4ce87ffitalic
variable.other.object.js
entity.name.function#6e90d8ffitalic
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#a97cc6ffitalic
keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts#a97cc6ff
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control#6bbaabff
support.function#a7c166ff
invalid.broken#010b11ff
invalid.unimplemented#d8d8d8ff
invalid.illegal#d8d8d8ff
variable.language#6bbaabff
support.variable.property#6bbaabff
variable.function#6e90d8ff
variable.interpolation#c85057ff
meta.function-call#6e90d8ff
punctuation.section.embedded#b33834ff
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#b5bcc7ff
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#b8d0bbff
string.template meta.template.expression#b33834ff
string.template punctuation.definition.string#b5bcc7ff
italic#a97cc6ffitalic
bold#a7c166ffbold
quote#595f81ffitalic
raw#6caca6ff
variable.assignment.coffee#29bfc7ff
variable.parameter.function.coffee#b5bcc7ff
variable.assignment.coffee#6bbaabff
variable.other.readwrite.cs#b5bcc7ff
entity.name.type.class.cs, storage.type.cs#d8ac76ff
entity.name.type.namespace.cs#97adb5ff
string.unquoted.preprocessor.message.cs#b5bcc7ff
punctuation.separator.hash.cs, keyword.preprocessor.region.cs, keyword.preprocessor.endregion.cs#d8ac76ffbold
variable.other.object.cs#97adb5ff
entity.name.type.enum.cs#a7c166ff
string.interpolated.single.dart, string.interpolated.double.dart#d8ac76ff
support.class.dart#d8ac76ff
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css#d85454ff
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#6bbaabff
keyword.other.unit.css#d8c77eff
meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js#d1775bff
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#6e90d8ff
source.elixir entity.name.function#a7c166ff
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#6e90d8ff
source.elixir punctuation.definition.string#a7c166ff
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#a7c166ff
source.elixir .punctuation.binary.elixir#a97cc6ffitalic
constant.keyword.clojure#6bbaabff
source.go meta.function-call.go#bbbbbbff
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#a97cc6ffitalic
source.go constant.language.go, source.go constant.other.placeholder.go#d84a62ff
entity.name.function.preprocessor.cpp, entity.scope.name.cpp#6bbad8ff
meta.namespace-block.cpp#bebca8ff
storage.type.language.primitive.cpp#d84a62ff
meta.preprocessor.macro.cpp#b5bcc7ff
variable.parameter#d8ac76ff
variable.other.readwrite.powershell#6e90d8ff
support.function.powershell#6bbad8ff
entity.other.attribute-name.id.html#a7c166ff
punctuation.definition.tag.html#5ac6ccff
meta.tag.sgml.doctype.html#a97cc6ffitalic
meta.class entity.name.type.class.js#d8ac76ff
meta.method.declaration storage.type.js#6e90d8ff
terminator.js#b5bcc7ff
meta.js punctuation.definition.js#b5bcc7ff
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#506b80ff
variable.other.jsdoc, variable.other.phpdoc#66adccff
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#b5bcc7ff
variable.parameter.function.js#6671c4ff
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#b5bcc7ff
variable.js, variable.other.js#b5bcc7ff
entity.name.type.js, entity.name.type.module.js#d8ac76ff
support.class.js#b5bcc7ff
support.type.property-name.json#6bbaabff
support.constant.json#a7c166ff
meta.structure.dictionary.value.json string.quoted.double#a974b5ff
string.quoted.double.json punctuation.definition.string.json#6caca6ff
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#d84a62ff
variable.other.object.js#6bbaabffitalic
variable.other.ruby#b5bcc7ff
entity.name.type.class.ruby#c8a677ff
constant.language.symbol.hashkey.ruby#6bbaabff
constant.language.symbol.ruby#6bbaabff
entity.name.tag.less#6bbaabff
keyword.other.unit.css#d8c77eff
meta.attribute-selector.less entity.other.attribute-name.attribute#d1775bff
markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#6e96d8ff
markup.italic.markdown#a97cc6ffitalic
markup.bold.markdown#a7c166ffbold
markup.quote.markdown#595f81ffitalic
markup.inline.raw.markdown#6caca6ff
markup.underline.link.markdown, markup.underline.link.image.markdown#d87182ff
string.other.link.title.markdown, string.other.link.description.markdown#b5bcc7ff
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#6e96d8ff
punctuation.definition.metadata.markdown#6bbaabff
beginning.punctuation.definition.list.markdown#6e96d8ff
markup.inline.raw.string.markdown#a7c166ff
variable.other.php, variable.other.property.php#a1a7b4ff
support.class.php#d8ac76ff
meta.function-call.php punctuation#b5bcc7ff
variable.other.global.php#a7c166ff
variable.other.global.php punctuation.definition.variable#a7c166ff
constant.language.python#d84a62ff
variable.parameter.function.python, meta.function-call.arguments.python#6e90d8ff
meta.function-call.python, meta.function-call.generic.python#97adb5ff
punctuation.python#b5bcc7ff
entity.name.function.decorator.python#a7c166ff
source.python variable.language.special#7892c0ff
keyword.control#a97cc6ffitalic
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#a7c166ff
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#6e90d8ff
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#a1a7b4ff
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#d1775bff
entity.name.tag.scss, entity.name.tag.sass#6bbaabff
keyword.other.unit.scss, keyword.other.unit.sass#d8c77eff
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#b5bcc7ff
entity.name.type.ts, entity.name.type.tsx#d8ac76ff
support.class.node.ts, support.class.node.tsx#6e90d8ff
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#506b80ff
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#b5bcc7ff
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#6e90d8ff
meta.tag.js meta.jsx.children.tsx#6e90d8ff
entity.name.tag.yaml#6bbaabff
variable.other.readwrite.js, variable.parameter#b6babeff
support.class.component.js, support.class.component.tsx#d1775bff
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#b5bcc7ff
meta.class entity.name.type.class.tsx#d8ac76ff
entity.name.type.tsx, entity.name.type.module.tsx#d8ac76ff
meta.class.ts meta.var.expr.ts storage.type.ts, meta.class.tsx meta.var.expr.tsx storage.type.tsx#a97cc6ff
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#6e90d8ff
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