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.background#0d1624
  • activityBar.border#0e0e1281
  • activityBar.foreground#989eb3
  • activityBar.inactiveForeground#868d9cAA
  • activityBarBadge.background#989eb3
  • activityBarBadge.foreground#101c2c
  • badge.background#989eb3
  • badge.foreground#101c2c
  • breadcrumbPicker.background#122033
  • button.background#989eb3
  • button.foreground#101c2c
  • charts.blue#78dce8
  • charts.foreground#FFFFFFcc
  • charts.green#a9dc76
  • charts.lines#FFFFFFcc
  • charts.orange#fc9867
  • charts.purple#e991e3
  • charts.red#fc6a67
  • charts.yellow#ffd866
  • contrastActiveBorder#00000000
  • debugExceptionWidget.background#363a4a
  • debugExceptionWidget.border#0e0e1281
  • debugToolBar.background#363a4a
  • descriptionForeground#FFFFFFcc
  • diffEditor.border#0e0e1281
  • diffEditor.diagonalFill#363a4a
  • diffEditor.insertedTextBackground#52AB6230
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedTextBackground#E3553530
  • diffEditor.removedTextBorder#00000000
  • dropdown.background#122033
  • dropdown.border#868d9caa
  • dropdown.foreground#FFFFFFcc
  • editor.background#122033
  • editor.findMatchBackground#989eb320
  • editor.findMatchBorder#989eb360
  • editor.findMatchHighlightBackground#989eb320
  • editor.findMatchHighlightBorder#989eb340
  • editor.foreground#FFFFFFcc
  • editor.hoverHighlightBackground#989eb340
  • editor.inactiveSelectionBackground#989eb320
  • editor.lineHighlightBackground#989eb30c
  • editor.lineHighlightBorder#989eb31a
  • editor.rangeHighlightBackground#989eb320
  • editor.selectionBackground#989eb330
  • editor.selectionForeground#989eb3
  • editor.selectionHighlightBackground#00000000
  • editor.selectionHighlightBorder#989eb360
  • editor.wordHighlightBackground#989eb320
  • editor.wordHighlightStrongBackground#989eb340
  • editorBracketHighlight.foreground1#dde74c
  • editorBracketHighlight.foreground2#1bb616
  • editorBracketHighlight.foreground3#fc25f5
  • editorBracketHighlight.foreground4#0ba2ff
  • editorBracketHighlight.foreground5#DA70D6
  • editorBracketHighlight.foreground6#87cefa
  • editorBracketMatch.background#989eb320
  • editorBracketMatch.border#989eb340
  • editorCodeLens.foreground#FFFFFFcc
  • editorCursor.foreground#ffd866
  • editorGroup.border#0e0e1281
  • editorGroup.dropBackground#989eb315
  • editorGroupHeader.border#00000000
  • editorGroupHeader.noTabsBackground#122033
  • editorGroupHeader.tabsBackground#101c2c
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#52AB62cc
  • editorGutter.background#122033
  • editorGutter.commentRangeForeground#363a4a
  • editorGutter.deletedBackground#E35535cc
  • editorGutter.modifiedBackground#00B3BDcc
  • editorHoverWidget.background#363a4a
  • editorHoverWidget.border#101c2c
  • editorIndentGuide.activeBackground1#868d9cbb
  • editorIndentGuide.background1#868d9c30
  • editorLineNumber.activeForeground#e1e4e8
  • editorLineNumber.foreground#444d56
  • editorLink.activeForeground#FFFFFFcc
  • editorMarkerNavigation.background#101c2c
  • editorMarkerNavigationError.background#E3553590
  • editorMarkerNavigationInfo.background#00B3BD90
  • editorMarkerNavigationWarning.background#fc6a6790
  • editorOverviewRuler.border#0e0e1281
  • editorOverviewRuler.commonContentForeground#ffd866
  • editorOverviewRuler.currentContentForeground#E35535
  • editorOverviewRuler.incomingContentForeground#52AB62
  • editorSuggestWidget.background#122033
  • editorSuggestWidget.border#0e0e1281
  • editorSuggestWidget.foreground#FFFFFF80
  • editorSuggestWidget.highlightForeground#ffd866
  • editorSuggestWidget.selectedBackground#989eb34d
  • editorWarning.border#00000000
  • editorWarning.foreground#ffd866
  • editorWhitespace.foreground#868d9c60
  • editorWidget.background#363a4a
  • editorWidget.resizeBorder#989eb350
  • errorForeground#E35535
  • extensionButton.prominentBackground#989eb39d
  • extensionButton.prominentForeground#101c2c
  • extensionButton.prominentHoverBackground#989eb3
  • focusBorder#989eb340
  • foreground#FFFFFFcc
  • gitDecoration.conflictingResourceForeground#989eb3
  • gitDecoration.deletedResourceForeground#E35535
  • gitDecoration.ignoredResourceForeground#868d9c
  • gitDecoration.modifiedResourceForeground#00B3BD
  • gitDecoration.untrackedResourceForeground#52AB62
  • icon.foreground#FFFFFFcc
  • input.background#00000000
  • input.border#989eb330
  • input.foreground#FFFFFF80
  • input.placeholderForeground#989eb3
  • inputOption.activeBorder#989eb3
  • inputValidation.errorBackground#363a4a
  • inputValidation.errorBorder#ffd866
  • inputValidation.infoBackground#363a4a
  • inputValidation.infoBorder#989eb3
  • inputValidation.warningBackground#363a4a
  • inputValidation.warningBorder#ffd866
  • list.activeSelectionBackground#989eb345
  • list.activeSelectionForeground#FFFFFFcc
  • list.dropBackground#989eb315
  • list.errorForeground#E35535
  • list.focusBackground#989eb340
  • list.focusForeground#FFFFFF80
  • list.highlightForeground#ffd866
  • list.hoverBackground#0e0e1260
  • list.hoverForeground#FFFFFFcc
  • list.inactiveSelectionBackground#989eb345
  • list.warningForeground#fc6a67
  • menu.background#363a4a
  • menu.foreground#FFFFFF80
  • menu.selectionBackground#989eb320
  • menu.selectionForeground#FFFFFF80
  • menu.separatorBackground#0e0e1281
  • menubar.selectionBackground#363a4a
  • menubar.selectionForeground#FFFFFF80
  • merge.border#0e0e1281
  • merge.commonContentBackground#ffd86630
  • merge.commonHeaderBackground#ffd86680
  • merge.currentContentBackground#52AB6230
  • merge.currentHeaderBackground#52AB6280
  • merge.incomingContentBackground#00B3BD30
  • merge.incomingHeaderBackground#00B3BD80
  • notificationCenterHeader.background#363a4a
  • notificationCenterHeader.foreground#FFFFFF80
  • notificationLink.foreground#ffd866
  • notifications.background#363a4a
  • notifications.border#989eb350
  • notifications.foreground#FFFFFF80
  • panel.background#101c2c
  • panel.border#0e0e1281
  • panelInput.border#868d9c
  • panelSection.border#0e0e1281
  • panelSectionHeader.background#868d9c20
  • panelSectionHeader.border#0e0e1281
  • panelSectionHeader.foreground#FFFFFFcc
  • panelTitle.activeBorder#52d794
  • panelTitle.activeForeground#989eb3
  • panelTitle.inactiveForeground#868d9c
  • peekView.border#989eb3
  • peekViewEditor.background#363a4a40
  • peekViewEditor.matchHighlightBackground#363a4a40
  • peekViewEditorGutter.background#363a4a40
  • peekViewResult.background#363a4a40
  • peekViewResult.fileForeground#FFFFFFcc
  • peekViewResult.lineForeground#FFFFFFcc
  • peekViewResult.matchHighlightBackground#363a4a
  • peekViewResult.selectionBackground#363a4a
  • peekViewResult.selectionForeground#FFFFFFcc
  • peekViewTitle.background#0e0e1281
  • peekViewTitleDescription.foreground#FFFFFFcc
  • peekViewTitleLabel.foreground#FFFFFFcc
  • pickerGroup.border#0e0e1281
  • pickerGroup.foreground#FFFFFFcc
  • progressBar.background#ffd866
  • sash.hoverBorder#989eb350
  • scrollbar.shadow#0e0e1281
  • scrollbarSlider.activeBackground#989eb360
  • scrollbarSlider.background#989eb340
  • scrollbarSlider.hoverBackground#989eb350
  • selection.background#989eb360
  • settings.headerForeground#989eb3
  • settings.modifiedItemIndicator#989eb3
  • sideBar.background#101c2c
  • sideBar.border#0e0e1281
  • sideBar.foreground#FFFFFFcc
  • sideBarSectionHeader.background#101c2c
  • sideBarSectionHeader.border#0e0e1281
  • sideBarSectionHeader.foreground#FFFFFFcc
  • sideBarTitle.foreground#868d9c
  • statusBar.background#101c2c
  • statusBar.border#0e0e1281
  • statusBar.debuggingBackground#989eb344
  • statusBar.debuggingForeground#FFFFFFcc
  • statusBar.foreground#00B3BDcc
  • statusBar.noFolderBackground#0e0e1281
  • statusBar.noFolderBorder#0e0e1281
  • statusBar.noFolderForeground#FFFFFFcc
  • statusBarItem.activeBackground#363a4a
  • statusBarItem.errorBackground#fc6a67
  • statusBarItem.hoverBackground#868d9c30
  • statusBarItem.prominentBackground#0e0e1281
  • statusBarItem.prominentHoverBackground#363a4a
  • tab.activeBackground#122033
  • tab.activeBorderTop#2ecfa8
  • tab.activeForeground#989eb3
  • tab.border#00000000
  • tab.hoverBackground#122033cc
  • tab.hoverBorder#00000000
  • tab.inactiveBackground#101c2c
  • tab.inactiveForeground#868d9c
  • tab.lastPinnedBorder#0e0e1281
  • tab.unfocusedActiveForeground#FFFFFFcc
  • tab.unfocusedHoverBackground#989eb310
  • tab.unfocusedHoverBorder#00000000
  • tab.unfocusedInactiveForeground#FFFFFFcc
  • terminal.ansiBlack#122033
  • terminal.ansiBlue#00B3BD
  • terminal.ansiBrightBlack#00B3BD
  • terminal.ansiBrightBlue#00B3BD
  • terminal.ansiBrightCyan#78e8c6
  • terminal.ansiBrightGreen#52AB62
  • terminal.ansiBrightMagenta#e991e3
  • terminal.ansiBrightRed#E35535
  • terminal.ansiBrightWhite#00B3BD
  • terminal.ansiBrightYellow#ffd866
  • terminal.ansiCyan#78e8c6
  • terminal.ansiGreen#52AB62
  • terminal.ansiMagenta#e991e3
  • terminal.ansiRed#E35535
  • terminal.ansiWhite#FFFFFFcc
  • terminal.ansiYellow#ffd866
  • terminal.background#101c2c
  • terminalCursor.background#ffd866
  • terminalCursor.foreground#ffd866
  • textBlockQuote.background#00B3BD34
  • textBlockQuote.border#00B3BDb9
  • textCodeBlock.background#00B3BD34
  • textLink.activeForeground#00B3BD
  • textLink.foreground#00B3BD
  • textPreformat.foreground#ffd866
  • textSeparator.foreground#989eb3
  • titleBar.activeBackground#101c2c
  • titleBar.activeForeground#868d9c
  • titleBar.border#0e0e1281
  • titleBar.inactiveBackground#0e0e1281
  • titleBar.inactiveForeground#868d9c
  • tree.indentGuidesStroke#868d9c70
  • walkThrough.embeddedEditorBackground#122033
  • widget.shadow#0e0e1281

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
strongbold
header#BD93F9
source#F8F8F2
meta.diff, meta.diff.header#6272A4
markup.inserted#50FA7B
markup.deleted#FF5555
markup.changed#FFB86C
invalid#FF5555underline italic
invalid.deprecated#F8F8F2underline italic
entity.name.filename#F1FA8C
markup.error#FF5555
markup.underlineunderline
markup.bold#FFB86Cbold
markup.heading#BD93F9bold
markup.italic#F1FA8Citalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#8BE9FD
markup.inline.raw, markup.raw.restructuredtext#50FA7B
markup.underline.link, markup.underline.link.image#8BE9FD
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#FF4EB2
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#BD93F9
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#BD93F9
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#8BE9FD
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#BD93F9
entity.other.inherited-class#8BE9FD
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6272A4italic bold
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#FF4EB2
comment.block.documentation entity.name.type#8BE9FD
comment.block.documentation entity.name.type punctuation.definition.bracket#8BE9FD
comment.block.documentation variable#FFB86C
constant, variable.other.constant#BD93F9
constant.character.escape, constant.character.string.escape, constant.regexp#FF4EB2
entity.name.tag#FF4EB2
entity.other.attribute-name.parent-selector#FF4EB2
entity.other.attribute-name#50FA7Bitalic bold
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#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 bold
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#50FA7B
meta.decorator variable.other.object#50FA7B
keyword, punctuation.definition.keyword#FF4EB2
keyword.control.new, keyword.operator.newbold
meta.selector#FF4EB2
support#8BE9FD
support.function.magic, support.variable, variable.other.predefined#BD93F9
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#FF4EB2
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#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#FF4EB2
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#8BE9FD
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#FF4EB2
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#8BE9FD
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FFB86C
storage.modifier#FF4EB2
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#F1FA8C
punctuation.definition.group.capture.regexp#FF4EB2
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF5555
punctuation.definition.character-class.regexp#8BE9FD
punctuation.definition.group.regexp#FFB86C
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF5555
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#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#F8F8F2
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#F8F8F2
meta.selectionset.graphql variable#F1FA8C
meta.selectionset.graphql meta.arguments variable#F8F8F2
entity.name.fragment.graphql, variable.fragment.graphql#8BE9FD
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#BD93F9
support.constant#BD93F9
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
storage.type.function, keyword.controlitalic bold
ThemeDatabase All Themes by enes ozturk - VS Code Theme