Branding

Main Website Downloads Roadmap Community

Search…

🎨

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:
<.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
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:
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.
​

Fundamentals - Previous

Dark mode

Next - Fundamentals

Seeding

Last modified 3mo ago

Copy link

On this page

Logos

Colors