Porcelain Theme
Publisher: cyansaltThemes in package: 2
Porcelain theme for VSCode
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#89b4fa
- activityBar.background#0f172b
- activityBar.border#1d293d
- activityBar.foreground#ffffff
- activityBar.inactiveForeground#ffffff50
- activityBarBadge.background#90a1b9
- activityBarBadge.foreground#0f172b
- badge.background#ffffff90
- badge.foreground#0f172b
- breadcrumb.activeSelectionForeground#eeeeee18
- breadcrumb.background#0f172b
- breadcrumb.focusForeground#ffffff
- breadcrumb.foreground#90a1b9
- breadcrumbPicker.background#0f172b
- button.background#89b4fa
- button.foreground#0f172b
- button.hoverBackground#89b4fa
- checkbox.background#0f172b
- checkbox.border#314158
- debugToolBar.background#0f172b
- descriptionForeground#ffffff90
- dropdown.background#0f172b
- dropdown.border#314158
- dropdown.foreground#ffffff
- dropdown.listBackground#151f33
- editor.background#0f172b
- editor.findMatchBackground#eed49f22
- editor.findMatchHighlightBackground#eed49f44
- editor.focusedStackFrameHighlightBackground#b808
- editor.foldBackground#eeeeee10
- editor.foreground#e2e8f0
- editor.inactiveSelectionBackground#eeeeee10
- editor.lineHighlightBackground#151f33
- editor.selectionBackground#eeeeee18
- editor.selectionHighlightBackground#eeeeee10
- editor.stackFrameHighlightBackground#a707
- editor.wordHighlightBackground#89b4fa05
- editor.wordHighlightStrongBackground#89b4fa10
- editorBracketHighlight.foreground1#74c7ec
- editorBracketHighlight.foreground2#a6e3a1
- editorBracketHighlight.foreground3#fab387
- editorBracketHighlight.foreground4#cba6f7
- editorBracketHighlight.foreground5#f9e2af
- editorBracketHighlight.foreground6#89b4fa
- editorBracketMatch.background#89b4fa20
- editorError.foreground#f38ba8
- editorGroup.border#1d293d
- editorGroupHeader.tabsBackground#0f172b
- editorGroupHeader.tabsBorder#1d293d
- editorGutter.addedBackground#a6e3a1
- editorGutter.commentRangeForeground#ffffff50
- editorGutter.deletedBackground#f38ba8
- editorGutter.foldingControlForeground#ffffff90
- editorGutter.modifiedBackground#89b4fa
- editorHint.foreground#74c7ec
- editorIndentGuide.activeBackground1#ffffff30
- editorIndentGuide.background1#ffffff15
- editorInfo.foreground#89b4fa
- editorInlayHint.background#151f33
- editorInlayHint.foreground#666666
- editorLineNumber.activeForeground#90a1b9
- editorLineNumber.foreground#e2e8f080
- editorOverviewRuler.border#0f172b
- editorStickyScroll.background#151f33
- editorStickyScrollHover.background#151f33
- editorWarning.foreground#fab387
- editorWidget.background#0f172b
- editorWidget.border#1d293d
- editorWidget.resizeBorder#0f172b
- errorForeground#f38ba8
- focusBorder#00000000
- foreground#ffffff
- gitDecoration.addedResourceForeground#a6e3a1
- gitDecoration.conflictingResourceForeground#f9e2af
- gitDecoration.deletedResourceForeground#f38ba8
- gitDecoration.ignoredResourceForeground#ffffff70
- gitDecoration.modifiedResourceForeground#89b4fa
- gitDecoration.stageDeletedResourceForeground#f38ba8
- gitDecoration.stageModifiedResourceForeground#89b4fa
- gitDecoration.submoduleResourceForeground#ffffff90
- gitDecoration.untrackedResourceForeground#74c7ec
- input.background#0f172b
- input.border#314158
- input.foreground#ffffff
- input.placeholderForeground#ffffff90
- inputOption.activeBackground#ffffff50
- list.activeSelectionBackground#151f33
- list.activeSelectionForeground#ffffff
- list.focusBackground#151f33
- list.highlightForeground#89b4fa
- list.hoverBackground#151f33
- list.hoverForeground#ffffff
- list.inactiveFocusBackground#0f172b
- list.inactiveSelectionBackground#151f33
- list.inactiveSelectionForeground#ffffff
- menu.separatorBackground#1d293d
- notificationCenterHeader.background#0f172b
- notificationCenterHeader.foreground#90a1b9
- notifications.background#0f172b
- notifications.border#1d293d
- notifications.foreground#ffffff
- notificationsErrorIcon.foreground#f38ba8
- notificationsInfoIcon.foreground#89b4fa
- notificationsWarningIcon.foreground#fab387
- panel.background#0f172b
- panel.border#1d293d
- panelInput.border#314158
- panelTitle.activeBorder#89b4fa
- panelTitle.activeForeground#ffffff
- panelTitle.inactiveForeground#90a1b9
- peekViewEditor.background#0f172b
- peekViewResult.background#0f172b
- pickerGroup.border#1d293d
- pickerGroup.foreground#ffffff
- problemsErrorIcon.foreground#f38ba8
- problemsInfoIcon.foreground#89b4fa
- problemsWarningIcon.foreground#fab387
- progressBar.background#89b4fa
- quickInput.background#0f172b
- quickInput.foreground#ffffff
- quickInputList.focusBackground#151f33
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#ffffff50
- scrollbarSlider.background#ffffff20
- scrollbarSlider.hoverBackground#ffffff50
- settings.headerForeground#ffffff
- settings.modifiedItemIndicator#89b4fa
- sideBar.background#0f172b
- sideBar.border#1d293d
- sideBar.foreground#90a1b9
- sideBarSectionHeader.background#0f172b
- sideBarSectionHeader.border#1d293d
- sideBarSectionHeader.foreground#ffffff
- sideBarTitle.foreground#ffffff
- statusBar.background#0f172b
- statusBar.border#1d293d
- statusBar.debuggingBackground#151f33
- statusBar.debuggingForeground#90a1b9
- statusBar.foreground#90a1b9
- statusBar.noFolderBackground#0f172b
- statusBarItem.hoverBackground#151f33
- statusBarItem.hoverForeground#ffffff
- statusBarItem.prominentBackground#151f33
- tab.activeBackground#0f172b
- tab.activeBorder#1d293d
- tab.activeBorderTop#ffffff90
- tab.activeForeground#ffffff
- tab.activeModifiedBorder#89b4fa
- tab.border#1d293d
- tab.hoverBackground#151f33
- tab.inactiveBackground#0f172b
- tab.inactiveForeground#90a1b9
- tab.unfocusedActiveBorder#1d293d
- tab.unfocusedActiveBorderTop#1d293d
- tab.unfocusedHoverBackground#0f172b
- terminal.ansiBlack#0f172b
- terminal.ansiBlue#89b4fa
- terminal.ansiBrightBlack#000000
- terminal.ansiBrightBlue#89b4fa
- terminal.ansiBrightCyan#74c7ec
- terminal.ansiBrightGreen#a6e3a1
- terminal.ansiBrightMagenta#cba6f7
- terminal.ansiBrightRed#f38ba8
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#f9e2af
- terminal.ansiCyan#74c7ec
- terminal.ansiGreen#a6e3a1
- terminal.ansiMagenta#cba6f7
- terminal.ansiRed#f38ba8
- terminal.ansiWhite#e2e8f0
- terminal.ansiYellow#f9e2af
- terminal.foreground#e2e8f0
- terminal.selectionBackground#eeeeee18
- textBlockQuote.background#0f172b
- textBlockQuote.border#1d293d
- textCodeBlock.background#0f172b
- textLink.activeForeground#89b4fa
- textLink.foreground#89b4fa
- textSeparator.foreground#1d293d
- titleBar.activeBackground#0f172b
- titleBar.activeForeground#ffffff
- titleBar.border#1d293d
- titleBar.inactiveBackground#0f172b
- titleBar.inactiveForeground#90a1b9
- tree.indentGuidesStroke#1d293d
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| Global | #e2e8f0 | — |
| variable | #e2e8f0 | — |
| comment, punctuation.definition.comment | #62748e | italic |
| punctuation.definition, punctuation.separator.comma, punctuation.terminator, constant.character.format.placeholder | #62748e | — |
| keyword, punctuation.definition.keyword, storage.type, storage.modifier | #cba6f7 | — |
| punctuation, keyword.operator, meta.brace | #74c7ec | — |
| entity.name.tag | #eba0ac | — |
| entity.name.function, support.function, meta.function-call.generic, entity.name.command | #89b4fa | — |
| constant.numeric, constant.language, support.constant, keyword.other.unit, support.type.builtin | #fab387 | — |
| string, punctuation.definition.string, fenced_code.block.language | #a6e3a1 | — |
| entity.name.type, support.class, entity.other.inherited-class | #f9e2af | — |
| support.type | #f9e2af | — |
| support.type.vendored | #f9e2af | italic |
| entity.other.attribute-name | #cba6f7 | — |
| invalid.deprecated.entity.other.attribute-name | #cba6f7 | strikethrough |
| variable.language, support.constant.vendored | #f38ba8 | italic |
| string.regexp, constant.character.escape, constant.other.color | #74c7ec | — |
| *url*, *link*, *uri* | — | underline |
| string.other.link | #89b4fa | — |
| markup.inline.raw | #90a1b9 | — |
| heading, markup.bold | — | bold |
| markup.italic | — | italic |
| markup.strikethrough | — | strikethrough |
| markup.italic markup.bold, markup.bold markup.italic, heading markup.italic | — | bold italic |
| markup.strikethrough markup.bold, markup.bold markup.strikethrough | — | bold strikethrough |
| markup.strikethrough markup.italic, markup.italic markup.strikethrough | — | italic strikethrough |
| markup.italic markup.bold markup.strikethrough, markup.italic markup.strikethrough markup.bold, markup.strikethrough markup.bold markup.italic, markup.strikethrough markup.italic markup.bold, markup.bold markup.italic markup.strikethrough, markup.bold markup.strikethrough markup.italic, heading markup.italic markup.strikethrough, heading markup.strikethrough markup.italic | — | bold italic strikethrough |