Skip to main content
CodingTheme

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#F65A83
  • activityBar.background#172030
  • activityBar.foreground#a4b1cd
  • activityBar.inactiveForeground#313f55
  • activityBarBadge.background#F65A83
  • activityBarBadge.foreground#1a2332
  • badge.background#FF74B1
  • badge.foreground#ffffff
  • banner.background#111927
  • banner.foreground#a4b1cd
  • banner.iconForeground#ffffff
  • breadcrumb.activeSelectionForeground#F65A83
  • breadcrumb.background#1a2332
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#a4b1cd
  • breadcrumbPicker.background#1b1414
  • button.background#F65A83
  • button.foreground#111927
  • charts.blue#004cff
  • charts.foreground#a4b1cd
  • charts.green#F65A83
  • charts.lines#a4b1cd
  • charts.orange#2ee7b6
  • charts.purple#9f00ff
  • charts.red#FF74B1
  • charts.yellow#ffaf00
  • checkbox.background#111927
  • checkbox.border#111927
  • checkbox.foreground#F65A83
  • debugExceptionWidget.background#FF74B149
  • debugExceptionWidget.border#FF74B149
  • debugIcon.breakpointCurrentStackframeForeground#ffcb5c8e
  • debugIcon.breakpointDisabledForeground#FF74B149
  • debugIcon.breakpointForeground#FF74B1
  • debugIcon.breakpointStackframeForeground#004cff49
  • debugIcon.breakpointUnverifiedForeground#a4b1cd
  • debugIcon.continueForeground#F65A83
  • debugIcon.disconnectForeground#f3638a
  • debugIcon.pauseForeground#F65A83
  • debugIcon.restartForeground#f3638a
  • debugIcon.startForeground#F65A83
  • debugIcon.stepBackForeground#a4b1cd
  • debugIcon.stepIntoForeground#a4b1cd
  • debugIcon.stepOutForeground#a4b1cd
  • debugIcon.stepOverForeground#a4b1cd
  • debugIcon.stopForeground#FF74B1
  • debugToolBar.background#1a2332
  • debugToolBar.border#1a2332
  • descriptionForeground#a4b1cd
  • dropdown.background#111927
  • dropdown.foreground#a4b1cd
  • dropdown.listBackground#111927
  • editor.background#172030
  • editor.findMatchBackground#6e7b96a1
  • editor.findMatchHighlightBackground#6e7b968C
  • editor.findRangeHighlightBackground#6e7b968C
  • editor.foldBackground#172030
  • editor.foreground#a4b1cd
  • editor.lineHighlightBackground#1a2332
  • editor.lineHighlightBorder#1a2332
  • editor.rangeHighlightBackground#313f55
  • editor.selectionBackground#6e7b968C
  • editor.selectionForeground#111927
  • editor.selectionHighlightBackground#6e7b968C
  • editor.stackFrameHighlightBackground#6e7b968C
  • editorBracketMatch.border#313f55
  • editorCursor.background#F65A83
  • editorGroup.border#313f55
  • editorGroup.dropBackground#6e7b9625
  • editorGroupHeader.tabsBackground#111927
  • editorGutter.addedBackground#F65A83
  • editorGutter.background#172030
  • editorGutter.commentRangeForeground#a4b1cd
  • editorGutter.deletedBackground#fc69a9
  • editorGutter.modifiedBackground#004cff
  • editorHoverWidget.background#1a2332
  • editorHoverWidget.foreground#a4b1cd
  • editorIndentGuide.activeBackground#a4b1cd
  • editorIndentGuide.background#313f55
  • editorLightBulb.foreground#ff68aa
  • editorLightBulbAutoFix.foreground#F65A83
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#313f55
  • editorOverviewRuler.bracketMatchForeground#a4b1cd
  • editorOverviewRuler.commonContentForeground#F65A83
  • editorOverviewRuler.errorForeground#FF74B1
  • editorOverviewRuler.findMatchForeground#004cff
  • editorOverviewRuler.infoForeground#ffffff
  • editorOverviewRuler.rangeHighlightForeground#004cff
  • editorOverviewRuler.selectionHighlightForeground#004cff
  • editorOverviewRuler.warningForeground#FF74B1
  • editorOverviewRuler.wordHighlightForeground#a4b1cd
  • editorSuggestWidget.background#1a2332
  • editorSuggestWidget.border#1a2332
  • editorSuggestWidget.foreground#a4b1cd
  • editorWidget.background#1a2332
  • editorWidget.border#1a2332
  • errorForeground#f86da9
  • extensionBadge.remoteBackground#2ee7b6
  • extensionBadge.remoteForeground#111927
  • extensionButton.prominentBackground#F65A83
  • extensionButton.prominentForeground#111927
  • extensionButton.prominentHoverBackground#fa78b1
  • extensionIcon.starForeground#FF74B1
  • focusBorder#1a2332
  • foreground#a4b1cd
  • gitDecoration.addedResourceForeground#F65A83
  • gitDecoration.conflictingResourceForeground#f3638a
  • gitDecoration.deletedResourceForeground#fc69a9
  • gitDecoration.ignoredResourceForeground#6e7b968C
  • gitDecoration.modifiedResourceForeground#ffffff
  • gitDecoration.submoduleResourceForeground#5cecc6
  • gitDecoration.untrackedResourceForeground#a4b1cd
  • icon.foreground#a4b1cd
  • input.background#172030
  • input.border#172030
  • input.foreground#ffffff
  • input.placeholderForeground#a4b1cd
  • inputOption.activeBackground#313f55
  • inputOption.activeBorder#313f55
  • inputOption.activeForeground#a4b1cd
  • inputValidation.errorBackground#FF74B170
  • inputValidation.errorBorder#FF74B149
  • inputValidation.errorForeground#ffffff
  • inputValidation.infoBackground#004cff70
  • inputValidation.infoBorder#004cff54
  • inputValidation.infoForeground#ffffff
  • inputValidation.warningBackground#fd69a9
  • inputValidation.warningBorder#fd69a9
  • inputValidation.warningForeground#ffffff
  • keybindingLabel.background#6e7b965d
  • keybindingLabel.border#6e7b968C
  • keybindingLabel.bottomBorder#a4b1cd7e
  • keybindingLabel.foreground#a4b1cd
  • list.activeSelectionBackground#1a2332
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#313f55
  • list.errorForeground#FF74B1
  • list.hoverBackground#1a2332
  • list.inactiveSelectionBackground#1a2332
  • list.warningForeground#FF74B1
  • listFilterWidget.background#004cff
  • menu.background#111927
  • menu.separatorBackground#1a2332
  • menubar.selectionBackground#111927
  • menubar.selectionForeground#a4b1cd
  • merge.commonContentBackground#ffffff
  • merge.commonHeaderBackground#ffffff
  • merge.currentContentBackground#FF74B149
  • merge.currentHeaderBackground#FF74B1
  • merge.incomingContentBackground#004cff49
  • merge.incomingHeaderBackground#004cff
  • minimap.errorHighlight#ff8484
  • minimap.findMatchHighlight#FF74B1
  • minimap.selectionHighlight#ffffffd0
  • minimap.warningHighlight#FF74B1
  • minimapGutter.addedBackground#F65A83
  • minimapGutter.deletedBackground#f3638a
  • minimapGutter.modifiedBackground#004cff
  • minimapSlider.activeBackground#6e7b968C
  • minimapSlider.background#172030
  • minimapSlider.hoverBackground#111927
  • notificationCenterHeader.background#1a2332
  • notificationLink.foreground#5cb2ff
  • notifications.background#1a2332
  • notifications.foreground#a4b1cd
  • notificationsErrorIcon.foreground#ff8484
  • notificationsInfoIcon.foreground#F65A83
  • notificationsWarningIcon.foreground#f3638a
  • panel.background#111927
  • panel.border#172030
  • panelTitle.activeBorder#F65A83
  • panelTitle.inactiveForeground#a4b1cd
  • peekView.border#1a2332
  • peekViewEditor.background#172030
  • progressBar.background#F65A83
  • scm.providerBorder#a4b1cd
  • scrollbar.shadow#172030
  • scrollbarSlider.activeBackground#6e7b968C
  • scrollbarSlider.background#6e7b968C
  • scrollbarSlider.hoverBackground#6e7b968C
  • selection.background#313f55
  • settings.checkboxBackground#111927
  • settings.checkboxBorder#111927
  • settings.checkboxForeground#F65A83
  • settings.dropdownBackground#111927
  • settings.dropdownBorder#111927
  • settings.dropdownForeground#a4b1cd
  • settings.dropdownListBorder#111927
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#F65A83
  • settings.numberInputBackground#111927
  • settings.numberInputBorder#111927
  • settings.numberInputForeground#a4b1cd
  • settings.textInputBackground#111927
  • settings.textInputBorder#111927
  • settings.textInputForeground#a4b1cd
  • sideBar.background#1a2332
  • sideBar.foreground#a4b1cd
  • sideBarSectionHeader.background#1a2332
  • sideBarSectionHeader.foreground#6e7b968C
  • sideBarTitle.foreground#a4b1cd
  • statusBar.background#1a2332
  • statusBar.debuggingBackground#ff8484
  • statusBar.debuggingForeground#111927
  • statusBar.foreground#a4b1cd
  • statusBar.noFolderBackground#1a2332
  • statusBar.noFolderForeground#a4b1cd
  • tab.activeBackground#1a2332
  • tab.activeBorder#1a2332
  • tab.activeBorderTop#172030
  • tab.activeModifiedBorder#a4b1cd
  • tab.border#172030
  • tab.hoverBackground#172030
  • tab.hoverBorder#172030
  • tab.inactiveBackground#172030
  • tab.inactiveForeground#6e7b968C
  • tab.unfocusedActiveBorder#a4b1cd
  • terminal.ansiBlue#004cff
  • terminal.ansiBrightBlue#5cb2ff
  • terminal.ansiBrightCyan#5cecc6
  • terminal.ansiBrightGreen#FF74B1
  • terminal.ansiBrightMagenta#c16cfa
  • terminal.ansiBrightRed#ff8484
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FF74B1
  • terminal.ansiCyan#2ee7b6
  • terminal.ansiGreen#F65A83
  • terminal.ansiMagenta#9f00ff
  • terminal.ansiRed#FF74B1
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ff6aaa
  • terminal.background#111927
  • terminal.foreground#a4b1cd
  • terminalCursor.background#313f55
  • testing.iconErrored#f3638a
  • testing.iconFailed#FF74B1
  • testing.iconPassed#F65A83
  • testing.iconQueued#a4b1cd
  • testing.iconSkipped#a4b1cd
  • testing.iconUnset#a4b1cd
  • testing.message.error.decorationForeground#FF74B1
  • testing.message.error.lineBackground#FF74B1
  • testing.message.hint.decorationForeground#2ee7b6
  • testing.message.hint.lineBackground#2ee7b6
  • testing.message.info.decorationForeground#004cff
  • testing.message.info.lineBackground#004cff
  • testing.message.warning.decorationForeground#ffaf00
  • testing.message.warning.lineBackground#ffaf00
  • testing.peekBorder#a4b1cd
  • textBlockQuote.background#172030
  • textBlockQuote.border#a4b1cd
  • textCodeBlock.background#111927
  • textLink.activeForeground#fc77b0
  • textLink.foreground#F65A83
  • textPreformat.foreground#2e6cff
  • textSeparator.foreground#ffffff
  • titleBar.activeBackground#172030
  • titleBar.activeForeground#a4b1cd
  • titleBar.border#172030
  • titleBar.inactiveBackground#1a2332
  • titleBar.inactiveForeground#313f55
  • tree.indentGuidesStroke#F65A83
  • walkThrough.embeddedEditorBackground#172030
  • welcomePage.background#172030
  • welcomePage.buttonBackground#1a2332
  • welcomePage.buttonHoverBackground#313f55
  • widget.shadow#1119277e
  • window.activeBorder#1a2332

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#D7E4FF46italic
variable, string constant.other.placeholder#A4B1CD
string constant.other.placeholder#C5D1EB
constant.other.color#FFFFFF
invalid, invalid.illegal#FF8484
keyword, storage.type, storage.modifier#FF8484
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#5CECC6
keyword.control#CF8DFB
markup.deleted.git_gutter#C5D1EB
entity.name.tag, meta.tag.sgml#FF8484
markup.deleted.git_gutter#C5D1EB
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#fc6baa
meta.block variable.other#C5D1EB
support.other.variable#FF8484
string.other.link#FF8484
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#5CB2FF
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#fc6baa
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FF8484
entity.name, entity.other.inherited-class#ffffff
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FF8484
support.type#A4B1CD
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#A4B1CD
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF8484
variable.language#FF8484italic
entity.name.method.js#5CB2FFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#FF8484
entity.other.attribute-name#5CB2FF
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#f769a7italic
entity.other.attribute-name.class#5CB2FF
source.sass keyword.control#5CB2FF
markup.inserted#f76ca8
markup.deleted#FF8484
markup.changed#CF8DFB
string.regexp#5CB2FF
constant.character.escape#5CB2FF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#5CB2FFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF8484italic
source.json meta.structure.dictionary.json support.type.property-name.json#CF8DFB
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#5CB2FF
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#5CB2FF
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#FF8484
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#FF68B3
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#5CB2FF
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#FF8484
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#CF8DFB
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#fc6aa9
text.html.markdown, punctuation.definition.list_item.markdown#A4B1CD
text.html.markdown markup.inline.raw.markdown#CF8DFB
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#313F55
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#ff7cb5
markup.italic#FF8484italic
markup.bold, markup.bold string#ff009d
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#FF8484bold
markup.underline#FF8484underline
markup.quote punctuation.definition.blockquote.markdown#1A2332
markup.quoteitalic
string.other.link.title.markdown#5CB2FF
string.other.link.description.title.markdown#CF8DFB
constant.other.reference.link.markdown#5CB2FF
markup.raw.block#CF8DFB
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#A4B1CD
variable.language.fenced.markdown#313F55
meta.separator#313F55bold
markup.table#A4B1CD
token.info-token#5CB2FF
token.warn-token#fa6aa8
token.error-token#FF8484
token.debug-token#CF8DFB

Shiki preview

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

Loading...

Kawaine Theme by sazumiviki - VS Code Theme