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.activeBackground#1d0ac400
  • activityBar.background#262061
  • activityBar.border#382e8e00
  • activityBar.foreground#ffc133
  • activityBar.inactiveForeground#c6c6c6
  • activityBarBadge.background#ffc133
  • activityBarBadge.foreground#1d1d1b
  • badge.background#262061
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#1d1d1b
  • breadcrumb.focusForeground#e0e0e0
  • breadcrumb.foreground#cccccccc
  • button.background#ffc133
  • button.foreground#1d1d1b
  • button.hoverBackground#ffd880
  • button.secondaryBackground#1d1d1b
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#3d3d3d
  • checkbox.background#1d1d1b
  • checkbox.border#00000000
  • checkbox.foreground#cccccc
  • debugExceptionWidget.background#333333
  • debugExceptionWidget.border#474747
  • debugToolBar.background#333333
  • debugToolBar.border#474747
  • diffEditor.border#444444
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#554cfb33
  • dropdown.background#1d1d1b
  • dropdown.border#00000000
  • dropdown.foreground#cccccc
  • editor.background#1d1d1b
  • editor.findMatchBackground#515c6a
  • editor.findMatchBorder#74879f
  • editor.findMatchHighlightBackground#ea5c0055
  • editor.findMatchHighlightBorder#ffffff00
  • editor.findRangeHighlightBackground#3a3d4166
  • editor.findRangeHighlightBorder#ffffff00
  • editor.foldBackground#264f784d
  • editor.foreground#d4d4d4
  • editor.hoverHighlightBackground#264f7840
  • editor.inactiveSelectionBackground#3a3d41
  • editor.lineHighlightBackground#ffffff0A
  • editor.lineHighlightBorder#282828
  • editor.rangeHighlightBackground#ffffff0b
  • editor.rangeHighlightBorder#ffffff00
  • editor.selectionBackground#262061
  • editor.selectionHighlightBackground#add6ff26
  • editor.selectionHighlightBorder#495F77
  • editor.wordHighlightBackground#575757b8
  • editor.wordHighlightStrongBackground#262061b8
  • editorBracketMatch.background#0064001a
  • editorBracketMatch.border#888888
  • editorCodeLens.foreground#999999
  • editorCursor.background#000000
  • editorCursor.foreground#aeafad
  • editorError.background#B73A3400
  • editorError.border#ffffff00
  • editorError.foreground#f48771
  • editorGroup.border#444444
  • editorGroup.emptyBackground#1d1d1b
  • editorGroupHeader.tabsBackground#262061
  • editorGroupHeader.tabsBorder#554cfb28
  • editorGutter.addedBackground#587c0c
  • editorGutter.background#1e1e1e
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#94151b
  • editorGutter.foldingControlForeground#c5c5c5
  • editorGutter.modifiedBackground#0c7d9d
  • editorHoverWidget.background#252526
  • editorHoverWidget.border#454545
  • editorHoverWidget.foreground#cccccc
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#252522
  • editorInfo.background#4490BF00
  • editorInfo.border#4490BF00
  • editorInfo.foreground#ecf6ff
  • editorLineNumber.activeForeground#c6c6c6
  • editorLineNumber.foreground#a8a8a8
  • editorLink.activeForeground#ffc133
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#f48771
  • editorMarkerNavigationInfo.background#75beff
  • editorMarkerNavigationWarning.background#cca700
  • editorOverviewRuler.background#25252500
  • editorOverviewRuler.border#7f7f7f4d
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#252526
  • editorSuggestWidget.border#454545
  • editorSuggestWidget.foreground#d4d4d4
  • editorSuggestWidget.highlightForeground#ffc133
  • editorSuggestWidget.selectedBackground#30287b
  • editorWarning.background#A9904000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#252526
  • editorWidget.foreground#cccccc
  • editorWidget.resizeBorder#5F5F5F
  • focusBorder#554cfb
  • foreground#d4d2ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#8c8c8c
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.stageDeletedResourceForeground#c74e39
  • gitDecoration.stageModifiedResourceForeground#e2c08d
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#73c991
  • icon.foreground#857eff
  • input.background#1d1d1b
  • input.border#00000000
  • input.foreground#cccccc
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBackground#554cfb66
  • inputOption.activeBorder#007acc00
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#554cfb66
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#30287b
  • list.focusBackground#1d1d1b
  • list.focusForeground#c6c6c6
  • list.highlightForeground#ffc133
  • list.hoverBackground#30287b
  • list.hoverForeground#c6c6c6
  • list.inactiveSelectionBackground#30287b
  • list.inactiveSelectionForeground#ffc133
  • listFilterWidget.background#653723
  • listFilterWidget.noMatchesOutline#f51c1c
  • listFilterWidget.outline#00000000
  • menu.background#1d1d1b
  • menu.border#1d1d1b
  • menu.foreground#cccccc
  • menu.selectionBackground#262061
  • menu.selectionBorder#00000000
  • menu.selectionForeground#ffc133
  • menu.separatorBackground#bbbbbb
  • menubar.selectionBackground#1d1d1b
  • menubar.selectionForeground#cccccc
  • merge.commonContentBackground#282828
  • merge.commonHeaderBackground#383838
  • merge.currentContentBackground#27403B
  • merge.currentHeaderBackground#367366
  • merge.incomingContentBackground#28384B
  • merge.incomingHeaderBackground#395F8F
  • minimap.background#1d1d1b
  • minimap.errorHighlight#f48771
  • minimap.findMatchHighlight#515c6a
  • minimap.selectionHighlight#262061
  • minimap.warningHighlight#cca700
  • minimapGutter.addedBackground#587c0c
  • minimapGutter.deletedBackground#94151b
  • minimapGutter.modifiedBackground#0c7d9d
  • notificationCenter.border#474747
  • notificationCenterHeader.background#1d1d1b
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#1d1d1b
  • notifications.border#303031
  • notifications.foreground#cccccc
  • notificationsErrorIcon.foreground#f48771
  • notificationsInfoIcon.foreground#75beff
  • notificationsWarningIcon.foreground#cca700
  • notificationToast.border#474747
  • panel.background#141412
  • panel.border#80808059
  • panelSection.border#80808059
  • panelTitle.activeBorder#e7e7e7
  • panelTitle.activeForeground#e7e7e7
  • panelTitle.inactiveForeground#e7e7e799
  • peekView.border#30287b
  • peekViewEditor.background#262061
  • peekViewEditor.matchHighlightBackground#ffc13399
  • peekViewEditor.matchHighlightBorder#ffc133
  • peekViewEditorGutter.background#262061
  • peekViewResult.background#252522
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1e1e1e
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#3f3f46
  • pickerGroup.foreground#554cfb
  • progressBar.background#30287b
  • scrollbar.shadow#141412
  • scrollbarSlider.activeBackground#bfbfbf66
  • scrollbarSlider.background#79797966
  • scrollbarSlider.hoverBackground#646464b3
  • selection.background#2c2470
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#554cfb
  • sideBar.background#262061
  • sideBar.border#262061
  • sideBar.dropBackground#30287b
  • sideBar.foreground#c6c6c6
  • sideBarSectionHeader.background#e0111100
  • sideBarSectionHeader.border#c6c6c610
  • sideBarSectionHeader.foreground#c6c6c6
  • sideBarTitle.foreground#a8a8a8
  • statusBar.background#262061
  • statusBar.debuggingBackground#ffc133
  • statusBar.debuggingForeground#1d1d1b
  • statusBar.foreground#c6c6c6
  • statusBar.noFolderBackground#554cfb
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.remoteBackground#262061
  • statusBarItem.remoteForeground#ffc133
  • tab.activeBackground#1d1d1b
  • tab.activeBorder#1d1d1b
  • tab.activeBorderTop#ffc133
  • tab.activeForeground#ffffff
  • tab.border#1d1d1b
  • tab.inactiveBackground#2d2d2d
  • tab.inactiveForeground#ffffff80
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#e5e510
  • terminal.border#80808059
  • terminal.foreground#cccccc
  • terminal.selectionBackground#ffffff40
  • terminalCursor.background#554cfb
  • terminalCursor.foreground#ffffff
  • textLink.foreground#ffc133
  • titleBar.activeBackground#262061
  • titleBar.activeForeground#cccccc
  • titleBar.border#00000000
  • titleBar.inactiveBackground#3c3c3c99
  • titleBar.inactiveForeground#cccccc99
  • tree.indentGuidesStroke#2c2470
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#0000005c

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#a2bffcitalic
markup.deleted.diff#EF535090italic
markup.inserted.diff#e6fd92ffitalic
Global settings#d6deeb
comment#637777italic
string#f1aa45
string.quoted, variable.other.readwrite.js#f1aa45
support.constant.math#e6fd92
constant.numeric, constant.character.numeric#F78C6C
constant.language, punctuation.definition.constant, variable.other.constant#554cfb
constant.character, constant.other#554cfb
constant.character.escape#F78C6C
string.regexp, string.regexp keyword.other#5ca7e4
meta.function punctuation.separator.comma#5f7e97
variable#e6fd92
punctuation.accessor, keyword#8781f7italic
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#8781f7italic
storage.type#8781f7
storage.type.function.arrow.js
entity.name.class, meta.class entity.name.type.class#ffcb8b
entity.other.inherited-class#e6fd92
entity.name.function#8781f7italic
punctuation.definition.tag, meta.tag#ffc133
entity.name.tag, 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#caece6
entity.other.attribute-name#e6fd92italic
entity.name.tag.custom#f78c6c
support.function, support.constant#554cfb
support.constant.meta.property-value#ffc133
support.type, support.class#e6fd92
support.variable.dom#e6fd92
invalid#ffffff
invalid.deprecated#ffffff
keyword.operator#ffc133
keyword.operator.relational#8781f7italic
keyword.operator.assignment#8781f7
keyword.operator.arithmetic#8781f7
keyword.operator.bitwise#8781f7
keyword.operator.increment#8781f7
keyword.operator.ternary#8781f7
comment.line.double-slash#637777
object#cdebf7
constant.language.null#ff5874
meta.brace#d6deeb
meta.delimiter.period#8781f7italic
punctuation.definition.string#d9f5dd
punctuation.definition.string.begin.markdown#ff5874
constant.language.boolean#ff5874
object.comma#ffffff
variable.parameter.function#ffc133
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#80CBC4
meta.property-list entity.name.tag.reference#57eaf1
constant.other.color.rgb-value punctuation.definition.constant#F78C6C
constant.other.color#FFEB95
keyword.other.unit#FFEB95
meta.selector#8781f7italic
entity.other.attribute-name.id#FAD430
meta.property-name#80CBC4
entity.name.tag.doctype, meta.tag.sgml.doctype#8781f7italic
punctuation.definition.parameters#d9f5dd
keyword.control.operator#ffc133
keyword.operator.logical#8781f7
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#fddd92
variable.other.object.property#faf39fitalic
variable.other.object.js
entity.name.function#554cfbitalic
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#8781f7italic
keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts#8781f7
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control#ffc133
support.function#e6fd92
invalid.broken#020e14
invalid.unimplemented#ffffff
invalid.illegal#ffffff
variable.language#ffc133
support.variable.property#ffc133
variable.function#554cfb
variable.interpolation#ec5f67
meta.function-call#554cfb
punctuation.section.embedded#d3423e
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#d6deeb
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#d6deeb
italic#8781f7italic
bold#e6fd92bold
quote#697098italic
raw#80CBC4
variable.assignment.coffee#31e1eb
variable.parameter.function.coffee#d6deeb
variable.assignment.coffee#ffc133
variable.other.readwrite.cs#d6deeb
entity.name.type.class.cs, storage.type.cs#ffcb8b
entity.name.type.namespace.cs#B2CCD6
string.unquoted.preprocessor.message.cs#d6deeb
punctuation.separator.hash.cs, keyword.preprocessor.region.cs, keyword.preprocessor.endregion.cs#ffcb8bbold
variable.other.object.cs#B2CCD6
entity.name.type.enum.cs#e6fd92
string.interpolated.single.dart, string.interpolated.double.dart#FFCB8B
support.class.dart#FFCB8B
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css#ff6363
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#ffc133
keyword.other.unit.css#FFEB95
meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js#F78C6C
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#554cfb
source.elixir entity.name.function#e6fd92
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#554cfb
source.elixir punctuation.definition.string#e6fd92
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#e6fd92
source.elixir .punctuation.binary.elixir#8781f7italic
constant.keyword.clojure#ffc133
source.go meta.function-call.go#DDDDDD
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#8781f7italic
source.go constant.language.go, source.go constant.other.placeholder.go#ff5874
entity.name.function.preprocessor.cpp, entity.scope.name.cpp#ffc133ff
meta.namespace-block.cpp#e0dec6
storage.type.language.primitive.cpp#ff5874
meta.preprocessor.macro.cpp#d6deeb
variable.parameter#ffcb8b
variable.other.readwrite.powershell#554cfb
support.function.powershell#ffc133ff
entity.other.attribute-name.id.html#e6fd92
punctuation.definition.tag.html#6ae9f0
meta.tag.sgml.doctype.html#8781f7italic
meta.class entity.name.type.class.js#ffcb8b
meta.method.declaration storage.type.js#554cfb
terminator.js#d6deeb
meta.js punctuation.definition.js#d6deeb
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#5f7e97
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#d6deeb
variable.parameter.function.js#7986E7
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#d6deeb
variable.js, variable.other.js#d6deeb
entity.name.type.js, entity.name.type.module.js#ffcb8b
support.class.js#d6deeb
support.type.property-name.json#ffc133
support.constant.json#e6fd92
meta.structure.dictionary.value.json string.quoted.double#c789d6
string.quoted.double.json punctuation.definition.string.json#80CBC4
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ff5874
variable.other.object.js#ffc133italic
variable.other.ruby#d6deeb
entity.name.type.class.ruby#f1aa45
constant.language.symbol.hashkey.ruby#ffc133
constant.language.symbol.ruby#ffc133
entity.name.tag.less#ffc133
keyword.other.unit.css#FFEB95
meta.attribute-selector.less entity.other.attribute-name.attribute#F78C6C
markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#82b1ff
markup.italic.markdown#8781f7italic
markup.bold.markdown#e6fd92bold
markup.quote.markdown#697098italic
markup.inline.raw.markdown#80CBC4
markup.underline.link.markdown, markup.underline.link.image.markdown#ff869a
string.other.link.title.markdown, string.other.link.description.markdown#d6deeb
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#ffc133
beginning.punctuation.definition.list.markdown#82b1ff
markup.inline.raw.string.markdown#e6fd92
variable.other.php, variable.other.property.php#bec5d4
support.class.php#ffcb8b
meta.function-call.php punctuation#d6deeb
variable.other.global.php#e6fd92
variable.other.global.php punctuation.definition.variable#e6fd92
constant.language.python#ff5874
variable.parameter.function.python, meta.function-call.arguments.python#554cfb
meta.function-call.python, meta.function-call.generic.python#B2CCD6
punctuation.python#d6deeb
entity.name.function.decorator.python#e6fd92
source.python variable.language.special#8EACE3
keyword.control#8781f7italic
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#e6fd92
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#554cfb
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#ffc133
keyword.other.unit.scss, keyword.other.unit.sass#FFEB95
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#d6deeb
entity.name.type.ts, entity.name.type.tsx#ffcb8b
support.class.node.ts, support.class.node.tsx#554cfb
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#5f7e97
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#d6deeb
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#554cfb
meta.tag.js meta.jsx.children.tsx#554cfb
entity.name.tag.yaml#ffc133
variable.other.readwrite.js, variable.parameter#d7dbe0
support.class.component.js, support.class.component.tsx#f78c6c
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#d6deeb
meta.class entity.name.type.class.tsx#ffcb8b
entity.name.type.tsx, entity.name.type.module.tsx#ffcb8b
meta.class.ts meta.var.expr.ts storage.type.ts, meta.class.tsx meta.var.expr.tsx storage.type.tsx#8781f7
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#554cfb
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.definintion.string, punctuation, variable.other.readwrite.js, storage.type, source.css, string.quoted