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#ffffff
  • activityBar.border#e7e8e8
  • activityBar.foreground#0d0d0d
  • activityBarBadge.background#2457d8
  • activityBarBadge.foreground#f2f2ff
  • badge.background#dbdee1
  • breadcrumb.foreground#616262
  • button.background#52aaf2aa
  • button.foreground#131313
  • button.hoverBackground#52aaf2
  • debugToolBar.background#d5f5b8
  • debugToolBar.border#d5f5b8
  • dropdown.background#e0e0e0
  • dropdown.border#003fff50
  • dropdown.foreground#535355
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.findMatchBackground#0017172a
  • editor.foreground#454545
  • editor.lineHighlightBackground#ffffff
  • editor.selectionBackground#5599ff77
  • editorCursor.foreground#07070f
  • editorGroup.border#e7e8e8
  • editorGroupHeader.tabsBackground#f5f3f3
  • editorGroupHeader.tabsBorder#e7e8e8
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#003fffaa
  • editorHoverWidget.foreground#535355
  • editorLineNumber.foreground#9e9fa3
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#bee1fe
  • editorSuggestWidget.foreground#4474ed
  • editorSuggestWidget.highlightForeground#0040bfb4
  • editorSuggestWidget.selectedBackground#bee1feee
  • editorWhitespace.foreground#d9d9d9
  • editorWidget.background#ffffffee
  • focusBorder#003fff50
  • foreground#454545
  • icon.foreground#162027
  • input.background#e7e8e8
  • input.foreground#535355
  • inputOption.activeBorder#003fffaa
  • list.activeSelectionBackground#bee1fe77
  • list.activeSelectionForeground#000000
  • list.focusBackground#bee1feee
  • list.focusForeground#001229
  • list.hoverBackground#bee1fe77
  • list.inactiveSelectionBackground#bee1fe55
  • list.inactiveSelectionForeground#000000ee
  • menu.background#ffffff
  • menu.border#bee1fe
  • menu.foreground#535355
  • menu.selectionBackground#bee1fe77
  • menu.selectionForeground#000000
  • menubar.selectionBackground#00000010
  • menubar.selectionForeground#000000
  • notificationCenter.border#003fff
  • notifications.background#ffffff
  • notifications.border#003fffaa
  • notificationToast.border#003fff50
  • panel.background#ffffff
  • panel.border#e7e8e8
  • panelTitle.activeBorder#003fff
  • panelTitle.activeForeground#181818
  • panelTitle.inactiveForeground#5f6161
  • peekView.border#003fffaa
  • peekViewEditor.background#e0e0e0
  • peekViewEditor.matchHighlightBackground#bee1fe
  • peekViewEditorGutter.background#e0e0e0
  • peekViewResult.background#e0e0e0
  • peekViewResult.matchHighlightBackground#bee1fe
  • peekViewTitle.background#e0e0e0
  • pickerGroup.border#003fffaa
  • pickerGroup.foreground#0057c8
  • scrollbarSlider.activeBackground#9e9fa3
  • scrollbarSlider.background#9e9fa367
  • scrollbarSlider.hoverBackground#9e9fa3
  • settings.numberInputBackground#e0e0e0
  • settings.textInputBackground#e0e0e0
  • sideBar.background#ffffff
  • sideBar.border#e7e8e8
  • sideBar.foreground#535355
  • sideBarSectionHeader.background#e0e0e0
  • sideBarSectionHeader.foreground#535355
  • sideBarTitle.foreground#181818
  • statusBar.background#e6e7db
  • statusBar.debuggingBackground#d5f5b8
  • statusBar.debuggingBorder#d5f5b8
  • statusBar.foreground#454545
  • statusBar.noFolderBackground#58a5ff29
  • statusBarItem.remoteBackground#e6e7db
  • statusBarItem.remoteForeground#0c0b0b
  • tab.activeBackground#ffffff
  • tab.activeBorderTop#003fff
  • tab.activeForeground#003fff
  • tab.border#e7e8e8
  • tab.hoverBackground#003fff10
  • tab.hoverBorder#0026ff70
  • tab.inactiveBackground#f5f3f3
  • tab.inactiveForeground#535355
  • 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#ffffff
  • terminal.foreground#535355
  • terminal.selectionBackground#5599ff77
  • terminalCursor.foreground#1b2633
  • textLink.activeForeground#2457d8
  • textLink.foreground#4474ab
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#535355
  • titleBar.border#e7e8e8
  • 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β€”
underlineβ€”underline
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β€”

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

πŸ–€ DarkCode suggests 🌱 MindEase Theme - Coding Theme