🎨
Branding

Logos

If you open brand.ex you will find a functional component for your logo. You can use it in your templates like so:
1
<.logo /> <!-- Will adapt to the user's color scheme (light/dark) -->
2
<.logo variant="light" />
3
<.logo variant="dark" />
4
<.logo class="h-20" />
5
​
6
<.logo_icon /> <!-- Display the icon part of your logo -->
7
<.logo_icon variant="light" />
8
<.logo_icon variant="dark" />
9
<.logo_icon class="h-20" />
Copied!
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

Colors

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:
1
const colors = require("tailwindcss/colors");
2
​
3
module.exports = {
4
content: [
5
"../lib/*_web/**/*.*ex",
6
"./js/**/*.js",
7
"../deps/petal_components/**/*.*ex",
8
],
9
darkMode: "class",
10
theme: {
11
extend: {
12
colors: {
13
primary: colors.blue,
14
secondary: colors.pink,
15
},
16
},
17
},
18
plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
19
};
Copied!
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.
​
Copy link
Contents
Logos
Colors