{"id":27213491,"url":"https://github.com/hmarzban/daisyui-matsu-theme","last_synced_at":"2025-04-14T23:46:26.061Z","repository":{"id":286936136,"uuid":"963014255","full_name":"HMarzban/daisyui-matsu-theme","owner":"HMarzban","description":"A Studio Ghibli inspired theme for DaisyUI - bringing the magical aesthetics of Ghibli films to your web projects with beautiful, whimsical components.","archived":false,"fork":false,"pushed_at":"2025-04-09T07:11:59.000Z","size":15441,"stargazers_count":26,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T17:54:11.783Z","etag":null,"topics":["daisyui","ghibli","matsu","react","shadcn-ui","tailwindcss","theme","ui-components","vibe-coding"],"latest_commit_sha":null,"homepage":"https://hmarzban.github.io/daisyui-matsu-theme/","language":"TypeScript","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/HMarzban.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2025-04-09T02:58:52.000Z","updated_at":"2025-04-12T17:27:41.000Z","dependencies_parsed_at":"2025-04-10T06:54:52.879Z","dependency_job_id":null,"html_url":"https://github.com/HMarzban/daisyui-matsu-theme","commit_stats":null,"previous_names":["hmarzban/daisyui-matsu-theme"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HMarzban%2Fdaisyui-matsu-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HMarzban%2Fdaisyui-matsu-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HMarzban%2Fdaisyui-matsu-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HMarzban%2Fdaisyui-matsu-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HMarzban","download_url":"https://codeload.github.com/HMarzban/daisyui-matsu-theme/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248610408,"owners_count":21132920,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["daisyui","ghibli","matsu","react","shadcn-ui","tailwindcss","theme","ui-components","vibe-coding"],"created_at":"2025-04-10T02:42:09.997Z","updated_at":"2025-04-12T17:54:15.076Z","avatar_url":"https://github.com/HMarzban.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ✨ Matsu Theme for DaisyUI\n\nHey there! Welcome to **Matsu** - a magical Studio Ghibli inspired theme for DaisyUI that brings the whimsical charm of Ghibli films to your web projects! 🌿\n\n![Matsu Theme Preview](./public/Gn_FI12XsAA2vPu.jpeg)\n\n## 🌟 What's This All About?\n\nMatsu captures the enchanting spirit of Studio Ghibli's art style with:\n\n- Soft watercolor textures that feel like hand-painted scenes\n- Warm, earthy tones inspired by \"My Neighbor Totoro,\" \"Spirited Away,\" and \"Howl's Moving Castle\"\n- Whimsical UI components that add a touch of magic to your projects\n- A clean, modern design that's both functional and beautiful\n\n## 🔧 CLI Tool\n\n**Add Matsu to your project in seconds:**\n\n```bash\nnpx daisyui-matsu-theme\n```\n\nThat's it! The CLI automatically detects and configures your DaisyUI project.\n\n[More CLI options →](./cli/README.md)\n\n## Manual Installation\n\n`globals.css`\nCopy and paste the matsu theme to your project's globals.css file to install the theme with all variables and texture setup.\n\n```css\n/* Add PT Serif font import for headings */\n@import url(\"https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700\u0026display=swap\");\n/* Add Nunito font import for body text */\n@import url(\"https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;700\u0026display=swap\");\n\n@import \"tailwindcss\";\n@plugin \"daisyui\";\n@plugin \"daisyui/theme\" {\n  name: \"matsu\";\n  default: true; /* set as default */\n  prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */\n  color-scheme: light; /* color of browser-provided UI */\n\n  /* Base colors - mapping from shadcn */\n  --color-base-100: oklch(0.91 0.048 83.6); /* background */\n  --color-base-200: oklch(0.92 0.042 83.6); /* card/popover */\n  --color-base-300: oklch(0.86 0.064 83.7); /* muted */\n  --color-base-content: oklch(0.41 0.077 78.9); /* foreground */\n\n  /* Primary colors */\n  --color-primary: oklch(0.71 0.097 111.7);\n  --color-primary-content: oklch(0.98 0.005 0);\n  --color-primary-focus: oklch(0.59 0.096 111.8); /* primary-border */\n\n  /* Secondary colors */\n  --color-secondary: oklch(0.88 0.055 83.6);\n  --color-secondary-content: oklch(0.51 0.077 78.9);\n\n  /* Accent colors */\n  --color-accent: oklch(0.86 0.055 83.6);\n  --color-accent-content: oklch(0.26 0.016 0);\n\n  /* Neutral colors - for borders and subtle elements */\n  --color-neutral: oklch(0.74 0.063 80.8); /* border/input */\n  --color-neutral-content: oklch(0.51 0.077 74.3); /* ring/muted-foreground */\n\n  /* Info colors - from chart colors */\n  --color-info: oklch(0.68 0.16 184.9); /* chart-2 */\n  --color-info-content: oklch(0.98 0.005 0);\n\n  /* Success colors */\n  --color-success: oklch(0.85 0.19 85.4); /* chart-4 */\n  --color-success-content: oklch(0.98 0.005 0);\n\n  /* Warning colors */\n  --color-warning: oklch(0.74 0.19 66.3); /* chart-5 */\n  --color-warning-content: oklch(0.98 0.005 0);\n\n  /* Error colors - maps to destructive */\n  --color-error: oklch(0.63 0.24 29.2); /* destructive */\n  --color-error-content: oklch(0.97 0.018 0); /* destructive-foreground */\n\n  /* border radius */\n  --radius-selector: 0.625rem; /* checkboxes, toggles, badges */\n  --radius-field: 0.625rem; /* buttons, inputs, selects, tabs */\n  --radius-box: 0.625rem; /* cards, modals, alerts */\n\n  /* Base sizes */\n  --size-selector: 0.25rem;\n  --size-field: 0.25rem;\n\n  /* Border size */\n  --border: 2px;\n\n  /* Effects */\n  --depth: 1; /* For shadow effect - matsu uses custom shadow-primary */\n  --noise: 0;\n}\n\n:root:has(input.theme-controller[value=\"matsu\"]:checked),\n[data-theme=\"matsu\"] {\n  /* Typography */\n  --font: \"Nunito\", sans-serif;\n  --font-family: \"Nunito\", sans-serif;\n  --font-family-serif: \"PT Serif\", serif;\n  --font-weight-light: 700;\n  --font-weight-normal: 700;\n  --font-weight-medium: 700;\n  --font-weight-semibold: 700;\n  --font-weight-bold: 700;\n\n  --primary-border: oklch(0.59 0.096 111.8);\n  --destructive: oklch(0.63 0.24 29.2);\n  --destructive-border: oklch(0.43 0.24 29.2);\n\n  /* Shadows */\n  --shadow-xs: 0 2px 0 0 oklch(0.74 0.063 80.8);\n  --shadow-sm: 0 2px 0 0 oklch(0.74 0.063 80.8);\n  --shadow-md: 0 2px 0 0 oklch(0.74 0.063 80.8);\n  --shadow-lg: 0 2px 0 0 oklch(0.74 0.063 80.8);\n  --shadow-xl: 0 2px 0 0 oklch(0.74 0.063 80.8);\n\n  body {\n    font-family: var(--font-family);\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n\n  /* Custom shadows from matsu theme */\n  .shadow-primary {\n    box-shadow: 0 2px 0 0 var(--color-primary-focus);\n  }\n\n  .shadow-destructive {\n    box-shadow: 0 2px 0 0 var(--color-error);\n  }\n\n  .shadow-destructive-border {\n    box-shadow: 0 2px 0 0 var(--color-error);\n  }\n\n  /* Custom component styles to mimic matsu shadcn components */\n  .btn {\n    font-weight: 700;\n    gap: 0.5rem;\n    border-width: 2px;\n    background-size: 100% 100%;\n    transition: all 150ms;\n  }\n\n  .btn-primary {\n    box-shadow: 0 2px 0 0 var(--color-primary-focus);\n  }\n\n  .btn-error {\n    box-shadow: 0 2px 0 0 var(--color-error);\n  }\n\n  /* Input with matsu style */\n  .input {\n    border-width: 2px;\n    font-weight: 500;\n  }\n\n  /* Card with matsu style */\n  .card {\n    border-width: 2px;\n  }\n\n  .card-title {\n    font-family: var(--font-family);\n    font-weight: 700;\n  }\n\n  /* Alert with matsu style */\n  .alert {\n    border-width: 2px;\n  }\n\n  .texture {\n    background-image: url(https://hmarzban.github.io/daisyui-matsu-theme/assets/texture.jpg);\n    background-size: 100% 100%;\n    background-repeat: repeat;\n    opacity: 0.12;\n    mix-blend-mode: multiply;\n    z-index: 100;\n    isolation: isolate;\n    position: fixed;\n    inset: 0;\n    width: 100vw;\n    height: 100dvh;\n    pointer-events: none;\n  }\n}\n```\n\n`index.html`\nAlternatively, you can simply add the data-theme=\"matsu\" attribute to your HTML element like:\n\n```html\n\u003chtml data-theme=\"matsu\"\u003e\n  \u003c!-- Your content here --\u003e\n\u003c/html\u003e\n```\n\n`layout.tsx`\nCreate a custom layout component in your project and wrap your pages with it to use the theme.\n\n```tsx\nimport React from \"react\";\n\ntype prop = {\n  children: React.ReactNode;\n};\n\nexport default function Layout({ children }: prop) {\n  return (\n    \u003cdiv className=\"relative\"\u003e\n      \u003cdiv className=\"texture\" /\u003e\n      {children}\n    \u003c/div\u003e\n  );\n}\n```\n\n## 🙋‍♂️ How Can You Help?\n\n### Feedback \u0026 Contributions\n\n- **Found a bug?** [Open an issue](https://github.com/HMarzban/daisyui-matsu-theme/issues)\n- **Have an idea?** Share it on [Twitter/X](https://x.com/mhossein_) or through issues\n- **Want to contribute?** Fork, code, and submit a pull request\n- **Like the project?** Star it and share with friends\n\nYour support helps make this project better for everyone!\n\n## 📄 License\n\nReleased under the MIT License - so you're free to create your own magic with it!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhmarzban%2Fdaisyui-matsu-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhmarzban%2Fdaisyui-matsu-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhmarzban%2Fdaisyui-matsu-theme/lists"}