Skip to main content
CodingTheme

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#1cecff
  • activityBar.background#15141b
  • activityBar.border#000000
  • activityBar.foreground#54bec5
  • activityBar.inactiveForeground#525156
  • activityBarBadge.background#1cecff
  • activityBarBadge.foreground#15141b
  • badge.background#1cecff
  • badge.foreground#15141b
  • button.background#54bec5
  • button.foreground#15141b
  • button.hoverBackground#49c29a
  • diffEditor.insertedTextBackground#00d89023
  • diffEditor.removedTextBackground#ff474720
  • dropdown.background#15141b
  • dropdown.border#3b334b
  • dropdown.foreground#d7d7d7
  • editor.background#15141b
  • editor.findMatchBackground#3d375e7f
  • editor.findMatchHighlightBackground#3d375e7f
  • editor.findRangeHighlightBackground#3d375e7f
  • editor.foreground#bdbdbd
  • editor.inactiveSelectionBackground#3d375e7f
  • editor.lineHighlightBackground#a394f033
  • editor.lineHighlightBorder#a394f000
  • editor.selectionBackground#3d375e7f
  • editor.selectionHighlightBackground#3d375e7f
  • editor.stackFrameHighlightBackground#353424
  • editor.wordHighlightBackground#3d375e7f
  • editor.wordHighlightStrongBackground#3d375e7f
  • editorBracketMatch.border#1cecff
  • editorCursor.foreground#1cecff
  • editorError.border#ffffff00
  • editorError.foreground#ff0000
  • editorGroup.border#000000
  • editorGroup.dropBackground#3d375e7f
  • editorGroupHeader.tabsBackground#15141b
  • editorGroupHeader.tabsBorder#000000
  • editorGutter.addedBackground#54bec5
  • editorGutter.deletedBackground#ff0000
  • editorGutter.modifiedBackground#6f78c7
  • editorHoverWidget.background#121016
  • editorHoverWidget.border#000000
  • editorInlayHint.background#2e2b38
  • editorInlayHint.foreground#d7d7d7
  • editorLineNumber.foreground#a394f033
  • editorLink.activeForeground#1cecff
  • editorSuggestWidget.background#121016
  • editorSuggestWidget.border#000000
  • editorSuggestWidget.foreground#d7d7d7
  • editorSuggestWidget.highlightForeground#54bec5
  • editorSuggestWidget.selectedBackground#4d4d4d
  • editorWarning.border#ffffff00
  • editorWarning.foreground#6f78c7
  • editorWhitespace.foreground#000000
  • editorWidget.background#121016
  • editorWidget.border#000000
  • errorForeground#ff0000
  • focusBorder#a394f033
  • foreground#bdbdbd
  • gitDecoration.conflictingResourceForeground#1cecff
  • gitDecoration.deletedResourceForeground#ff0000
  • gitDecoration.ignoredResourceForeground#4d4d4d
  • gitDecoration.modifiedResourceForeground#6f78c7
  • gitDecoration.untrackedResourceForeground#54bec5
  • input.background#15141b
  • input.border#3b334b
  • input.foreground#d7d7d7
  • input.placeholderForeground#af8aff7f
  • inputOption.activeBorder#1cecff
  • list.activeSelectionBackground#2e2b38
  • list.activeSelectionForeground#1cecff
  • list.focusBackground#3b334b
  • list.focusForeground#1cecff
  • list.highlightForeground#cf7b14
  • list.hoverBackground#3b334b
  • list.hoverForeground#bdbdbd
  • list.inactiveSelectionBackground#2e2b38
  • list.inactiveSelectionForeground#1cecff
  • panel.border#000000
  • panelTitle.activeBorder#54bec5
  • panelTitle.activeForeground#d7d7d7
  • progressBar.background#54bec5
  • scrollbar.shadow#15141b
  • scrollbarSlider.activeBackground#3d375e7f
  • scrollbarSlider.background#a394f033
  • scrollbarSlider.hoverBackground#a394f033
  • selection.background#3d375e7f
  • sideBar.background#110f18
  • sideBar.border#000000
  • sideBar.foreground#d7d7d7
  • sideBarSectionHeader.background#15141b
  • sideBarSectionHeader.foreground#adacae
  • sideBarTitle.foreground#adacae
  • statusBar.background#121016
  • statusBar.border#000000
  • statusBar.debuggingBackground#a19c77
  • statusBar.debuggingForeground#15141b
  • statusBar.foreground#adacae
  • statusBarItem.activeBackground#1cecff
  • tab.activeBackground#00000000
  • tab.activeBorderTop#54bec5
  • tab.activeForeground#54bec5
  • tab.border#000000
  • tab.inactiveBackground#15141b
  • tab.inactiveForeground#4392aa
  • titleBar.activeBackground#121016
  • titleBar.border#000000
  • titleBar.inactiveBackground#2d2b38
  • tree.indentGuidesStroke#4d4d4d
  • widget.shadow#0f0f0f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#B362FF
entity#00bbfa
constant#FF628C
keyword, storage.type.class.js#FF9D00
meta#9EFFFF
invalid#EC3A37F5
meta.brace, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js#E1EFFF
punctuation#E1EFFF
punctuation.definition.parameters#FFEE80
punctuation.definition.template-expression#FFEE80
storage#00bbfa
storage.type.function.arrow#00bbfa
string, punctuation.definition.string#A5FF90
string.template, punctuation.definition.string.template#3AD900
support#80FFBB
support.function#FF9D00
support.variable.property.dom#9EFFFF
variable#E1EFFF
source.ini entity, meta.embedded.block.ini, source.ini#E1EFFF
source.ini keyword, keyword.other.definition.ini#00bbfa
source.ini punctuation.definition#FFEE80
source.ini punctuation.separator, punctuation.separator.key-value.ini#FF9D00
source.css entity, source.stylus entity#3AD900
entity.other.attribute-name.class.css#9EFFFF
entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css#FFB454
entity.name.tag#9EFFFF
source.css support, entity.name.tag.css, source.stylus support#A5FF90
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant#FFEE80
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string#FFEE80
source.css variable, source.stylus variable#9EFFFF
text.html.basic entity.name, punctuation.definition.tag.html, entity.name.tag.inline.any.html, meta.tag.other.html, meta.tag.inline.any.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, 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#9EFFFF
meta.toc-list.id.html#A5FF90
text.html.basic entity.other#00bbfa
meta.tag.metadata.script.html entity.name.tag.html#00bbfa
punctuation.definition.string.begin, punctuation.definition.string.end#92FC79
meta.tag.inline.any.html, meta.tag.other#FF9D00
source.json support#00bbfa
source.json string, source.json punctuation.definition.string#92FC79
source.js storage.type.function#FB94FF
variable.language, entity.name.type.class.js#FB94FF
entity.other.inherited-class#FFEE80
storage.type.extends.js, storage.type.class.jsdoc#FF9D00
punctuation.definition.block.tag.jsdoc#FF9D00
variable.other.jsdoc, entity.name.type.instance.jsdoc#9EFFFF
variable.other.constant#9EFFFF
punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js#9EFFFF
meta.jsx.children.js#FFFFFF
storage.type, storage.type.class, storage.modifier, keyword.control, keyword.operator#FF9D00
punctuation.definition.bracket.curly#494685
keyword.operator.assignment.tsx, keyword.operator.assignment.jsx#FF9D00
keyword.operator.assignment#FF9D00
meta.jsx.children.tsx#FFFFFF
meta.object-literal.key.js#80FFBB
entity.name.type.class.tsx, entity.name.type.class.jsx, variable.other.readwrite.alias.tsx, variable.other.readwrite.tsx, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.js, variable.other.object.tsx, variable.other.object.jsx, variable.other.object, support.class.component.tsx, support.class.component.jsx, entity.name.type.tsx, entity.name.type.jsx, variable.other.readwrite, variable.other.object.js#9EFFFF
variable.other.property, variable.other.object.property#FFEE80
JSXNested#FFFFFF
variable.parameter#9EFFFF
variable.parameter.function.language.special.self.python#9EFFFF
meta.function-call.python, meta.function-call.generic.python, support.function.builtin.python#00bbfa
source.ts entity.name.type#80FFBB
source.ts keyword#00bbfa
source.ts punctuation.definition.parameters#E1EFFF
meta.arrow.ts punctuation.definition.parameters#FFEE80
source.ts storage#9EFFFF
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#00bbfabold
markup.inserted.diff, punctuation.definition.inserted.diff#8efa00
markup.deleted.diff, punctuation.definition.deleted.diff#F16E6B
meta.embedded.block.diff#FFFFFF
meta.paragraph.markdown#FFFFFF
punctuation.definition.from-file.diff, meta.diff.header.from-file#B362FF
markup.inline.raw.string.markdown#A599E9
beginning.punctuation.definition.quote.markdown#00bbfa
markup.quote.markdown meta.paragraph.markdown, punctuation.definition.quote.begin.markdown#A599E9
meta.separator.markdown#00bbfa
markup.bold.markdownbold
markup.italic.markdownitalic
beginning.punctuation.definition.list.markdown, punctuation.definition.list.begin.markdown, markup.list.unnumbered.markdown#00bbfa
string.other.link.description.title.markdown punctuation.definition.string.markdown, meta.link.inline.markdown string.other.link.description.title.markdown, string.other.link.description.title.markdown punctuation.definition.string.begin.markdown, string.other.link.description.title.markdown punctuation.definition.string.end.markdown, meta.image.inline.markdown string.other.link.description.title.markdown#A5FF90
meta.link.inline.markdown string.other.link.title.markdown, meta.link.reference.markdown string.other.link.title.markdown, meta.link.reference.def.markdown markup.underline.link.markdown#00bbfaunderline
markup.underline.link.markdown, string.other.link.description.title.markdown#A599E9
fenced_code.block.language, markup.inline.raw.markdown#9EFFFF
punctuation.definition.markdown, punctuation.definition.raw.markdown, punctuation.definition.heading.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#494685
meta.link.inline.markdown punctuation.definition.string.begin.markdown, meta.link.inline.markdown punctuation.definition.string.end.markdown, meta.link.reference.markdown punctuation.definition.string.begin.markdown, meta.link.reference.markdown punctuation.definition.string.end.markdown, string.other.link.description.markdown#00bbfa
meta.image.inline.markdown punctuation.definition.string.begin.markdown, meta.image.inline.markdown punctuation.definition.string.end.markdown, string.other.link.description.markdown#FF9D00
markup.underline.link.markdown, punctuation.definition.metadata.markdown, markup.underline.link.image.markdown, constant.other.reference.link.markdown, punctuation.definition.constant.markdown, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown#A599E9
text.jade entity.name#9EFFFF
storage.type.function.pug#FF9D00
variable.parameter.function.js#9EFFFF
variable.control.import.include.pug#92FC79
text.jade string.interpolated#FFEE80
storage.type.cs#9EFFFF
entity.name.variable.property.cs#9EFFFF
storage.modifier.cs#80FFBB
source.php entity, variable.other.class.php#9EFFFF
keyword.other.phpdoc.php#FF9D00
entity.name.function.php, support.function.basic_functions.php, meta.function-call.php, variable.other.property#00bbfa
variable.other.php, punctuation.definition.variable.php, variable.other.global.php, variable.language.this.php#9EFFFF
storage.modifier.php, keyword.other.namespace.php#FF9D00
entity.name.tag.yaml#00bbfa
punctuation.definition.block.sequence.item.yaml#E1EFFF
storage.type.function.php, meta.function.parameters.php#FB94FF
keyword.blade#FF9D00
begin.bracket.round.blade.php, end.bracket.round.blade.php#E1EFFF
support.function.construct.begin.blade, support.function.construct.end.blade#FFEE80
keyword.package.go, keyword.import.go#FF9D00
keyword.function.go#FB94FF
variable.other.assignment.go#9EFFFF
punctuation.definition.string.begin.go, punctuation.definition.string.end.go, support.function.go#00bbfa
punctuation.section.embedded.end.ruby, punctuation.section.embedded.begin.ruby, punctuation.section.scope.begin.ruby, punctuation.section.scope.end.ruby#FFEE80
variable.other.constant.ruby#80FFBB
entity.name.type.class.ruby#FB94FF
variable.other.block.ruby, variable.other.ruby#9EFFFF
punctuation.separator.other.ruby#FF9D00
keyword.other.special-method.ruby#FFEE80
storage.type.function.shell#FB94FF
variable.other.special.shell, punctuation.definition.variable.shell#FF9D00
variable.graphql#FAEFA5
keyword.operation.graphql#FB94FF
source.sql#E1EFFF
source.sql keyword.other, support.function.mysqli.php#FAEFA5
support.function.mysqli.php, source.sql support.function#00bbfa
string.regexp, string.regexp keyword.other#E1EFFF
keyword.other.DML.sql#FF9D00
punctuation.definition.table.array.toml#E1EFFF
entity.other.attribute-name.table.array.toml, entity.other.attribute-name.table.toml#FF9D00
keyword.key.toml#00bbfa
keyword.other.special-method.dockerfile#00bbfa
keyword.other.rust#FF9D00
keyword.other.fn.rust#FB94FF
keyword.other.env#FF9D00
variable.other.env#00bbfa
source.env#E1EFFF
keyword.other.template.begin.env, keyword.other.template.end.env, keyword.operator.assignment.env#FF9D00
variable.object.property#9EFFFF
string.regexp.js#FB94FF
keyword.rainbow2#FF9D00
keyword.other.nim, keyword.other#FF9D00
keyword.boolean#FF628C
punctuation.pragma.start.nim, punctuation.pragma.end.nim, entity.name.function.nim#00bbfa
markup.deleted#F16E6B
markup.inserted#8efa00
markup.underlineunderline
modifier, this, comment, storage.modifier, entity.other.attribute-name, entity.other.attribute-name.html, punctuation.definition.comment, text.html.basic entity.other, entity.other.attribute-name, markup.quote.markdown meta.paragraph.markdown, markup.italic.markdown, text.jade entity.other.attribute-name.tag, keyword.control.from, entity.other.attribute-name.tag.pugitalic

Shiki preview

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

Loading...

MoonGun Themes by CoderMungan - VS Code Theme