Ether Themes

8 dark token-driven color themes and 392 web development snippets for VS Code and Cursor.

Install on VS Code · Install on Cursor · GitHub

---

Install

Search Ether Themes in the Extensions panel, or use the links above.

Quick pick: Ctrl+K Ctrl+T (Windows/Linux) · Cmd+K Cmd+T (macOS)

Themes

Each palette is built anchor-first: pick surfacePanel (sidebar) and surfaceEditor (editor), then derive surfaces, text, accent, and syntax from that family. All eight pass WCAG contrast validation at build time.

Theme	Side panel	Editor	Accent	Character
Ether Graphite	#161618	#1C1C1E	Steel blue	Pure neutral gray
Ether Storm	#181C22	#1C2028	Soft blue	Cool blue-gray slate
Ether Ember	#1A1816	#201E1A	Copper	Warm charcoal
Ether Luna	#0C0E14	#101218	Lunar silver	Deepest moonlit night
Ether Moss	#181C18	#1C221E	Sage	Forest gray-green
Ether Dusk	#1A1820	#1E1C28	Rose	Plum twilight
Ether Ink	#141412	#1A1A18	Cinnabar	Warm sumi ink (neutral black)
Ether Stone	#1C1A18	#22201C	Terracotta	Warm stone

Highlights

• 8 dark themes — distinct surface temperatures, restrained accents, no light variants
• 392 snippets — Ether templates plus ES7+ React/Redux/React-Native patterns for JavaScript, TypeScript, JSX, TSX, HTML, and CSS
• Token-driven build — palette files in src/palettes/ generate full .color-theme.json files
• Contrast-aware — WCAG validation on all syntax roles and critical UI tokens at build time
• 58 shared syntax rules — broad language coverage with semantic highlighting enabled
• Polished workbench — consistent list, tab, status bar, and button hover/selection states
• Works in Cursor — published on Open VSX and the VS Code Marketplace

Snippets

Ether ships 392 snippets across six language scopes. Type a prefix in an editor file and accept the suggestion to insert the template.

Language	File types	Count	Example prefixes
JavaScript	.js, .mjs, .cjs	43	fn, fetch, debounce, groupby, pipe, addevent
TypeScript	.ts	43	interface, discriminated, returntype, branded, fetch
React (JSX)	.jsx	58	rfc, rfcserver, usedebounce, rfquery, rfcompound
React (TSX)	.tsx	63	rfc, rfpropschildren, useactionstate, rferrorboundary
HTML	.html, .htm	37	html5, og, dialog, table, layout, datalist
CSS	.css	37	flexcenter, modernreset, fluidtype, darkmode, layer

React and JSX/TSX

Prefix	Description
rfc	Functional component
rfcserver	Async server component
rfcde	Default export component
rfca	Arrow function component
rfcmemo	memo component with displayName
rfcforwardref	forwardRef with ComponentPropsWithoutRef
rfclazy	Lazy loaded component with accessible fallback
usestate	useState hook
useeffect	useEffect hook
useactionstate	React 19 useActionState
usedebounce	Debounce custom hook
uselocalstorage	Local storage sync hook
usecallback	useCallback hook
usememo	useMemo hook
usehook	Custom hook scaffold
rfctx	Context provider with useMemo value
rferrorboundary	Error boundary with fallback prop
rfsuspense	Suspense wrapper
rffetch	Fetch with AbortController + response.ok
rfquery	Loading / error / data fetch pattern
rfcompound	Compound component pattern

JavaScript and TypeScript

Prefix	Description
fn	Function declaration
fetch	Fetch with headers and error handling
debounce / throttle	Utility timing helpers
arrow	Arrow function
im / imd	Import / named import
try	Try/catch
interface	TypeScript interface
discriminated	Discriminated union
returntype / parameters	Utility type helpers
gfn	Generic function
satisfies	satisfies expression

HTML and CSS

Prefix	Description
html5	Full HTML5 boilerplate with skip link
og	Open Graph meta tags
viewport	Viewport meta tag
dialog	Native dialog element
form / input / button	Form controls
table	Accessible data table
skiplink	Skip to content link
flexcenter / flexcol	Flexbox layouts
modernreset	Modern CSS reset
grid / gridcenter	Grid layouts
media / darkmode	Responsive and theme queries
keyframes	CSS animation keyframes
vars	CSS custom properties

Adding or editing snippets

Add a definition to a file in src/snippets/catalog/, then run npm run build. Snippet JSON and package.json contributions are regenerated automatically.

Each definition needs key, prefix, description, body, and languages. Use variants for language-specific overrides (for example typed TSX bodies).

Development

Prerequisites: Node.js 20+, VS Code or Cursor

git clone https://github.com/PRIYAANK2510/ether-theme.git
cd ether-theme
npm install
npm run build

Press F5 to open the Extension Development Host and preview themes live.

Script	Purpose
npm run build	Generate theme JSON, snippet files, and sync package.json
npm run watch	Auto-rebuild while editing palettes
npm run check	Lint, test, and build
npm run package	Build a .vsix locally
npm run publish:local	Package and publish (requires .env tokens)

Adding or removing a theme

Add: create src/palettes/ether-{name}.js with { id, label, type: "dark", uiTheme: "vs-dark", ui, syntax }. Set surfacePanel and surfaceEditor first, then derive the rest. Run npm run build.

Remove: delete the palette file and run npm run build. Orphan theme JSON and package.json entries are removed automatically.

Publishing

Add GitHub secrets VSCE_PAT and OVSX_PAT, then push changes to src/, themes/, or package.json — CI auto-bumps the patch version and publishes.

Manual publish: npm run publish:local or Actions → Release → Run workflow.

See docs/WORKFLOW.md for push-without-publish and local install notes.

License

MIT — see LICENSE.