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#4372d1
- activityBar.background#ffffff
- activityBar.border#e2e8f0
- activityBar.foreground#314158
- activityBar.inactiveForeground#31415850
- activityBarBadge.background#62748e
- activityBarBadge.foreground#ffffff
- badge.background#31415890
- badge.foreground#ffffff
- breadcrumb.activeSelectionForeground#22222218
- breadcrumb.background#ffffff
- breadcrumb.focusForeground#314158
- breadcrumb.foreground#62748e
- breadcrumbPicker.background#ffffff
- button.background#4372d1
- button.foreground#ffffff
- button.hoverBackground#4372d1
- checkbox.background#ffffff
- checkbox.border#cad5e2
- debugToolBar.background#ffffff
- descriptionForeground#31415890
- dropdown.background#ffffff
- dropdown.border#cad5e2
- dropdown.foreground#314158
- dropdown.listBackground#f7f9fc
- editor.background#ffffff
- editor.findMatchBackground#e6cc7744
- editor.findMatchHighlightBackground#e6cc7766
- editor.focusedStackFrameHighlightBackground#fff5b1
- editor.foldBackground#22222210
- editor.foreground#314158
- editor.inactiveSelectionBackground#22222210
- editor.lineHighlightBackground#f7f9fc
- editor.selectionBackground#22222218
- editor.selectionHighlightBackground#22222210
- editor.stackFrameHighlightBackground#fffbdd
- editor.wordHighlightBackground#4372d105
- editor.wordHighlightStrongBackground#4372d110
- editorBracketHighlight.foreground1#398e9d
- editorBracketHighlight.foreground2#4d8d3f
- editorBracketHighlight.foreground3#d56f34
- editorBracketHighlight.foreground4#8c57d1
- editorBracketHighlight.foreground5#bd883d
- editorBracketHighlight.foreground6#4372d1
- editorBracketMatch.background#4372d120
- editorError.foreground#b12f4b
- editorGroup.border#e2e8f0
- editorGroupHeader.tabsBackground#ffffff
- editorGroupHeader.tabsBorder#e2e8f0
- editorGutter.addedBackground#4d8d3f
- editorGutter.commentRangeForeground#31415850
- editorGutter.deletedBackground#b12f4b
- editorGutter.foldingControlForeground#31415890
- editorGutter.modifiedBackground#4372d1
- editorHint.foreground#398e9d
- editorIndentGuide.activeBackground1#00000030
- editorIndentGuide.background1#00000015
- editorInfo.foreground#4372d1
- editorInlayHint.background#f7f9fc
- editorInlayHint.foreground#999999
- editorLineNumber.activeForeground#62748e
- editorLineNumber.foreground#31415880
- editorOverviewRuler.border#ffffff
- editorStickyScroll.background#f7f9fc
- editorStickyScrollHover.background#f7f9fc
- editorWarning.foreground#d56f34
- editorWidget.background#ffffff
- editorWidget.border#e2e8f0
- editorWidget.resizeBorder#ffffff
- errorForeground#b12f4b
- focusBorder#00000000
- foreground#314158
- gitDecoration.addedResourceForeground#4d8d3f
- gitDecoration.conflictingResourceForeground#bd883d
- gitDecoration.deletedResourceForeground#b12f4b
- gitDecoration.ignoredResourceForeground#31415870
- gitDecoration.modifiedResourceForeground#4372d1
- gitDecoration.stageDeletedResourceForeground#b12f4b
- gitDecoration.stageModifiedResourceForeground#4372d1
- gitDecoration.submoduleResourceForeground#31415890
- gitDecoration.untrackedResourceForeground#398e9d
- input.background#ffffff
- input.border#cad5e2
- input.foreground#314158
- input.placeholderForeground#31415890
- inputOption.activeBackground#31415850
- list.activeSelectionBackground#f7f9fc
- list.activeSelectionForeground#314158
- list.focusBackground#f7f9fc
- list.highlightForeground#4372d1
- list.hoverBackground#f7f9fc
- list.hoverForeground#314158
- list.inactiveFocusBackground#ffffff
- list.inactiveSelectionBackground#f7f9fc
- list.inactiveSelectionForeground#314158
- menu.separatorBackground#e2e8f0
- notificationCenterHeader.background#ffffff
- notificationCenterHeader.foreground#62748e
- notifications.background#ffffff
- notifications.border#e2e8f0
- notifications.foreground#314158
- notificationsErrorIcon.foreground#b12f4b
- notificationsInfoIcon.foreground#4372d1
- notificationsWarningIcon.foreground#d56f34
- panel.background#ffffff
- panel.border#e2e8f0
- panelInput.border#cad5e2
- panelTitle.activeBorder#4372d1
- panelTitle.activeForeground#314158
- panelTitle.inactiveForeground#62748e
- peekViewEditor.background#ffffff
- peekViewResult.background#ffffff
- pickerGroup.border#e2e8f0
- pickerGroup.foreground#314158
- problemsErrorIcon.foreground#b12f4b
- problemsInfoIcon.foreground#4372d1
- problemsWarningIcon.foreground#d56f34
- progressBar.background#4372d1
- quickInput.background#ffffff
- quickInput.foreground#314158
- quickInputList.focusBackground#f7f9fc
- scrollbar.shadow#62748e33
- scrollbarSlider.activeBackground#31415850
- scrollbarSlider.background#31415820
- scrollbarSlider.hoverBackground#31415850
- settings.headerForeground#314158
- settings.modifiedItemIndicator#4372d1
- sideBar.background#ffffff
- sideBar.border#e2e8f0
- sideBar.foreground#62748e
- sideBarSectionHeader.background#ffffff
- sideBarSectionHeader.border#e2e8f0
- sideBarSectionHeader.foreground#314158
- sideBarTitle.foreground#314158
- statusBar.background#ffffff
- statusBar.border#e2e8f0
- statusBar.debuggingBackground#f7f9fc
- statusBar.debuggingForeground#62748e
- statusBar.foreground#62748e
- statusBar.noFolderBackground#ffffff
- statusBarItem.hoverBackground#f7f9fc
- statusBarItem.hoverForeground#314158
- statusBarItem.prominentBackground#f7f9fc
- tab.activeBackground#ffffff
- tab.activeBorder#e2e8f0
- tab.activeBorderTop#31415890
- tab.activeForeground#314158
- tab.activeModifiedBorder#4372d1
- tab.border#e2e8f0
- tab.hoverBackground#f7f9fc
- tab.inactiveBackground#ffffff
- tab.inactiveForeground#62748e
- tab.unfocusedActiveBorder#e2e8f0
- tab.unfocusedActiveBorderTop#e2e8f0
- tab.unfocusedHoverBackground#ffffff
- terminal.ansiBlack#314158
- terminal.ansiBlue#4372d1
- terminal.ansiBrightBlack#000000
- terminal.ansiBrightBlue#4372d1
- terminal.ansiBrightCyan#398e9d
- terminal.ansiBrightGreen#4d8d3f
- terminal.ansiBrightMagenta#8c57d1
- terminal.ansiBrightRed#b12f4b
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#bd883d
- terminal.ansiCyan#398e9d
- terminal.ansiGreen#4d8d3f
- terminal.ansiMagenta#8c57d1
- terminal.ansiRed#b12f4b
- terminal.ansiWhite#ffffff
- terminal.ansiYellow#bd883d
- terminal.foreground#314158
- terminal.selectionBackground#22222218
- textBlockQuote.background#ffffff
- textBlockQuote.border#e2e8f0
- textCodeBlock.background#ffffff
- textLink.activeForeground#4372d1
- textLink.foreground#4372d1
- textSeparator.foreground#e2e8f0
- titleBar.activeBackground#ffffff
- titleBar.activeForeground#314158
- titleBar.border#e2e8f0
- titleBar.inactiveBackground#ffffff
- titleBar.inactiveForeground#62748e
- tree.indentGuidesStroke#e2e8f0
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| Global | #314158 | — |
| variable | #314158 | — |
| comment, punctuation.definition.comment | #90a1b9 | italic |
| punctuation.definition, punctuation.separator.comma, punctuation.terminator, constant.character.format.placeholder | #90a1b9 | — |
| keyword, punctuation.definition.keyword, storage.type, storage.modifier | #8c57d1 | — |
| punctuation, keyword.operator, meta.brace | #398e9d | — |
| entity.name.tag | #cb616a | — |
| entity.name.function, support.function, meta.function-call.generic, entity.name.command | #4372d1 | — |
| constant.numeric, constant.language, support.constant, keyword.other.unit, support.type.builtin | #d56f34 | — |
| string, punctuation.definition.string, fenced_code.block.language | #4d8d3f | — |
| entity.name.type, support.class, entity.other.inherited-class | #bd883d | — |
| support.type | #bd883d | — |
| support.type.vendored | #bd883d | italic |
| entity.other.attribute-name | #8c57d1 | — |
| invalid.deprecated.entity.other.attribute-name | #8c57d1 | strikethrough |
| variable.language, support.constant.vendored | #b12f4b | italic |
| string.regexp, constant.character.escape, constant.other.color | #398e9d | — |
| *url*, *link*, *uri* | — | underline |
| string.other.link | #4372d1 | — |
| markup.inline.raw | #62748e | — |
| 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 |