Theme generator

Choose a style and palette, then export an editable theme.

Open the theme generator to compare Default, Glow, and Soft. A style controls component design. A palette controls colors. A saved theme records both choices. Templates supply page layouts and content separately. Open Design in the header to change the preview style or palette.

Workspace

Make room for good work.

---
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "@/components/ui/select"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/ui/accordion"
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogClose,
} from "@/components/ui/dialog"
---

<div class="@container/workbench mx-auto w-full max-w-4xl p-6 sm:p-10">
  <header class="mb-8 flex flex-wrap items-center justify-between gap-4">
    <div>
      <Badge variant="secondary">Workspace</Badge>
      <h2 class="mt-3 text-3xl font-semibold tracking-tight">
        Make room for good work.
      </h2>
    </div>
    <Dialog>
      <DialogTrigger variant="outline">Invite someone</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Share your workspace</DialogTitle>
          <DialogDescription>
            Preview the dialog, input, and button styles together.
          </DialogDescription>
        </DialogHeader>
        <Label for="invite-email">Email address</Label>
        <Input id="invite-email" type="email" placeholder="you@example.com" />
        <Label for="invite-role">Role</Label>
        <Select defaultValue="member">
          <SelectTrigger id="invite-role" class="w-full">
            <SelectValue>Choose a role</SelectValue>
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="member">Member</SelectItem>
            <SelectItem value="viewer">Viewer</SelectItem>
          </SelectContent>
        </Select>
        <DialogClose>Done</DialogClose>
      </DialogContent>
    </Dialog>
  </header>
  <Tabs defaultValue="overview" class="w-full">
    <TabsList>
      <TabsTrigger value="overview">Overview</TabsTrigger>
      <TabsTrigger value="details">Details</TabsTrigger>
    </TabsList>
    <TabsContent value="overview">
      <div class="mt-6 grid gap-6 @min-xl/workbench:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>A new project</CardTitle>
            <CardDescription>
              Give your next idea a place to start.
            </CardDescription>
          </CardHeader>
          <CardContent class="grid gap-3">
            <Label for="project-name">Project name</Label>
            <Input id="project-name" placeholder="Your next idea" />
          </CardContent>
          <CardFooter class="flex flex-wrap gap-3">
            <Button>Create project</Button>
            <Button variant="outline">View projects</Button>
          </CardFooter>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle>Built for your team</CardTitle>
            <CardDescription>One style across all the details.</CardDescription>
          </CardHeader>
          <CardContent>
            <Accordion collapsible>
              <AccordionItem value="colors">
                <AccordionTrigger>Can I change the colors?</AccordionTrigger>
                <AccordionContent>
                  Choose a palette above. The selected style stays the same.
                </AccordionContent>
              </AccordionItem>
              <AccordionItem value="source">
                <AccordionTrigger>Do I own the source?</AccordionTrigger>
                <AccordionContent>
                  Yes. The registry installs editable Astro and CSS files.
                </AccordionContent>
              </AccordionItem>
            </Accordion>
          </CardContent>
          <CardFooter>
            <Button size="sm" variant="secondary">
              Explore the components
            </Button>
          </CardFooter>
        </Card>
      </div>
    </TabsContent>
    <TabsContent value="details">
      <p class="py-6 text-muted-foreground">
        Try each style with the same palette, then use the site toggle to check
        light and dark modes.
      </p>
    </TabsContent>
  </Tabs>
</div>

Open preview in a new tab

Use an exported theme

Save the theme JSON, then generate a site from this workspace:

bun run gnostic create ../my-site --template portfolio --theme ./my-theme.json --yes

Or select the same settings directly:

bun run gnostic create ../my-site --template portfolio --style glow --palette earth --yes

Run bun run gnostic create for guided setup. Add --dry-run to a command to list the changes without writing files. The CLI is available from this private workspace; it is not yet an npm package. The earlier generate command still works.

Apply a theme to an existing site

The project needs Astro, Gnostic registry base styles, and components.json. Run these commands from this workspace:

bun run gnostic theme check ./my-theme.json
bun run gnostic theme apply ./my-theme.json --cwd ../my-site --dry-run
bun run gnostic theme apply ./my-theme.json --cwd ../my-site

The CLI adds gnostic-theme.css beside the configured global stylesheet and imports it after the layout’s other imports. It sets the layout’s appearance. When several document layouts exist, add --layout src/layouts/site.astro. This path is relative to the target project. The theme file path is relative to the directory where you run the command.

Commit the .gnostic/ folder with your theme. It records the applied recipe and file hashes. The CLI stops before replacing a managed file with local edits. Component files, content, and base styles stay intact. New generated templates share the style through src/lib/theme.ts. Explicit appearance props in other sites keep their value. A computed HTML appearance requires manual setup.

Export CSS

bun run gnostic theme export ./my-theme.json --out ./my-theme.css

Check, apply, and export accept JSON, YAML, or a built-in preset such as earth. Export writes CSS to stdout when --out is absent. Add --format json to export normalized JSON. Use the CSS export to merge local theme edits manually.

To use the CSS export manually, import it after src/styles/global.css. Set data-appearance on <html> to the exported style: default, glow, or soft. The file contains the selected palette and style rules. Install components from the registry as usual. The CSS does not include Astro components or their browser behavior.

The Default palette uses the workspace theme.css without deriving new colors. The site light/dark toggle controls both the documentation and the examples.