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.activeBorder#003fff
  • activityBar.background#fbfbfb
  • activityBar.border#eeeae7
  • activityBar.foreground#0d0d0d
  • activityBarBadge.background#2457d8
  • activityBarBadge.foreground#f2f2ff
  • badge.background#c8bebf
  • breadcrumb.foreground#616262
  • button.background#52aaf2aa
  • button.foreground#131313
  • button.hoverBackground#52aaf2
  • debugToolBar.background#d5f5b8
  • debugToolBar.border#d5f5b8
  • dropdown.background#dad4d1
  • dropdown.border#003fff50
  • dropdown.foreground#3f3f3f
  • dropdown.listBackground#fbfbfb
  • editor.background#fbfbfb
  • editor.findMatchBackground#0017172a
  • editor.foreground#454545
  • editor.lineHighlightBackground#fbfbfb
  • editor.selectionBackground#94befe77
  • editorCursor.foreground#07070f
  • editorGroup.border#eeeae7
  • editorGroupHeader.tabsBackground#e8e5e4
  • editorGroupHeader.tabsBorder#eeeae7
  • editorHoverWidget.background#fbfbfb
  • editorHoverWidget.border#003fffaa
  • editorHoverWidget.foreground#3f3f3f
  • editorLineNumber.foreground#9e9fa3
  • editorSuggestWidget.background#fbfbfb
  • editorSuggestWidget.border#bec8fe
  • editorSuggestWidget.foreground#4474ed
  • editorSuggestWidget.highlightForeground#0040bfb4
  • editorSuggestWidget.selectedBackground#bec8feee
  • editorWhitespace.foreground#d9d9d9
  • editorWidget.background#fbfbfbee
  • focusBorder#003fff50
  • foreground#454545
  • icon.foreground#162027
  • input.background#eeeae7
  • input.foreground#3f3f3f
  • inputOption.activeBorder#003fffaa
  • list.activeSelectionBackground#bec8fe77
  • list.activeSelectionForeground#111111
  • list.focusBackground#bec8feee
  • list.focusForeground#00285c
  • list.hoverBackground#bec8fe77
  • list.inactiveSelectionBackground#bec8fe55
  • list.inactiveSelectionForeground#111111ee
  • menu.background#fbfbfb
  • menu.border#bec8fe
  • menu.foreground#3f3f3f
  • menu.selectionBackground#bec8fe77
  • menu.selectionForeground#111111
  • menubar.selectionBackground#11111110
  • menubar.selectionForeground#111111
  • notificationCenter.border#003fff
  • notifications.background#fbfbfb
  • notifications.border#003fffaa
  • notificationToast.border#003fff50
  • panel.background#fbfbfb
  • panel.border#eeeae7
  • panelTitle.activeBorder#003fff
  • panelTitle.activeForeground#313131
  • panelTitle.inactiveForeground#5f6161
  • peekView.border#003fffaa
  • peekViewEditor.background#dad4d1
  • peekViewEditor.matchHighlightBackground#bec8fe
  • peekViewEditorGutter.background#dad4d1
  • peekViewResult.background#dad4d1
  • peekViewResult.matchHighlightBackground#bec8fe
  • peekViewTitle.background#dad4d1
  • pickerGroup.border#003fffaa
  • pickerGroup.foreground#0057c8
  • scrollbarSlider.activeBackground#9e9fa3
  • scrollbarSlider.background#9e9fa367
  • scrollbarSlider.hoverBackground#9e9fa3
  • settings.numberInputBackground#dad4d1
  • settings.textInputBackground#dad4d1
  • sideBar.background#fbfbfb
  • sideBar.border#eeeae7
  • sideBar.foreground#3f3f3f
  • sideBarSectionHeader.background#dad4d1
  • sideBarSectionHeader.foreground#3f3f3f
  • sideBarTitle.foreground#313131
  • statusBar.background#ddded4
  • statusBar.debuggingBackground#d5f5b8
  • statusBar.debuggingBorder#d5f5b8
  • statusBar.foreground#454545
  • statusBar.noFolderBackground#58a5ff29
  • statusBarItem.remoteBackground#ddded4
  • statusBarItem.remoteForeground#0c0b0b
  • tab.activeBackground#fbfbfb
  • tab.activeBorderTop#003fff
  • tab.activeForeground#003fff
  • tab.border#eeeae7
  • tab.hoverBackground#003fff10
  • tab.hoverBorder#0026ff70
  • tab.inactiveBackground#e8e5e4
  • tab.inactiveForeground#3f3f3f
  • terminal.ansiBlack#ffffff
  • terminal.ansiBlue#7d5500
  • terminal.ansiBrightBlack#ab9185
  • terminal.ansiBrightBlue#7d5500
  • terminal.ansiBrightCyan#762200
  • terminal.ansiBrightGreen#921f6a
  • terminal.ansiBrightRed#1bd4d8
  • terminal.ansiBrightWhite#000000
  • terminal.ansiBrightYellow#073ebd
  • terminal.ansiCyan#762200
  • terminal.ansiGreen#8c439d
  • terminal.ansiRed#27d0d3
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#1d5db3
  • terminal.background#fbfbfb
  • terminal.foreground#3f3f3f
  • terminal.selectionBackground#94befe77
  • terminalCursor.foreground#1b2633
  • textLink.activeForeground#2457d8
  • textLink.foreground#4474ab
  • titleBar.activeBackground#fbfbfb
  • titleBar.activeForeground#3f3f3f
  • titleBar.border#eeeae7
  • widget.shadow#003fff55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string.quoted.docstring.multi, comment.line.number-sign#918b7fitalic
meta.attribute, meta.member.access, meta.function-call, meta.item-access.arguments#656c7bitalic
variable.language.special#1f938aitalic
meta.fstring, meta.item-access, meta.function.parameters, meta.function-call.arguments, keyword.operator.unpacking.arguments#585846italic
meta.function-call.generic, punctuation.definition.arguments#2762b9italic
meta.indexed-name.python#384b64italic
entity.name.function.decorator, support.class, support.function.magic, support.variable, support.variable.magic, punctuation.definition.decorator, support.type, meta.function.decorator#894f47italic
support.type.exception#1fabce
meta.indexed-name#384b64
keyword.operator#3e1e19
punctuation.separator.annotation, constant.character.format.placeholder, punctuation.section.embedded#5a3e3a
variable.language.this#198e85cc
variable.other.property#255e5e
variable.other.object#27645fc7
support.function.builtin#2624c1
entity.name.function, punctuation.definition.parameters#003bff
source variable.parameter, keyword.operator.unpacking.parameter#83888f
source keyword.operator.logical#398722
source constant.other#9e7e42
source constant#1fabce
constant.character.format.placeholder.other storage#2e6599
punctuation.separator.annotation#544d40
punctuation.separator.parameters#544d40
meta.fstring#4c7979
string.quoted.docstring#955ebc
keyword.codetag.notation.python#4c80e2italic bold underline
entity.name.section.markdown#002e84
string.other.link.title.markdown, string.other.link.description.markdown#5f4002
punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown#5f400277
punctuation.definition.heading.markdown#7775d952
punctuation.definition.bold.markdown#2e6599
beginning.punctuation.definition.list.markdown#1f938a
comment markup.link#a39c8f
markup.bold#2e6599bold
markup.changed#398722
markup.deleted#1f938a
markup.italic#398722italic
markup.heading#1f938a
markup.heading punctuation.definition.heading#9e5010
markup.link#398722
markup.inserted#673c86
markup.quote#2e6599
markup.raw#673c86
markup.raw.block.markdown#544d40
markup.heading.setext#544d40
markup.inline.raw#764d46
markup.quote.markdown#ee58a3italic
punctuation.definition.metadata.markdown, markup.underline.link.markdown, markup.underline.link.image.markdown#15138b61
meta.tag.inline.kbd.start.html, entity.name.tag.html, meta.tag.inline.kbd.end.html#1f938a
keyword.operator.assignment.ahk#6d3100f5
comment#827a6bitalic
meta#454545
entity.name.type#1a3f84
entity.other.inherited-class#3e5731
keyword#398722
keyword.control#398722
keyword.other.special-method#9e5010
keyword.other.unit#2e6599
storage#398722
storage.type.annotation, storage.type.primitive#398722
storage.modifier.package, storage.modifier.import#544d40
constant#2e6599
constant.variable#2e6599
constant.character.escape#a9493d
constant.numeric#2e6599
constant.other.color#a9493d
constant.other.symbol#a9493d
variable#1f938a
variable.interpolation#41afb9
variable.parameter#544d40
string#673c86
string.regexp#a9493d
string.regexp source.ruby.embedded#1a3f84
string.other.link#1f938a
punctuation.definition.comment#a39c8f
punctuation.definition.heading, punctuation.definition.identity#9e5010
punctuation.definition.bold#1a3f84bold
punctuation.definition.italic#398722italic
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class#544d40
support.function.any-method#9e5010
entity.name.class, entity.name.type.class#1a3f84
entity.name.section#9e5010
entity.name.tag#1f938a
entity.other.attribute-name#2e6599
entity.other.attribute-name.id#9e5010
meta.class#1a3f84
meta.class.body#544d40
meta.method-call, meta.method#544d40
meta.definition.variable#1f938a
meta.link#2e6599
meta.require#9e5010
meta.selector#398722
meta.separator#544d40
meta.tag#544d40
underlineunderline
none#544d40
invalid.deprecated#adc2eb
invalid.illegal#000000
source.c keyword.operator#398722
source.cpp keyword.operator#398722
source.cs keyword.operator#398722
source.css property-name, source.css property-value#7d7668
source.css property-name.support, source.css property-value.support#544d40
source.gfm link entity#9e5010
source.go storage.type.string#398722
source.ini keyword.other.definition.ini#1f938a
source.java storage.modifier.import#1a3f84
source.java storage.type#1a3f84
source.java keyword.operator.instanceof#398722
source.java-properties meta.key-pair#1f938a
source.java-properties meta.key-pair > punctuation#544d40
source.js keyword.operator#a9493d
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#398722
source.json meta.structure.dictionary.json > string.quoted.json#1f938a
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#1f938a
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#673c86
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json#a9493d
keyword.codetag.notation#27605b
meta.attribute.rust#433e66
storage.modifier.lifetime.rust, entity.name.lifetime.rust#cc1713
keyword.unsafe.rust#33948c
customrule#544d40
support.type.property-name#544d40
string.quoted.double punctuation#673c86
support.constant#2e6599
support.type.property-name.json#1f938a
support.type.property-name.json punctuation#1f938a
punctuation.definition.array, punctuation.separator.array, punctuation.definition.dictionary, punctuation.separator.dictionary#544d40
punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx#a9493d
source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator#a9493d
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx#544d40
support.variable.dom.js, support.variable.dom.ts#1f938a
support.variable.property.dom.js, support.variable.property.dom.ts#1f938a
meta.template.expression.js punctuation.definition, meta.template.expression.ts punctuation.definition#41afb9
source.ts punctuation.definition.typeparameters, source.js punctuation.definition.typeparameters, source.tsx punctuation.definition.typeparameters#544d40
source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block#544d40
source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma#544d40
support.variable.property.js, support.variable.property.ts, support.variable.property.tsx#1f938a
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx#1f938a
keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#398722
keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx#398722
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#544d40
source.js punctuation.accessor, source.ts punctuation.accessor, source.tsx punctuation.accessor#544d40
punctuation.terminator.statement.js, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx#544d40
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#2e6599
source.js support.variable, source.ts support.variable, source.tsx support.variable#1f938a
variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx#2e6599
keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx#398722
source.ts keyword.operator, source.tsx keyword.operator#a9493d
punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.separator.parameter.tsx #544d40
constant.language.import-export-all.js, constant.language.import-export-all.ts#1f938a
constant.language.import-export-all.jsx, constant.language.import-export-all.tsx#a9493d
keyword.control.as.js, keyword.control.as.ts, keyword.control.as.jsx, keyword.control.as.tsx#544d40
variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx#1f938a
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx#2e6599
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts#1f938a
source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor#673c86
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#544d40
entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx#673c86
meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx#544d40
meta.definition.property.js variable, meta.definition.property.ts variable, meta.definition.property.jsx variable, meta.definition.property.tsx variable#544d40
meta.type.parameters.js support.type, meta.type.parameters.jsx support.type, meta.type.parameters.ts support.type, meta.type.parameters.tsx support.type#544d40
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#544d40
meta.array.literal.js variable, meta.array.literal.jsx variable, meta.array.literal.ts variable, meta.array.literal.tsx variable#1a3f84
support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx#1f938a
constant.language.json#a9493d
variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx#2e6599
storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx#a9493d
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#673c86
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#673c86
keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx#398722
entity.name.variable.field.cs#1f938a
source.cs keyword.operator#544d40
variable.other.readwrite.cs#544d40
variable.other.object.cs#544d40
variable.other.object.property.cs#544d40
entity.name.variable.property.cs#9e5010
storage.type.cs#1a3f84
keyword.other.unsafe.rust#1f938a
punctuation.definition.variable.shell#1f938a
support.constant.property-value.css#544d40
punctuation.definition.constant.css#2e6599
punctuation.separator.key-value.scss#1f938a
punctuation.definition.constant.scss#2e6599
meta.property-list.scss punctuation.separator.key-value.scss#544d40
storage.type.primitive.array.java#1a3f84
punctuation.separator.variable.ruby#1f938a
variable.other.constant.ruby#2e6599
keyword.operator.other.ruby#673c86
punctuation.definition.variable.php#1f938a
meta.class.php#544d40
token.info-token#986919
token.warn-token#3268ce
token.error-token#0bb8b8
token.debug-token#4d9819
🖤 DarkCode suggests 🌱 MindEase Theme by yedhrab - VS Code Theme