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#212133
  • activityBar.foreground#9999B4
  • activityBar.inactiveForeground#47496E
  • activityBarBadge.background#A585E8
  • activityBarBadge.foreground#f5f5f5
  • badge.background#44475A
  • badge.foreground#9999B4
  • breadcrumb.activeSelectionForeground#9999B4
  • breadcrumb.background#212134
  • breadcrumb.focusForeground#9999B4
  • breadcrumb.foreground#6272A4
  • breadcrumbPicker.background#191A21
  • button.background#44475A
  • button.foreground#9999B4
  • contrastBorder#191A21
  • debugToolBar.background#212134
  • diffEditor.insertedTextBackground#B1E3A720
  • diffEditor.removedTextBackground#ff878750
  • dropdown.background#343746
  • dropdown.border#191A21
  • dropdown.foreground#9999B4
  • editor.background#25273D
  • editor.findMatchBackground#FFB86C80
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foreground#F2F2F7
  • editor.hoverHighlightBackground#191A21
  • editor.lineHighlightBackground#2B2C43
  • editor.rangeHighlightBackground#FF83AC15
  • editor.selectionBackground#44475A
  • editor.selectionHighlightBackground#424450
  • editor.snippetFinalTabstopHighlightBackground#25273D
  • editor.snippetFinalTabstopHighlightBorder#B1E3A7
  • editor.snippetTabstopHighlightBackground#25273D
  • editor.snippetTabstopHighlightBorder#6272A4
  • editor.wordHighlightBackground#53C0F650
  • editor.wordHighlightStrongBackground#B1E3A750
  • editorCodeLens.foreground#6272A4
  • editorCursor.foreground#848AF0
  • editorError.foreground#ff8787
  • editorGroup.border#A585E8
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#191A21
  • editorGutter.addedBackground#B1E3A780
  • editorGutter.deletedBackground#ff878780
  • editorGutter.modifiedBackground#53C0F680
  • editorHoverWidget.background#25273D
  • editorHoverWidget.border#6272A4
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#424450
  • editorLineNumber.foreground#47496E
  • editorLink.activeForeground#53C0F6
  • editorMarkerNavigation.background#212134
  • editorOverviewRuler.addedForeground#B1E3A780
  • editorOverviewRuler.border#191A21
  • editorOverviewRuler.currentContentForeground#B1E3A7
  • editorOverviewRuler.deletedForeground#ff878780
  • editorOverviewRuler.errorForeground#ff878780
  • editorOverviewRuler.incomingContentForeground#B1E3A7
  • editorOverviewRuler.infoForeground#53C0F680
  • editorOverviewRuler.modifiedForeground#53C0F680
  • editorOverviewRuler.selectionHighlightForeground#FFB86C
  • editorOverviewRuler.warningForeground#FFB86C80
  • editorOverviewRuler.wordHighlightForeground#53C0F6
  • editorOverviewRuler.wordHighlightStrongForeground#B1E3A7
  • editorRuler.foreground#424450
  • editorSuggestWidget.background#212134
  • editorSuggestWidget.foreground#F2F2F7
  • editorSuggestWidget.selectedBackground#44475A
  • editorWarning.foreground#53C0F6
  • editorWhitespace.foreground#424450
  • editorWidget.background#212134
  • errorForeground#ff8787
  • extensionButton.prominentBackground#B1E3A790
  • extensionButton.prominentForeground#9999B4
  • extensionButton.prominentHoverBackground#B1E3A760
  • focusBorder#6272A4
  • foreground#9999B4
  • gitDecoration.conflictingResourceForeground#FFB86C
  • gitDecoration.deletedResourceForeground#ff8787
  • gitDecoration.ignoredResourceForeground#6272A4
  • gitDecoration.modifiedResourceForeground#53C0F6
  • gitDecoration.untrackedResourceForeground#B1E3A7
  • input.background#25273D
  • input.border#191A21
  • input.foreground#9999B4
  • input.placeholderForeground#6272A4
  • inputOption.activeBorder#FF83AC
  • inputValidation.errorBorder#ff8787
  • inputValidation.infoBorder#A585E8
  • inputValidation.warningBorder#FFB86C
  • list.activeSelectionBackground#44475A
  • list.activeSelectionForeground#9999B4
  • list.dropBackground#44475A
  • list.errorForeground#ff8787
  • list.focusBackground#44475A75
  • list.highlightForeground#53C0F6
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#FFB86C
  • listFilterWidget.background#343746
  • listFilterWidget.noMatchesOutline#ff8787
  • listFilterWidget.outline#424450
  • merge.currentHeaderBackground#B1E3A790
  • merge.incomingHeaderBackground#FF83AC90
  • notification.background#25273D
  • notification.buttonBackground#44475A
  • notification.buttonForeground#9999B4
  • notification.buttonHoverBackground#44475A75
  • notification.errorBackground#ff8787
  • notification.errorForeground#9999B4
  • notification.foreground#9999B4
  • notification.infoBackground#53C0F6
  • notification.infoForeground#25273D
  • notification.warningBackground#FFB86C
  • notification.warningForeground#25273D
  • panel.background#25273D
  • panel.border#A585E8
  • panelTitle.activeBorder#A585E8
  • panelTitle.activeForeground#F2F2F7
  • panelTitle.inactiveForeground#6272A4
  • peekView.border#44475A
  • peekViewEditor.background#25273D
  • peekViewEditor.matchHighlightBackground#FFE07B80
  • peekViewResult.background#212134
  • peekViewResult.fileForeground#F2F2F7
  • peekViewResult.lineForeground#F2F2F7
  • peekViewResult.matchHighlightBackground#FFE07B80
  • peekViewResult.selectionBackground#44475A
  • peekViewResult.selectionForeground#F2F2F7
  • peekViewTitle.background#191A21
  • peekViewTitleDescription.foreground#6272A4
  • peekViewTitleLabel.foreground#F2F2F7
  • pickerGroup.border#A585E8
  • pickerGroup.foreground#53C0F6
  • progressBar.background#A585E8
  • selection.background#FF83AC
  • settings.checkboxBackground#212134
  • settings.checkboxBorder#191A21
  • settings.checkboxForeground#9999B4
  • settings.dropdownBackground#212134
  • settings.dropdownBorder#191A21
  • settings.dropdownForeground#9999B4
  • settings.headerForeground#9999B4
  • settings.modifiedItemForeground#FFB86C
  • settings.modifiedItemIndicator#FFB86C
  • settings.numberInputBackground#212134
  • settings.numberInputBorder#191A21
  • settings.numberInputForeground#9999B4
  • settings.textInputBackground#212134
  • settings.textInputBorder#191A21
  • settings.textInputForeground#9999B4
  • sideBar.background#212134
  • sideBarSectionHeader.background#25273D
  • sideBarSectionHeader.border#191A21
  • sideBarTitle.foreground#9999B4
  • statusBar.background#212133
  • statusBar.debuggingBackground#ff8787
  • statusBar.debuggingForeground#191A21
  • statusBar.foreground#9999B4
  • statusBar.noFolderBackground#191A21
  • statusBar.noFolderForeground#9999B4
  • statusBarItem.prominentBackground#ff8787
  • statusBarItem.prominentHoverBackground#FFB86C
  • statusBarItem.remoteBackground#FF83AC
  • statusBarItem.remoteForeground#9999B4
  • tab.activeBackground#25273D
  • tab.activeBorder#A585E880
  • tab.activeForeground#D4D4DF
  • tab.border#191A21
  • tab.inactiveBackground#191A21
  • tab.inactiveForeground#696980
  • terminal.ansiBlack#212134
  • terminal.ansiBlue#FF83AC
  • terminal.ansiBrightBlack#6272A4
  • terminal.ansiBrightBlue#D6ACFF
  • terminal.ansiBrightCyan#A4FFFF
  • terminal.ansiBrightGreen#12b886
  • terminal.ansiBrightMagenta#ff62b2
  • terminal.ansiBrightRed#A585E8
  • terminal.ansiBrightWhite#9999B4
  • terminal.ansiBrightYellow#FFFFA5
  • terminal.ansiCyan#53C0F6
  • terminal.ansiGreen#B1E3A7
  • terminal.ansiMagenta#A585E8
  • terminal.ansiRed#ff8787
  • terminal.ansiWhite#9999B4
  • terminal.ansiYellow#FFE07B
  • terminal.background#25273D
  • terminal.foreground#9999B4
  • titleBar.activeBackground#212134
  • titleBar.activeForeground#9999B4
  • titleBar.inactiveBackground#212133
  • titleBar.inactiveForeground#6272A4
  • walkThrough.embeddedEditorBackground#212134

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#FF83AC
source#9999B4
meta.diff, meta.diff.header#6272A4
markup.inserted#B1E3A7
markup.deleted#ff8787
markup.changed#FFB86C
invalid#ff8787underline italic
invalid.deprecated#9999B4underline italic
entity.name.filename#FFE07B
markup.error#ff8787
markup.underlineunderline
markup.bold#FFB86Cbold
markup.heading#FF83ACbold
markup.italic#FFE07Bitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#53C0F6
markup.inline.raw, markup.raw.restructuredtext#ff8787
markup.underline.link, markup.underline.link.image#53C0F6
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#A585E8
entity.name.directive.restructuredtext, markup.quote#FFE07Bitalic
meta.separator.markdown#6272A4
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#B1E3A7
punctuation.definition.constant.restructuredtext#FF83AC
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#FF83AC
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#F2F2F7
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#FFE07B
entity.name.type, entity.other.inherited-class, support.class#FF83AC
entity.name.type.class, entity.name.class, entity.name.struct, entity.name.interface, entity.name.trait#53C0F6normal
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#FF83ACitalic
entity.other.inherited-class#53C0F6italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#5C5F90
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#A585E8
comment.block.documentation entity.name.type#53C0F6italic
comment.block.documentation entity.name.type punctuation.definition.bracket#53C0F6
comment.block.documentation variable#FFB86Citalic
constant, variable.other.constant#FF83AC
constant.character.escape, constant.character.string.escape, constant.regexp#A585E8
entity.name.tag#FF83AC
entity.other.attribute-name.parent-selector#A585E8
entity.other.attribute-name#FFB86Citalic
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#62D2B2
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#ff8787italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#B1E3A7italic
meta.decorator variable.other.object#B1E3A7
keyword, punctuation.definition.keyword#A585E8
keyword.control.new, keyword.operator.newbold
meta.selector#A585E8
support#53C0F6italic
support.function.magic, support.variable, variable.other.predefined#FF83ACregular
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#A585E8
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#F2F2F7
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#A585E8
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#53C0F6
constant.other.date, constant.other.timestamp#FFB86C
variable.other.alias.yaml#B1E3A7italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#A585E8regular
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#53C0F6italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FFB86C
storage.modifier#A585E8
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#FFE07B
punctuation.definition.group.capture.regexp#A585E8
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff8787
constant, constant.character#ffa94d
punctuation.definition.character-class.regexp#53C0F6
punctuation.definition.group.regexp#FFB86C
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff8787
meta.assertion.look-ahead.regexp#B1E3A7
string#FFE07B
punctuation.definition.string.begin, punctuation.definition.string.end#E9F284
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#8BE9FE
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#F2F2F7
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, 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#F2F2F7normal
meta.selectionset.graphql variable#FFE07B
meta.selectionset.graphql meta.arguments variable#F2F2F7
entity.name.fragment.graphql, variable.fragment.graphql#53C0F6
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#F2F2F7
source.shell variable.other#FF83AC
support.constant#FF83ACnormal
meta.scope.prerequisites.makefile#FFE07B
meta.attribute-selector.scss#FFE07B
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#F2F2F7
meta.preprocessor.haskell#6272A4

Shiki preview

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

Loading...

Polish Theme by zhiking - VS Code Theme