Theme
Beatbooker provides a default theme, but you can customize it to fit your visual identity. You can adjust several parameters:
- Logo: add your logo to replace the Beatbooker logo
- Radius: adjust the appearance of the corners of interface elements
- Typography: choose the fonts for texts and titles
- Colors: customize the colors of the application visible to users
- Textures: add textures to enrich the appearance of blocks
- Patterns: add backgrounds patterns to give a unique touch to your pages
If you want to go even further, feel free to contact us. We offer an optional service to help you create a custom theme that will perfectly match your vision.
Logo
You can replace the Beatbooker logo with your own logo. It will be displayed in the header and footer. You need to provide us with the corresponding file in SVG format. You can also adjust the width of the logo for desktop and mobile.
- logo width on desktop → by default 200px
- logo width on mobile → by default 150px
Radius
You can choose between rounded corners, which give a softer and more modern look, or square corners, which offer a sharper and more structured appearance.
- radius → by default rounded
Typography
You can choose two fonts for texts and titles. However, you must provide us with the corresponding font files and ensure that you have the usage rights for these fonts.
- titles → by default "Audiowide"
- other texts → by default "Inter"
Colors
You can customize the background, text, and separator colors for the header, footer, light blocks, accent blocks, and dark blocks. You can set a predefined palette and choose specific colors.
To use the predefined palette, choose two shades from the available colors:
- accent shade → by default "indigo"
- neutral shade → by default "gray"
The accent shade is used for buttons and colored links, and some highlighted elements. It is possible to choose specific colors:
- interactive elements → by default bright (accent 600)
- interactive elements on hover → by default slightly lighter (accent 500)
- accentuated borders → by default quite light (accent 300)
- accentuated symbols → by default quite light (accent 300)
The neutral shade is used for backgrounds, texts, and borders. This allows for visual consistency and theme generation based on a single color. It is also possible to choose specific colors for each element of the application:
- header background → by default almost black (neutral 900)
- header text → by default almost white (neutral 50)
- footer background → by default almost black (neutral 900)
- footer text → by default almost white (neutral 50)
- light blocks background → by default white
- light blocks text → by default almost black (neutral 900)
- accent blocks background by default light gray (neutral 200)
- accent blocks text → by default almost black (neutral 900)
- dark blocks background → by default almost black (neutral 900)
- dark blocks text → by default almost white (neutral 50)
- secondary text for light or accent blocks → by default dark gray (neutral 800)
- secondary text for dark blocks → by default medium gray (neutral 400)
- separator for light blocks → by default medium gray (neutral 300)
- separator for dark blocks → by default medium gray (neutral 400)
Textures
You can add transparent textured backgrounds (but very discreet, to preserve the readability of the content) to enrich the appearance of blocks and make them less uniform. Provide a background for light blocks, and another for dark blocks.
- texture on light or accent blocks → by default none
- texture on dark blocks → by default none
Patterns
You can add patterns to give a unique touch to your pages. Provide one pattern for light blocks and another for dark blocks. These patterns have a transparent background and are applied as backgrounds to the pages, and can have character since the page content will not be displayed on top of them. It is possible to adjust the size of the pattern so that it integrates harmoniously into the pages.
- pattern on light blocks → by default a blue grid
- pattern on dark or accent blocks → by default a blue grid
- pattern size → by default "250px"