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#FFCA52
  • activityBar.background#1F1A46
  • activityBarBadge.background#FFCA52
  • activityBarBadge.foreground#1F1A46
  • badge.background#1F1A46
  • badge.foreground#FFCA52
  • button.background#FFCA52
  • button.foreground#1F1A46
  • checkbox.background#1F1A46
  • checkbox.foreground#FFCA52
  • dropdown.background#1F1A46
  • dropdown.foreground#FFCA52
  • dropdown.listBackground#1F1A46
  • editor.background#272157
  • editor.findMatchBackground#ffcb5242
  • editor.findMatchBorder#ffcb5242
  • editor.findMatchHighlightBackground#ffcb5242
  • editor.findMatchHighlightBorder#ffcb5242
  • editor.findRangeHighlightBackground#ffcb5242
  • editor.findRangeHighlightBorder#ffcb5242
  • editor.foreground#fff
  • editor.hoverHighlightBackground#ffcb5242
  • editor.inactiveSelectionBackground#ffc23342
  • editor.lineHighlightBorder#1F1A46
  • editor.selectionBackground#ffcb5242
  • editor.wordHighlightBackground#ffcb5242
  • editorCursor.background#FFCA52
  • editorCursor.foreground#FFCA52
  • editorGroup.border#FFCA52
  • editorGroup.dropBackground#ffcb523d
  • editorGroupHeader.tabsBackground#272157
  • editorGroupHeader.tabsBorder#272157
  • editorLineNumber.activeForeground#FFCA52
  • editorLineNumber.foreground#473D98
  • editorWhitespace.foreground#1F1A46
  • editorWidget.background#1F1A46
  • editorWidget.border#1F1A46
  • editorWidget.resizeBorder#FFCA52
  • input.background#1F1A46
  • inputValidation.errorBackground#ff937be1
  • inputValidation.errorForeground#1F1A46
  • inputValidation.warningBackground#FFCA52
  • inputValidation.warningForeground#1F1A46
  • list.activeSelectionBackground#ffc23342
  • list.activeSelectionForeground#FFCA52
  • list.dropBackground#ffc23342
  • list.focusBackground#ffc23342
  • list.hoverBackground#272157
  • list.hoverForeground#FFCA52
  • list.inactiveSelectionBackground#272157
  • listFilterWidget.background#090b10
  • menu.background#1F1A46
  • menu.foreground#ffffff
  • menu.selectionBackground#272157
  • menu.selectionBorder#1F1A46
  • menu.selectionForeground#FFCA52
  • menu.separatorBackground#1F1A46
  • menubar.selectionBackground#1F1A46
  • menubar.selectionBorder#1F1A46
  • menubar.selectionForeground#FFCA52
  • panel.background#1F1A46
  • panel.border#1F1A46
  • peekView.border#FFCA52
  • peekViewEditor.background#1F1A46
  • peekViewEditor.matchHighlightBackground#ffcb5242
  • peekViewEditor.matchHighlightBorder#ffcb5242
  • peekViewEditorGutter.background#1F1A46
  • peekViewResult.background#1F1A46
  • peekViewResult.fileForeground#494949
  • peekViewResult.lineForeground#FFCA52
  • peekViewResult.matchHighlightBackground#ffcb5242
  • peekViewResult.selectionBackground#ffcb5242
  • peekViewResult.selectionForeground#fff
  • peekViewTitle.background#1F1A46
  • peekViewTitleDescription.foreground#fff
  • peekViewTitleLabel.foreground#fff
  • progressBar.background#FFCA52
  • scrollbar.shadow#272157
  • searchEditor.findMatchBackground#ffcb5242
  • searchEditor.findMatchBorder#ffcb5242
  • searchEditor.textInputBorder#ffcb5242
  • sideBar.background#1F1A46
  • sideBarTitle.foreground#FFCA52
  • statusBar.background#1F1A46
  • statusBar.border#1F1A46
  • statusBar.debuggingBackground#1F1A46
  • statusBar.debuggingBorder#1F1A46
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#1F1A46
  • statusBar.noFolderBorder#1F1A46
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#FFCA52
  • statusBarItem.errorBackground#1F1A46
  • statusBarItem.errorForeground#ff937be1
  • statusBarItem.hoverBackground#272157
  • statusBarItem.prominentBackground#FFCA52
  • statusBarItem.prominentForeground#1F1A46
  • statusBarItem.prominentHoverBackground#FFCA52
  • statusBarItem.remoteBackground#FFCA52
  • statusBarItem.remoteForeground#1F1A46
  • tab.activeBackground#1F1A46
  • tab.activeForeground#FFCA52
  • tab.hoverBackground#1F1A46
  • tab.inactiveBackground#272157
  • tab.inactiveForeground#ffffff
  • tab.unfocusedHoverBackground#272157
  • tab.unfocusedHoverForeground#FFCA52
  • textBlockQuote.border#272157
  • titleBar.activeBackground#272157
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#272157
  • titleBar.inactiveForeground#ffffff
  • tree.indentGuidesStroke#473D98

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#473D98italic
variable, string constant.other.placeholder#FF937B
constant.other.color#b1604d
invalid, invalid.illegal#FF937B
keyword, storage.type, storage.modifier#BBA1FF
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#BBCFF0
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FF937B
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#BBCFF0
meta.block variable.other#FF937B
support.other.variable, string.other.link#FF937B
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#F78C6C
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#FCFFC7
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FFCA52
support.type#B2CCD6
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#B2CCD6
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF937B
variable.language#FF937Bitalic
entity.name.method.js#BBCFF0italic
meta.class-method.js entity.name.function.js, variable.function.constructor#BBCFF0
entity.other.attribute-name#BBA1FF
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCA52italic
entity.other.attribute-name.class#FFCA52
source.sass keyword.control#BBCFF0
markup.inserted#FCFFC7
markup.deleted#FF937B
markup.changed#BBA1FF
string.regexp#38c7ff
constant.character.escape#38c7ff
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#bbf0d7italic
source.js constant.other.object.key.js string.unquoted.label.js#FF937Bitalic
source.json meta.structure.dictionary.json support.type.property-name.json#BBA1FF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFCA52
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F78C6C
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF937B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C17E70
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#BBCFF0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF937B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#BBA1FF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c7ffd3
text.html.markdown, punctuation.definition.list_item.markdown#EEFFFF
text.html.markdown markup.inline.raw.markdown#BBA1FF
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#FCFFC7
markup.italic#FF937Bitalic
markup.bold, markup.bold string#FF937Bbold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#FF937Bbold
markup.underline#F78C6Cunderline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#BBCFF0
string.other.link.description.title.markdown#BBA1FF
constant.other.reference.link.markdown#FFCA52
markup.raw.block#BBA1FF
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF
variable.language.fenced.markdown#65737E
meta.separator#7e6565bold
markup.table#05ffff

Shiki preview

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

Loading...

mjolnir by Código Vikingo - VS Code Theme