We have made a few themes available for you to use. You are free to choose the theme you want for your site or if you want to, you can create your own.
The themes are made using Tailwind CSS.
You can find the pre-made themes in the /resources/css/app.css file. You can use the themes as they are or you can modify them to fit your needs.
To change the application theme, go to the /resources/views/app.blade.php file and change it to the one you want. The default theme is theme-neon.
<body class="font-sans antialiased theme-neon">
@inertia
</body>Throughout the project, we use a set of Tailwind theme classes to define the colors of components. You can find these classes in the tailwind.config.js file.
Here's an example of how the theme classes are used in the Features component. The text-skin-* classes are the theme classes.
<template>
<div class="mx-auto max-w-7xl scroll-smooth" id="features">
<div class="mx-auto max-w-4xl lg:text-center">
<h2 class="text-base font-semibold leading-7 text-skin-special">
{{ props.subTitle }}
</h2>
<h1 class="mt-2 text-3xl font-bold tracking-tight text-skin-base sm:text-4xl">
{{ props.title }}
</h1>
<p class="mt-4 text-lg leading-8 text-skin-muted">
{{ props.description }}
</p>
<p class="mt-2 text-skin-muted">
{{ props.subDescription }}
</p>
</div>
<div class="mx-auto mt-12 sm:mt-20 lg:mt-18 lg:max-w-5xl">
<dl class="grid max-w-xl grid-cols-1 gap-x-4 gap-y-6 lg:max-w-none lg:grid-cols-4 sm:grid-cols-2 lg:gap-y-16">
<div v-for="feature in features" :key="feature.name" class="relative pl-16">
<dt class="text-base font-semibold leading-7 text-skin-base">
<div class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-skin-button-accent">
<component :is="feature.icon" class="h-6 w-6 text-skin-inverted" aria-hidden="true" />
</div>
{{ feature.name }}
</dt>
<dd class="mt-2 text-base leading-7 text-skin-muted" v-html="feature.description" />
</div>
</dl>
</div>
</div>
</template>