Bone Page
Publisher: nassif.proThemes in package: 1
A warm brutalist light theme. Cream/bone background, black dominant, brutal orange accents.
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.background#d8d0c0
- activityBar.border#c0b8a8
- activityBar.foreground#111111
- activityBar.inactiveForeground#907868
- activityBarBadge.background#cc4010
- activityBarBadge.foreground#ede8de
- badge.background#cc4010
- badge.foreground#ede8de
- breadcrumb.activeSelectionForeground#111111
- breadcrumb.focusForeground#504840
- breadcrumb.foreground#907868
- button.background#cc4010
- button.foreground#ede8de
- button.hoverBackground#dd5020
- button.secondaryBackground#c0b8a8
- button.secondaryForeground#504840
- dropdown.background#e4ddd0
- dropdown.border#c0b8a8
- dropdown.foreground#504840
- editor.background#ede8de
- editor.findMatchBackground#e8803a
- editor.findMatchHighlightBackground#e8a06a
- editor.foreground#111111
- editor.inactiveSelectionBackground#dcd5c8
- editor.lineHighlightBackground#e4ddd0
- editor.selectionBackground#c8c0b0
- editor.selectionHighlightBackground#d8d0c0
- editor.wordHighlightBackground#dcd5c8
- editor.wordHighlightStrongBackground#d0c8b8
- editorBracketMatch.background#c8c0b0
- editorBracketMatch.border#907868
- editorCursor.foreground#cc4010
- editorError.foreground#7a5060
- editorGroupHeader.tabsBackground#d8d0c0
- editorGroupHeader.tabsBorder#c0b8a8
- editorGutter.background#ede8de
- editorIndentGuide.activeBackground#c0b8a8
- editorIndentGuide.background#d8d0c0
- editorInfo.foreground#507080
- editorLineNumber.activeForeground#706860
- editorLineNumber.foreground#b0a898
- editorWarning.foreground#7a6840
- editorWhitespace.foreground#d0c8b8
- focusBorder#cc4010
- gitDecoration.addedResourceForeground#507050
- gitDecoration.conflictingResourceForeground#806050
- gitDecoration.deletedResourceForeground#7a5060
- gitDecoration.ignoredResourceForeground#b0a898
- gitDecoration.modifiedResourceForeground#906010
- gitDecoration.untrackedResourceForeground#507050
- input.background#e4ddd0
- input.border#c0b8a8
- input.foreground#504840
- input.placeholderForeground#907868
- inputOption.activeBackground#d0c8b8
- inputOption.activeBorder#cc4010
- list.activeSelectionBackground#d0c8b8
- list.activeSelectionForeground#111111
- list.errorForeground#7a5060
- list.focusBackground#c8c0b0
- list.highlightForeground#cc4010
- list.hoverBackground#dcd5c8
- list.hoverForeground#504840
- list.inactiveSelectionBackground#d8d0c0
- list.inactiveSelectionForeground#504840
- list.warningForeground#7a6840
- menu.background#e4ddd0
- menu.foreground#504840
- menu.selectionBackground#d0c8b8
- menu.selectionForeground#111111
- menu.separatorBackground#c0b8a8
- notificationLink.foreground#cc4010
- notifications.background#e4ddd0
- notifications.border#c0b8a8
- notifications.foreground#504840
- panel.background#d8d0c0
- panel.border#c0b8a8
- panelTitle.activeBorder#cc4010
- panelTitle.activeForeground#504840
- panelTitle.inactiveForeground#907868
- problemsErrorIcon.foreground#7a5060
- problemsWarningIcon.foreground#7a6840
- progressBar.background#cc4010
- scrollbar.shadow#c0b8a8
- scrollbarSlider.activeBackground#a8a090
- scrollbarSlider.background#c8c0b0
- scrollbarSlider.hoverBackground#b8b0a0
- selection.background#c8c0b0
- sideBar.background#e4ddd0
- sideBar.border#d0c8b8
- sideBar.foreground#504840
- sideBarSectionHeader.background#d8d0c0
- sideBarSectionHeader.border#c0b8a8
- sideBarSectionHeader.foreground#706860
- sideBarTitle.foreground#706860
- statusBar.background#d8d0c0
- statusBar.border#c0b8a8
- statusBar.debuggingBackground#cc4010
- statusBar.debuggingForeground#ede8de
- statusBar.foreground#706860
- statusBar.noFolderBackground#d8d0c0
- statusBarItem.hoverBackground#c8c0b0
- statusBarItem.remoteBackground#cc4010
- statusBarItem.remoteForeground#ede8de
- tab.activeBackground#ede8de
- tab.activeBorder#cc4010
- tab.activeForeground#111111
- tab.activeModifiedBorder#906010
- tab.border#c0b8a8
- tab.inactiveBackground#d8d0c0
- tab.inactiveForeground#907868
- tab.inactiveModifiedBorder#b0a080
- tab.unfocusedActiveBorder#907868
- terminal.ansiBlack#111111
- terminal.ansiBlue#507080
- terminal.ansiBrightBlack#504840
- terminal.ansiBrightBlue#608090
- terminal.ansiBrightCyan#609080
- terminal.ansiBrightGreen#608060
- terminal.ansiBrightMagenta#907060
- terminal.ansiBrightRed#e05a20
- terminal.ansiBrightWhite#111111
- terminal.ansiBrightYellow#a07020
- terminal.ansiCyan#508070
- terminal.ansiGreen#507050
- terminal.ansiMagenta#806050
- terminal.ansiRed#cc4010
- terminal.ansiWhite#706860
- terminal.ansiYellow#906010
- terminal.background#d8d0c0
- terminal.foreground#504840
- titleBar.activeBackground#d8d0c0
- titleBar.activeForeground#504840
- titleBar.border#c0b8a8
- titleBar.inactiveBackground#d8d0c0
- titleBar.inactiveForeground#907868
- widget.shadow#c0b8a8
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #a8a090 | italic |
| keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier | #111111 | — |
| keyword.operator | #bbbbbb | — |
| entity.name.function, meta.function-call, support.function | #d06020 | — |
| entity.name.type, entity.name.class, support.type, support.class | #7a6a50 | — |
| variable, variable.other, variable.other.readwrite | #cc4010 | — |
| variable.parameter | #b83808 | — |
| variable.other.property, support.type.property-name, meta.object-literal.key, entity.name.tag.yaml | #7a6a50 | — |
| string, string.quoted | #7a6a50 | — |
| string.template, meta.template.expression | #7a6a50 | — |
| string.regexp, string.regexp.ts, string.regexp.tsx, string.regexp.js, constant.regexp | #7a3a80 | bold |
| constant.numeric, constant.language | #111111 | — |
| constant, variable.other.constant | #cc4010 | — |
| entity.name.tag, entity.name.tag.tsx, entity.name.tag.jsx, support.class.component.tsx, support.class.component.jsx | #7ab8cc | — |
| punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx | #a0a098 | — |
| entity.other.attribute-name | #7a6a50 | — |
| support.type.property-name.css | #7a6a50 | — |
| meta.property-value.css, support.constant.property-value.css | #111111 | — |
| punctuation, meta.brace, punctuation.definition.block, punctuation.definition.block.tsx, punctuation.definition.block.ts, meta.brace.round, meta.brace.square, meta.brace.curly, punctuation.curlybrace.open, punctuation.curlybrace.close, punctuation.curlybrace.open.tsx, punctuation.curlybrace.close.tsx, meta.object.type.tsx, meta.object.type.ts, meta.import.ts, meta.import.tsx, meta.block.ts, meta.block.tsx, meta.arrow.tsx, meta.arrow.ts, meta.type.declaration.ts, meta.type.declaration.tsx | #907060 | — |
| markup.heading | #cc4010 | bold |
| markup.underline.link | #d06020 | — |
| markup.inline.raw, markup.fenced_code | #7a6a50 | — |