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#680054
  • activityBar.foreground#ffffff
  • activityBar.inactiveBackground#4D013E
  • activityBar.inactiveForeground#cccccc
  • activityBarBadge.background#FFDC75
  • activityBarBadge.foreground#000000
  • badge.background#F5E754
  • badge.foreground#000000
  • button.background#049F08
  • button.foreground#F0F0F0
  • debugExceptionWidget.background#F0F0F0
  • debugExceptionWidget.border#d9d9d9
  • debugToolBar.background#F0F0F0
  • descriptionForeground#353535
  • dropdown.background#F0F0F0
  • dropdown.border#d9d9d9
  • dropdown.foreground#353535
  • editor.background#FBFBFB
  • editor.findMatchBackground#93A1A16c
  • editor.findMatchHighlightBackground#93a1a16c
  • editor.findRangeHighlightBackground#7497a633
  • editor.foreground#353535
  • editor.hoverHighlightBackground#FFC00130
  • editor.lineHighlightBackground#F0F0F0
  • editor.rangeHighlightBackground#7497a633
  • editor.selectionBackground#EEE070
  • editor.selectionHighlightBackground#FFC00130
  • editor.wordHighlightBackground#FFC00130
  • editor.wordHighlightStrongBackground#FF9600a9
  • editorBracketMatch.background#F8EED3
  • editorBracketMatch.border#049F08
  • editorCodeLens.foreground#353535
  • editorCursor.foreground#90A7B2
  • editorError.border#FBFBFB
  • editorError.foreground#E64D49
  • editorGroup.background#F6F6F6
  • editorGroup.border#F0F0F0
  • editorGroupHeader.noTabsBackground#F0F0F0
  • editorGroupHeader.tabsBackground#F0F0F0
  • editorGroupHeader.tabsBorder#F0F0F0
  • editorGutter.addedBackground#49d0c5
  • editorGutter.deletedBackground#f76e6e
  • editorGutter.modifiedBackground#F6D86F
  • editorHoverWidget.background#F0F0F0
  • editorHoverWidget.border#d9d9d9
  • editorIndentGuide.background#d9d9d9
  • editorLineNumber.activeForeground#353535
  • editorLineNumber.foreground#90A7B2
  • editorMarkerNavigation.background#D0D0D0
  • editorMarkerNavigationError.background#f76e6e
  • editorMarkerNavigationWarning.background#daaa01
  • editorOverviewRuler.errorForeground#E64D49
  • editorOverviewRuler.warningForeground#daaa01
  • editorRuler.foreground#d9d9d9
  • editorSuggestWidget.background#F0F0F0
  • editorSuggestWidget.border#d9d9d9
  • editorSuggestWidget.foreground#353535
  • editorSuggestWidget.highlightForeground#353535
  • editorSuggestWidget.selectedBackground#F4E780
  • editorWarning.border#daaa01
  • editorWarning.foreground#daaa01
  • editorWhitespace.foreground#d9d9d9
  • editorWidget.background#F0F0F0
  • editorWidget.border#d9d9d9
  • errorForeground#353535
  • extensionButton.prominentBackground#049F08
  • extensionButton.prominentForeground#F0F0F0
  • focusBorder#93A1A1
  • foreground#353535
  • input.background#F0F0F0
  • input.border#d9d9d9
  • input.foreground#353535
  • input.placeholderForeground#93A1A1
  • inputOption.activeBorder#c00ea4
  • inputValidation.errorBackground#f76e6e
  • inputValidation.errorBorder#de3d3b
  • inputValidation.infoBackground#F0F0F0
  • inputValidation.infoBorder#D0D0D0
  • inputValidation.warningBackground#daaa01
  • inputValidation.warningBorder#E0AF02
  • list.activeSelectionBackground#F4E780
  • list.activeSelectionForeground#000000
  • list.dropBackground#F4E780
  • list.errorForeground#E64D49
  • list.focusBackground#F4E780
  • list.focusForeground#000000
  • list.highlightForeground#940076
  • list.hoverBackground#FEF9CE
  • list.hoverForeground#2E2D06
  • list.inactiveSelectionBackground#FEF9CE
  • list.inactiveSelectionForeground#2E2D06
  • list.warningForeground#daaa01
  • listFilterWidget.background#efc1ad
  • listFilterWidget.noMatchesOutline#be1100
  • listFilterWidget.outline#00000000
  • menu.background#ffffff
  • menu.foreground#212121
  • menu.selectionBackground#680053
  • menu.selectionBorder#00000040
  • menu.selectionForeground#fff2ca
  • menu.separatorBackground#888888
  • menubar.selectionBackground#0000001a
  • menubar.selectionForeground#ffbf00
  • notificationCenter.border#CCCCCC
  • notificationCenterHeader.background#F0F0F0
  • notificationCenterHeader.foreground#353535
  • notificationLink.foreground#1BA301
  • notifications.background#F0F0F0
  • notifications.border#CCCCCC
  • notifications.foreground#353535
  • notificationToast.border#CCCCCC
  • panel.background#F0F0F0
  • panel.border#d9d9d9
  • peekView.border#d9d9d9
  • peekViewEditor.background#F6F6F6
  • peekViewEditor.matchHighlightBackground#49d0c5
  • peekViewEditorGutter.background#F6F6F6
  • peekViewResult.background#F0F0F0
  • peekViewResult.fileForeground#353535
  • peekViewResult.lineForeground#353535
  • peekViewResult.matchHighlightBackground#49d0c5
  • peekViewResult.selectionBackground#E0E7EA
  • peekViewResult.selectionForeground#353535
  • peekViewTitle.background#F0F0F0
  • peekViewTitleDescription.foreground#353535
  • peekViewTitleLabel.foreground#353535
  • pickerGroup.border#d9d9d9
  • pickerGroup.foreground#353535
  • progressBar.background#c00ea4
  • scrollbar.shadow#CCCCCC
  • selection.background#7a8181ad
  • sideBar.background#eeeeee
  • sideBar.dropBackground#F4E780
  • sideBar.foreground#040404
  • sideBarSectionHeader.background#D2D2D2
  • sideBarSectionHeader.border#BFBFBF
  • sideBarSectionHeader.foreground#4A3F4D
  • sideBarTitle.foreground#000000
  • statusBar.background#680053
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#68217a
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.remoteBackground#b61695
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#F8F8F8
  • tab.activeForeground#000000
  • tab.activeModifiedBorder#049F08
  • tab.border#C1C1C1
  • tab.inactiveBackground#E7E7E7
  • tab.inactiveForeground#6A6A6A
  • tab.inactiveModifiedBorder#93A1A1
  • tab.unfocusedActiveModifiedBorder#93A1A1
  • tab.unfocusedInactiveModifiedBorder#93A1A1
  • terminal.ansiBlack#b8b8b8
  • terminal.ansiBlue#0451a5
  • terminal.ansiBrightBlack#4da141
  • terminal.ansiBrightBlue#0451a5
  • terminal.ansiBrightCyan#0598bc
  • terminal.ansiBrightGreen#52A600
  • terminal.ansiBrightMagenta#bc05bc
  • terminal.ansiBrightRed#cd3131
  • terminal.ansiBrightWhite#cb7529
  • terminal.ansiBrightYellow#b5ba00
  • terminal.ansiCyan#0598bc
  • terminal.ansiGreen#7DAC00
  • terminal.ansiMagenta#bc05bc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#69b049
  • terminal.ansiYellow#949800
  • terminal.background#F6F6F6
  • terminal.border#86868683
  • terminal.foreground#353535
  • terminal.selectionBackground#FFF4CB
  • terminalCursor.background#ECECCC
  • terminalCursor.foreground#65a52f
  • titleBar.activeBackground#680053
  • titleBar.activeForeground#d5d5d5
  • titleBar.border#00000040
  • titleBar.inactiveBackground#4D013E
  • titleBar.inactiveForeground#AE9FAA
  • tree.indentGuidesStroke#5a5a5a
  • widget.shadow#d9d9d9

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#D557B9
markup.deleted.diff#EF535090italic
markup.inserted.diff#E800A9ffitalic
Global settings#000000
comment#989fb1italic
string#E800A9
string.quoted, variable.other.readwrite.js#B30300
support.constant.math#E800A9
constant.numeric, constant.character.numeric#831CEC
constant.language, punctuation.definition.constant, variable.other.constant#E800A9
constant.character, constant.other#E800A9
constant.character.escape#831CEC
string.regexp, string.regexp keyword.other#5ca7e4
meta.function punctuation.separator.comma#5f7e97
variable#E800A9
punctuation.accessor, keyword#1BA301italic
storage, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx#1BA301
storage.type#1BA301
storage.type.function.arrow.js
entity.name.class, meta.class entity.name.type.class#6F01BC
entity.other.inherited-class#FF9600
entity.name.function#079A92italic
punctuation.definition.tag, meta.tag#079A92
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#079A92
entity.other.attribute-name#FF9600italic
entity.name.tag.custom#FF9600
support.function, support.constant#FF9600
support.constant.meta.property-value#0098B4
support.type, support.class#E800A9
support.variable.dom#E800A9
invalid#ff2c83
invalid.deprecated#d3423e
keyword.operator#0098B4
keyword.operator.relational#1BA301
keyword.operator.assignment#1BA301
keyword.operator.arithmetic#1BA301
keyword.operator.bitwise#1BA301
keyword.operator.increment#1BA301
keyword.operator.ternary#1BA301
comment.line.double-slash#939dbb
object#1BA301
constant.language.null#bc5454
meta.brace#353535
meta.delimiter.period#1BA301italic
punctuation.definition.string#010B66
punctuation.definition.string.begin.markdown#bc5454
constant.language.boolean#bc5454
object.comma#ffffff
variable.parameter.function#0098B4
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#0098B4
meta.property-list entity.name.tag.reference#50D043
constant.other.color.rgb-value punctuation.definition.constant#831CEC
constant.other.color#831CEC
keyword.other.unit#831CEC
meta.selector#1BA301italic
entity.other.attribute-name.id#831CEC
meta.property-name#0098B4
entity.name.tag.doctype, meta.tag.sgml.doctype#1BA301italic
punctuation.definition.parameters#010B66
keyword.control.operator#0098B4
keyword.operator.logical#1BA301
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#0098B4
variable.other.object.property#010B66italic
variable.other.object.js
entity.name.function#E800A9
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#1BA301
keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts#1BA301
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#6F3EEB
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control#0098B4
support.function#E800A9
invalid.broken#831CEC
invalid.unimplemented#8BD649
invalid.illegal#B30300
variable.language#0098B4
support.variable.property#0098B4
variable.function#E800A9
variable.interpolation#ec5f67
meta.function-call#E800A9
punctuation.section.embedded#d3423e
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#353535
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#010B66
string.template meta.template.expression#d3423e
string.template punctuation.definition.string#353535
italic#1BA301italic
bold#E800A9bold
quote#697098italic
raw#0098B4
variable.assignment.coffee#31e1eb
variable.parameter.function.coffee#353535
variable.assignment.coffee#0098B4
variable.other.readwrite.cs#353535
entity.name.type.class.cs, storage.type.cs#E800A9
entity.name.type.namespace.cs#0098B4
support.constant.property-value.scss,support.constant.property-value.css#12B301
keyword.operator.css,keyword.operator.scss,keyword.operator.less#29980A
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#0021EC
punctuation.separator.list.comma.css#0f0f0f
support.constant.color.w3c-standard-color-name.css#FF00DE
support.type.vendored.property-name.css#29980A
support.type.property-name.css#0117e0
invalid.deprecated.color.system.css#00a59d
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss, meta.selector.css entity.name.tag#FF00DE
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#1679B2italic
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#05A714
meta.property-value support.constant.named-color.css, meta.property-value constant#082395
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#0021EC
source.elixir entity.name.function#0021EC
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#0021EC
source.elixir punctuation.definition.string#0021EC
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#0021EC
source.elixir .punctuation.binary.elixir#1BA301italic
constant.keyword.clojure#0098B4
source.go meta.function-call.go#0098B4
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#1BA301italic
source.go constant.language.go, source.go constant.other.placeholder.go#bc5454
entity.name.function.preprocessor.cpp, entity.scope.name.cpp#0098B4ff
meta.namespace-block.cpp#010B66
storage.type.language.primitive.cpp#bc5454
meta.preprocessor.macro.cpp#353535
variable.parameter#010B66
variable.other.readwrite.powershell#E800A9
support.function.powershell#0098B4ff
entity.other.attribute-name.id.html#E800A9
punctuation.definition.tag.html#A8079F
meta.tag.metadata.doctype.html entity.name.tag, meta.tag.metadata.doctype.html entity.other.attribute-name, meta.tag.metadata.doctype.html punctuation.definition.tag#A8079F
meta.class entity.name.type.class.js#010B66
meta.method.declaration storage.type.js#E800A9
terminator.js#353535
meta.js punctuation.definition.js#353535
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#353535
variable.parameter.function.js#7986E7
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#353535
variable.js, variable.other.js#353535
entity.name.type.js, entity.name.type.module.js#010B66
support.class.js#353535
support.type.property-name.json#0008B4
support.constant.json#E800A9
meta.structure.dictionary.value.json string.quoted.double#B30303
string.quoted.double.json punctuation.definition.string.json#0008B4
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#bc5454
variable.other.object.js#0098B4italic
variable.other.ruby#353535
entity.name.type.class.ruby#B30300
constant.language.symbol.hashkey.ruby#0098B4
constant.language.symbol.ruby#0098B4
entity.name.tag.less#1BA301
keyword.other.unit.css#0008B4
meta.attribute-selector.less entity.other.attribute-name.attribute#831CEC
markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#0021EC
markup.italic.markdown#1BA301italic
markup.bold.markdown#0021EC
markup.quote.markdown#697098italic
markup.inline.raw.markdown#0098B4
markup.underline.link.markdown, markup.underline.link.image.markdown#ff869a
string.other.link.title.markdown, string.other.link.description.markdown#353535
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#E800A9
punctuation.definition.metadata.markdown#0098B4
beginning.punctuation.definition.list.markdown#E800A9
markup.inline.raw.string.markdown#E800A9
variable.other.php, variable.other.property.php#010B66
support.class.php#010B66
meta.function-call.php punctuation#353535
variable.other.global.php#E800A9
variable.other.global.php punctuation.definition.variable#E800A9
constant.language.python#bc5454
variable.parameter.function.python, meta.function-call.arguments.python#E800A9
meta.function-call.python, meta.function-call.generic.python#0098B4
punctuation.python#353535
entity.name.function.decorator.python#E800A9
source.python variable.language.special#831CEC
keyword.control#1BA301italic
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#FF00DE
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#FF00DE
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#0021EC
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#831CEC
entity.name.tag.scss, entity.name.tag.sass#0098B4
keyword.other.unit.scss, keyword.other.unit.sass#1BA301
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#353535
entity.name.type.ts, entity.name.type.tsx#010B66
support.class.node.ts, support.class.node.tsx#E800A9
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#353535
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#0021EC
meta.tag.js meta.jsx.children.tsx#0021EC
entity.name.tag.yaml#010B66
variable.other.readwrite.js, variable.parameter#353535
support.class.component.js, support.class.component.tsx#831CEC
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#353535
meta.class entity.name.type.class.tsx#010B66
entity.name.type.tsx, entity.name.type.module.tsx#010B66
meta.class.ts meta.var.expr.ts storage.type.ts, meta.class.tsx meta.var.expr.tsx storage.type.tsx#1BA301
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#E800A9
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