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#ffc000
  • activityBar.background#1c2022
  • activityBar.border#111518
  • activityBar.foreground#F2F2F2
  • activityBarBadge.background#dba827
  • activityBarBadge.foreground#0d0d00
  • badge.background#374140
  • breadcrumb.foreground#9e9d9d
  • button.background#ad550daa
  • button.foreground#ececec
  • button.hoverBackground#ad550d
  • debugToolBar.background#2a0a47
  • debugToolBar.border#2a0a47
  • dropdown.background#252b2e
  • dropdown.border#FFC00050
  • dropdown.foreground#C0C0C0
  • dropdown.listBackground#1c2022
  • editor.background#1c2022
  • editor.findMatchBackground#ffe8e82a
  • editor.foreground#bababa
  • editor.lineHighlightBackground#1c2022
  • editor.selectionBackground#6b410177
  • editorCursor.foreground#f8f8f0
  • editorGroup.border#111518
  • editorGroupHeader.tabsBackground#171a1b
  • editorGroupHeader.tabsBorder#111518
  • editorHoverWidget.background#1c2022
  • editorHoverWidget.border#ffc000aa
  • editorHoverWidget.foreground#C0C0C0
  • editorLineNumber.foreground#61605c
  • editorSuggestWidget.background#1c2022
  • editorWhitespace.foreground#262626
  • editorWidget.background#1c2022ee
  • focusBorder#FFC00050
  • foreground#bababa
  • icon.foreground#e9dfd8
  • input.background#111518
  • input.foreground#C0C0C0
  • inputOption.activeBorder#ffc000aa
  • list.activeSelectionBackground#41370177
  • list.activeSelectionForeground#eeeeee
  • list.focusBackground#413701ee
  • list.focusForeground#ffd7a3
  • list.hoverBackground#41370177
  • list.inactiveSelectionBackground#41370155
  • list.inactiveSelectionForeground#eeeeeeee
  • menu.background#1c2022
  • menu.border#413701
  • menu.foreground#C0C0C0
  • menu.selectionBackground#41370177
  • menu.selectionForeground#eeeeee
  • menubar.selectionBackground#eeeeee10
  • menubar.selectionForeground#eeeeee
  • notificationCenter.border#ffc000
  • notifications.background#1c2022
  • notifications.border#ffc000aa
  • notificationToast.border#FFC00050
  • panel.background#1c2022
  • panel.border#111518
  • panelTitle.activeBorder#ffc000
  • panelTitle.activeForeground#cecece
  • panelTitle.inactiveForeground#a09e9e
  • peekView.border#ffc000aa
  • peekViewEditor.background#252b2e
  • peekViewEditor.matchHighlightBackground#413701
  • peekViewEditorGutter.background#252b2e
  • peekViewResult.background#252b2e
  • peekViewResult.matchHighlightBackground#413701
  • peekViewTitle.background#252b2e
  • pickerGroup.border#ffc000aa
  • pickerGroup.foreground#ffa837
  • scrollbarSlider.activeBackground#61605c
  • scrollbarSlider.background#61605c67
  • scrollbarSlider.hoverBackground#61605c
  • settings.numberInputBackground#252b2e
  • settings.textInputBackground#252b2e
  • sideBar.background#1c2022
  • sideBar.border#111518
  • sideBar.foreground#C0C0C0
  • sideBarSectionHeader.background#252b2e
  • sideBarSectionHeader.foreground#C0C0C0
  • sideBarTitle.foreground#cecece
  • statusBar.background#22212b
  • statusBar.debuggingBackground#2a0a47
  • statusBar.debuggingBorder#2a0a47
  • statusBar.foreground#bababa
  • statusBar.noFolderBackground#a75a0029
  • statusBarItem.remoteBackground#22212b
  • statusBarItem.remoteForeground#f3f4f4
  • tab.activeBackground#1c2022
  • tab.activeForeground#ffc000
  • tab.border#111518
  • tab.inactiveBackground#171a1b
  • tab.inactiveForeground#C0C0C0
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#82aaff
  • terminal.ansiBrightBlack#546e7a
  • terminal.ansiBrightBlue#82aaff
  • terminal.ansiBrightCyan#89ddff
  • terminal.ansiBrightGreen#6de095
  • terminal.ansiBrightRed#e42b27
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f8c142
  • terminal.ansiCyan#89ddff
  • terminal.ansiGreen#73bc62
  • terminal.ansiRed#d82f2c
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#e2a24c
  • terminal.background#1c2022
  • terminal.foreground#C0C0C0
  • terminal.selectionBackground#6b410177
  • terminalCursor.foreground#e4d9cc
  • textLink.activeForeground#dba827
  • textLink.foreground#bb8b54
  • titleBar.activeBackground#1c2022
  • titleBar.activeForeground#C0C0C0
  • titleBar.border#111518
  • widget.shadow#ffc00055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string.quoted.docstring.multi, comment.line.number-sign#6e7480italic
meta.attribute, meta.member.access, meta.function-call, meta.item-access.arguments#9A9384italic
variable.language.special#E06C75italic
meta.fstring, meta.item-access, meta.function.parameters, meta.function-call.arguments, keyword.operator.unpacking.arguments#A7A7B9italic
meta.function-call.generic, punctuation.definition.arguments#D89D46italic
meta.indexed-name.python#C7B49Bitalic
entity.name.function.decorator, support.class, support.function.magic, support.variable, support.variable.magic, punctuation.definition.decorator, support.type, meta.function.decorator#76B0B8italic
support.type.exception#E05431
meta.indexed-name#c7b49b
keyword.operator#c1e1e6
punctuation.separator.annotation, constant.character.format.placeholder, punctuation.section.embedded#a5c1c5
variable.language.this#e6717acc
variable.other.property#daa1a1
variable.other.object#d89ba0c7
support.function.builtin#d9db3e
entity.name.function, punctuation.definition.parameters#ffc400
source variable.parameter, keyword.operator.unpacking.parameter#7c7770
source keyword.operator.logical#C678DD
source constant.other#6181bd
source constant#e05431
constant.character.format.placeholder.other storage#D19A66
punctuation.separator.annotation#ABB2BF
punctuation.separator.parameters#ABB2BF
meta.fstring#b38686
string.quoted.docstring#6aa143
keyword.codetag.notation.python#b37f1ditalic bold underline
entity.name.section.markdown#ffd17b
string.other.link.title.markdown, string.other.link.description.markdown#a0bffd
punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown#a0bffd77
punctuation.definition.heading.markdown#888a2652
punctuation.definition.bold.markdown#D19A66
beginning.punctuation.definition.list.markdown#E06C75
comment markup.link#5C6370
markup.bold#D19A66bold
markup.changed#C678DD
markup.deleted#E06C75
markup.italic#C678DDitalic
markup.heading#E06C75
markup.heading punctuation.definition.heading#61AFEF
markup.link#C678DD
markup.inserted#98C379
markup.quote#D19A66
markup.raw#98C379
markup.raw.block.markdown#ABB2BF
markup.heading.setext#ABB2BF
markup.inline.raw#89b2b9
markup.quote.markdown#11a75citalic
punctuation.definition.metadata.markdown, markup.underline.link.markdown, markup.underline.link.image.markdown#eaec7461
meta.tag.inline.kbd.start.html, entity.name.tag.html, meta.tag.inline.kbd.end.html#E06C75
keyword.operator.assignment.ahk#92cefff5
comment#7d8594italic
meta#BABABA
entity.name.type#E5C07B
entity.other.inherited-class#C1A8CE
keyword#C678DD
keyword.control#C678DD
keyword.other.special-method#61AFEF
keyword.other.unit#D19A66
storage#C678DD
storage.type.annotation, storage.type.primitive#C678DD
storage.modifier.package, storage.modifier.import#ABB2BF
constant#D19A66
constant.variable#D19A66
constant.character.escape#56B6C2
constant.numeric#D19A66
constant.other.color#56B6C2
constant.other.symbol#56B6C2
variable#E06C75
variable.interpolation#BE5046
variable.parameter#ABB2BF
string#98C379
string.regexp#56B6C2
string.regexp source.ruby.embedded#E5C07B
string.other.link#E06C75
punctuation.definition.comment#5C6370
punctuation.definition.heading, punctuation.definition.identity#61AFEF
punctuation.definition.bold#E5C07Bbold
punctuation.definition.italic#C678DDitalic
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class#ABB2BF
support.function.any-method#61AFEF
entity.name.class, entity.name.type.class#E5C07B
entity.name.section#61AFEF
entity.name.tag#E06C75
entity.other.attribute-name#D19A66
entity.other.attribute-name.id#61AFEF
meta.class#E5C07B
meta.class.body#ABB2BF
meta.method-call, meta.method#ABB2BF
meta.definition.variable#E06C75
meta.link#D19A66
meta.require#61AFEF
meta.selector#C678DD
meta.separator#ABB2BF
meta.tag#ABB2BF
underlineunderline
none#ABB2BF
invalid.deprecated#523D14
invalid.illegal#ffffff
source.c keyword.operator#C678DD
source.cpp keyword.operator#C678DD
source.cs keyword.operator#C678DD
source.css property-name, source.css property-value#828997
source.css property-name.support, source.css property-value.support#ABB2BF
source.gfm link entity#61AFEF
source.go storage.type.string#C678DD
source.ini keyword.other.definition.ini#E06C75
source.java storage.modifier.import#E5C07B
source.java storage.type#E5C07B
source.java keyword.operator.instanceof#C678DD
source.java-properties meta.key-pair#E06C75
source.java-properties meta.key-pair > punctuation#ABB2BF
source.js keyword.operator#56B6C2
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#C678DD
source.json meta.structure.dictionary.json > string.quoted.json#E06C75
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#E06C75
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#98C379
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json#56B6C2
keyword.codetag.notation#d89fa4
meta.attribute.rust#BCC199
storage.modifier.lifetime.rust, entity.name.lifetime.rust#33E8EC
keyword.unsafe.rust#CC6B73
customrule#ABB2BF
support.type.property-name#ABB2BF
string.quoted.double punctuation#98C379
support.constant#D19A66
support.type.property-name.json#E06C75
support.type.property-name.json punctuation#E06C75
punctuation.definition.array, punctuation.separator.array, punctuation.definition.dictionary, punctuation.separator.dictionary#ABB2BF
punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx#56B6C2
source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator#56B6C2
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx#ABB2BF
support.variable.dom.js, support.variable.dom.ts#E06C75
support.variable.property.dom.js, support.variable.property.dom.ts#E06C75
meta.template.expression.js punctuation.definition, meta.template.expression.ts punctuation.definition#BE5046
source.ts punctuation.definition.typeparameters, source.js punctuation.definition.typeparameters, source.tsx punctuation.definition.typeparameters#ABB2BF
source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block#ABB2BF
source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma#ABB2BF
support.variable.property.js, support.variable.property.ts, support.variable.property.tsx#E06C75
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx#E06C75
keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#C678DD
keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx#C678DD
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#ABB2BF
source.js punctuation.accessor, source.ts punctuation.accessor, source.tsx punctuation.accessor#ABB2BF
punctuation.terminator.statement.js, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx#ABB2BF
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#D19A66
source.js support.variable, source.ts support.variable, source.tsx support.variable#E06C75
variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx#D19A66
keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx#C678DD
source.ts keyword.operator, source.tsx keyword.operator#56B6C2
punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.separator.parameter.tsx #ABB2BF
constant.language.import-export-all.js, constant.language.import-export-all.ts#E06C75
constant.language.import-export-all.jsx, constant.language.import-export-all.tsx#56B6C2
keyword.control.as.js, keyword.control.as.ts, keyword.control.as.jsx, keyword.control.as.tsx#ABB2BF
variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx#E06C75
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx#D19A66
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts#E06C75
source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor#98C379
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#ABB2BF
entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx#98C379
meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx#ABB2BF
meta.definition.property.js variable, meta.definition.property.ts variable, meta.definition.property.jsx variable, meta.definition.property.tsx variable#ABB2BF
meta.type.parameters.js support.type, meta.type.parameters.jsx support.type, meta.type.parameters.ts support.type, meta.type.parameters.tsx support.type#ABB2BF
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#ABB2BF
meta.array.literal.js variable, meta.array.literal.jsx variable, meta.array.literal.ts variable, meta.array.literal.tsx variable#E5C07B
support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx#E06C75
constant.language.json#56B6C2
variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx#D19A66
storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx#56B6C2
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#98C379
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#98C379
keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx#C678DD
entity.name.variable.field.cs#E06C75
source.cs keyword.operator#ABB2BF
variable.other.readwrite.cs#ABB2BF
variable.other.object.cs#ABB2BF
variable.other.object.property.cs#ABB2BF
entity.name.variable.property.cs#61AFEF
storage.type.cs#E5C07B
keyword.other.unsafe.rust#E06C75
punctuation.definition.variable.shell#E06C75
support.constant.property-value.css#ABB2BF
punctuation.definition.constant.css#D19A66
punctuation.separator.key-value.scss#E06C75
punctuation.definition.constant.scss#D19A66
meta.property-list.scss punctuation.separator.key-value.scss#ABB2BF
storage.type.primitive.array.java#E5C07B
punctuation.separator.variable.ruby#E06C75
variable.other.constant.ruby#D19A66
keyword.operator.other.ruby#98C379
punctuation.definition.variable.php#E06C75
meta.class.php#ABB2BF
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
🖤 DarkCode suggests 🌱 MindEase Theme by yedhrab - VS Code Theme