Tropical Swirl
Publisher: tropical-swirlThemes in package: 1
Dark theme for epic adventures.
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.
- actionBar.toggledBackground#283c42
- activityBar.background#20272e
- activityBarBadge.background#17998a
- activityBarBadge.foreground#ececec
- badge.background#283c42
- banner.background#283c42
- breadcrumb.foreground#a5b4bd
- button.background#375757
- button.foreground#ececec
- debugToolBar.background#192025
- descriptionForeground#8c939c
- diffEditor.insertedTextBackground#002d4bdf
- disabledForeground#3c4a4a
- dropdown.background#192025
- dropdown.border#40484f
- editor.background#20272e
- editor.findMatchBackground#696763d8
- editor.findMatchBorder#ffffff8e
- editor.foreground#a5b4bd
- editor.lineHighlightBackground#27323c
- editor.selectionBackground#354045
- editor.selectionHighlightBackground#2d668593
- editor.selectionHighlightBorder#ffffff8e
- editor.wordHighlightBackground#48484891
- editorGroup.border#080a0c
- editorGroupHeader.tabsBackground#192025
- editorGutter.commentGlyphForeground#72828c
- editorGutter.commentRangeForeground#72828c
- editorHoverWidget.border#40484f
- editorLineNumber.foreground#40484f
- editorWidget.background#192025
- editorWidget.border#080a0c
- editorWidget.resizeBorder#40484f
- errorForeground#d6c9c9
- focusBorder#283c42
- foreground#a5b4bd
- icon.foreground#a5b4bd
- input.background#192025
- input.border#40484f
- inputOption.activeBackground#283c42
- inputOption.activeBorder#283c42
- inputOption.hoverBackground#283c42
- list.activeSelectionBackground#283c42
- list.activeSelectionForeground#d8e7f1
- list.filterMatchBackground#46565d
- list.focusBackground#253439
- list.hoverBackground#253439
- list.inactiveSelectionBackground#283c42
- menu.foreground#a5b4bd
- menu.selectionBackground#283c42
- menu.selectionForeground#a5b4bd
- menubar.selectionBackground#283c42
- quickInput.background#192025
- quickInputList.focusBackground#283c42
- sash.hoverBorder#283c42
- scrollbar.shadow#192025
- selection.background#46565d
- sideBar.background#192025
- sideBarSectionHeader.background#20272e
- sideBarSectionHeader.foreground#a5b4bd
- sideBarTitle.foreground#a5b4bd
- statusBar.background#192025
- statusBar.foreground#a5b4bd
- tab.activeBackground#20272e
- tab.activeBorder#a5b4bd
- tab.hoverBackground#27323c
- tab.inactiveBackground#192025
- tab.lastPinnedBorder#40484f
- terminal.findMatchBackground#ad8063c7
- terminal.foreground#a5b4bd
- textLink.foreground#3d9be9
- titleBar.activeBackground#20272e
- titleBar.activeForeground#a5b4bd
- toolbar.activeBackground#283c42
- toolbar.hoverBackground#283c42
- welcomePage.tileBackground#192025
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #72828c | — |
| constant | #969DC7 | — |
| constant.character.escape | #969DC7 | — |
| constant.regexp | #9aa1ac | — |
| constant.numeric, constant.language | #969DC7 | — |
| entity.name | #b19db9 | — |
| entity.name.namespace | #d4ba71 | — |
| entity.name.type | #d4ba71 | — |
| entity.other.attribute-name.pseudo-element | #b19db9 | — |
| entity.other.attribute-name.class.css | #A5B4BD | — |
| entity.name.section, entity.name.tag | #8d9ff6 | — |
| entity.other.attribute-name, entity.other.inherited-class | #9aa1ac | — |
| invalid | #e66c6c | — |
| invalid.deprecated | #72828c | — |
| keyword | #ae8ac7 | — |
| keyword.operator | #9aa1ac | — |
| keyword.operator.new | #AE8AC7 | — |
| markup.changed | #8D9FF6 | — |
| markup.deleted | #72828c | — |
| markup.inserted | #969DC7 | — |
| markup.heading | #8D9FF6 | — |
| markup.bold.markdown | #969DC7 | bold |
| markup.italic.markdown | #969DC7 | italic |
| markup.inline.raw.string.markdown | #2b9eba | — |
| meta.diff.range | #969DC7 | — |
| meta.function-call.generic | #2b9eba | — |
| meta.property-name.css | #a5b4bd | — |
| meta.property-value.css | #969DC7 | — |
| meta.tag, meta.brace | #a5b4bd | — |
| meta.import, meta.export | #8D9FF6 | — |
| punctuation.accessor | #a5b4bd | — |
| punctuation.definition.tag | #a5b4bd | — |
| punctuation.definition.heading.markdown | #8D9FF6 | — |
| punctuation.separator.key-value | #9aa1ac | — |
| source.css punctuation, source.sass punctuation, source.scss punctuation, source.less punctuation, punctuation.definition.keyword.css | #ae8ac7 | — |
| storage.type, storage.modifier | #ae8ac7 | — |
| string | #57c175 | — |
| support | #8D9FF6 | — |
| support.class | #d4ba71 | — |
| support.constant | #969DC7 | — |
| support.function | #2b9eba | — |
| support.type.property-name | #a5b4bd | — |
| support.type.property-name.json punctuation | #8D9FF6 | — |
| support.constant.property-value | #969DC7 | — |
| support.type.object.module | #2b9eba | — |
| support.type.property-name.json | #8D9FF6 | — |
| source.ts support.type, source.tsx support.type | #d4ba71 | — |
| variable | #8D9FF6 | — |
| variable.parameter | #8D9FF6 | — |
| variable.other.constant | #d4ba71 | — |
| variable.language.this, variable.other.object | #d4ba71 | — |
| variable.other, variable.language, variable.function, variable.argument | #8D9FF6 | — |