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

blue.json

{
    "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

test

Further reading

• Read about reference in the Diátaxis framework