Twipped UI
Publisher: Jocelyn BadgleyThemes in package: 1
Personal UI theme for VSCode, based on Soda and mac-classic for Sublime Text
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#bbc7d6
- activityBar.border#D8D8D8
- activityBar.foreground#6A6A69
- activityBar.inactiveForeground#6A6A69
- activityBarBadge.background#FFFFFF
- activityBarBadge.foreground#575557
- dropdown.background#ffffff
- dropdown.border#c4c4c4
- dropdown.foreground#262426
- editor.background#ffffff
- editor.findMatchBackground#F8E71C
- editor.findMatchHighlightBackground#DFEDFF
- editor.foreground#000000
- editor.lineHighlightBackground#fffbdd
- editor.selectionBackground#DFEDFF
- editor.wordHighlightBackground#DFEDFF
- editorBracketMatch.background#f1f8ff
- editorBracketMatch.border#c8e1ff
- editorCursor.foreground#101010
- editorGroup.border#a09ea0
- editorGroupHeader.border#DBDBDB
- editorGroupHeader.tabsBackground#DFDEDD
- editorGroupHeader.tabsBorder#B7B6B5
- editorHoverWidget.background#FFFFFF
- editorHoverWidget.border#E0E0E0
- editorHoverWidget.selectedBackground#EBF5FF
- editorIndentGuide.background#eeeeee
- editorLineNumber.background#e4e4e4
- editorLineNumber.foreground#929292
- editorSuggestWidget.background#FFFFFF
- editorSuggestWidget.border#E0E0E0
- editorSuggestWidget.highlightForeground#333333
- editorSuggestWidget.selectedBackground#EBF5FF
- editorSuggestWidget.selectedForeground#333333
- editorWidget.background#FFFFFF
- editorWidget.border#FFFFFF
- focusBorder#eeeeee
- input.background#ffffff
- input.border#e0e0e0
- input.foreground#262426
- inputOption.activeBackground#e0e0e0
- list.activeSelectionBackground#0069d9
- list.activeSelectionForeground#ffffff
- list.focusHighlightForeground#9dddff
- list.hoverBackground#EDEDED
- list.hoverForeground#262426
- list.inactiveSelectionBackground#B9B9B9
- list.inactiveSelectionForeground#262426
- notification.background#54a3ff
- panel.background#ffffff
- panel.border#DCDBDA
- panelInput.border#DCDBDA
- panelTitle.activeBorder#101010
- panelTitle.activeForeground#24292e
- scrollbar.shadow#f0f0f0
- scrollbarSlider.activeBackground#B7B6B5
- scrollbarSlider.background#B7B6B5
- scrollbarSlider.hoverBackground#B7B6B5
- selection.background#DFEDFF
- sideBar.background#dbe1e9
- sideBar.border#D8D8D8
- sideBar.foreground#262426
- sideBarSectionHeader.background#FFFFFF
- sideBarSectionHeader.border#DFDEDD
- sideBarSectionHeader.foreground#808080
- sidebarTitle.background#DFDEDD
- sideBarTitle.foreground#575557
- statusBar.background#F5F4F3
- statusBar.border#DCDBDA
- statusBar.debuggingBackground#fafbfc
- statusBar.debuggingForeground#24292e
- statusBar.foreground#494949
- statusBar.noFolderBackground#ededed
- statusBar.noFolderForeground#575557
- tab.activeBackground#F5F4F3
- tab.activeBorder#D7D7D6
- tab.activeBorderTop#F7F7F7
- tab.activeForeground#262426
- tab.border#BFBFBF
- tab.inactiveBackground#DFDEDD
- tab.inactiveForeground#575557
- terminal.ansiBlue#282BFF
- terminal.ansiBrightBlue#272BFF
- terminal.ansiBrightCyan#301CAE
- terminal.ansiBrightGreen#449444
- terminal.ansiBrightMagenta#BA3DCA
- terminal.ansiBrightRed#D9564E
- terminal.ansiBrightWhite#eeeeee
- terminal.ansiCyan#0B0098
- terminal.ansiGreen#277F2B
- terminal.ansiMagenta#AE30C2
- terminal.ansiRed#C71211
- terminal.ansiWhite#ffffff
- titleBar.activeBackground#c4c4c4
- titleBar.border#c4c4c4
- widget.shadow#bbbbbb
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| — | #000000 | — |
| emphasis | — | italic |
| strong, markup.heading.markdown, markup.bold.markdown | — | bold |
| markup.italic.markdown | — | italic |
| meta.link.inline.markdown | #005cc5 | underline |
| comment, markup.fenced_code, markup.inline | #007fff | italic |
| string | #036A07 | — |
| variable.other.constant, variable.other.class, meta.property-name, meta.property-value, support, constant.language.boolean, support.function.kernel | #8090e5 | — |
| constant.language, constant.other.color | #C5060B | — |
| keyword, storage.modifier, storage.type, support.function, variable.language.this, punctuation.definition.template-expression, constant.numeric, meta.tag.structure, entity.name.tag, entity.other.attribute-name | #0433ff | bold |
| keyword.operator.accessor, meta.group.braces.round.function.arguments, meta.template.expression | #000000 | — |
| entity.name.type.class, entity.other.inherited-class, meta.property-value, source.css, entity.name.tag.css, entity.other.attribute-name.class.css, punctuation.definition.entity.css, meta.attribute-selector.scss, entity.other.attribute-name.attribute.scss | #000000 | — |
| variable.language.self, variable.other.readwrite.instance, variable.other.readwrite.js, variable.other.object.js, meta.definition.variable.scss | #318495 | — |
| entity.name.type, entity.other.inherited-class, variable.other.object.property, meta.instance.constructor | #6f42c1 | — |
| support.constant.property-value | #119605 | — |
| meta.function-call, variable.parameter.function, support.variable.property.dom, support.type.property-name.json, punctuation.separator.key-value | #333333 | — |
| entity.name.function | #0000A2 | bold |
| variable.other.readwrite.alias.js, variable.other.constant, variable.language.this | #3b96a6 | — |
| constant.other.symbol | #d21f07 | — |
| string.quoted, string.regexp, string.interpolated, string.template, keyword.other.template | #036A07 | — |
| token.info-token | #316bcd | — |
| token.warn-token | #cd9731 | — |
| token.error-token | #cd3131 | — |
| token.debug-token | #800080 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...