Guides
Theming
One accent token, and both libraries follow.
Every mds:* component uses Flux's accent tokens, so setting --color-accent once themes both libraries. Nothing in this kit hardcodes a brand color.
/* resources/css/app.css */
@theme {
--color-accent: var(--color-rose-600);
--color-accent-content: var(--color-rose-600);
--color-accent-foreground: var(--color-white);
}Dark mode
Every component in both libraries ships dark variants. Flux drives them from a dark class on the root element, which is why the Installation stylesheet has your app.css declare @custom-variant dark (&:where(.dark, .dark *)). A toggle is one Alpine expression. These reference pages themselves are light-only — see the dark styles in the demo or the layout gallery, which keep their own toggle.
<flux:button variant="subtle" icon="moon" x-data x-on:click="$flux.dark = ! $flux.dark" aria-label="Toggle dark mode" />Fonts
The kit ships no font and sets none — typography belongs to your app. Every mds:* component renders in Tailwind's font-sans, so this one token styles the whole kit. Point it at a Persian face in your app.css after the kit's import; Vazirmatn is the recommended default because Persian and Latin share one family and one scale. Then load the face: self-host it (put the woff2 files under public/fonts and declare an @font-face — the safe choice for traffic from Iran, where Google Fonts is slow or blocked), or add the Google Fonts <link> to <head>. Any other Persian face works the same way. This documentation loads Vazirmatn for itself; your app decides for itself.
متن بدنه با اعداد فارسی: ۱۴۰۵
/* resources/css/app.css, after the kit's import */
@theme {
--font-sans: 'Vazirmatn', ui-sans-serif, system-ui, sans-serif;
}
/* self-hosted (recommended for Iran) … */
@font-face {
font-family: 'Vazirmatn';
src: url('/fonts/Vazirmatn[wght].woff2') format('woff2');
font-weight: 100 900;
font-display: swap;
}
/* … or Google Fonts, in <head>:
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap" rel="stylesheet"> */Customising a component
Publish the views and edit them. Published views win over the package's, so you can change one component without forking anything.
php artisan vendor:publish --tag=mds-views