Pages
Alright, let's dive in and have some fun with Formatic and its styling! It's all about making your form look like a million bucks without breaking a sweat. And the best part? You get to do it your way.
Formatic and TailwindCSS are like two peas in a pod. They work together to let you effortlessly tweak your form's design. Want to change the color scheme or the layout? Just pop into the tailwind.config.js file and get creative!
Formatic doesn't just let you style your form – it lets you theme it. And we're not talking about one or two themes; we're talking about 12 pre-defined themes!
Light mode? Check.
Dark mode? Double-check.
Alright, time to roll up your sleeves and create a custom theme! This is where you get to flex those creative muscles and make something truly unique.
To make your custom theme, you're going to want to find the resources/partials/_theme_switcher.antlers.html file. This little file is the mastermind behind switching themes based on user preference.
---
themes:
'#52525b': 'zinc'
'#e11d48': 'rose'
'#3b82f6': 'blue'
'#22c55e': 'green'
'#ea580c': 'orange'
'#f8fafc': 'slate'
'#fafaf9': 'stone'
'#f9fafb': 'gray'
'#fafafa': 'neutral'
'#dc2626': 'red'
'#facc15': 'yellow'
'#6d28d9': 'violet'
---
{{ partial src="partials/themes/{view:themes[theme_color]}" }}
Let's create a new color scheme and call it lucky_brand.antlers.html.
We'll place it under resources/partials/themes.
Here's what the file looks like:
<style>
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 221.2 83.2% 53.3%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 221.2 83.2% 53.3%;
--radius: 1rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 217.2 91.2% 59.8%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 224.3 76.3% 48%;
}
</style>