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#F0F0F0
  • activityBar.border#F0F0F0
  • activityBar.foreground#6E6E6E
  • activityBarBadge.background#D63384
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D63384
  • badge.foreground#FFFFFF
  • button.background#D63384
  • button.foreground#FFFFFF
  • contrastBorder#00000000
  • debugIcon.breakpointCurrentStackframeForeground#0277BD
  • debugIcon.breakpointDisabledForeground#B0B0B0
  • debugIcon.breakpointForeground#C62828
  • debugIcon.breakpointStackframeForeground#0277BD
  • debugIcon.breakpointUnverifiedForeground#B0B0B0
  • debugIcon.continueForeground#C62828
  • debugIcon.disconnectForeground#C62828
  • debugIcon.pauseForeground#C62828
  • debugIcon.restartForeground#0277BD
  • debugIcon.startForeground#0277BD
  • debugIcon.stepBackForeground#C62828
  • debugIcon.stepIntoForeground#C62828
  • debugIcon.stepOutForeground#C62828
  • debugIcon.stepOverForeground#C62828
  • debugIcon.stopForeground#0277BD
  • diffEditor.insertedTextBackground#2E7D3220
  • diffEditor.removedTextBackground#C6282820
  • editor.background#FAFAFA
  • editor.foreground#383838
  • editor.lineHighlightBorder#EEEEEE
  • editorGroup.border#E8E8E8
  • editorGroupHeader.tabsBackground#F0F0F0
  • editorGroupHeader.tabsBorder#F0F0F0
  • editorIndentGuide.activeBackground#D0D0D0
  • editorIndentGuide.background#E8E8E8
  • editorLineNumber.foreground#AAAAAA
  • editorRuler.foreground#E0E0E0
  • editorSuggestWidget.background#FFFFFF
  • focusBorder#E0E0E0
  • foreground#555555
  • gitDecoration.ignoredResourceForeground#B0B0B0
  • input.background#FFFFFF
  • input.border#E8E8E8
  • input.foreground#333333
  • inputOption.activeBackground#E0D5DC
  • list.activeSelectionBackground#E8D5E0
  • list.activeSelectionForeground#1A1A1A
  • list.focusBackground#F0E4EC
  • list.highlightForeground#D63384
  • list.hoverBackground#F5F0F3
  • list.hoverForeground#555555
  • list.inactiveSelectionBackground#EDEDED
  • list.inactiveSelectionForeground#333333
  • notificationCenter.border#E8E8E8
  • notifications.border#E8E8E8
  • notificationToast.border#E8E8E8
  • panel.border#F0F0F0
  • panelTitle.activeBorder#FAFAFA
  • panelTitle.activeForeground#1A1A1A
  • panelTitle.inactiveForeground#999999
  • peekView.border#E0E0E0
  • peekViewEditor.background#F5F5F5
  • pickerGroup.border#E0E0E0
  • pickerGroup.foreground#D63384
  • progressBar.background#D63384
  • scrollbar.shadow#00000015
  • sideBar.background#F0F0F0
  • sideBar.border#F0F0F0
  • sideBar.foreground#555555
  • sideBarSectionHeader.background#E8E8E8
  • sideBarSectionHeader.border#E8E8E8
  • sideBarSectionHeader.foreground#444444
  • statusBar.background#F0F0F0
  • statusBar.border#F0F0F0
  • statusBar.debuggingBackground#D63384
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#6E6E6E
  • statusBar.noFolderBackground#F0F0F0
  • statusBarItem.prominentBackground#D6338420
  • statusBarItem.remoteBackground#F0F0F000
  • statusBarItem.remoteForeground#6E6E6E
  • symbolIcon.classForeground#D63384
  • symbolIcon.constructorForeground#7B1FA2
  • symbolIcon.enumeratorForeground#D63384
  • symbolIcon.enumeratorMemberForeground#0277BD
  • symbolIcon.eventForeground#D63384
  • symbolIcon.fieldForeground#0277BD
  • symbolIcon.functionForeground#7B1FA2
  • symbolIcon.interfaceForeground#0277BD
  • symbolIcon.methodForeground#7B1FA2
  • symbolIcon.variableForeground#0277BD
  • tab.activeBorder#FAFAFA
  • tab.activeBorderTop#00000000
  • tab.activeForeground#1A1A1A
  • tab.border#F0F0F0
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#999999
  • terminal.ansiBrightBlack#999999
  • textLink.activeForeground#AB1A65
  • textLink.foreground#D63384
  • titleBar.activeBackground#F0F0F0
  • titleBar.activeForeground#444444
  • titleBar.border#00000000
  • widget.border#E8E8E8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
strongbold
header#0277BD
source#383838
meta.diff, meta.diff.header#999999
markup.inserted#2E7D32
markup.deleted#C62828
markup.changed#E65100
invalid#C62828underline
invalid.deprecated#383838underline
entity.name.filename#BF8700
markup.error#C62828
markup.underlineunderline
markup.bold#E65100bold
markup.heading#0277BDbold
markup.italic#BF8700
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#7B1FA2
markup.inline.raw, markup.raw.restructuredtext#2E7D32
markup.underline.link, markup.underline.link.image#7B1FA2
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#D63384
entity.name.directive.restructuredtext, markup.quote#BF8700
meta.separator.markdown#999999
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#2E7D32
punctuation.definition.constant.restructuredtext#0277BD
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#0277BD
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#383838
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#BF8700
entity.name.type.class, entity.name.class#7B1FA2bold
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#0277BD
entity.other.inherited-class#7B1FA2
comment, punctuation.definition.comment, unused.comment, wildcard.comment#AAAAAA
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#D63384
comment.block.documentation entity.name.type#7B1FA2
comment.block.documentation entity.name.type punctuation.definition.bracket#7B1FA2
comment.block.documentation variable#E65100
constant, variable.other.constant#0277BD
constant.character.escape, constant.character.string.escape, constant.regexp#D63384
entity.name.tag#D63384
entity.other.attribute-name.parent-selector#D63384
entity.other.attribute-name.id#BF8700
entity.other.attribute-name#2E7D32
meta.tag.inline source#BF8700
entity.name.function, meta.function-call.generic, 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#2E7D32
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#E65100
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#2E7D32
meta.decorator variable.other.object#2E7D32
keyword.other.unit#0277BD
keyword, punctuation.definition.keyword#D63384
keyword.control.new, keyword.operator.newbold
meta.selector#D63384
support#7B1FA2
support.function.magic, support.variable, variable.other.predefined#0277BDbold
support.function, support.type.property-namebold
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#D63384
support.type.property-name.css#7B1FA2
punctuation.separator#7B1FA2
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, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#D63384
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, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#383838
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#D63384
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#7B1FA2
constant.other.date, constant.other.timestamp#E65100
variable.other.alias.yaml#2E7D32underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#D63384bold
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#7B1FA2
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#E65100
storage.modifier#D63384
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#BF8700
punctuation.definition.group.capture.regexp#D63384
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#C62828
punctuation.definition.character-class.regexp#7B1FA2
punctuation.definition.group.regexp#E65100
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#C62828
meta.assertion.look-ahead.regexp#2E7D32
string#BF8700
punctuation.definition.string.begin, punctuation.definition.string.end#BF8700
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#7B1FA2
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#AAAAAA
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#383838
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#E65100
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#383838
meta.selectionset.graphql variable#BF8700
meta.selectionset.graphql meta.arguments variable#383838
entity.name.fragment.graphql, variable.fragment.graphql#7B1FA2
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#383838
source.shell variable.other#0277BD
support.constant#0277BDbold
meta.scope.prerequisites.makefile#BF8700
meta.attribute-selector.scss#BF8700
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#383838
meta.preprocessor.haskell#AAAAAA
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

Shiki preview

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

Loading...

PinkCodes Theme by PinkCodes - VS Code Theme