🎨Styles

Fonts

Bullet Launch uses Manrope throughout the template and Poppins for headings. These are clean, modern fonts.

You can change the heading and app fonts in the Styles panel in the Style variables tab.

Colours

Bullet Launch uses a colour scheme defined in the Styles panel. The default Primary colour is blue.

You can customise the colours to suit your own brand. The main colours to change are:

• Primary - this is the primary colour of the brand and is the 500 hue.

• Primary 900 - a dark version of the primary colour.

• Primary 700 - a slightly dark version of the primary colour.

• Primary 300 - a slightly light version of the pimary colour.

• Primary 100 - a light version of the primary colour.

• Text - this is the colour of heading and body text throughout the app. It should generally be a dark colour.

To generate your own colour shades based on a single primary colour, I recommend using this page. You then just need to copy in the HEX codes to the appropriate colours in the styles panel.

The "random" colours are used in the app where rainbow colours are applied. You can update these if you wish to, or simply not use them.

Styles

Bullet Launch uses universal styles throughout the app which are defined in Styles panel under Element styles. This is best practice as it reduces the compute and load time of the app, while also letting you control styles app-wide from one place.

Be careful when updating styles as they may be used by elements you're not aware of.

Before you update a style it's a good idea to use the app-wide search feature to find all instances where that style is used.

How dark mode works

There is a field on the user data type called Dark mode? (yes/no) which specifies whether the user wants to view the app in dark mode or not.

Throughout the app, primarily in the defined styles, there are conditionals which specify that if the Current user's Dark mode is yes, one or more colours related to that element should change to the dark mode version.

Switching between dark/light mode works smoothly on desktop, however on mobile it can result in a rather odd looking situation where the background colour of part of the page is still the opposite of what it should be. This is because the background colour of the page is set by CSS styling and this is not applied until the page is reloaded.

For this reason the dark/light mode switch is not visible on mobiles. You may wish to make it available to mobile users, in which case you may want to force a reload of the page every time the user changes the mode.

Trick for light mode/dark mode repeating group separators

Unfortunately Bubble does not allow conditional settings for the colour of separators in repeating groups. This means it is not possible to change the separator colour when the user switches to dark mode.

To get around this, all repeating groups use a mid-tone grey colour with a low opacity for the separators. This looks relatively good in both light and dark mode without needing to change the color.

• Very light grey (e.g. Separators in repeating group tables): Grey 500 at 10% opacity

• Light grey (e.g. Tab group separators): Grey 500 at 30% opacity