@quinus/tailwind-zed-one-dark

Reusable Tailwind v4 theme package based on Zed One Dark core UI colors.

Install

npm install @quinus/tailwind-zed-one-dark

Use with Tailwind v4

Import the theme in your app CSS file:

@import "tailwindcss";
@import "@quinus/tailwind-zed-one-dark/theme.css";

Then use semantic or namespaced color utilities:

<main class="bg-background text-foreground border border-border">
  <button class="bg-primary text-background">Action</button>
  <p class="text-zed-one-text-muted">Muted text</p>
</main>

To scope the theme to a subtree, add theme-zed-one-dark on a container:

<section class="theme-zed-one-dark">
  ...
</section>

JavaScript/TypeScript exports

import { zedOneDark, zedOneDarkSemantic } from '@quinus/tailwind-zed-one-dark';

• zedOneDark: full snapshot with metadata and raw color tokens.
• zedOneDarkSemantic: convenience semantic token map.

Token source

The package includes a checked-in snapshot from Zed’s official One theme JSON (One Dark, appearance dark):

• Source: https://raw.githubusercontent.com/zed-industries/zed/main/assets/themes/one/one.json
• Snapshot date: 2026-02-24

Development

npm install
npm run check
npm run build
npm pack

Publish from GitHub Actions

This package is configured to build and publish from GitHub (not your local machine).

1. In GitHub repo settings, add an Actions secret named NPM_TOKEN with an npm automation token.
2. Bump the package version and push:

npm version patch
git push && git push --tags

3. Create a GitHub Release from that tag.
4. The Publish to npm workflow will run npm ci, npm run prepublishOnly, and npm publish --access public.

Example app

Run the minimal local example from the repository root:

cd example
npm install
npm run build

Then open the HTML file in your browser.

License

MIT