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.

See this: [image]How to customize the loading splash screen? So now if you create a custom css to modify it it will only load ~after splash screen.

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.

[image]Introducing Discourse Splash - A visual preloader displayed while site assets load the splash dots will use the colors from your current theme 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?

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

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?

Hi RBoy :slight_smile: The splash screen code is here: app/views/common/_discourse_splash.html.erb fdd5e577d :root { --animation-state: paused; } /* user picked a theme where the "regular" scheme is dark */ :root { --primary: # ; --secondary: # ; --tertiary: # ; --quaternary: # ; This file has been truncated. show original 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).

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?

Which color scheme does the preloader use?

Product Support

Don October 6, 2023, 5:15am 7

Splash screen uses 3 different color variables for dots.

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

Topic		Replies	Views
How to customize the loading splash screen? Product Support splash	4	1855	August 29, 2024
Change loading animation Product Support splash	2	384	February 4, 2026
Introducing Discourse Splash - A visual preloader displayed while site assets load Announcements new-feature , splash	30	7256	October 9, 2023
How to disable "preloader-image" on Discourse instance? Product Support splash	8	395	May 9, 2026
How to change Discourse splash animation? Product Support splash	9	909	February 4, 2026

Which color scheme does the preloader use?

Related topics