Skip to main content
Coding Theme

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.activeBorder#4d9375
  • activityBar.background#222
  • activityBar.border#252525
  • activityBar.foreground#dbd7caee
  • activityBar.inactiveForeground#dedcd550
  • activityBarBadge.background#bfbaaa
  • activityBarBadge.foreground#222
  • badge.background#dedcd590
  • badge.foreground#222
  • breadcrumb.activeSelectionForeground#eeeeee18
  • breadcrumb.background#292929
  • breadcrumb.focusForeground#dbd7caee
  • breadcrumb.foreground#959da5
  • breadcrumbPicker.background#222
  • button.background#4d9375
  • button.foreground#222
  • button.hoverBackground#4d9375
  • checkbox.background#292929
  • checkbox.border#2f363d
  • debugToolBar.background#222
  • descriptionForeground#dedcd590
  • diffEditor.insertedTextBackground#4d937550
  • diffEditor.removedTextBackground#ab595950
  • dropdown.background#222
  • dropdown.border#252525
  • dropdown.foreground#dbd7caee
  • dropdown.listBackground#292929
  • editor.background#222
  • editor.findMatchBackground#3f5668
  • editor.findMatchHighlightBackground#3f5668
  • editor.findMatchHighlightBorder#fff
  • editor.focusedStackFrameHighlightBackground#b808
  • editor.foldBackground#eeeeee10
  • editor.foreground#dbd7caee
  • editor.inactiveSelectionBackground#eeeeee10
  • editor.lineHighlightBackground#1073cf2d
  • editor.lineHighlightBorder#074ae71f
  • editor.selectionBackground#3f5668
  • editor.selectionHighlightBackground#3f5668
  • editor.selectionHighlightBorder#fff
  • editor.stackFrameHighlightBackground#a707
  • editor.wordHighlightBackground#1c6b4810
  • editor.wordHighlightStrongBackground#1c6b4810
  • editorBracketHighlight.foreground1#5eaab5
  • editorBracketHighlight.foreground2#4d9375
  • editorBracketHighlight.foreground3#d4976c
  • editorBracketHighlight.foreground4#d9739f
  • editorBracketHighlight.foreground5#e6cc77
  • editorBracketHighlight.foreground6#6394bf
  • editorBracketMatch.background#0052cc
  • editorBracketMatch.border#FF0000
  • editorError.foreground#cb7676
  • editorGroup.border#252525
  • editorGroupHeader.tabsBackground#222
  • editorGroupHeader.tabsBorder#252525
  • editorGutter.addedBackground#4d9375
  • editorGutter.commentRangeForeground#dedcd550
  • editorGutter.deletedBackground#cb7676
  • editorGutter.foldingControlForeground#dedcd590
  • editorGutter.modifiedBackground#6394bf
  • editorHint.foreground#4d9375
  • editorIndentGuide.activeBackground#ffffff30
  • editorIndentGuide.background#ffffff15
  • editorInfo.foreground#6394bf
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#666666
  • editorLineNumber.activeForeground#bfbaaa
  • editorLineNumber.foreground#dedcd550
  • editorOverviewRuler.border#111
  • editorStickyScroll.background#292929
  • editorStickyScrollHover.background#292929
  • editorWarning.foreground#d4976c
  • editorWhitespace.foreground#ffffff15
  • editorWidget.background#222
  • errorForeground#cb7676
  • focusBorder#00000000
  • foreground#dbd7caee
  • gitDecoration.addedResourceForeground#4d9375
  • gitDecoration.conflictingResourceForeground#d4976c
  • gitDecoration.deletedResourceForeground#cb7676
  • gitDecoration.ignoredResourceForeground#dedcd550
  • gitDecoration.modifiedResourceForeground#6394bf
  • gitDecoration.submoduleResourceForeground#dedcd590
  • gitDecoration.untrackedResourceForeground#5eaab5
  • input.background#292929
  • input.border#252525
  • input.foreground#dbd7caee
  • input.placeholderForeground#dedcd590
  • inputOption.activeBackground#dedcd550
  • list.activeSelectionBackground#292929
  • list.activeSelectionForeground#dbd7caee
  • list.focusBackground#292929
  • list.highlightForeground#4d9375
  • list.hoverBackground#292929
  • list.hoverForeground#dbd7caee
  • list.inactiveFocusBackground#222
  • list.inactiveSelectionBackground#292929
  • list.inactiveSelectionForeground#dbd7caee
  • menu.separatorBackground#252525
  • notificationCenterHeader.background#222
  • notificationCenterHeader.foreground#959da5
  • notifications.background#222
  • notifications.border#252525
  • notifications.foreground#dbd7caee
  • notificationsErrorIcon.foreground#cb7676
  • notificationsInfoIcon.foreground#6394bf
  • notificationsWarningIcon.foreground#d4976c
  • panel.background#222
  • panel.border#252525
  • panelInput.border#2f363d
  • panelTitle.activeBorder#4d9375
  • panelTitle.activeForeground#dbd7caee
  • panelTitle.inactiveForeground#959da5
  • peekViewEditor.background#222
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#222
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#252525
  • pickerGroup.foreground#dbd7caee
  • problemsErrorIcon.foreground#cb7676
  • problemsInfoIcon.foreground#6394bf
  • problemsWarningIcon.foreground#d4976c
  • progressBar.background#4d9375
  • quickInput.background#222
  • quickInput.foreground#dbd7caee
  • quickInputList.focusBackground#292929
  • scrollbar.shadow#0000
  • scrollbarSlider.activeBackground#dedcd550
  • scrollbarSlider.background#dedcd510
  • scrollbarSlider.hoverBackground#dedcd550
  • settings.headerForeground#dbd7caee
  • settings.modifiedItemIndicator#4d9375
  • sideBar.background#222
  • sideBar.border#252525
  • sideBar.foreground#bfbaaa
  • sideBarSectionHeader.background#222
  • sideBarSectionHeader.border#252525
  • sideBarSectionHeader.foreground#dbd7caee
  • sideBarTitle.foreground#dbd7caee
  • statusBar.background#222
  • statusBar.border#252525
  • statusBar.debuggingBackground#292929
  • statusBar.debuggingForeground#bfbaaa
  • statusBar.foreground#bfbaaa
  • statusBar.noFolderBackground#222
  • statusBarItem.prominentBackground#292929
  • tab.activeBackground#222
  • tab.activeBorder#d0f66f
  • tab.activeForeground#dbd7caee
  • tab.border#252525
  • tab.hoverBackground#292929
  • tab.inactiveBackground#222
  • tab.inactiveForeground#959da5
  • tab.unfocusedActiveBorder#252525
  • tab.unfocusedActiveBorderTop#252525
  • tab.unfocusedHoverBackground#222
  • terminal.ansiBlack#393a34
  • terminal.ansiBlue#6394bf
  • terminal.ansiBrightBlack#777777
  • terminal.ansiBrightBlue#6394bf
  • terminal.ansiBrightCyan#5eaab5
  • terminal.ansiBrightGreen#4d9375
  • terminal.ansiBrightMagenta#d9739f
  • terminal.ansiBrightRed#cb7676
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e6cc77
  • terminal.ansiCyan#5eaab5
  • terminal.ansiGreen#4d9375
  • terminal.ansiMagenta#d9739f
  • terminal.ansiRed#cb7676
  • terminal.ansiWhite#dbd7ca
  • terminal.ansiYellow#e6cc77
  • terminal.foreground#dbd7caee
  • terminal.selectionBackground#eeeeee18
  • textBlockQuote.background#222
  • textBlockQuote.border#252525
  • textCodeBlock.background#222
  • textLink.activeForeground#4d9375
  • textLink.foreground#4d9375
  • textPreformat.foreground#d1d5da
  • textSeparator.foreground#586069
  • titleBar.activeBackground#222
  • titleBar.activeForeground#bfbaaa
  • titleBar.border#292929
  • titleBar.inactiveBackground#222
  • titleBar.inactiveForeground#959da5
  • tree.indentGuidesStroke#2f363d
  • welcomePage.buttonBackground#2f363d
  • welcomePage.buttonHoverBackground#444d56

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—
strong—bold
header#bf9eee—
source#f6f6f4—
meta.diff, meta.diff.header#7b7f8b—
markup.inserted#62e884—
markup.deleted#ee6666—
markup.changed#FFB86C—
invalid#ee6666
invalid.deprecated#f6f6f4
entity.name.filename#e7ee98—
markup.error#ee6666—
markup.underline—underline
markup.bold#FFB86Cbold
markup.heading#bf9eeebold
markup.italic#e7ee98
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#97e1f1—
markup.inline.raw, markup.raw.restructuredtext#62e884—
markup.underline.link, markup.underline.link.image#97e1f1—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#f286c4—
entity.name.directive.restructuredtext, markup.quote#e7ee98
meta.separator.markdown#7b7f8b—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#62e884—
punctuation.definition.constant.restructuredtext#bf9eee—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#bf9eee—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#f6f6f4—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#e7ee98—
entity.name.type.class, entity.name.class#97e1f1normal
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#bf9eee
entity.other.inherited-class#97e1f1
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7b7f8b—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#f286c4—
comment.block.documentation entity.name.type#97e1f1
comment.block.documentation entity.name.type punctuation.definition.bracket#97e1f1—
comment.block.documentation variable#FFB86C
constant, variable.other.constant#f6f6f4—
constant.character.escape, constant.character.string.escape, constant.regexp#f286c4—
entity.name.tag#f286c4—
entity.other.attribute-name.parent-selector#f286c4—
entity.other.attribute-name#62e884
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#62e884—
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#FFB86C
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#62e884
meta.decorator variable.other.object#62e884—
keyword, punctuation.definition.keyword#f286c4—
keyword.control.new, keyword.operator.new—bold
meta.selector#f286c4—
support#97e1f1
support.function.magic, support.variable, variable.other.predefined#bf9eeeregular
support.function, support.type.property-name—regular
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#f286c4—
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#f6f6f4—
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#f286c4—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#97e1f1—
constant.other.date, constant.other.timestamp#FFB86C—
variable.other.alias.yaml#62e884
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#f286c4regular
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#97e1f1
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FFB86C—
storage.modifier#f286c4—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#e7ee98—
punctuation.definition.group.capture.regexp#f286c4—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ee6666—
punctuation.definition.character-class.regexp#97e1f1—
punctuation.definition.group.regexp#FFB86C—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ee6666—
meta.assertion.look-ahead.regexp#62e884—
string#e7ee98—
punctuation.definition.string.begin, punctuation.definition.string.end#dee492—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#97e2f2—
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#7b7f8b—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#F2F2A0—
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#FFB86C
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#f6f6f4normal
meta.selectionset.graphql variable#e7ee98—
meta.selectionset.graphql meta.arguments variable#f6f6f4—
entity.name.fragment.graphql, variable.fragment.graphql#97e1f1—
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#f6f6f4—
source.shell variable.other#bf9eee—
support.constant#bf9eeenormal
meta.scope.prerequisites.makefile#e7ee98—
meta.attribute-selector.scss#e7ee98—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#f6f6f4—
meta.preprocessor.haskell#7b7f8b—
string.quoted.single.php#f4f1a6—
punctuation.definition.variable#c67607—
variable#e1bc7f—
My Vitesse Theme by huid - VS Code Theme