Add capability to set background color in config.yaml

[mordilloSan]

First i would like to thank you for your work.

I am currently using your file browser inside a iframe and i would like the possibility to tune the look of it.

would be great if the config.yaml we could set the background color. That would make it match the rest of the app.

Keep up the excellent work!

[gtsteffaniak]

I could definitely add that as an option for the frontend config. I will add to the roadmap.

[mordilloSan]

Thanks for your work in trying to meet the comunity needs.

I can work on this feature if you don't mind.

My plan is:

Add a section under frontend: in config.yaml, for example:

frontend:
name: FileBrowser Quantum
backgroundDarkColor: "#141D24"
backgroundAltDarkColor: "#283136"
backgroundBaseColor: "white"
backgroundAltBaseColor: "#ddd

On backend startup, read the config and generate a CSS file that defines the :root and .dark-mode variables (just the variable assignments—the rest of the CSS remains static).

The frontend then imports that generated CSS for styling.

I want to make sure this fits your vision for the project and am happy to adjust to match your preferred code structure or workflow.

Does this approach sound good to you, or is there anything you’d like me to change?

Thanks again!

[gtsteffaniak]

thanks for picking this up, that config for frontend looks good.

As for implementation, I would recommend you to use golang's html/template for this, like how we pass most variables:

filebrowser/backend/http/static.go

Lines 42 to 64 in cc0212b

	data := map[string]interface{}{
	"Name": config.Frontend.Name,
	"DisableExternal": config.Frontend.DisableDefaultLinks,
	"darkMode": settings.Config.UserDefaults.DarkMode,
	"BaseURL": config.Server.BaseURL,
	"Version": version.Version,
	"CommitSHA": version.CommitSHA,
	"StaticURL": config.Server.BaseURL + "static",
	"Signup": settings.Config.Auth.Methods.PasswordAuth.Signup,
	"NoAuth": config.Auth.Methods.NoAuth,
	"LoginPage": auther.LoginPage(),
	"CSS": false,
	"EnableThumbs": !config.Server.DisablePreviews,
	"ExternalLinks": config.Frontend.ExternalLinks,
	"ExternalUrl": strings.TrimSuffix(config.Server.ExternalUrl, "/"),
	"OnlyOfficeUrl": settings.Config.Integrations.OnlyOffice.Url,
	"SourceCount": len(config.Server.SourceMap),
	"OidcAvailable": config.Auth.Methods.OidcAuth.Enabled,
	"PasswordAvailable": config.Auth.Methods.PasswordAuth.Enabled,
	"MediaAvailable": config.Integrations.Media.FfmpegPath != "",
	"MuPdfAvailable": config.Server.MuPdfAvailable,
	"UpdateAvailable": utils.GetUpdateAvailableUrl(),
	"DisableNavButtons": settings.Config.Frontend.DisableNavButtons,

you can template in CSS properties and use that. for example:

<style>
:root {
  --background: {{ .background-color }}
}
</style>

You can see how the templating works in the index.hml

Doing it via go templating means you don't have to worry about coordinating frontend changes with the backend, it all comes directly from the backend config at runtime.