Spider Theme Suite
Publisher: Akila WasalathilakaThemes in package: 10
Minimalist, high-performance spider-inspired theme suite engineered for visual focus and eye comfort.
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.background#0B0B0C
- activityBar.border#0B0B0C
- activityBar.foreground#E0FBFC
- activityBar.inactiveForeground#7A9CC673
- diffEditor.diagonalFill#7A9CC640
- diffEditor.insertedLineBackground#98C37910
- diffEditor.insertedTextBackground#98C3791A
- diffEditor.removedLineBackground#E06C7510
- diffEditor.removedTextBackground#E06C751A
- editor.background#17181A
- editor.findMatchBackground#E5C07B80
- editor.findMatchHighlightBackground#E5C07B30
- editor.findRangeHighlightBackground#E5C07B1A
- editor.foreground#FFFFFF
- editor.inactiveSelectionBackground#2C2E3380
- editor.lineHighlightBackground#1C1D20
- editor.selectionBackground#2C2E33
- editor.selectionHighlightBackground#2C2E33A0
- editor.wordHighlightBackground#2C2E33A0
- editor.wordHighlightStrongBackground#E0FBFC30
- editorBracketMatch.background#E0FBFC40
- editorBracketMatch.border#E0FBFCA0
- editorCursor.foreground#E0FBFC
- editorGroupHeader.tabsBackground#101112
- editorIndentGuide.activeBackground#7A9CC690
- editorIndentGuide.background#7A9CC640
- editorLineNumber.activeForeground#FFFFFF
- editorLineNumber.foreground#7A9CC690
- editorWhitespace.foreground#7A9CC660
- focusBorder#E0FBFC40
- foreground#FFFFFF
- gitDecoration.addedResourceForeground#98C379
- gitDecoration.conflictingResourceForeground#98C1D9
- gitDecoration.deletedResourceForeground#E06C75
- gitDecoration.ignoredResourceForeground#7A9CC6B3
- gitDecoration.modifiedResourceForeground#E0FBFC
- gitDecoration.untrackedResourceForeground#56B6C2
- list.deemphasizedForeground#7A9CC6B3
- panel.background#17181A
- sideBar.background#101112
- sideBar.border#101112
- sideBar.foreground#FFFFFF
- sideBarSectionHeader.background#101112
- statusBar.background#050506
- statusBar.border#050506
- statusBar.debuggingBackground#E5C07B40
- statusBar.foreground#FFFFFF
- statusBar.noFolderBackground#050506
- tab.activeBackground#17181A
- tab.inactiveBackground#101112
- terminal.ansiBlack#0B0B0C
- terminal.ansiBlue#E0FBFC
- terminal.ansiBrightBlack#7A9CC6
- terminal.ansiBrightBlue#E0FBFC
- terminal.ansiBrightCyan#56B6C2
- terminal.ansiBrightGreen#98C379
- terminal.ansiBrightMagenta#98C1D9
- terminal.ansiBrightRed#E06C75
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#E5C07B
- terminal.ansiCyan#56B6C2
- terminal.ansiGreen#98C379
- terminal.ansiMagenta#98C1D9
- terminal.ansiRed#E06C75
- terminal.ansiWhite#FFFFFF
- terminal.ansiYellow#E5C07B
- terminal.background#17181A
- terminal.foreground#FFFFFF
- widget.shadow#00000080
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #7A9CC6 | italic |
| comment.keyword.todo, comment.line.todo | #D19A66 | bold |
| comment.keyword.fixme, comment.line.fixme | #E06C75 | bold underline |
| comment.keyword.note, comment.line.note | #61AFEF | bold |
| comment.keyword.warning, comment.line.warning | #E5C07B | bold |
| comment.keyword.hack, comment.line.hack | #C678DD | bold |
| punctuation, meta.brace, meta.delimiter | #ABB2BFD9 | — |
| keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison | #ABB2BFD9 | — |
| keyword, storage, storage.type | #FF6B6B | — |
| keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch, keyword.control.return | #FF6B6B | bold |
| keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as | #FF6B6B | italic |
| entity.name.function, meta.function-call, support.function | #E0FBFC | — |
| variable.function, meta.function-call.generic | #E0FBFC | — |
| entity.name.type, entity.name.class, support.class, entity.name.type.class, entity.name.type.struct, entity.name.type.enum | #98C1D9 | — |
| entity.name.type.interface, entity.name.type.trait | #98C1D9 | italic |
| support.type.primitive, support.type.builtin, storage.type.numeric.go, storage.type.boolean.go, storage.type.string.go | #56B6C2 | — |
| variable, variable.other.readwrite, variable.other.object | #FFFFFF | — |
| variable.parameter, meta.parameter | #56B6C2 | italic |
| variable.language, variable.parameter.function.language.special.self, variable.parameter.function.language.special.cls | #FF6B6B | italic |
| variable.other.property, meta.object-literal.key, support.type.property-name | #FFFFFF | — |
| string, string.quoted, string.template | #EE6C4D | — |
| constant.character.escape, constant.other.placeholder | #FF6B6B | bold |
| constant.numeric, keyword.other.unit | #D19A66 | — |
| constant.language, constant.language.boolean, constant.language.null, constant.language.undefined | #D19A66 | bold |
| variable.other.constant, entity.name.constant | #E5C07B | bold |
| entity.name.tag, entity.name.tag.html, entity.name.tag.xml, entity.name.tag.js, entity.name.tag.jsx, entity.name.tag.tsx | #FF6B6B | — |
| support.class.component, entity.name.tag.custom | #98C1D9 | bold |
| entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx | #56B6C2 | italic |
| punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end | #ABB2BFD9 | — |
| support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less | #56B6C2 | — |
| support.constant.property-value.css, meta.property-value.css, support.constant.color | #EE6C4D | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #98C1D9 | bold |
| entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #C678DD | italic |
| variable.argument.css, variable.css, variable.scss | #FFFFFF | — |
| meta.function.decorator.python, entity.name.function.decorator.python | #C678DD | italic |
| support.function.builtin.python | #56B6C2 | — |
| entity.name.type.lifetime.rust, storage.modifier.lifetime.rust | #E5C07B | italic |
| support.macro.rust, entity.name.function.macro.rust | #E0FBFC | bold |
| keyword.other.unsafe.rust | #E06C75 | bold |
| keyword.package.go, keyword.import.go, entity.name.package.go | #FF6B6B | italic |
| support.type.property-name.json, entity.name.tag.yaml | #56B6C2 | — |
| keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql | #FF6B6B | bold |
| entity.name.type.model.prisma | #98C1D9 | bold |
| keyword.other.dockerfile | #FF6B6B | bold |
| variable.other.normal.shell, support.function.builtin.shell | #56B6C2 | — |
| markup.heading, entity.name.section.markdown | #E0FBFC | bold |
| markup.quote | #98C1D9 | italic |
| markup.inline.raw, markup.fenced_code.block | #EE6C4D | — |
| markup.underline.link, string.other.link | #56B6C2 | underline |
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#0F071A
- activityBar.border#0F071A
- activityBar.foreground#00FFFF
- activityBar.inactiveForeground#8C9BB073
- diffEditor.diagonalFill#8C9BB040
- diffEditor.insertedLineBackground#98C37910
- diffEditor.insertedTextBackground#98C3791A
- diffEditor.removedLineBackground#E06C7510
- diffEditor.removedTextBackground#E06C751A
- editor.background#1E1032
- editor.findMatchBackground#E5C07B80
- editor.findMatchHighlightBackground#E5C07B30
- editor.findRangeHighlightBackground#E5C07B1A
- editor.foreground#E0E1E3
- editor.inactiveSelectionBackground#3D246680
- editor.lineHighlightBackground#2B1747
- editor.selectionBackground#3D2466
- editor.selectionHighlightBackground#3D2466A0
- editor.wordHighlightBackground#3D2466A0
- editor.wordHighlightStrongBackground#00FFFF30
- editorBracketMatch.background#00FFFF40
- editorBracketMatch.border#00FFFFA0
- editorCursor.foreground#00FFFF
- editorGroupHeader.tabsBackground#150A24
- editorIndentGuide.activeBackground#8C9BB090
- editorIndentGuide.background#8C9BB040
- editorLineNumber.activeForeground#E0E1E3
- editorLineNumber.foreground#8C9BB090
- editorWhitespace.foreground#8C9BB060
- focusBorder#00FFFF40
- foreground#E0E1E3
- gitDecoration.addedResourceForeground#98C379
- gitDecoration.conflictingResourceForeground#E056FD
- gitDecoration.deletedResourceForeground#E06C75
- gitDecoration.ignoredResourceForeground#8C9BB0B3
- gitDecoration.modifiedResourceForeground#00FFFF
- gitDecoration.untrackedResourceForeground#56B6C2
- list.deemphasizedForeground#8C9BB0B3
- panel.background#1E1032
- sideBar.background#150A24
- sideBar.border#150A24
- sideBar.foreground#E0E1E3
- sideBarSectionHeader.background#150A24
- statusBar.background#0A0412
- statusBar.border#0A0412
- statusBar.debuggingBackground#E5C07B40
- statusBar.foreground#E0E1E3
- statusBar.noFolderBackground#0A0412
- tab.activeBackground#1E1032
- tab.inactiveBackground#150A24
- terminal.ansiBlack#0F071A
- terminal.ansiBlue#00FFFF
- terminal.ansiBrightBlack#8C9BB0
- terminal.ansiBrightBlue#00FFFF
- terminal.ansiBrightCyan#56B6C2
- terminal.ansiBrightGreen#98C379
- terminal.ansiBrightMagenta#E056FD
- terminal.ansiBrightRed#E06C75
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#E5C07B
- terminal.ansiCyan#56B6C2
- terminal.ansiGreen#98C379
- terminal.ansiMagenta#E056FD
- terminal.ansiRed#E06C75
- terminal.ansiWhite#E0E1E3
- terminal.ansiYellow#E5C07B
- terminal.background#1E1032
- terminal.foreground#E0E1E3
- widget.shadow#00000080
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #8C9BB0 | italic |
| comment.keyword.todo, comment.line.todo | #D19A66 | bold |
| comment.keyword.fixme, comment.line.fixme | #E06C75 | bold underline |
| comment.keyword.note, comment.line.note | #61AFEF | bold |
| comment.keyword.warning, comment.line.warning | #E5C07B | bold |
| comment.keyword.hack, comment.line.hack | #C678DD | bold |
| punctuation, meta.brace, meta.delimiter | #ABB2BFD9 | — |
| keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison | #ABB2BFD9 | — |
| keyword, storage, storage.type | #FF3366 | — |
| keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch, keyword.control.return | #FF3366 | bold |
| keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as | #FF3366 | italic |
| entity.name.function, meta.function-call, support.function | #00FFFF | — |
| variable.function, meta.function-call.generic | #00FFFF | — |
| entity.name.type, entity.name.class, support.class, entity.name.type.class, entity.name.type.struct, entity.name.type.enum | #E056FD | — |
| entity.name.type.interface, entity.name.type.trait | #E056FD | italic |
| support.type.primitive, support.type.builtin, storage.type.numeric.go, storage.type.boolean.go, storage.type.string.go | #56B6C2 | — |
| variable, variable.other.readwrite, variable.other.object | #E0E1E3 | — |
| variable.parameter, meta.parameter | #56B6C2 | italic |
| variable.language, variable.parameter.function.language.special.self, variable.parameter.function.language.special.cls | #FF3366 | italic |
| variable.other.property, meta.object-literal.key, support.type.property-name | #E0E1E3 | — |
| string, string.quoted, string.template | #FAED26 | — |
| constant.character.escape, constant.other.placeholder | #FF3366 | bold |
| constant.numeric, keyword.other.unit | #D19A66 | — |
| constant.language, constant.language.boolean, constant.language.null, constant.language.undefined | #D19A66 | bold |
| variable.other.constant, entity.name.constant | #E5C07B | bold |
| entity.name.tag, entity.name.tag.html, entity.name.tag.xml, entity.name.tag.js, entity.name.tag.jsx, entity.name.tag.tsx | #FF3366 | — |
| support.class.component, entity.name.tag.custom | #E056FD | bold |
| entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx | #4CC9F0 | italic |
| punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end | #ABB2BFD9 | — |
| support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less | #4CC9F0 | — |
| support.constant.property-value.css, meta.property-value.css, support.constant.color | #FAED26 | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #E056FD | bold |
| entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #C678DD | italic |
| variable.argument.css, variable.css, variable.scss | #E0E1E3 | — |
| meta.function.decorator.python, entity.name.function.decorator.python | #C678DD | italic |
| support.function.builtin.python | #56B6C2 | — |
| entity.name.type.lifetime.rust, storage.modifier.lifetime.rust | #E5C07B | italic |
| support.macro.rust, entity.name.function.macro.rust | #00FFFF | bold |
| keyword.other.unsafe.rust | #E06C75 | bold |
| keyword.package.go, keyword.import.go, entity.name.package.go | #FF3366 | italic |
| support.type.property-name.json, entity.name.tag.yaml | #4CC9F0 | — |
| keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql | #FF3366 | bold |
| entity.name.type.model.prisma | #E056FD | bold |
| keyword.other.dockerfile | #FF3366 | bold |
| variable.other.normal.shell, support.function.builtin.shell | #56B6C2 | — |
| markup.heading, entity.name.section.markdown | #00FFFF | bold |
| markup.quote | #E056FD | italic |
| markup.inline.raw, markup.fenced_code.block | #FAED26 | — |
| markup.underline.link, string.other.link | #56B6C2 | underline |