{"id":50916427,"url":"https://github.com/quinnjr/tailswatch","last_synced_at":"2026-06-16T15:32:17.175Z","repository":{"id":329036765,"uuid":"1116387006","full_name":"quinnjr/tailswatch","owner":"quinnjr","description":"Customizable Tailwind CSS 4+ themes for import into other applications. Bootswatch-inspired themes, Material Design themes, and programming language-inspired themes.","archived":false,"fork":false,"pushed_at":"2026-04-15T18:53:34.000Z","size":1052,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"develop","last_synced_at":"2026-04-15T20:33:44.034Z","etag":null,"topics":["bootswatch","css","css-variables","customizable","dark-mode","dark-theme","design-system","design-tokens","frontend","light-theme","material-design","scss","tailwind-css","tailwindcss","themes","theming","ui-themes","web-design"],"latest_commit_sha":null,"homepage":"https://quinnjr.github.io/tailswatch/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/quinnjr.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-14T18:57:24.000Z","updated_at":"2026-04-15T18:53:40.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/quinnjr/tailswatch","commit_stats":null,"previous_names":["pegasusheavy/tailswatch","quinnjr/tailswatch"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/quinnjr/tailswatch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quinnjr%2Ftailswatch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quinnjr%2Ftailswatch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quinnjr%2Ftailswatch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quinnjr%2Ftailswatch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quinnjr","download_url":"https://codeload.github.com/quinnjr/tailswatch/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quinnjr%2Ftailswatch/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34412788,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-16T02:00:06.860Z","response_time":126,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootswatch","css","css-variables","customizable","dark-mode","dark-theme","design-system","design-tokens","frontend","light-theme","material-design","scss","tailwind-css","tailwindcss","themes","theming","ui-themes","web-design"],"created_at":"2026-06-16T15:32:16.223Z","updated_at":"2026-06-16T15:32:17.170Z","avatar_url":"https://github.com/quinnjr.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tailswatch\n\n[![npm version](https://img.shields.io/npm/v/@pegasusheavy/tailswatch.svg)](https://www.npmjs.com/package/@pegasusheavy/tailswatch)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![CI](https://github.com/pegasusheavy/tailswatch/actions/workflows/ci.yml/badge.svg)](https://github.com/pegasusheavy/tailswatch/actions/workflows/ci.yml)\n\nCustomizable Tailwind CSS 4+ themes for import into other applications. Includes 43 ready-to-use themes inspired by Bootswatch, Material Design, and popular programming languages.\n\n**[Live Demo \u0026 Documentation →](https://pegasusheavy.github.io/tailswatch)**\n\n## Installation\n\n```bash\nnpm install @pegasusheavy/tailswatch\n# or\npnpm add @pegasusheavy/tailswatch\n# or\nyarn add @pegasusheavy/tailswatch\n```\n\n## Quick Start\n\nImport a theme in your CSS:\n\n```css\n@import \"@pegasusheavy/tailswatch/themes/cosmo\";\n```\n\nOr import directly in your JavaScript/TypeScript:\n\n```js\nimport \"@pegasusheavy/tailswatch/themes/cosmo\";\n```\n\nThat's it! Your Tailwind classes will now use the Cosmo theme colors.\n\n## Available Themes (43)\n\n### Bootswatch-Inspired (25)\n\n| Theme | Description | Mode |\n|-------|-------------|------|\n| `cerulean` | A calm blue sky theme | Light |\n| `cosmo` | An ode to Metro | Light |\n| `cyborg` | Jet black and electric blue | Dark |\n| `darkly` | Flatly in night mode | Dark |\n| `flatly` | Flat and modern | Light |\n| `journal` | Crisp like a new sheet of paper | Light |\n| `litera` | The medium is the message | Light |\n| `lumen` | Light and shadow | Light |\n| `lux` | A touch of class | Light |\n| `materia` | Material is the metaphor | Light |\n| `minty` | A fresh feel | Light |\n| `morph` | A neumorphic layer | Light |\n| `pulse` | A trace of purple | Light |\n| `quartz` | A glassmorphic layer | Dark |\n| `sandstone` | A touch of warmth | Light |\n| `simplex` | Mini and minimalist | Light |\n| `sketchy` | A hand-drawn look | Light |\n| `slate` | Shades of gunmetal gray | Dark |\n| `solar` | A spin on Solarized | Dark |\n| `spacelab` | Silvery and sleek | Light |\n| `superhero` | The brave and the blue | Dark |\n| `united` | Ubuntu orange and unique font | Light |\n| `vapor` | A cyberpunk aesthetic | Dark |\n| `yeti` | A friendly foundation | Light |\n| `zephyr` | Breezy and light | Light |\n\n### Material Design (12)\n\n| Theme | Description | Mode |\n|-------|-------------|------|\n| `material-light-blue` | Material Blue on light | Light |\n| `material-dark-blue` | Material Blue on dark | Dark |\n| `material-light-indigo` | Material Indigo on light | Light |\n| `material-dark-indigo` | Material Indigo on dark | Dark |\n| `material-light-purple` | Material Purple on light | Light |\n| `material-dark-purple` | Material Purple on dark | Dark |\n| `material-light-teal` | Material Teal on light | Light |\n| `material-dark-teal` | Material Teal on dark | Dark |\n| `material-light-green` | Material Green on light | Light |\n| `material-dark-green` | Material Green on dark | Dark |\n| `material-light-deeporange` | Material Deep Orange on light | Light |\n| `material-dark-deeporange` | Material Deep Orange on dark | Dark |\n\n### Programming Language-Inspired (4)\n\n| Theme | Description | Mode |\n|-------|-------------|------|\n| `oxide` | Rust programming language inspired | Dark |\n| `gopher` | Go programming language inspired | Light |\n| `evergreen` | Node.js ecosystem inspired | Dark |\n| `kernel` | C/C++ inspired, professional and battle-tested | Dark |\n\n### Base Themes (2)\n\n| Theme | Description | Mode |\n|-------|-------------|------|\n| `default` | Generic Tailwind CSS, no customization | Light |\n| `dark` | Simple dark mode base | Dark |\n\n## Usage Examples\n\n### With Tailwind CSS 4+\n\n```css\n/* In your main CSS file */\n@import \"tailwindcss\";\n@import \"@pegasusheavy/tailswatch/themes/cosmo\";\n```\n\n### Dynamic Theme Switching\n\n```html\n\u003c!-- Load themes as separate stylesheets --\u003e\n\u003clink id=\"theme\" rel=\"stylesheet\" href=\"node_modules/@pegasusheavy/tailswatch/dist/themes/cosmo.css\"\u003e\n\n\u003cscript\u003e\n  function switchTheme(themeName) {\n    document.getElementById('theme').href =\n      `node_modules/@pegasusheavy/tailswatch/dist/themes/${themeName}.css`;\n  }\n\u003c/script\u003e\n```\n\n### Using CSS Variables\n\nAll themes expose CSS custom properties you can use directly:\n\n```css\n.my-component {\n  background: var(--color-primary-500);\n  color: var(--color-text);\n  border-radius: var(--radius-md);\n  box-shadow: var(--shadow-md);\n}\n```\n\n## Design Tokens\n\nEach theme provides a comprehensive set of design tokens:\n\n### Colors (50-950 shades)\n- `--color-primary-{shade}` - Primary brand color\n- `--color-secondary-{shade}` - Secondary color\n- `--color-accent-{shade}` - Accent color\n- `--color-success-{shade}` - Success states\n- `--color-warning-{shade}` - Warning states\n- `--color-error-{shade}` - Error states\n- `--color-info-{shade}` - Info states\n\n### Surfaces\n- `--color-background` - Page background\n- `--color-foreground` - Default text color\n- `--color-surface` - Card/component background\n- `--color-surface-elevated` - Elevated surface\n- `--color-surface-muted` - Muted surface\n- `--color-border` - Border color\n\n### Typography\n- `--font-sans` - Sans-serif font stack\n- `--font-heading` - Heading font stack\n- `--font-mono` - Monospace font stack\n\n### Effects\n- `--radius-{size}` - Border radius (sm, default, md, lg, xl)\n- `--shadow-{size}` - Box shadows (sm, default, md, lg, glow)\n\n## Creating Custom Themes\n\nCreate a new theme file:\n\n```css\n@use \"tailwindcss\";\n\n:root {\n  /* Define your color palette */\n  --color-primary-50: #eff6ff;\n  --color-primary-100: #dbeafe;\n  --color-primary-200: #bfdbfe;\n  --color-primary-300: #93c5fd;\n  --color-primary-400: #60a5fa;\n  --color-primary-500: #3b82f6;\n  --color-primary-600: #2563eb;\n  --color-primary-700: #1d4ed8;\n  --color-primary-800: #1e40af;\n  --color-primary-900: #1e3a8a;\n  --color-primary-950: #172554;\n\n  /* ... define other colors ... */\n\n  color-scheme: light;\n}\n\n@theme {\n  --color-primary-50: var(--color-primary-50);\n  --color-primary-100: var(--color-primary-100);\n  /* ... register with Tailwind ... */\n}\n```\n\n## Project Structure\n\n```\ntailswatch/\n├── src/\n│   └── themes/           # Theme source files\n│       ├── cosmo.scss\n│       ├── material-light-blue.scss\n│       └── ...\n├── dist/                 # Compiled CSS (generated)\n│   └── themes/\n├── docs/                 # Documentation site (Angular)\n└── scripts/              # Build scripts\n```\n\n## Development\n\n```bash\n# Install dependencies\npnpm install\n\n# Build all themes\npnpm run build\n\n# Run documentation site\ncd docs \u0026\u0026 pnpm install \u0026\u0026 pnpm start\n```\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.\n\n## License\n\n[MIT](LICENSE) © Pegasus Heavy Industries LLC\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquinnjr%2Ftailswatch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquinnjr%2Ftailswatch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquinnjr%2Ftailswatch/lists"}