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.activeBorder#253d50
  • activityBar.background#062335
  • activityBar.border#324858
  • activityBar.dropBackground#1d3546
  • activityBar.foreground#abb5c7
  • activityBarBadge.background#253d50
  • activityBarBadge.foreground#ffffff
  • badge.background#253d50
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#4a8a9b
  • breadcrumb.focusForeground#d6dadd
  • breadcrumb.foreground#abb5c7
  • breadcrumbPicker.background#0d2a38
  • button.background#253d50
  • button.foreground#ffffff
  • button.hoverBackground#1d3546
  • checkbox.background#0d2a38
  • checkbox.border#062335
  • commentThread.background#062335
  • commentThreadReply.background#062335
  • contrastBorder#324858
  • debugExceptionWidget.background#0d2a38
  • debugExceptionWidget.border#062335
  • debugIcon.breakpointDisabledForeground#abb5c750
  • debugIcon.breakpointForeground#9a7a3a
  • debugIcon.pauseForeground#abb5c7
  • debugIcon.restartForeground#abb5c7
  • debugIcon.startForeground#abb5c7
  • debugIcon.stopForeground#6a3a5a
  • debugToolBar.background#0d2a38
  • diffEditor.insertedLineBackground#4a7a5a20
  • diffEditor.insertedTextBackground#4a7a5a30
  • diffEditor.removedLineBackground#6a3a5a20
  • diffEditor.removedTextBackground#6a3a5a30
  • dropdown.background#0d2a38
  • dropdown.border#324858
  • dropdown.foreground#d6dadd
  • editor.background#062335
  • editor.findMatchBackground#1d35465a
  • editor.findMatchBorder#253d50
  • editor.findMatchHighlightBackground#253d5033
  • editor.foreground#d6dadd
  • editor.hoverHighlightBackground#1d35465a
  • editor.inactiveSelectionBackground#1d35465a
  • editor.lineHighlightBackground#0003
  • editor.rangeHighlightBackground#1d35465a
  • editor.selectionBackground#1d354680
  • editor.selectionHighlightBackground#1d354655
  • editor.wordHighlightBackground#1d3546
  • editor.wordHighlightStrongBackground#1d3546
  • editorActiveLineNumber.foreground#ffffff
  • editorBracketMatch.background#1d354644
  • editorBracketMatch.border#062335
  • editorCodeLens.foreground#abb5c7
  • editorCommentsWidget.rangeActiveBackground#253d5030
  • editorCommentsWidget.rangeBackground#253d5028
  • editorCommentsWidget.resolvedBorder#1d3546
  • editorCommentsWidget.unresolvedBorder#253d50
  • editorCursor.background#ffc60000
  • editorCursor.foreground#ffc600
  • editorError.foreground#00000000
  • editorGroup.background#1d3546
  • editorGroup.border#324858
  • editorGroup.dropBackground#1d354673
  • editorGroupHeader.noTabsBackground#062335
  • editorGroupHeader.tabsBackground#062335
  • editorGroupHeader.tabsBorder#324858
  • editorGutter.addedBackground#4a7a5a
  • editorGutter.deletedBackground#6a3a5a
  • editorGutter.modifiedBackground#7a6030
  • editorHoverWidget.background#0d2a38
  • editorHoverWidget.border#324858
  • editorIndentGuide.background#2d537380
  • editorInfo.foreground#00000000
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#2d5373
  • editorMarkerNavigation.background#1d3546
  • editorMarkerNavigationError.background#6a3a5a
  • editorMarkerNavigationWarning.background#7a6030
  • editorOverviewRuler.addedForeground#4a7a5a
  • editorOverviewRuler.commentForeground#253d50
  • editorOverviewRuler.commentUnresolvedForeground#253d50
  • editorOverviewRuler.commonContentForeground#1d3546
  • editorOverviewRuler.currentContentForeground#1d3546
  • editorOverviewRuler.deletedForeground#6a3a5a
  • editorOverviewRuler.incomingContentForeground#1d3546
  • editorOverviewRuler.modifiedForeground#8a6a2ada
  • editorRuler.foreground#2d537380
  • editorSuggestWidget.background#0d2a38
  • editorSuggestWidget.border#324858
  • editorSuggestWidget.foreground#d6dadd
  • editorSuggestWidget.highlightForeground#4a8a9b
  • editorSuggestWidget.selectedBackground#1d3546
  • editorWarning.foreground#00000000
  • editorWidget.background#0d2a38
  • editorWidget.border#324858
  • editorWidget.resizeBorder#062335
  • errorForeground#6a3a5a
  • extensionButton.prominentBackground#253d50
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#1d3546
  • focusBorder#253d50
  • foreground#d6dadd
  • gitDecoration.conflictingResourceForeground#b08040
  • gitDecoration.deletedResourceForeground#b06070
  • gitDecoration.ignoredResourceForeground#3d5468
  • gitDecoration.modifiedResourceForeground#c49a3c
  • gitDecoration.untrackedResourceForeground#5aaa80
  • inlineChat.background#0d2a38
  • inlineChat.border#324858
  • inlineChat.shadow#062335
  • inlineChatInput.background#0d2a38
  • inlineChatInput.border#324858
  • input.background#0d2a38
  • input.border#324858
  • input.foreground#ffffff
  • input.placeholderForeground#abb5c7
  • inputOption.activeBackground#253d5040
  • inputOption.activeBorder#253d50
  • inputOption.activeForeground#ffffff
  • inputValidation.errorBackground#6a3a5af2
  • inputValidation.errorBorder#6a3a5a
  • inputValidation.infoBackground#253d50f2
  • inputValidation.infoBorder#253d50
  • inputValidation.warningBackground#8a6a2af2
  • inputValidation.warningBorder#8a6a2a
  • keybindingTable.headerBackground#062335
  • keybindingTable.rowsBackground#062335
  • list.activeSelectionBackground#1d3546
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#1d3546
  • list.filterMatchBackground#1d3546
  • list.focusBackground#1d3546
  • list.focusForeground#ffffff
  • list.highlightForeground#4a8a9b
  • list.hoverBackground#1d354633
  • list.hoverForeground#d6dadd
  • list.inactiveSelectionBackground#1d35461a
  • list.inactiveSelectionForeground#4a8a9b
  • menu.background#062335
  • menu.selectionBackground#1d354680
  • menu.selectionForeground#ffffff
  • menubar.selectionBackground#062335
  • menubar.selectionForeground#d6dadd
  • merge.currentHeaderBackground#1d35465a
  • merge.incomingHeaderBackground#1d35465a
  • minimap.background#062335
  • minimap.findMatchHighlight#253d5066
  • minimap.selectionHighlight#253d5040
  • minimapSlider.activeBackground#1d3546a6
  • minimapSlider.background#1d354644
  • minimapSlider.hoverBackground#1d354666
  • notificationLink.foreground#253d50
  • notifications.background#0d2a38
  • notifications.foreground#d6dadd
  • panel.background#062335
  • panel.border#324858
  • panelSection.border#324858
  • panelSectionHeader.background#062335
  • panelSectionHeader.border#324858
  • panelTitle.activeBorder#253d50
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#abb5c780
  • peekView.border#324858
  • peekViewEditor.background#062335
  • peekViewEditor.matchHighlightBackground#1d35465a
  • peekViewResult.background#062335
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#d6dadd
  • peekViewResult.matchHighlightBackground#1d35465a
  • peekViewResult.selectionBackground#1d3546
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#062335
  • peekViewTitleDescription.foreground#abb5c7
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#062335
  • pickerGroup.foreground#4a8a9b
  • progress.background#253d50
  • progressBar.background#253d50
  • quickInput.background#0d2a38
  • quickInput.foreground#d6dadd
  • quickInputTitle.background#1d3546
  • scm.historyViewGroupBackground#062335
  • scrollbar.shadow#32485800
  • scrollbarSlider.activeBackground#1d3546a6
  • scrollbarSlider.background#1d354644
  • scrollbarSlider.hoverBackground#1d354666
  • secondarySideBar.background#062335
  • secondarySideBar.border#324858
  • selection.background#253d5033
  • settings.headerForeground#253d50
  • settings.modifiedItemIndicator#253d50
  • sideBar.background#062335
  • sideBar.border#324858
  • sideBar.foreground#abb5c7
  • sideBarSectionHeader.background#062335
  • sideBarSectionHeader.border#324858
  • sideBarSectionHeader.foreground#abb5c7
  • sideBarStickyScroll.background#062335
  • sideBarTitle.foreground#d6dadd
  • statusBar.background#062335
  • statusBar.border#324858
  • statusBar.debuggingBackground#062335
  • statusBar.debuggingBorder#324858
  • statusBar.debuggingForeground#abb5c7
  • statusBar.foreground#abb5c7
  • statusBar.noFolderBackground#062335
  • statusBar.noFolderBorder#324858
  • statusBar.noFolderForeground#abb5c7
  • statusBarItem.activeBackground#1d3546
  • statusBarItem.hoverBackground#1d3546
  • statusBarItem.prominentBackground#1d3546
  • statusBarItem.prominentHoverBackground#1d3546
  • tab.activeBackground#062335
  • tab.activeBorder#324858
  • tab.activeForeground#ffffff
  • tab.border#324858
  • tab.inactiveBackground#062335
  • tab.inactiveForeground#abb5c7
  • tab.unfocusedActiveBorder#324858
  • terminal.ansiBlack#1d3546
  • terminal.ansiBlue#5a7ab0
  • terminal.ansiBrightBlack#2d5373
  • terminal.ansiBrightBlue#5a7ab0
  • terminal.ansiBrightCyan#4a8a9b
  • terminal.ansiBrightGreen#4a7a5a
  • terminal.ansiBrightMagenta#6a3a5a
  • terminal.ansiBrightRed#7a4a6a
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#9a7a3a
  • terminal.ansiCyan#4a8a9b
  • terminal.ansiGreen#4a7a5a
  • terminal.ansiMagenta#6a3a5a
  • terminal.ansiRed#7a4a6a
  • terminal.ansiWhite#d6dadd
  • terminal.ansiYellow#9a7a3a
  • terminal.background#062335
  • terminal.findMatchBackground#253d50b3
  • terminal.findMatchHighlightBackground#253d504d
  • terminal.foreground#d6dadd
  • textLink.foreground#253d50
  • titleBar.activeBackground#062335
  • titleBar.activeForeground#d6dadd
  • titleBar.border#324858
  • titleBar.inactiveBackground#062335
  • treeIndentGuidesStroke#324858
  • walkThrough.embeddedEditorBackground#0d2a38
  • widget.shadow#32485800

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#d6dadd
comment#697098italic
string#C3E88D
string.quoted#C3E88D
string.unquoted#d6dadd
support.constant.math#c49a3c
constant.numeric, constant.character.numeric#F78C6C
constant.language, punctuation.definition.constant, variable.other.constant#82AAFF
constant.character, constant.other#82AAFF
constant.character.escape#F78C6C
string.regexp, string.regexp keyword.other#80CBC4
meta.function punctuation.separator.comma#d6dadd
variable#c49a3c
punctuation.accessor, keyword#c792ea
storage, storage.type, meta.var.expr storage.type, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx, meta.class meta.method.declaration meta.var.expr storage.type.js#c792ea
entity.name.class, meta.class entity.name.type.class#c49a3c
entity.other.inherited-class#a9c77d
entity.name.function#82AAFF
variable.parameter#7986E7
punctuation.definition.tag, meta.tag#89DDFF
entity.name.tag support.class.component, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#ff5572
entity.other.attribute-name#c49a3c
entity.name.tag.custom#c49a3c
support.function, support.constant#82AAFF
support.constant.meta.property-value#89DDFF
support.type, support.class#c49a3c
support.variable.dom#c49a3c
invalid#ffffff
invalid.deprecated#ffffff
keyword.operator#89DDFF
keyword.operator.relational#c792ea
keyword.operator.assignment#c792ea
comment.line.double-slash#697098
object#cdebf7
constant.language.null#ff5874
meta.brace#d6dadd
meta.delimiter.period#c792ea
punctuation.definition.string#d9f5dd
constant.language.boolean#ff5874
object.comma#ffffff
variable.parameter.function#89DDFF
support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag#80CBC4
meta.property-list entity.name.tag.reference#ff5572
constant.other.color.rgb-value punctuation.definition.constant#F78C6C
constant.other.color#FFEB95
keyword.other.unit#FFEB95
meta.selector#c792ea
entity.other.attribute-name.id#FAD430
meta.property-name#80CBC4
entity.name.tag.doctype, meta.tag.sgml.doctype#c792eaitalic
punctuation.definition.parameters#d9f5dd
keyword.control.operator#89DDFF
keyword.operator.logical#c792ea
variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance#ff5572
variable.other.property, variable.other.object.property#89DDFF
entity.name.function#82AAFF
keyword.operator.comparison#c792ea
support.constant, keyword.other.special-method, keyword.other.new#89DDFF
support.function#89DDFF
invalid.broken#020e14
invalid.unimplemented#ffffff
invalid.illegal#ffffff
variable.language#ff5572
support.variable.property#89DDFF
variable.function#82AAFF
variable.interpolation#ec5f67
meta.function-call#82AAFF
punctuation.section.embedded#d3423e
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#d6dadd
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#d9f5dd
string.template meta.template.expression#d3423e
string.template punctuation.definition.string#d6dadd
italic#c792eaitalic
bold#c49a3cbold
quote#697098italic
raw#80CBC4
variable.assignment.coffee#89DDFF
variable.parameter.function.coffee#d6dadd
variable.assignment.coffee#89DDFF
variable.other.readwrite.cs#d6dadd
entity.name.type.class.cs, storage.type.cs#82AAFF
entity.name.type.namespace.cs#B2CCD6
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#ff5572
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#ff5572
keyword.other.unit.css, constant.length.units.css, keyword.other.unit.less, constant.length.units.less, keyword.other.unit.scss, constant.length.units.scss, keyword.other.unit.sass, constant.length.units.sass#FFEB95
meta.attribute-selector.css entity.other.attribute-name.attribute#F78C6C
source.js source.css meta.property-list, source.js source.css punctuation.section, source.js source.css punctuation.terminator.rule, source.js source.css punctuation.definition.entity.end.bracket, source.js source.css punctuation.definition.entity.begin.bracket, source.js source.css punctuation.separator.key-value, source.js source.css punctuation.definition.attribute-selector, source.js source.css meta.property-list, source.js source.css meta.property-list punctuation.separator.comma, source.ts source.css punctuation.section, source.ts source.css punctuation.terminator.rule, source.ts source.css punctuation.definition.entity.end.bracket, source.ts source.css punctuation.definition.entity.begin.bracket, source.ts source.css punctuation.separator.key-value, source.ts source.css punctuation.definition.attribute-selector, source.ts source.css meta.property-list, source.ts source.css meta.property-list punctuation.separator.comma#d6dadd
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#82AAFF
source.elixir entity.name.function#c49a3c
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#82AAFF
source.elixir punctuation.definition.string#a9c77d
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#c49a3c
source.elixir .punctuation.binary.elixir#c792ea
source.go meta.function-call.go#DDDDDD
variable.qraphql#d6dadd
entity.other.attribute-name.id.html#c49a3c
punctuation.definition.tag.html#89DDFF
meta.tag.sgml.doctype.html#c792eaitalic
meta.class entity.name.type.class.js#c49a3c
meta.method.declaration storage.type.js#82AAFFnormal
terminator.js#d6dadd
meta.js punctuation.definition.js#d6dadd
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#d6dadd
variable.other.jsdoc, variable.other.phpdoc#78ccf0
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#d6dadd
variable.parameter.function.js#7986E7
variable.other.readwrite.js#d6dadd
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#d6dadd
variable.other.object.js, variable.other.object.jsx, meta.object-literal.key.js, meta.object-literal.key.jsx, variable.object.property.js, variable.object.property.jsx#d6dadd
variable.js, variable.other.js#d6dadd
entity.name.type.js, entity.name.type.module.js#c49a3c
support.class.js#d6dadd
support.type.property-name.json#C3E88Dnormal
support.constant.json#c49a3c
meta.structure.dictionary.value.json string.quoted.double#80CBC4normal
string.quoted.double.json punctuation.definition.string.json#80CBC4normal
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ff5874
variable.other.ruby#d6dadd
constant.language.symbol.hashkey.ruby#89DDFF
entity.name.tag.less#ff5572
meta.attribute-selector.less entity.other.attribute-name.attribute#F78C6C
markup.heading#82b1ff
markup.italic#c792eaitalic
markup.bold#c49a3cbold
markup.quote#697098italic
markup.inline.raw#80CBC4
markup.underline.link, markup.underline.link.image#ff869a
markup.meta.attribute-list#a9c77d
markup.admonitionbold
markup.list.bullet#D9F5DD
markup.superscript, markup.subscriptitalic
string.other.link.title.markdown, string.other.link.description.markdown#d6dadd
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#82b1ff
punctuation.definition.metadata.markdown#ff5572
beginning.punctuation.definition.list.markdown#82b1ff
entity.name.function.asciidoc#F78C6C
variable.other.php#bec5d4
support.class.php#c49a3c
meta.function-call.php punctuation#d6dadd
variable.other.global.php#c49a3c
variable.other.global.php punctuation.definition.variable#c49a3c
constant.language.python#ff5874
variable.parameter.function.python, meta.function-call.arguments.python#7986E7
meta.function-call.python, meta.function-call.generic.python#B2CCD6
punctuation.python#d6dadd
entity.name.function.decorator.python#c49a3c
source.python variable.language.special#8EACE3
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#DDDDDD
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#82AAFF
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#bec5d4
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#F78C6C
entity.name.tag.scss, entity.name.tag.sass#ff5572
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#d6dadd
entity.name.type.ts, entity.name.type.tsx#78ccf0
support.class.node.ts, support.class.node.tsx#82AAFF
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#d6dadd
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#d6dadd
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#82AAFF
meta.tag.js meta.jsx.children.tsx#82AAFF
entity.name.tag.yaml#89DDFF
variable.parameter.handlebars#bec5d4
entity.other.attribute-name.handlebars variable.parameter.handlebars#c49a3c
entity.other.attribute-name.handlebars#89DDFF
entity.other.attribute-value.handlebars variable.parameter.handlebars#7986E7
meta.tag.js meta.embedded.expression.js punctuation.section.embedded.begin.js, meta.tag.js meta.embedded.expression.js punctuation.section.embedded.end.js, meta.property-list.css meta.property-value.css variable.other.less, punctuation.section.embedded.begin.js.jsx, punctuation.section.embedded.end.js.jsx, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.type, punctuation.section.embedded.js, punctuation.definintion.string, punctuationnormal
keyword.other.unit, support.type.property-name.css, support.type.vendored.property-name.css, support.constant.vendored.property-value.css, meta.import.ts meta.block.ts variable.other.readwrite.alias.ts, meta.import.tsx meta.block.tsx variable.other.readwrite.alias.tsx, meta.import.js variable.other, meta.export.ts meta.block.ts variable.other.readwrite.alias.ts, meta.export.tsx meta.block.tsx variable.other.readwrite.alias.tsx, meta.export.js variable.other, entity.name.function.ts, entity.name.function.tsx, support.type.primitive, entity.name.tag.yaml, entity.other.attribute-name, meta.tag.sgml.doctype.html, entity.name.tag.doctype, meta.tag.sgml.doctype, entity.name.tag.custom, source.js.jsx keyword.control.flow.js, support.type.property.css, support.function.basic_functions, constant.other.color.rgb-value.hex.css, constant.other.rgb-value.css, variable.assignment.coffee, support.function.basic_functions, keyword.operator.expression.typeof, punctuation.section.embedded, keyword.operator.type.annotation, variable.object.property.ts, variable.object.property.js, variable.object.property.jsx, variable.object.property.tsx, assignment.coffee, entity.name.type.ts, support.constant.math, meta.object-literal.key, meta.var.expr storage.type, variable.scss, variable.sass, variable.other.less, variable.parameter.url.scss, variable.parameter.url.sass, parameter, string, italic, quote, keyword, storage, language, constant.language, variable.language, type .function, type.function, storage.type.class, type.var, meta.parameter, variable.parameter, meta.parameters, keyword.control, modifier, this, commentitalic
Modern Cobalt2 by kud - VS Code Theme