Skip to main content
Coding Theme

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#1c0333
  • activityBar.border#00000000
  • activityBar.dropBackground#c1ff7455
  • activityBar.foreground#c1ff7455
  • activityBarBadge.background#c1ff74
  • activityBarBadge.foreground#1c0333
  • badge.background#c1ff74
  • badge.foreground#1c0333
  • button.background#c1ff74
  • button.foreground#1c0333
  • button.hoverBackground#d793ff
  • contrastBorder#1c0333
  • debugExceptionWidget.background#1c0333
  • debugExceptionWidget.border#d793ff
  • debugToolBar.background#1c0333
  • diffEditor.insertedTextBackground#5effaa44
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedTextBackground#ff82da44
  • diffEditor.removedTextBorder#00000000
  • dropdown.background#1c0333
  • dropdown.border#00000000
  • dropdown.foreground#f9fff0
  • editor.background#1c0333
  • editor.findMatchHighlightBackground#5effaa44
  • editor.findRangeHighlightBackground#f9fff022
  • editor.foreground#f9fff0
  • editor.hoverHighlightBackground#f9fff011
  • editor.inactiveSelectionBackground#f9fff011
  • editor.lineHighlightBackground#f9fff011
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#f9fff022
  • editor.selectionBackground#38234b
  • editor.selectionHighlightBackground#f9fff00a
  • editor.wordHighlightBackground#38234b
  • editor.wordHighlightStrongBackground#2d1641
  • editorCursor.foreground#8b8192
  • editorError.foreground#ff82da
  • editorGroupHeader.tabsBackground#1c0333
  • editorGroupHeader.tabsBorder#1c0333
  • editorGutter.addedBackground#5effaa44
  • editorGutter.deletedBackground#ff82da44
  • editorGutter.modifiedBackground#c1ff7444
  • editorHoverWidget.background#2d1641
  • editorHoverWidget.border#c1ff74
  • editorIndentGuide.activeBackground#5e4f6c
  • editorIndentGuide.background#38234b
  • editorLineNumber.foreground#8b8192
  • editorMarkerNavigation.background#1c0333
  • editorMarkerNavigationError.background#ff82da
  • editorMarkerNavigationWarning.background#ff82da
  • editorOverviewRuler.commonContentForeground#d793ff
  • editorOverviewRuler.currentContentForeground#d793ff
  • editorOverviewRuler.incomingContentForeground#d793ff
  • editorRuler.foreground#8b8192
  • editorSuggestWidget.background#2d1641
  • editorSuggestWidget.border#5e4f6c
  • editorSuggestWidget.foreground#f9fff0
  • editorWarning.foreground#ff82da
  • editorWidget.background#1c0333
  • errorForeground#ff82da
  • extensionButton.prominentBackground#d793ff
  • extensionButton.prominentForeground#1c0333
  • extensionButton.prominentHoverBackground#d793ff
  • focusBorder#00000000
  • foreground#f9fff0
  • gitDecoration.conflictingResourceForeground#ff82da
  • gitDecoration.ignoredResourceForeground#8b8192
  • gitDecoration.modifiedResourceForeground#c1ff74
  • gitDecoration.untrackedResourceForeground#5effaa
  • input.background#2d1641
  • input.border#c1ff7444
  • input.foreground#f9fff0
  • input.placeholderForeground#8b8192
  • inputOption.activeBorder#f9fff0
  • inputValidation.errorBackground#ff82da
  • inputValidation.errorBorder#ff82da
  • inputValidation.infoBackground#d793ff
  • inputValidation.infoBorder#d793ff
  • inputValidation.warningBackground#ff82da44
  • inputValidation.warningBorder#ff82da44
  • list.activeSelectionBackground#38234b
  • list.activeSelectionForeground#f9fff0
  • list.errorForeground#ff82da
  • list.focusBackground#483559
  • list.focusForeground#f9fff0
  • list.highlightForeground#f9fff0
  • list.hoverBackground#2d1641
  • list.hoverForeground#f9fff0
  • list.inactiveSelectionBackground#38234b
  • list.inactiveSelectionForeground#f9fff0
  • list.invalidItemForeground#ff82da
  • list.warningForeground#ff82da
  • merge.currentHeaderBackground#d793ff
  • merge.incomingHeaderBackground#d793ff
  • panel.background#1c0333
  • panel.border#38234b
  • panelTitle.activeBorder#c1ff74
  • panelTitle.activeForeground#f9fff0
  • panelTitle.inactiveForeground#8b8192
  • peekView.border#d793ff
  • peekViewEditor.matchHighlightBackground#5effaa44
  • peekViewResult.fileForeground#f9fff0
  • peekViewResult.lineForeground#f9fff0
  • peekViewResult.matchHighlightBackground#5effaa44
  • peekViewResult.selectionForeground#f9fff0
  • peekViewTitle.background#1c0333
  • peekViewTitleLabel.foreground#f9fff0
  • pickerGroup.foreground#d793ff
  • progressBar.background#d793ff
  • scrollbarSlider.activeBackground#38234b
  • scrollbarSlider.background#483559
  • scrollbarSlider.hoverBackground#38234b
  • settings.checkboxBackground#38234b
  • settings.checkboxBorder#00000000
  • settings.checkboxForeground#f9fff0
  • settings.dropdownBackground#38234b
  • settings.dropdownBorder#00000000
  • settings.inactiveSelectedItemBorder#c1ff74
  • settings.modifiedItemForeground#c1ff74
  • settings.numberInputBackground#38234b
  • settings.numberInputBorder#00000000
  • settings.textInputBackground#38234b
  • settings.textInputBorder#00000000
  • sideBar.background#250d3a
  • sideBar.border#00000000
  • sideBar.foreground#f9fff0
  • sideBarSectionHeader.background#1c0333
  • sideBarSectionHeader.foreground#8b8192
  • sideBarTitle.foreground#f9fff0
  • statusBar.background#1c0333
  • statusBar.border#1c0333
  • statusBar.debuggingBackground#ff82da44
  • statusBar.foreground#f9fff088
  • statusBar.noFolderBackground#1c0333
  • tab.activeBackground#38234b
  • tab.activeBorder#c1ff74
  • tab.activeForeground#f9fff0
  • tab.border#1c0333
  • tab.inactiveBackground#2d1641
  • tab.inactiveForeground#8b8192
  • tab.unfocusedActiveBorder#1c0333
  • terminal.ansiBlack#b7b3b7
  • terminal.ansiBlue#5effaa
  • terminal.ansiBrightBlack#b7b3b7
  • terminal.ansiBrightBlue#d793ff
  • terminal.ansiBrightCyan#d793ff
  • terminal.ansiBrightGreen#5effaa
  • terminal.ansiBrightMagenta#c1ff74
  • terminal.ansiBrightRed#ff82da
  • terminal.ansiBrightWhite#f9fff0
  • terminal.ansiBrightYellow#e3ffc0
  • terminal.ansiCyan#d793ff
  • terminal.ansiGreen#5effaa
  • terminal.ansiMagenta#a386ff
  • terminal.ansiRed#ff82da
  • terminal.ansiWhite#f9fff0
  • terminal.ansiYellow#e3ffc0
  • textLink.activeForeground#5effaa
  • textLink.foreground#5effaa
  • titleBar.activeBackground#1c0333
  • titleBar.activeForeground#8b8192
  • titleBar.inactiveForeground#8b8192

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#f9fff0
comment#5e4f6c
comment.block#8b8192
string, string.quoted#d793ff
string.regexp, string.regexp keyword.other, punctuation.definition.template-expression#e3ffc0
string.template meta.template.expression, string.template.js#a386ff
constant.language.boolean#5effaa
support.constant.math#e3ffc0
constant.language, punctuation.definition.constant, variable.other.constant, source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#5effaa
constant.character, constant.other#e3ffc0
support.constant, keyword.other.special-method, keyword.other.new#5effaa
support.constant.json#e3ffc0
constant.character.escape#5effaa
constant.numeric, constant.character.numeric#e3ffc0
variable#e3ffc0
punctuation.accessor, keyword#b7b3b7
keyword.other.unit#c1ff74
keyword.operator#c1ff74
storage#c1ff74
constant.language.null#5effaa
storage.type, meta.var.expr storage.type, meta.class meta.method.declaration meta.var.expr storage.type.js#a386ff
entity.name.class, meta.class entity.name.type.class#e3ffc0
entity.other.inherited-class#d793ff
entity.name.function#e3ffc0
variable.parameter#d793ff
punctuation.definition.tag, meta.tag#f9fff0
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#f9fff0
variable.other.jsdoc, variable.other.phpdoc#d793ff
support.class.component, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, meta.tag.js, meta.tag.tsx, meta.tag.html#c1ff74
meta.tag.structure.body entity.name.tag, meta.tag.structure.head entity.name.tag, meta.tag.structure.html entity.name.tag, meta.tag.metadata.style entity.name.tag, meta.tag.structure.html punctuation.definition.tag, meta.tag.structure.head punctuation.definition.tag, meta.tag.structure.body punctuation.definition.tag, meta.tag.metadata.style punctuation.definition.tagbold
entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, punctuation.definition.tag#d793ff
meta.tag.metadata.script entity.name.tag, meta.tag.metadata.script punctuation.definition.tag#5effaa
punctuation.definition.tag.html#5effaa
entity.other.attribute-name#e3ffc0
meta.attribute string.quoted#a386ff
entity.other.attribute-name.id.html, meta.attribute.id.html entity.other.attribute-name, meta.attribute.name.html entity.other.attribute-name, meta.attribute.href.html entity.other.attribute-name, meta.attribute.src.html entity.other.attribute-name#c1ff74
entity.name.tag.custom#e3ffc0
constant.character.entity.named#a386ff
meta.tag.sgml.doctype.html, entity.name.tag.doctype, meta.tag.sgml.doctype, meta.tag.metadata.doctype.html entity.name.tag.html, meta.tag.metadata.doctype.html entity.other.attribute-name.html, meta.tag.metadata.doctype.html punctuation.definition.tag#c1ff7499italic
support.constant#d793ff
support.constant.meta.property-value#5effaa
support.type, support.class#e3ffc0
support.variable.dom#e3ffc0
keyword.operator.relational#c1ff74
keyword.operator.assignment#c1ff74
meta.brace#f9fff0
meta.delimiter.period#c1ff74
object.comma#f9fff0
variable.parameter.function#5effaa
support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag#d793ff
meta.property-list entity.name.tag.reference#a386ff
constant.other.color.rgb-value punctuation.definition.constant, constant.other.color.rgb-value.hex.css#5effaa
constant.other.color#c1ff74
meta.selector#c1ff74
entity.other.attribute-name.id#d793ff
meta.property-name#d793ff
punctuation.definition.parameters#f9fff0
keyword.control.operator#5effaa
keyword.operator.logical#c1ff74
variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance#a386ff
variable.language#a386ff
variable.other.property#c1ff74
variable.other.object.property#f9fff0
entity.name.function#e3ffc0
keyword.operator.comparison#c1ff74
support.function#f9fff0
invalid, invalid.deprecated#ff82da
invalid.broken#ff82da
invalid.unimplemented#ff82da
invalid.illegal#ff82da
support.variable.property#5effaa
support.variable.property.dom.js#5effaa
variable.function#5effaa
variable.interpolation#a386ff
meta.function-call#e3ffc0
punctuation.section.embedded#a386ff
italic#c1ff74italic
bold#e3ffc0bold
quote#d793ff
raw#d793ff
variable.assignment.coffee#5effaa
variable.parameter.function.coffee#f9fff0
variable.assignment.coffee#5effaa
variable.other.readwrite.cs#f9fff0
entity.name.type.class.cs, storage.type.cs#e3ffc0
entity.name.type.namespace.cs#c1ff74
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#a386ff
keyword.control.at-rule, keyword.control.at-rule punctuation.definition#5effaabold
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass, keyword.operator.combinator.css#5effaabold
source.css keyword.other.unit, source.css constant.numeric#c1ff74
meta.attribute-selector.css entity.other.attribute-name.attribute#5effaa
support.type.property-name.css#f9fff0
meta.property-value.scss, meta.property-value.scss support.type.property-name.css#e3ffc0
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#e3ffc0
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#5effaa
entity.name.tag.scss, entity.name.tag.sass#a386ff
keyword.other.unit.scss, keyword.other.unit.sass#c1ff74
support.function.misc.scss, support.function.misc.sass#d793ff
meta.directive.vue entity.other.attribute-name#c1ff74
source.directive.vue variable.other.readwrite.js, source.directive.vue punctuation.definition.string#a386ff
meta.directive.vue string.quoted.single.js#5effaa
source.vue meta.tag string.quoted#f9fff0
source.vue entity.name.tag.template.htmlbold
source.vue entity.name.tag.script.htmlbold
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#e3ffc0
source.elixir entity.name.function#e3ffc0
source.elixir punctuation.definition.string#d793ff
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#e3ffc0
source.elixir .punctuation.binary.elixir#c1ff74
source.go meta.function-call.go#e3ffc0
meta.class entity.name.type.class.js#e3ffc0
meta.method.declaration storage.type.js#e3ffc0
terminator.js#f9fff0
meta.js punctuation.definition.js#f9fff0
variable.other.meta.import.js, meta.import.js variable.other#c1ff74
source.js keyword.control#5effaa
support.type.object.module.js#e3ffc099
source.js keyword.control.conditional#5effaa
constant.numeric.hex.js#5effaa
variable.parameter.function.js#d793ff
variable.other.readwrite.js#f9fff0
string.quoted.double.js meta.object-literal.key#c1ff74
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#f9fff0
meta.jsx entity.name.tag.js, meta.jsx punctuation.definition.tag#f9fff0
variable.js, variable.other.js#f9fff0
entity.name.type.js, entity.name.type.module.js#e3ffc0
support.class.js#f9fff0
meta.object-literal.key.js string.quoted, meta.object-literal.key.js#c1ff74
support.type.property-name.json#a386ff
string.quoted.double.json meta.structure.dictionary.value.json, string.quoted.double.json punctuation.definition.string.json#d793ff
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#5effaa
variable.other.ruby#f9fff0
constant.language.symbol.hashkey.ruby#5effaa
entity.name.tag.less#a386ff
meta.attribute-selector.less entity.other.attribute-name.attribute#5effaa
markup.heading.markdown#e3ffc0
markup.italic.markdown#a386ffitalic
markup.bold.markdown#f9fff0bold
markup.quote.markdown#d793ffitalic
markup.inline.raw.markdown#d793ff
markup.underline.link.markdown, markup.underline.link.image.markdown#d793ff
string.other.link.title.markdown, string.other.link.description.markdown#f9fff0
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#e3ffc0
punctuation.definition.metadata.markdown#a386ff
beginning.punctuation.definition.list.markdown#c1ff74
support.class.php#e3ffc0
meta.function-call.php punctuation#f9fff0
variable.other.global.php#e3ffc0
variable.other.global.php punctuation.definition.variable#e3ffc0
constant.language.python#5effaa
variable.parameter.function.python, meta.function-call.arguments.python#d793ff
punctuation.python#f9fff0
entity.name.function.decorator.python#e3ffc0
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#f9fff0
entity.name.type.ts, entity.name.type.tsx#e3ffc0
support.class.node.ts, support.class.node.tsx#e3ffc0
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#f9fff0
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block#f9fff0
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#e3ffc0
meta.jsx.children.tsx, meta.tag.js meta.jsx.children.tsx#e3ffc0
entity.name.tag.yaml#5effaa
comment.block.javadoc keyword.other.documentation#c1ff7490
comment.block.javadoc entity.name.type.class#e3ffc090
comment.block.javadoc variable.parameter#d793ff90
punctuation.separator#b7b3b7
string.quoted.double.java#e3ffc0
storage.type.generic.java#5effaa
variable.other.object.java#f9fff0
meta.method-call.java entity.name.function.java#d793ff
storage.modifier.import.java, meta.import.java storage.modifier.java#c1ff7499
keyword.other.import.java#d793ff99
meta.import.java punctuation#f9fff099
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, keyword.other.unit, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.operator, keyword.control.ternary, keyword.operator.or.regexp, punctuation.definintion.string, punctuation
meta.import.ts meta.block.ts variable.other.readwrite.alias.ts, meta.import.tsx meta.block.tsx variable.other.readwrite.alias.tsx, meta.import.js variable.other, entity.name.function.ts, entity.name.function.tsx, support.type.primitive, entity.name.tag.yaml, meta.tag.sgml.doctype.html, entity.name.tag.doctype, meta.tag.sgml.doctype, entity.other.attribute-name, entity.name.tag.custom, source.js.jsx keyword.control.flow.js, support.type.property.css, support.function.basic_functions, variable.assignment.coffee, support.function.basic_functions, keyword.operator.expression.typeof, keyword.operator.type.annotation, assignment.coffee, entity.name.type.ts, support.constant.math, meta.object-literal.key, meta.var.expr storage.type, parameter, italic, quote, keyword, storage, language, type .function, type.function, storage.type.class, type.var, meta.parameter, variable.parameter, meta.parameters, keyword.control, modifier, this, commentitalic
token.info-token#a386ff
token.warn-token#ff82da
token.error-token#ff82da
token.debug-token#d793ff
Photophore Theme by Kenzie Bottoms - VS Code Theme