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.activeBackground#1d1641
  • activityBar.activeBorder#3e8efd
  • activityBar.activeFocusBorder#3e8efd
  • activityBar.background#030d22
  • activityBar.foreground#fb00be
  • activityBarBadge.background#c832ff
  • activityBarBadge.foreground#ffffff
  • button.background#087eb4
  • button.foreground#ffffff
  • button.hoverBackground#008dce
  • descriptionForeground#ffffff
  • editor.background#030d22
  • editor.findMatchBackground#003496
  • editor.findMatchHighlightBackground#001288da
  • editor.foreground#fdfeff
  • editor.hoverHighlightBackground#004696
  • editor.lineHighlightBackground#1c1347
  • editor.selectionBackground#310072
  • editor.selectionHighlightBackground#35008b
  • editor.wordHighlightBackground#47008ad5
  • editor.wordHighlightStrongBackground#440083d5
  • editorCursor.foreground#fb00be
  • editorError.foreground##ff0000
  • editorGroup.dropBackground#03153b
  • editorGroupHeader.noTabsBackground#03163f
  • editorGroupHeader.tabsBackground#030d22
  • editorHoverWidget.background#222858
  • editorHoverWidget.border#2d324e
  • editorIndentGuide.activeBackground#1d1641
  • editorIndentGuide.background#030d22
  • editorInfo.foreground#af21e7
  • editorLineNumber.activeForeground#3e8efd
  • editorLineNumber.foreground#3e8efd
  • editorRuler.foreground#11215e
  • editorWarning.foreground#fad46d
  • editorWidget.background#04112c
  • editorWidget.border#030f27
  • foreground#ffffff
  • gitDecoration.conflictingResourceForeground##ff0000
  • gitDecoration.deletedResourceForeground#d800ca
  • gitDecoration.ignoredResourceForeground#1183b8
  • gitDecoration.modifiedResourceForeground#fdd81d
  • gitDecoration.untrackedResourceForeground#0097fc
  • input.background#0d0931
  • input.border#150f53
  • input.placeholderForeground#f3f3f3
  • inputOption.activeBorder#ffd400
  • list.activeSelectionBackground#073170
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#063475
  • list.errorForeground##ff0000
  • list.focusBackground#06306e
  • list.hoverBackground#0a2f66
  • list.inactiveSelectionBackground#161130
  • list.warningForeground#992293
  • panel.background#0e0952
  • panel.border#3e8efd
  • panel.dropBackground#fb00be
  • panelTitle.activeBorder#fb00be
  • panelTitle.activeForeground#fb00be
  • panelTitle.inactiveForeground#d600dd
  • peekView.border#ffd400
  • peekViewEditor.background#1971f770
  • peekViewEditor.matchHighlightBackground#120961
  • peekViewEditor.matchHighlightBorder#34006e
  • peekViewResult.background#1a1079
  • peekViewResult.selectionBackground#ffd400
  • peekViewTitle.background#372dc9
  • peekViewTitleDescription.foreground#348bee
  • progressBar.background#fa0dea
  • scrollbar.shadow#ff25ed57
  • scrollbarSlider.activeBackground#ff29944f
  • scrollbarSlider.background#fc309654
  • scrollbarSlider.hoverBackground#fb00be
  • sideBar.background#030d22
  • sideBar.border#3e8efd
  • sideBarSectionHeader.background#04112e
  • sideBarSectionHeader.foreground#3e8efd
  • statusBar.background#0a0631
  • statusBar.debuggingBackground#0a0631
  • statusBar.debuggingForeground#3e8efd
  • statusBar.foreground#3e8efd
  • statusBar.noFolderBackground#0a0631
  • statusBar.noFolderForeground#3e8efd
  • tab.activeBackground#1d1641
  • tab.activeBorder#171033
  • tab.activeBorderTop#3e8efd
  • tab.activeForeground#f9faff
  • tab.border#171033
  • tab.inactiveBackground#141138
  • tab.inactiveForeground#3e8efd
  • terminal.ansiBlack#747474
  • terminal.ansiBlue#c832ff
  • terminal.ansiBrightBlack#747474
  • terminal.ansiBrightBlue#c832ff
  • terminal.ansiBrightCyan#55ffe1
  • terminal.ansiBrightGreen#372dc9
  • terminal.ansiBrightMagenta#fb00be
  • terminal.ansiBrightRed##ff0000
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd400
  • terminal.ansiCyan#55ffe1
  • terminal.ansiGreen#372dc9
  • terminal.ansiMagenta#fb00be
  • terminal.ansiRed##ff0000
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffd400
  • terminal.background#030d22
  • terminal.foreground#ffffff
  • titleBar.activeBackground#1d1641

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#c832ff
meta.diff, meta.diff.header#6272A4
markup.inserted#50FA7B
markup.deleted#ff0000
markup.changed#FFB86C
invalid#ff0000underline italic
invalid.deprecated#F8F8F2underline italic
entity.name.filename#F1FA8C
markup.error#ff0000
markup.underlineunderline
markup.bold#FFB86Cbold
markup.heading#c832ffbold
markup.italic#F1FA8Citalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#3e8efd
markup.inline.raw, markup.raw.restructuredtext#50FA7B
markup.underline.link, markup.underline.link.image#3e8efd
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#fb00be
entity.name.directive.restructuredtext, markup.quote#F1FA8Citalic
meta.separator.markdown#6272A4
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#50FA7B
punctuation.definition.constant.restructuredtext#c832ff
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#c832ff
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#F8F8F2
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#F1FA8C
entity.name.type.class, entity.name.class#3e8efdnormal
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#c832ffitalic
entity.other.inherited-class#3e8efditalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6272A4
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#fb00be
comment.block.documentation entity.name.type#3e8efditalic
comment.block.documentation entity.name.type punctuation.definition.bracket#3e8efd
comment.block.documentation variable#FFB86Citalic
constant, variable.other.constant#c832ff
constant.character.escape, constant.character.string.escape, constant.regexp#fb00be
entity.name.tag#fb00be
entity.other.attribute-name.parent-selector#fb00be
entity.other.attribute-name#50FA7Bitalic
entity.name.function, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix#50FA7B
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#FFB86Citalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#50FA7Bitalic
meta.decorator variable.other.object#50FA7B
keyword, punctuation.definition.keyword#fb00be
keyword.control.new, keyword.operator.newbold
meta.selector#fb00be
support#3e8efditalic
support.function.magic, support.variable, variable.other.predefined#c832ffregular
support.function, support.type.property-nameregular
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#fb00be
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#F8F8F2
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile#fb00be
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#3e8efd
constant.other.date, constant.other.timestamp#FFB86C
variable.other.alias.yaml#50FA7Bitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#fb00beregular
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml#3e8efditalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FFB86C
storage.modifier#fb00be
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#F1FA8C
punctuation.definition.group.capture.regexp#fb00be
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff0000
punctuation.definition.character-class.regexp#3e8efd
punctuation.definition.group.regexp#FFB86C
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff0000
meta.assertion.look-ahead.regexp#50FA7B
string#F1FA8C
punctuation.definition.string.begin, punctuation.definition.string.end#E9F284
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#3e8efd
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape#6272A4
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#F8F8F2
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#FFB86Citalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#F8F8F2normal
meta.selectionset.graphql variable#F1FA8C
meta.selectionset.graphql meta.arguments variable#F8F8F2
entity.name.fragment.graphql, variable.fragment.graphql#3e8efd
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell#F8F8F2
source.shell variable.other#c832ff
support.constant#c832ffnormal
meta.scope.prerequisites.makefile#F1FA8C
meta.attribute-selector.scss#F1FA8C
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#F8F8F2
meta.preprocessor.haskell#6272A4
log.error#ff0000bold
log.warning#F1FA8Cbold
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file, markup.deleted.diff, markup.inserted.diff, comment, punctuation.accessor, 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, entity.name.function, entity.other.attribute-name, keyword.operator.relational, meta.delimiter.period, meta.selector, entity.name.tag.doctype, meta.tag.sgml.doctype, variable.other.object.property, entity.name.function, 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, italic, quote, source.elixir .punctuation.binary.elixir, 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, meta.tag.sgml.doctype.html, variable.other.object.js, markup.italic.markdown, markup.quote.markdown, keyword.controlitalic
constant.numeric, constant.character.numeric, storage.type.function.arrow.js, storage.type.function.arrow.js, 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, keyword.operator, variable.parameter.function, support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag, keyword.operator.logical, variable.other.object.js, keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts, entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css, entity.name.type.js, entity.name.type.module.js, support.class.component.js, support.class.component.tsx, 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.definition.string, punctuation, variable.other.readwrite.js, storage.type, source.css, string.quoted
markup.heading, markup.bold, markup.italic, markup.underline, markup.quote, markup.list, markup.inline.raw, markup.fenced_code.block.markdown, markup.underline.link, markup.bold.markdown, markup.italic.markdown, markup.raw.block, meta.separator.markdown
Markdown Highlighting with Specific Headings
Moontallica Theme by rayanasales - VS Code Theme