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#23262e
  • activityBar.foreground#baafc0
  • activityBarBadge.background#00b0ff
  • activityBarBadge.foreground#20232b
  • badge.background#00b0ff
  • badge.foreground#20232b
  • button.background#50fa7b
  • button.hoverBackground#50fa7bcc
  • debugExceptionWidget.background#ff9f2e60
  • debugExceptionWidget.border#ff9f2e60
  • debugToolBar.background#20232a
  • diffEditor.insertedTextBackground#50fa7b20
  • diffEditor.removedTextBackground#f21b3f20
  • dropdown.background#282a36
  • dropdown.border#44475a
  • dropdown.listBackground#ff0000
  • editor.background#23262e
  • editor.findMatchBackground#f39d12d7
  • editor.findMatchHighlightBackground#50fa7b77
  • editor.foreground#d5ced9
  • editor.hoverHighlightBackground#373941
  • editor.lineHighlightBackground#2e323d
  • editor.lineHighlightBorder#2e323d
  • editor.rangeHighlightBackground#372f3c
  • editor.selectionBackground#3d4352
  • editor.selectionHighlightBackground#4f435580
  • editor.wordHighlightBackground#4f4355
  • editor.wordHighlightStrongBackground#db45a280
  • editorBracketMatch.background#746f77
  • editorBracketMatch.border#746f77
  • editorCodeLens.foreground#746f77
  • editorCursor.foreground#ffffff
  • editorError.foreground#fc644d
  • editorGroup.dropBackground#495061d7
  • editorGroupHeader.tabsBackground#23262e
  • editorGutter.addedBackground#50fa7bbb
  • editorGutter.deletedBackground#fc644dbb
  • editorGutter.modifiedBackground#5bc0ebbb
  • editorHoverWidget.background#373941
  • editorHoverWidget.border#50fa7b
  • editorIndentGuide.activeBackground#585c66
  • editorIndentGuide.background#333844
  • editorLineNumber.foreground#746f77
  • editorLink.activeForeground#3b79c7
  • editorOverviewRuler.border#23262E00
  • editorRuler.foreground#4f4355
  • editorSuggestWidget.background#20232a
  • editorSuggestWidget.border#372f3c
  • editorSuggestWidget.selectedBackground#373941
  • editorWarning.foreground#ff9f2e
  • editorWhitespace.foreground#333844
  • editorWidget.background#20232a
  • errorForeground#fc644d
  • extensionButton.prominentBackground#50fa7bcc
  • extensionButton.prominentHoverBackground#50fa7bb0
  • focusBorder#746f77
  • foreground#d5ced9
  • input.background#2b303b
  • input.placeholderForeground#746f77
  • inputOption.activeBorder#c668ba
  • inputValidation.errorBackground#d65343
  • inputValidation.errorBorder#d65343
  • inputValidation.infoBackground#3a6395
  • inputValidation.infoBorder#3a6395
  • inputValidation.warningBackground#de9237
  • inputValidation.warningBorder#de9237
  • list.activeSelectionBackground#23262e
  • list.activeSelectionForeground#50fa7b
  • list.dropBackground#3a404e
  • list.focusBackground#282b35
  • list.focusForeground#eeeeee
  • list.hoverBackground#23262e
  • list.hoverForeground#eeeeee
  • list.inactiveSelectionBackground#23262e
  • list.inactiveSelectionForeground#50fa7b
  • merge.currentContentBackground#f9267240
  • merge.currentHeaderBackground#f92672
  • merge.incomingContentBackground#3b79c740
  • merge.incomingHeaderBackground#3b79c7bb
  • panel.background#23262e
  • panel.border#1b1d23
  • panelTitle.activeBorder#23262e
  • panelTitle.inactiveForeground#746f77
  • peekView.border#23262e
  • peekViewEditor.background#1a1c22
  • peekViewEditor.matchHighlightBackground#ff9f2e60
  • peekViewResult.background#1a1c22
  • peekViewResult.matchHighlightBackground#ff9f2e60
  • peekViewResult.selectionBackground#23262e
  • peekViewTitle.background#1a1c22
  • peekViewTitleDescription.foreground#746f77
  • pickerGroup.border#4f4355
  • pickerGroup.foreground#746f77
  • progressBar.background#c668ba
  • scrollbar.shadow#23262E00
  • scrollbarSlider.activeBackground#3a3f4ccc
  • scrollbarSlider.background#6272a420
  • scrollbarSlider.hoverBackground#3a3f4caa
  • selection.background#746f77
  • sideBar.background#23262e
  • sideBar.foreground#746f77
  • sideBarSectionHeader.background#23262e
  • sideBarTitle.foreground#50fa7b
  • statusBar.background#23262e
  • statusBar.debuggingBackground#fc644d
  • statusBar.noFolderBackground#23262e
  • statusBarItem.activeBackground#50fa7b
  • statusBarItem.hoverBackground#50fa7bb0
  • statusBarItem.prominentBackground#50fa7bb0
  • statusBarItem.prominentHoverBackground#50fa7b
  • tab.activeBackground#23262e
  • tab.activeForeground#50fa7b
  • tab.inactiveBackground#23262e
  • tab.inactiveForeground#746f77
  • terminal.ansiBlack#21222C
  • terminal.ansiBlue#BD93F9
  • terminal.ansiBrightBlue#00B5E2
  • terminal.ansiBrightCyan#00FFDE
  • terminal.ansiBrightGreen#39FF14
  • terminal.ansiBrightMagenta#FF00FF
  • terminal.ansiBrightRed#FF007F
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#ffff01
  • terminal.ansiCyan#8BE9FD
  • terminal.ansiGreen#50FA7B
  • terminal.ansiMagenta#FF79C6
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#F8F8F2
  • terminal.ansiYellow#F1FA8C
  • terminalCursor.background#23262e
  • terminalCursor.foreground#ffff01
  • titleBar.activeBackground#23262e
  • walkThrough.embeddedEditorBackground#23262e
  • widget.shadow#14151a00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
strongbold
header#FB48C4
meta.diff, meta.diff.header#9900FF
markup.inserted#44d62c
markup.deleted#FF5555
markup.changed#00B5E2
invalid#FF5555underline italic
invalid.deprecated#F8F8F2underline italic
entity.name.filename#ffff01
markup.error#FF5555
markup.underlineunderline
markup.bold#00B5E2bold
markup.heading#FB48C4bold
markup.italic#ffff01italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#00B5E2
markup.inline.raw, markup.raw.restructuredtext#44d62c
markup.underline.link, markup.underline.link.image#00B5E2
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#FB48C4
entity.name.directive.restructuredtext, markup.quote#ffff01italic
meta.separator.markdown#9900FF
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#44d62c
punctuation.definition.constant.restructuredtext#FB48C4
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#FB48C4
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#44d62c
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffff01
entity.name.type.class, entity.name.class#00B5E2
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#FB48C4
entity.other.inherited-class#00B5E2
comment, punctuation.definition.comment, unused.comment, wildcard.comment#9900FF
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#FB48C4
comment.block.documentation entity.name.type#00B5E2italic
comment.block.documentation entity.name.type punctuation.definition.bracket#00B5E2
comment.block.documentation variable#00B5E2italic
constant, variable.other.constant#FB48C4
constant.character.escape, constant.character.string.escape, constant.regexp#FB48C4
entity.name.tag#FB48C4
entity.other.attribute-name.parent-selector#FB48C4
entity.other.attribute-name#44d62c
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#44d62c
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#00B5E2
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#44d62c
meta.decorator variable.other.object#44d62c
keyword, punctuation.definition.keyword#FB48C4
keyword.control.new, keyword.operator.newbold
meta.selector#FB48C4
support#00B5E2italic
support.function.magic, support.variable, variable.other.predefined#FB48C4
support.function, support.type.property-name
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#FB48C4
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#44d62c
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#FB48C4
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#00B5E2
constant.other.date, constant.other.timestamp#00B5E2
variable.other.alias.yaml#44d62citalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#FB48C4
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#00B5E2
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#00B5E2
storage.modifier#FB48C4
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffff01
punctuation.definition.group.capture.regexp#FB48C4
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF5555
punctuation.definition.character-class.regexp#00B5E2
punctuation.definition.group.regexp#00B5E2
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF5555
meta.assertion.look-ahead.regexp#44d62c
string#ffff01
punctuation.definition.string.begin, punctuation.definition.string.end#00B5E2
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#00B5E2
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#9900FF
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#00B5E2italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#44d62c
punctuation.section.embedded.end source.python, punctuation.section.embedded.end source.py#44d62c
meta.selectionset.graphql variable#ffff01
meta.selectionset.graphql meta.arguments variable#44d62c
entity.name.fragment.graphql, variable.fragment.graphql#00B5E2
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#FB48C4
support.constant#FB48C4
meta.scope.prerequisites.makefile#ffff01
meta.attribute-selector.scss#ffff01
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#44d62c
meta.preprocessor.haskell#9900FF
log.error#FF5555bold
log.warning#ffff01bold
token.info-token#00B5E2
token.warn-token#00B5E2
token.error-token#F44747
token.debug-token#9900FF

Shiki preview

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

Loading...

Androcula by T3nt4c135 - VS Code Theme