Which color scheme does the preloader use?

Product Support

AI-generated summary

The discussion revolves around customizing the color scheme of the splash screen preloader in Discourse. RBoy initially noticed a discrepancy between their site’s blue dots and the red-to-blue gradient on the meta Discourse site, seeking to understand how to change the colors. darkpixlz and Don clarified that the splash screen uses theme-defined color variables: --quaternary for the first two dots, --highlight for the third, and --tertiary for the last two. Canapin provided the relevant CSS code and explained that the colors depend on the user’s theme or default settings. RBoy confirmed the solution worked. JammyDodger suggested consolidating related threads to streamline the conversation.

1

Were you able to figure out how to change the colors of the dots on the splash screen? I noticed on my site it’s all blue, where as on this discourse site it’s red to blue gradients.

2

See this:

3

So it can’t be done? I’m trying to figure out why my site has only blue dots for the loading screen where as this meta discourse site has red and blue dots? I’m using a stock install - does it mean that meta discourse is using a custom splash screen? It’s just the colors of the dots, I think I may be missing something basic.

4

Could you point to where in the theme I can find this? I’m trying to see why the dots are only blue on my site where as it’s red and blue on this site. My install is a stock install and about 10 years old.

EDIT: Does it use the Color palettes, if so which ones does it use, or, does it take from the theme and if so where can one modify it?

5

I believe it uses the theme colors, if you really want, stuff like highlights.

6

Yeah I read that it’s not making sense. The themes use color palettes. I checked the palettes and they’re the stock ones. Now each one has sub headings like highlights and that for example is set to red, yet my site shows blue. Which sub headings are used to set the colors for the splash dots?

7

Splash screen uses 3 different color variables for dots.

1, 2: quarternary 3: highlight 4, 5: tertiary

8

Perfect, that worked. Thanks.

9

Hi RBoy :slight_smile:

The splash screen code is here:

The exact colors used for the dots are:

.dots:first-child {
  fill: var(--quaternary);
}

.dots:nth-child(2) {
  fill: var(--quaternary);
  animation-delay: 0.15s;
}

.dots:nth-child(3) {
  fill: var(--highlight);
  animation-delay: 0.3s;
}

.dots:nth-child(4) {
  fill: var(--tertiary);
  animation-delay: 0.45s;
}

.dots:nth-child(5) {
  fill: var(--tertiary);
  animation-delay: 0.6s;
}

It uses the color scheme chosen by the user (I think?) and the default one if no specific theme/scheme was chosen (it will be the case for visitors, for instance).

10

Just out of curiosity, but wasn’t this answered in:

https://meta.discourse.org/t/how-to-customize-the-loading-splash-screen/233016/10?u=jammydodger

https://meta.discourse.org/t/how-to-customize-the-loading-splash-screen/233016/11?u=jammydodger

Can we split and combine these somehow to keep the conversation in one place?

11

Yes they can be combined.