Comment on page
🎨
Branding
If you open
core_components.ex you will find some functional components for your logo. You can use them in your templates like so:<.logo /> <!-- Will adapt to the user's color scheme (light/dark) -->
<.logo variant="light" />
<.logo variant="dark" />
<.logo class="h-20" />
<.logo_icon /> <!-- Display the icon part of your logo -->
<.logo_icon variant="light" />
<.logo_icon variant="dark" />
<.logo_icon class="h-20" />
For this to work with your own logo, you will need to replace the Petal logos:
/priv/static/images/logo_dark.svg/priv/static/images/logo_light.svg/priv/static/images/logo_icon_dark.svg/priv/static/images/logo_icon_light.svg/priv/static/images/favicon.png/priv/static/images/open-graph.png
Use Figma to quickly export your assets
It's very easy to just replace the icon and text with your own brand, and then it will export all 6 files for you to place straight into your
/priv/static/images folder. 
Easily export all your assets in one go
Petal Pro and Petal Components expects you to define a primary and secondary color. These typically represent your brand.
In the file
/assets/tailwind.config.js you will see the primary and secondary colors defined:const colors = require("tailwindcss/colors");
module.exports = {
content: [
"../lib/*_web/**/*.*ex",
"./js/**/*.js",
"../deps/petal_components/**/*.*ex",
],
darkMode: "class",
theme: {
extend: {
colors: {
primary: colors.blue,
secondary: colors.pink,
},
},
},
plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
};
By default the primary color is blue, and the secondary is pink. You can check out a list of Tailwind color options here. If you want a custom color, you can check out tailwind.ink.
Last modified 5mo ago