Skip to main content
Coding Theme

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#101820
  • activityBar.border#101820
  • activityBar.dropBorder#7f919f
  • activityBar.foreground#7f919f
  • activityBarBadge.background#455b75
  • activityBarBadge.foreground#e8eef2
  • badge.background#455b75
  • badge.foreground#e8eef2
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#ff87a8
  • breadcrumbPicker.background#131e26
  • button.background#21343f
  • button.border#314653
  • button.foreground#e8eef2
  • button.hoverBackground#32495a
  • button.secondaryBackground#182731
  • button.secondaryBorder#314653
  • button.secondaryForeground#e8eef2
  • button.secondaryHoverBackground#21343f
  • contrastBorder#182731
  • debugExceptionWidget.background#101820
  • debugExceptionWidget.border#7f919f
  • debugToolBar.background#101820
  • diffEditor.insertedTextBackground#9fe87023
  • diffEditor.removedTextBackground#b8c7d333
  • dropdown.background#101820
  • dropdown.border#7f919f
  • dropdown.foreground#ffffffcc
  • editor.background#101820
  • editor.findMatchBackground#7f919f79
  • editor.findMatchHighlightBackground#7f919f5d
  • editor.foreground#e8eef2
  • editor.hoverHighlightBackground#ff5a1f5a
  • editor.inactiveSelectionBackground#ff5a1f5a
  • editor.lineHighlightBackground#75879329
  • editor.rangeHighlightBackground#ff5a1f5a
  • editor.selectionBackground#354a5c
  • editor.selectionHighlightBackground#7f919f79
  • editor.wordHighlightBackground#e8eef233
  • editor.wordHighlightStrongBackground#ff87a833
  • editorBracketHighlight.foreground1#ff5a1f
  • editorBracketHighlight.foreground2#9cc7ff
  • editorBracketHighlight.foreground3#9fe870
  • editorBracketHighlight.foreground4#b8c7d3
  • editorBracketHighlight.foreground5#ffd166
  • editorBracketHighlight.foreground6#ff87a8
  • editorBracketHighlight.unexpectedBracket.foreground#ff5d68
  • editorBracketMatch.background#10182000
  • editorBracketMatch.border#51585f
  • editorBracketPairGuide.activeBackground1#ff5a1f66
  • editorBracketPairGuide.activeBackground2#9cc7ff66
  • editorBracketPairGuide.activeBackground3#9fe87066
  • editorBracketPairGuide.activeBackground4#b8c7d366
  • editorBracketPairGuide.activeBackground5#ffd16666
  • editorBracketPairGuide.activeBackground6#ff87a866
  • editorBracketPairGuide.background1#ff5a1f24
  • editorBracketPairGuide.background2#9cc7ff24
  • editorBracketPairGuide.background3#9fe87024
  • editorBracketPairGuide.background4#b8c7d324
  • editorBracketPairGuide.background5#ffd16624
  • editorBracketPairGuide.background6#ff87a824
  • editorCodeLens.foreground#758793
  • editorCursor.foreground#ff5a1f
  • editorError.foreground#ff5d68
  • editorGroup.border#101820
  • editorGroup.dropBackground#ff5a1f73
  • editorGroup.emptyBackground#101820
  • editorGroupHeader.noTabsBackground#101820
  • editorGroupHeader.tabsBackground#101820
  • editorGroupHeader.tabsBorder#314653
  • editorGutter.addedBackground#9fe870
  • editorGutter.background#101820
  • editorGutter.deletedBackground#b8c7d3
  • editorGutter.modifiedBackground#ffd166
  • editorHoverWidget.background#101820
  • editorHoverWidget.border#7f919f
  • editorIndentGuide.activeBackground#37424c
  • editorIndentGuide.activeBackground1#37424c
  • editorIndentGuide.background#1d2a34
  • editorIndentGuide.background1#1d2a34
  • editorInlayHint.background#131e2600
  • editorInlayHint.foreground#7f919f
  • editorLineNumber.activeForeground#e8eef2
  • editorLineNumber.foreground#758793
  • editorMarkerNavigation.background#182731
  • editorMarkerNavigationError.background#ff5d68
  • editorMarkerNavigationWarning.background#ffd166
  • editorOverviewRuler.commonContentForeground#ff5a1f
  • editorOverviewRuler.currentContentForeground#ff5a1f
  • editorOverviewRuler.incomingContentForeground#ff5a1f
  • editorRuler.foreground#1d2a34
  • editorSuggestWidget.background#21343f
  • editorSuggestWidget.border#21343f
  • editorSuggestWidget.foreground#e8eef2
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#354a5c
  • editorSuggestWidget.selectedForeground#e8eef2
  • editorWarning.foreground#ffd166
  • editorWidget.background#131e26
  • editorWidget.border#7f919f
  • errorForeground#ff5d68
  • extensionButton.prominentBackground#21343f
  • extensionButton.prominentForeground#e8eef2
  • extensionButton.prominentHoverBackground#32495a
  • focusBorder#617ea1
  • foreground#e8eef2
  • git.blame.editorDecorationForeground#758793
  • gitDecoration.addedResourceForeground#9fe870
  • gitDecoration.conflictingResourceForeground#ffd166
  • gitDecoration.deletedResourceForeground#b8c7d3
  • gitDecoration.ignoredResourceForeground#758793
  • gitDecoration.modifiedResourceForeground#9cc7ff
  • gitDecoration.renamedResourceForeground#55d6c2
  • gitDecoration.stageDeletedResourceForeground#b8c7d3
  • gitDecoration.stageModifiedResourceForeground#9cc7ff
  • gitDecoration.submoduleResourceForeground#55d6c2
  • gitDecoration.untrackedResourceForeground#9fe870
  • gitlens.gutterForegroundColor#758793
  • gitlens.trailingLineForegroundColor#758793
  • input.background#182731
  • input.border#7f919f
  • input.foreground#ffffffcc
  • input.placeholderForeground#7f919f
  • inputOption.activeBorder#617ea1
  • inputValidation.errorBackground#5a2933
  • inputValidation.errorBorder#ff5d68
  • inputValidation.errorForeground#e8eef2
  • inputValidation.infoBackground#354a5cF2
  • inputValidation.infoBorder#9cc7ff
  • inputValidation.warningBackground#21343fF2
  • inputValidation.warningBorder#ffd166
  • list.activeSelectionBackground#354a5c8c
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#101820
  • list.focusBackground#131e26
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#101820
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#182731
  • list.inactiveSelectionForeground#7f919f
  • list.invalidItemForeground#ff5a1f
  • merge.currentHeaderBackground#7f919f80
  • merge.incomingHeaderBackground#ff5a1f5a
  • notificationCenter.border#314653
  • notificationLink.foreground#55d6c2
  • notifications.background#131e26
  • notifications.border#314653
  • notifications.foreground#ffffffcc
  • notificationToast.border#314653
  • panel.background#101820
  • panel.border#314653
  • panelTitle.activeBorder#617ea1
  • panelTitle.activeForeground#ffffffcc
  • panelTitle.inactiveForeground#e8eef280
  • peekView.border#7f919f
  • peekViewEditor.background#101820
  • peekViewEditor.matchHighlightBackground#ff5a1f5a
  • peekViewResult.background#101820
  • peekViewResult.fileForeground#7f919f
  • peekViewResult.lineForeground#7f919f
  • peekViewResult.matchHighlightBackground#9cc7ff40
  • peekViewResult.selectionBackground#21343f
  • peekViewResult.selectionForeground#7f919f
  • peekViewTitle.background#101820
  • peekViewTitleDescription.foreground#7f919f
  • peekViewTitleLabel.foreground#7f919f
  • pickerGroup.border#101820
  • pickerGroup.foreground#ff87a8
  • progressBar.background#ff5a1f
  • scmGraph.foreground1#ff5a1f
  • scmGraph.foreground2#9cc7ff
  • scmGraph.foreground3#9fe870
  • scmGraph.foreground4#b8c7d3
  • scmGraph.foreground5#ffd166
  • scmGraph.historyItemBaseRefColor#ffd166
  • scmGraph.historyItemHoverAdditionsForeground#9fe870
  • scmGraph.historyItemHoverDefaultLabelBackground#21343f
  • scmGraph.historyItemHoverDefaultLabelForeground#e8eef2
  • scmGraph.historyItemHoverDeletionsForeground#b8c7d3
  • scmGraph.historyItemHoverLabelForeground#101820
  • scmGraph.historyItemRefColor#9cc7ff
  • scmGraph.historyItemRemoteRefColor#9fe870
  • scrollbar.shadow#131e26
  • scrollbarSlider.activeBackground#354a5c80
  • scrollbarSlider.background#354a5c80
  • scrollbarSlider.hoverBackground#354a5c80
  • selection.background#354a5c
  • selection.foreground#e8eef2
  • sideBar.background#101820
  • sideBar.border#101820
  • sideBar.foreground#55d6c2
  • sideBarSectionHeader.background#101820
  • sideBarSectionHeader.foreground#7f919f
  • sideBarTitle.foreground#7f919f
  • statusBar.background#101820
  • statusBar.border#314653
  • statusBar.debuggingBackground#21343f
  • statusBar.debuggingBorder#617ea1
  • statusBar.debuggingForeground#e8eef2
  • statusBar.foreground#7f919f
  • statusBar.noFolderBackground#101820
  • statusBar.noFolderBorder#314653
  • statusBarItem.activeBackground#314653
  • statusBarItem.hoverBackground#314653
  • statusBarItem.prominentBackground#314653
  • statusBarItem.prominentHoverBackground#314653
  • tab.activeBackground#182731
  • tab.activeBorder#314653
  • tab.activeForeground#e8eef2
  • tab.border#314653
  • tab.inactiveBackground#131e26
  • tab.inactiveForeground#7f919f
  • tab.unfocusedActiveBorder#314653
  • tab.unfocusedActiveForeground#7f919f
  • tab.unfocusedInactiveForeground#7f919f
  • terminal.ansiBlack#101820
  • terminal.ansiBlue#617ea1
  • terminal.ansiBrightBlack#758793
  • terminal.ansiBrightBlue#9cc7ff
  • terminal.ansiBrightCyan#55d6c2
  • terminal.ansiBrightGreen#9fe870
  • terminal.ansiBrightMagenta#ff87a8
  • terminal.ansiBrightRed#ff5d68
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffe08a
  • terminal.ansiCyan#3e9d96
  • terminal.ansiGreen#6fae78
  • terminal.ansiMagenta#b16f9e
  • terminal.ansiRed#c24c5a
  • terminal.ansiWhite#e8eef2
  • terminal.ansiYellow#d5a84f
  • terminal.selectionBackground#7f919f4d
  • terminalCursor.background#354a5c
  • terminalCursor.foreground#ff5a1f
  • textCodeBlock.background#21343f
  • titleBar.activeBackground#101820
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#131e26
  • walkThrough.embeddedEditorBackground#101820
  • widget.shadow#101820

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file#9cc7ffitalic
markup.deleted.diff#b8c7d3italic
markup.inserted.diff#9fe870ffitalic
comment, punctuation.definition.comment#758793italic
string#f2c38b
string.quoted, variable.other.readwrite.js#f2c38b
support.constant.math#9fe870
constant.numeric, constant.character.numeric#ffd166
constant.language, punctuation.definition.constant, variable.other.constant#9cc7ff
constant.character, constant.other#9cc7ff
constant.character.escape#ffd166
string.regexp, string.regexp keyword.other#9cc7ff
meta.function punctuation.separator.comma#7f919f
variable#9fe870
punctuation.accessor, keyword#ff87a8italic
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#ff87a8italic
storage.type#ff87a8
storage.type.function.arrow.js
entity.name.class, meta.class entity.name.type.class#b8c7d3
entity.other.inherited-class#9fe870
entity.name.function#ff87a8italic
punctuation.definition.tag, meta.tag#55d6c2
entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, meta.tag.js, meta.tag.tsx, meta.tag.html#e8eef2
entity.other.attribute-name#9fe870italic
entity.name.tag.custom#ffd166
support.function, support.constant#9cc7ff
support.constant.meta.property-value#55d6c2
support.type, support.class#9fe870
support.variable.dom#9fe870
invalid#ff5d68
invalid.deprecated#ff5d68
keyword.operator#55d6c2
keyword.operator.relational#ff87a8italic
keyword.operator.assignment#ff87a8
keyword.operator.arithmetic#ff87a8
keyword.operator.bitwise#ff87a8
keyword.operator.increment#ff87a8
keyword.operator.ternary#ff87a8
comment.line.double-slash#758793
object#e8eef2
constant.language.null#ff5a1f
meta.brace#e8eef2
meta.delimiter.period#ff87a8italic
punctuation.definition.string#55d6c2
punctuation.definition.string.begin.markdown#ff5a1f
constant.language.boolean#ff5a1f
object.comma#ffffff
variable.parameter.function#55d6c2
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#55d6c2
meta.property-list entity.name.tag.reference#55d6c2
constant.other.color.rgb-value punctuation.definition.constant#b8c7d3
constant.other.color#ffe08a
keyword.other.unit#b8c7d3
meta.selector#ff87a8italic
entity.other.attribute-name.id#ffd166
meta.property-name#55d6c2
entity.name.tag.doctype, meta.tag.sgml.doctype#ff87a8italic
punctuation.definition.parameters#e8eef2
keyword.control.operator#55d6c2
keyword.operator.logical#ff87a8
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#e8eef2
variable.other.object.property#ffe08aitalic
variable.other.object.js
entity.name.function#9cc7ffitalic
variable.language.this.js#55d6c2italic
keyword.operator.comparison, 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, keyword.operator.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#ff87a8italic
keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts#ff87a8
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control#55d6c2
support.function#9fe870
invalid.broken#ff5d68
invalid.unimplemented#ff5d68
invalid.illegal#ff5d68
variable.language#55d6c2
support.variable.property#55d6c2
variable.function#9cc7ff
variable.interpolation#ff5a1f
meta.function-call#9cc7ff
punctuation.section.embedded#ff5d68
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#e8eef2
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#e8eef2
string.template meta.template.expression#ff5d68
string.template punctuation.definition.string#55d6c2
italic#ff87a8italic
bold#9fe870bold
quote#7f919fitalic
raw#55d6c2
variable.assignment.coffee#55d6c2
variable.parameter.function.coffee#e8eef2
variable.other.readwrite.cs#e8eef2
entity.name.type.class.cs, storage.type.cs#b8c7d3
entity.name.type.namespace.cs#e8eef2
string.unquoted.preprocessor.message.cs#f2c38b
punctuation.separator.hash.cs, keyword.preprocessor.region.cs, keyword.preprocessor.endregion.cs#b8c7d3bold
variable.other.object.cs#e8eef2
entity.name.type.enum.cs#9fe870
string.interpolated.single.dart, string.interpolated.double.dart#f2c38b
support.class.dart#b8c7d3
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css#ff5a1f
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#55d6c2
keyword.other.unit.css#b8c7d3
meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js#ffd166
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#9cc7ff
source.elixir entity.name.function#9fe870
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#9cc7ff
source.elixir punctuation.definition.string#55d6c2
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#9fe870
source.elixir punctuation.binary.elixir#ff87a8italic
constant.keyword.clojure#55d6c2
source.go meta.function-call.go#e8eef2
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#ff87a8italic
source.go constant.language.go, source.go constant.other.placeholder.go#ff5a1f
entity.name.function.preprocessor.cpp, entity.scope.name.cpp#55d6c2ff
meta.namespace-block.cpp#e8eef2
storage.type.language.primitive.cpp#ff5a1f
meta.preprocessor.macro.cpp#e8eef2
variable.parameter#b8c7d3
variable.other.readwrite.powershell#9cc7ff
support.function.powershell#55d6c2ff
entity.other.attribute-name.id.html#9fe870
punctuation.definition.tag.html#55d6c2
meta.tag.sgml.doctype.html#ff87a8italic
meta.class entity.name.type.class.js#b8c7d3
meta.method.declaration storage.type.js#9cc7ff
terminator.js#e8eef2
meta.js punctuation.definition.js#e8eef2
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#7f919f
variable.other.jsdoc, variable.other.phpdoc#9cc7ff
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#e8eef2
variable.parameter.function.js#9cc7ff
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#e8eef2
variable.js, variable.other.js#e8eef2
entity.name.type.js, entity.name.type.module.js#b8c7d3
support.class.js#e8eef2
support.type.property-name.json#55d6c2
support.constant.json#9fe870
meta.structure.dictionary.value.json string.quoted.double#f2c38b
string.quoted.double.json#f2c38b
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ff5a1f
variable.other.object.js#55d6c2italic
variable.other.ruby#e8eef2
entity.name.type.class.ruby#9fe870
constant.language.symbol.hashkey.ruby#55d6c2
constant.language.symbol.ruby#55d6c2
entity.name.tag.less#55d6c2
meta.attribute-selector.less entity.other.attribute-name.attribute#ffd166
markup.heading, markup.heading.setext.1, markup.heading.setext.2#9cc7ff
markup.italic#ff87a8italic
markup.bold#9fe870bold
markup.quote#7f919fitalic
markup.inline.raw#55d6c2
markup.underline.link, markup.underline.link.image#ffd166
string.other.link.title.markdown, string.other.link.description.markdown#e8eef2
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#9cc7ff
punctuation.definition.metadata.markdown#55d6c2
beginning.punctuation.definition.list.markdown#9cc7ff
markup.inline.raw.string.markdown#55d6c2
variable.other.php, variable.other.property.php#e8eef2
support.class.php#b8c7d3
meta.function-call.php punctuation#e8eef2
variable.other.global.php#9fe870
variable.other.global.php punctuation.definition.variable#9fe870
constant.language.python#ff5a1f
variable.parameter.function.python, meta.function-call.arguments.python#9cc7ff
meta.function-call.python, meta.function-call.generic.python#e8eef2
punctuation.python#e8eef2
entity.name.function.decorator.python#9fe870
source.python variable.language.special#9cc7ff
keyword.control#ff87a8italic
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#9fe870
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#9cc7ff
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#e8eef2
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#ffd166
entity.name.tag.scss, entity.name.tag.sass#55d6c2
keyword.other.unit.scss, keyword.other.unit.sass#b8c7d3
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#e8eef2
entity.name.type.ts, entity.name.type.tsx#b8c7d3
support.class.node.ts, support.class.node.tsx#9cc7ff
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#7f919f
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#e8eef2
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#9cc7ff
meta.tag.js meta.jsx.children.tsx#9cc7ff
entity.name.tag.yaml#55d6c2
variable.other.readwrite.js, variable.parameter#e8eef2
support.class.component.js, support.class.component.tsx#ffd166
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#e8eef2
meta.class entity.name.type.class.tsx#b8c7d3
entity.name.type.tsx, entity.name.type.module.tsx#b8c7d3
meta.class.ts meta.var.expr.ts storage.type.ts, meta.class.tsx meta.var.expr.tsx storage.type.tsx#ff87a8
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#9cc7ff
markup.deleted#b8c7d3
markup.inserted#9fe870
markup.underlineunderline
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