Themes
Saas Wind includes a simple theme system that allows you to customize the look and feel of your site.
Themes are JSON files located in the src/data/themes folder, and can also be edited directly inside the keystatic system that was included.
Colors are using the tailwind themes so are easy to create.
Sample theme file
Section titled “Sample theme file”{ "title": "Blue", "colors": { "primary": { "50": "#eff6ff", "100": "#dbeafe", "200": "#bfdbfe", "300": "#93c5fd", "400": "#60a5fa", "500": "#3b82f6", "600": "#2563eb", "700": "#1d4ed8", "800": "#1e40af", "900": "#1e3a8a" }, "secondary": { "50": "#faf5ff", "100": "#f3e8ff", "200": "#e9d5ff", "300": "#d8b4fe", "400": "#c084fc", "500": "#a855f7", "600": "#9333ea", "700": "#7e22ce", "800": "#6b21a8", "900": "#581c87" } }, "fonts": { "sans": "Poppins, sans-serif", "serif": "Merriweather, serif", "heading": "Montserrat, sans-serif" }, "header": { "style": "gradient", "logo": { "visible": true, "src": "/icon.png", "alt": "Logo Blue", "height": "8", "width": "auto" }, "siteTitle": { "visible": true } }}test
Further reading
Section titled “Further reading”- Read about reference in the Diátaxis framework