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#cfcfcfef
  • activityBar.activeBorder#3e9ca3
  • activityBar.activeFocusBorder#ff0000
  • activityBar.background#e6e6e6
  • activityBar.border#a5a5a5
  • activityBar.foreground#181b1b
  • activityBarBadge.background#3e9ca3
  • activityBarBadge.foreground#FFFFFF
  • badge.background#3e9ca3
  • badge.foreground#e9e9e9
  • button.background#3e9ca3
  • button.foreground#f0f0f0
  • button.hoverBackground#38a9b1
  • debugToolBar.background#dfdfdff6
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#dddadaf1
  • dropdown.border#afafdd
  • dropdown.foreground#000000
  • editor.background#f8f8f8
  • editor.findMatchHighlightBackground#d6d6d6b2
  • editor.findMatchHighlightBorder#e0e0e0
  • editor.lineHighlightBackground#39737731
  • editor.selectionBackground#cfcfcfa9
  • editor.selectionHighlightBackground#cacaca77
  • editorBracketMatch.background#dbdadaf1
  • editorCodeLens.foreground#686666
  • editorCursor.foreground#14d1c1
  • editorGroup.border#8b8bc5
  • editorGroupHeader.tabsBackground#e2e2e2
  • editorGroupHeader.tabsBorder#b4b4b4d2
  • editorGutter.background#d6d6d66a
  • editorGutter.foldingControlForeground#6f6f6fe8
  • editorHoverWidget.background#e7e7e7ef
  • editorHoverWidget.border#9494c2de
  • editorIndentGuide.background#a7a4a4
  • editorLineNumber.activeForeground#20adb8
  • editorLineNumber.foreground#5e5c5ce8
  • editorSuggestWidget.background#e6e6e6f1
  • editorSuggestWidget.border#b1b1b1
  • editorSuggestWidget.selectedBackground#d8d8d8
  • editorWhitespace.foreground#8eb2c4de
  • editorWidget.background#EAEAEB
  • errorForeground#e40f0f
  • extensionButton.prominentBackground#3f854de8
  • extensionButton.prominentHoverBackground#2e9b44
  • focusBorder#2cd6c8
  • foreground#111111
  • input.background#f0f0f0
  • input.border#8787b4
  • list.activeSelectionBackground#5cc0c76b
  • list.activeSelectionForeground#232324
  • list.dropBackground#4395ad75
  • list.focusBackground#a0a0a094
  • list.highlightForeground#121417
  • list.hoverBackground#61adc44d
  • list.inactiveSelectionBackground#DBDBDC
  • list.inactiveSelectionForeground#232324
  • menu.background#eef1f1fa
  • menu.border#3e9ca3
  • menu.selectionBackground#60bac04b
  • menu.selectionBorder#5c5f6038
  • menu.separatorBackground#89c3c7d3
  • notebook.cellBorderColor#d1d1d1
  • notebook.cellHoverBackground#f0f0f0
  • notebook.cellInsertionIndicator#3e9ca3
  • notebook.cellStatusBarItemHoverBackground#d8d8d8
  • notebook.cellToolbarSeparator#d1d1d1
  • notebook.focusedCellBackground#f5f5f5
  • notebook.focusedCellBorder#3e9ca3
  • notebook.focusedEditorBorder#3e9ca3
  • notebook.inactiveFocusedCellBorder#d1d1d1
  • notebook.outputContainerBackgroundColor#f0f0f0
  • notebook.outputContainerBorderColor#e0e0e0
  • notebook.selectedCellBackground#f0f0f0
  • notebook.symbolHighlightBackground#e8e8e8
  • notebookScrollbarSlider.activeBackground#3e9ca3cc
  • notebookScrollbarSlider.background#5A637566
  • notebookScrollbarSlider.hoverBackground#44989e66
  • notebookStatusErrorIcon.foreground#e40f0f
  • notebookStatusRunningIcon.foreground#3e9ca3
  • notebookStatusSuccessIcon.foreground#327c2f
  • notificationCenter.border#3e9ca3
  • notificationCenterHeader.background#e2e2e2e5
  • notificationCenterHeader.foreground#000000
  • notifications.background#f3f3f3ec
  • notifications.border#c0c0c0
  • notifications.foreground#000000
  • notificationsInfoIcon.foreground#3e9ca3
  • panelTitle.activeBorder#3e9ca3
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#000000
  • peekView.border#3e9ca3
  • peekViewEditor.background#d8e8f5ea
  • peekViewResult.background#EAEAEB
  • peekViewResult.selectionBackground#DBDBDC
  • peekViewTitle.background#bfe0e2
  • peekViewTitleLabel.foreground#222525
  • pickerGroup.border#2cd6c8
  • scrollbar.shadow#3e9ca3
  • scrollbarSlider.activeBackground#3e9ca3b2
  • scrollbarSlider.background#5A637580
  • scrollbarSlider.hoverBackground#44989e79
  • selection.background#bebebead
  • sideBar.background#f8f8f8
  • sideBar.border#bebebe
  • sideBar.foreground#362f2f
  • sideBarSectionHeader.background#e7e7e7
  • sideBarSectionHeader.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#35767a
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#ececec
  • statusBar.noFolderBackground#463531
  • statusBarItem.hoverBackground#3e9ca3
  • tab.activeBackground#c8d6d89a
  • tab.activeBorder#327c2f
  • tab.activeBorderTop#108e97
  • tab.activeForeground#000000
  • tab.border#DBDBDC
  • tab.inactiveBackground#dfdfdf
  • tab.inactiveForeground#7e7e7e
  • terminal.ansiBrightYellow#d46b14
  • titleBar.activeBackground#EAEAEB
  • titleBar.activeForeground#37373a
  • titleBar.inactiveBackground#EAEAEB
  • titleBar.inactiveForeground#424243
  • welcomePage.buttonBackground#5bcbd3
  • welcomePage.buttonHoverBackground#59d7e0
  • widget.shadow#20645fc4
  • window.activeBorder#3e9ca3
  • window.inactiveBorder#7e7e7e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#2b8a1e
comment markup.link#2f6832
entity.name.type#df851f
entity.other.inherited-class#50A14F
keyword#A626A4
keyword.control#A626A4
keyword.operator#383A42
keyword.other.special-method#4078F2
keyword.other.unit#986801
storage#A626A4
storage.type.annotation, storage.type.primitive#A626A4
storage.modifier.package, storage.modifier.import#383A42
constant#986801
constant.variable#986801
constant.character.escape#0184BC
constant.numeric#986801
constant.other.color#0184BC
constant.other.symbol#0184BC
variable#E45649
variable.interpolation#CA1243
variable.parameter#383A42
string#10910b
string.regexp#0184BC
string.regexp source.ruby.embedded#C18401
string.other.link#E45649
punctuation.definition.comment#2f6832
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array#383A42
punctuation.definition.heading, punctuation.definition.identity#4078F2
punctuation.definition.bold#C18401bold
punctuation.definition.italic#A626A4italic
punctuation.section.embedded#CA1243
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class#383A42
support.class#C18401
support.type#0184BC
support.function#0184BC
support.function.any-method#4078F2
entity.name.function#1c58c7
entity.name.class, entity.name.type.class#C18401
entity.name.section#4078F2
entity.name.tag#E45649
entity.other.attribute-name#986801
entity.other.attribute-name.id#4078F2
meta.class#C18401
meta.class.body#383A42
meta.method-call, meta.method#383A42
meta.definition.variable#E45649
meta.link#986801
meta.require#4078F2
meta.selector#A626A4
meta.separator#383A42
meta.tag#383A42
underline
none#383A42
invalid.deprecated#000000
invalid.illegal#ffaa2a
markup.bold#986801bold
markup.changed#A626A4
markup.deleted#E45649
markup.italic#A626A4italic
markup.heading#E45649
markup.heading punctuation.definition.heading#4078F2
markup.link#A626A4
markup.inserted#50A14F
markup.quote#986801
markup.raw#50A14F
source.c keyword.operator#A626A4
source.cpp keyword.operator#A626A4
source.cs keyword.operator#A626A4
source.css property-name, source.css property-value#696C77
source.css property-name.support, source.css property-value.support#383A42
source.gfm markup
source.gfm link entity#4078F2
source.go storage.type.string#A626A4
source.ini keyword.other.definition.ini#E45649
source.java storage.modifier.import#C18401
source.java storage.type#C18401
source.java keyword.operator.instanceof#A626A4
source.java-properties meta.key-pair#E45649
source.java-properties meta.key-pair > punctuation#383A42
source.js keyword.operator#0184BC
source.js keyword.operator.delete, source.js keyword.operator.in, source.js keyword.operator.of, source.js keyword.operator.instanceof, source.js keyword.operator.new, source.js keyword.operator.typeof, source.js keyword.operator.void#A626A4
source.json meta.structure.dictionary.json > string.quoted.json#E45649
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#E45649
source.json meta.structure.dictionary.json > value.json > string.quoted.json, source.json meta.structure.array.json > value.json > string.quoted.json, source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation, source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#50A14F
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json#0184BC
source.ruby constant.other.symbol > punctuationinherit
source.python keyword.operator.logical.python#A626A4
source.python variable.parameter#986801
meta.attribute.rust#606135
storage.modifier.lifetime.rust, entity.name.lifetime.rust#11C4C6
keyword.unsafe.rust#882328
customrule#383A42
support.type.property-name#383A42
string.quoted.double punctuation#50A14F
support.constant#986801
support.type.property-name.json#E45649
support.type.property-name.json punctuation#E45649
punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx#0184BC
source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator#0184BC
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx#383A42
support.variable.dom.js, support.variable.dom.ts#E45649
support.variable.property.dom.js, support.variable.property.dom.ts#E45649
meta.template.expression.js punctuation.definition, meta.template.expression.ts punctuation.definition#CA1243
source.ts punctuation.definition.typeparameters, source.js punctuation.definition.typeparameters, source.tsx punctuation.definition.typeparameters#383A42
source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block#383A42
source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma#383A42
support.variable.property.js, support.variable.property.ts, support.variable.property.tsx#E45649
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx#E45649
keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#A626A4
keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx#A626A4
meta.brace.round.js, meta.array-binding-pattern-variable.js, meta.brace.square.js, meta.brace.round.ts, meta.array-binding-pattern-variable.ts, meta.brace.square.ts, meta.brace.round.tsx, meta.array-binding-pattern-variable.tsx, meta.brace.square.tsx#383A42
source.js punctuation.accessor, source.ts punctuation.accessor, source.tsx punctuation.accessor#383A42
punctuation.terminator.statement.js, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx#383A42
meta.array-binding-pattern-variable.js variable.other.readwrite.js, meta.array-binding-pattern-variable.ts variable.other.readwrite.ts, meta.array-binding-pattern-variable.tsx variable.other.readwrite.tsx#986801
source.js support.variable, source.ts support.variable, source.tsx support.variable#E45649
variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx#986801
keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx#A626A4
source.ts keyword.operator, source.tsx keyword.operator#0184BC
punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.separator.parameter.tsx #383A42
constant.language.import-export-all.js, constant.language.import-export-all.ts#E45649
constant.language.import-export-all.jsx, constant.language.import-export-all.tsx#0184BC
keyword.control.as.js, keyword.control.as.ts, keyword.control.as.jsx, keyword.control.as.tsx#383A42
variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx#E45649
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx#986801
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts#E45649
source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor#50A14F
source.js meta.import-equals.external.js keyword.operator, source.jsx meta.import-equals.external.jsx keyword.operator, source.ts meta.import-equals.external.ts keyword.operator, source.tsx meta.import-equals.external.tsx keyword.operator#383A42
entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx#50A14F
meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx#383A42
meta.definition.property.js variable, meta.definition.property.ts variable, meta.definition.property.jsx variable, meta.definition.property.tsx variable#383A42
meta.type.parameters.js support.type, meta.type.parameters.jsx support.type, meta.type.parameters.ts support.type, meta.type.parameters.tsx support.type#383A42
source.js meta.tag.js keyword.operator, source.jsx meta.tag.jsx keyword.operator, source.ts meta.tag.ts keyword.operator, source.tsx meta.tag.tsx keyword.operator#383A42
meta.tag.js punctuation.section.embedded, meta.tag.jsx punctuation.section.embedded, meta.tag.ts punctuation.section.embedded, meta.tag.tsx punctuation.section.embedded#383A42
meta.array.literal.js variable, meta.array.literal.jsx variable, meta.array.literal.ts variable, meta.array.literal.tsx variable#C18401
support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx#E45649
constant.language.json#0184BC
variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx#986801
storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx#0184BC
meta.template.expression.js string.quoted punctuation.definition, meta.template.expression.jsx string.quoted punctuation.definition, meta.template.expression.ts string.quoted punctuation.definition, meta.template.expression.tsx string.quoted punctuation.definition#50A14F
meta.template.expression.js string.template punctuation.definition.string.template, meta.template.expression.jsx string.template punctuation.definition.string.template, meta.template.expression.ts string.template punctuation.definition.string.template, meta.template.expression.tsx string.template punctuation.definition.string.template#50A14F
keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx#A626A4
source.python constant.other#383A42
source.python constant#986801
constant.character.format.placeholder.other.python storage#986801
support.variable.magic.python#E45649
meta.function.parameters.python#986801
punctuation.separator.annotation.python#383A42
punctuation.separator.parameters.python#383A42
entity.name.variable.field.cs#E45649
source.cs keyword.operator#383A42
variable.other.readwrite.cs#383A42
variable.other.object.cs#383A42
variable.other.object.property.cs#383A42
entity.name.variable.property.cs#4078F2
storage.type.cs#C18401
keyword.other.unsafe.rust#E45649
markup.raw.block.markdown#383A42
punctuation.definition.variable.shell#E45649
support.constant.property-value.css#383A42
punctuation.definition.constant.css#986801
punctuation.separator.key-value.scss#E45649
punctuation.definition.constant.scss#986801
meta.property-list.scss punctuation.separator.key-value.scss#383A42
storage.type.primitive.array.java#C18401
entity.name.section.markdown#E45649
punctuation.definition.heading.markdown#E45649
markup.heading.setext#383A42
punctuation.definition.bold.markdown#986801
markup.inline.raw.markdown#50A14F
beginning.punctuation.definition.list.markdown#E45649
markup.quote.markdown#A0A1A7italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#383A42
punctuation.definition.metadata.markdown#A626A4
markup.underline.link.markdown, markup.underline.link.image.markdown#A626A4
string.other.link.title.markdown, string.other.link.description.markdown#4078F2
punctuation.separator.variable.ruby#E45649
variable.other.constant.ruby#986801
keyword.operator.other.ruby#50A14F
punctuation.definition.variable.php#E45649
meta.class.php#383A42