Skip to main content
CodingTheme

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#0d0221
  • activityBar.border#ffffff11
  • activityBar.dropBackground#766d87
  • activityBar.foreground#766d87
  • activityBarBadge.background#766d87
  • activityBarBadge.foreground#ffffff
  • badge.background#766d87
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#d7d4dc
  • breadcrumb.focusForeground#d7d4dc
  • breadcrumb.foreground#cbc8d2
  • breadcrumbPicker.background#0d0221
  • button.background#f6019dcc
  • button.foreground#ffffffcc
  • button.hoverBackground#f6019d
  • contrastActiveBorder#1a0443
  • contrastBorder#1a0443
  • debugExceptionWidget.background#0d0221
  • debugExceptionWidget.border#766d87
  • debugToolBar.background#0d0221
  • diffEditor.insertedTextBackground#ff6c1123
  • diffEditor.insertedTextBorder#2cfda433
  • diffEditor.removedTextBackground#f706cf33
  • diffEditor.removedTextBorder#f706cf4d
  • dropdown.background#0d0221
  • dropdown.border#766d87
  • dropdown.foreground#ffffffcc
  • editor.background#0d0221
  • editor.findMatchBackground#766d8750
  • editor.findMatchHighlightBackground#1a0443
  • editor.foreground#d6deeb
  • editor.hoverHighlightBackground#f6019d5a
  • editor.inactiveSelectionBackground#f6019d5a
  • editor.lineHighlightBackground#ffffff08
  • editor.rangeHighlightBackground#f6019d5a
  • editor.selectionBackground#24055b
  • editor.selectionHighlightBackground#766d8750
  • editor.wordHighlightBackground#1a0443
  • editor.wordHighlightStrongBackground#1a0443
  • editorBracketMatch.background#766d874d
  • editorCodeLens.foreground#766d8794
  • editorCursor.foreground#cbc8d2
  • editorError.foreground#EF5350
  • editorGroup.background#080115
  • editorGroup.border#0d0221
  • editorGroup.dropBackground#f6019d73
  • editorGroupHeader.noTabsBackground#0d0221
  • editorGroupHeader.tabsBackground#0d0221
  • editorGroupHeader.tabsBorder#ffffff11
  • editorGutter.addedBackground#2cfda4
  • editorGutter.background#0d0221
  • editorGutter.deletedBackground#f706cf
  • editorGutter.modifiedBackground#f9c80e
  • editorHoverWidget.background#0d0221
  • editorHoverWidget.border#766d87
  • editorIndentGuide.activeBackground#766d87
  • editorIndentGuide.background#766d8752
  • editorLineNumber.activeForeground#cbc8d2
  • editorLineNumber.foreground#575164
  • editorMarkerNavigation.background#1a0443
  • editorMarkerNavigationError.background#f706cf
  • editorMarkerNavigationWarning.background#FFCA28
  • editorOverviewRuler.commonContentForeground#f6019d
  • editorOverviewRuler.currentContentForeground#f6019d
  • editorOverviewRuler.incomingContentForeground#f6019d
  • editorRuler.foreground#766d8752
  • editorSuggestWidget.background#1a0443
  • editorSuggestWidget.border#04010b
  • editorSuggestWidget.foreground#d6deeb
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#766d87
  • editorWarning.foreground#b39554
  • editorWidget.background#1a0443
  • editorWidget.border#04010b
  • errorForeground#EF5350
  • extensionButton.prominentBackground#f6019dcc
  • extensionButton.prominentForeground#ffffffcc
  • extensionButton.prominentHoverBackground#f6019d
  • focusBorder#1a0443
  • foreground#d6deeb
  • gitDecoration.conflictingResourceForeground#f9c80ecc
  • gitDecoration.deletedResourceForeground#f706cf90
  • gitDecoration.ignoredResourceForeground#cbc8d240
  • gitDecoration.modifiedResourceForeground#cbc8d2
  • gitDecoration.untrackedResourceForeground#2cfda4ff
  • input.background#04010b
  • input.border#766d87
  • input.foreground#ffffffcc
  • input.placeholderForeground#766d87
  • inputOption.activeBorder#ffffffcc
  • inputValidation.errorBackground#AB0300F2
  • inputValidation.errorBorder#f706cf
  • inputValidation.infoBackground#00589EF2
  • inputValidation.infoBorder#64B5F6
  • inputValidation.warningBackground#675700F2
  • inputValidation.warningBorder#FFCA28
  • list.activeSelectionBackground#766d8760
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#0d0221
  • list.focusBackground#ffffff11
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#1a0443
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#1a0443
  • list.inactiveSelectionForeground#766d87
  • list.invalidItemForeground#975f94
  • merge.currentHeaderBackground#766d87
  • merge.incomingHeaderBackground#f6019d5a
  • meta.objectliteral.js#1496ff
  • notificationLink.foreground#2de2e6
  • notifications.background#0d0221
  • notifications.foreground#ffffffcc
  • panel.background#0d0221
  • panel.border#ffffff33
  • panelTitle.activeBorder#766d87
  • panelTitle.activeForeground#ffffffcc
  • panelTitle.inactiveForeground#d6deeb80
  • peekView.border#766d87
  • peekViewEditor.background#0d0221
  • peekViewEditor.matchHighlightBackground#f6019d5a
  • peekViewResult.background#0d0221
  • peekViewResult.fileForeground#766d87
  • peekViewResult.lineForeground#766d87
  • peekViewResult.matchHighlightBackground#ffffffcc
  • peekViewResult.selectionBackground#280664
  • peekViewResult.selectionForeground#766d87
  • peekViewTitle.background#0d0221
  • peekViewTitleDescription.foreground#6c647c
  • peekViewTitleLabel.foreground#766d87
  • pickerGroup.border#0d0221
  • pickerGroup.foreground#d1aaff
  • progress.background#f6019d
  • punctuation.definition.generic.begin.html#f706cff2
  • scrollbar.shadow#0d0221
  • scrollbarSlider.activeBackground#28066480
  • scrollbarSlider.background#28066480
  • scrollbarSlider.hoverBackground#28066480
  • selection.background#766d8755
  • sideBar.background#0d0221
  • sideBar.border#ffffff11
  • sideBar.foreground#766d87
  • sideBarSectionHeader.background#0d0221
  • sideBarSectionHeader.foreground#766d87
  • sideBarTitle.foreground#766d87
  • source.elm#766d87
  • statusBar.background#0d0221
  • statusBar.border#ffffff06
  • statusBar.debuggingBackground#04010b
  • statusBar.debuggingBorder#ffffff06
  • statusBar.foreground#575164
  • statusBar.noFolderBackground#0d0221
  • statusBar.noFolderBorder#ffffff06
  • statusBarItem.activeBackground#04010b
  • statusBarItem.hoverBackground#04010b
  • statusBarItem.prominentBackground#04010b
  • statusBarItem.prominentHoverBackground#04010b
  • string.quoted.single.js#ffffff
  • tab.activeBackground#1a0443
  • tab.activeBorder#ffffff06
  • tab.activeForeground#d6deeb
  • tab.border#ffffff11
  • tab.inactiveBackground#080115
  • tab.inactiveForeground#766d87
  • tab.unfocusedActiveBorder#ffffff11
  • tab.unfocusedActiveForeground#766d87
  • tab.unfocusedInactiveForeground#766d87
  • terminal.ansiBlack#0d0221
  • 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#0d0221
  • titleBar.activeForeground#eeefff
  • titleBar.border#ffffff06
  • titleBar.inactiveBackground#080115
  • walkThrough.embeddedEditorBackground#0d0221
  • welcomePage.buttonBackground#0d0221
  • welcomePage.buttonHoverBackground#0d0221
  • widget.shadow#0d0221

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#cbc8d2
markup.deleted.diff#f706cf90
markup.inserted.diff#2cfda4ff
Global settings#d6deeb
comment#6c647c
string#2cfda4
string.quoted, variable.other.readwrite.js#f9c80e
support.constant.math#2cfda4
constant.numeric, constant.character.numeric#ff6c11
constant.language, punctuation.definition.constant, variable.other.constant#1496ff
constant.character, constant.other#1496ff
constant.character.escape#ff6c11
string.regexp, string.regexp keyword.other#1496ff
meta.function punctuation.separator.comma#766d87
variable#2cfda4
punctuation.accessor, keyword#f6019d
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#f6019d
storage.type#1496ffa5
storage.type.function.arrow.js
entity.name.class, meta.class entity.name.type.class#f9c80e
entity.other.inherited-class#2cfda4
entity.name.function#1496ff
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#1496ff
entity.other.attribute-name#2de2e6
entity.name.tag.custom#2de2e6
support.function, support.constant#1496ff
support.constant.meta.property-value#2de2e6
support.type, support.class#2de2e6
support.variable.dom#2cfda4
invalid#ffffff
invalid.deprecated#ffffff
keyword.operator#2de2e6
keyword.operator.relational#f6019d
keyword.operator.assignment#f6019d
keyword.operator.arithmetic#f6019d
keyword.operator.bitwise#f6019d
keyword.operator.increment#f6019d
keyword.operator.ternary#f6019d
comment.line.double-slash#6c647c
object#1496ff
constant.language.null#f706cf
meta.brace#d6deeb
meta.delimiter.period#f6019d
punctuation.definition.string#2cfda4
constant.language.boolean#f706cf
object.comma#ffffff
variable.parameter.function#2de2e6
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#2de2e6
meta.property-list entity.name.tag.reference#2de2e6
constant.other.color.rgb-value punctuation.definition.constant#ff6c11
constant.other.color#f9c80e
keyword.other.unit#f9c80e
meta.selector#f6019d
entity.other.attribute-name.id#f9c80e
meta.property-name#2de2e6
entity.name.tag.doctype, meta.tag.sgml.doctype#f6019d
punctuation.definition.parameters#2cfda4
keyword.control.operator#2de2e6
keyword.operator.logical#f6019d
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#2de2e6
variable.other.object.property#d7d4dc
variable.other.object.js
entity.name.function#1496ff
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#f6019d
keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts#f6019d
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control#2de2e6
support.function#2cfda4
invalid.broken#020e14
invalid.unimplemented#ffffff
invalid.illegal#ffffff
variable.language#2de2e6
support.variable.property#2de2e6
variable.function#1496ff
variable.interpolation#f706cf
meta.function-call#1496ff
punctuation.section.embedded#1496ff
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#2cfda4
string.template meta.template.expression#f706cf
string.template punctuation.definition.string#d6deeb
italic#f6019ditalic
bold#2cfda4bold
quote#6c647c
raw#2de2e6
variable.assignment.coffee#2de2e6
variable.parameter.function.coffee#d6deeb
variable.assignment.coffee#2de2e6
variable.other.readwrite.cs#d6deeb
entity.name.type.class.cs, storage.type.cs#1496ff
entity.name.type.namespace.cs#1496ff
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css#f706cf
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#2de2e6
keyword.other.unit.css#f9c80e
meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js#ff6c11
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#1496ff
source.elixir entity.name.function#2cfda4
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#1496ff
source.elixir punctuation.definition.string#2cfda4
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#2cfda4
source.elixir .punctuation.binary.elixir#f6019d
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#f6019d
source.go constant.language.go, source.go constant.other.placeholder.go#f706cf
entity.other.attribute-name.id.html#2cfda4
punctuation.definition.tag.html#2de2e6
meta.tag.sgml.doctype.html#f6019d
meta.class entity.name.type.class.js#f9c80e
meta.method.declaration storage.type.js#1496ff
terminator.js#d6deeb
meta.js punctuation.definition.js#d6deeb
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#766d87
variable.other.jsdoc, variable.other.phpdoc#2de2e6
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#1496ff
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#f9c80e
support.class.js#d6deeb
support.type.property-name.json#2cfda4
support.constant.json#2cfda4
meta.structure.dictionary.value.json string.quoted.double#f6019d
string.quoted.double.json punctuation.definition.string.json#2de2e6
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#f706cf
variable.other.ruby#d6deeb
entity.name.type.class.ruby#f9c80e
constant.language.symbol.hashkey.ruby#2de2e6
constant.language.symbol.ruby#2de2e6
entity.name.tag.less#2de2e6
keyword.other.unit.css#f9c80e
meta.attribute-selector.less entity.other.attribute-name.attribute#ff6c11
markup.heading.markdown#1496ff
markup.italic.markdown#f6019ditalic
markup.bold.markdown#2cfda4bold
markup.quote.markdown#6c647c
markup.inline.raw.markdown#2de2e6
markup.underline.link.markdown, markup.underline.link.image.markdown#f706cf
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#1496ff
punctuation.definition.metadata.markdown#2de2e6
beginning.punctuation.definition.list.markdown#1496ff
markup.inline.raw.string.markdown#2cfda4
variable.other.php, variable.other.property.php#cbc8d2
support.class.php#f9c80e
meta.function-call.php punctuation#d6deeb
variable.other.global.php#2cfda4
variable.other.global.php punctuation.definition.variable#2cfda4
constant.language.python#f706cf
variable.parameter.function.python, meta.function-call.arguments.python#1496ff
meta.function-call.python, meta.function-call.generic.python#2de2e6
punctuation.python#d6deeb
entity.name.function.decorator.python#2cfda4
source.python variable.language.special#1496ff
keyword.control#f6019d
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#2cfda4
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#1496ff
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#cbc8d2
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#ff6c11
entity.name.tag.scss, entity.name.tag.sass#2de2e6
keyword.other.unit.scss, keyword.other.unit.sass#f9c80e
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#f9c80e
support.class.node.ts, support.class.node.tsx#1496ff
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#766d87
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#1496ff
meta.tag.js meta.jsx.children.tsx#1496ff
entity.name.tag.yaml#2de2e6
variable.other.readwrite.js, variable.parameter#d7d4dc
support.class.component.js, support.class.component.tsx#2de2e6
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#d6deeb
meta.class entity.name.type.class.tsx#f9c80e
entity.name.type.tsx, entity.name.type.module.tsx#f9c80e
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#1496ff
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...

Outrunner by itsjonq - VS Code Theme