Graceful Theme

Theme
,
140

Is it possible to define a specific color for the background container without affecting the Dark mode background color?

We have selected Disable the background image and tiling settings above from the Graceful theme settings and we have added this CSS:

// Background color instead of Graceful background image
.background-container {
  background-color: #FAF0FC;
}

This light violet looks great in the default color palette, but it also appears in the Dark one instead of the dark gray, which is not good.

The original CSS mentions a variable but I donā€™t know how to use it in a way that provides different colors for light or dark:

background-color: var(--gf-primary-very-low-or-primary-low, #f8f8f8);

Important detail, we just want to change the color of the main background, not the background of the areas with text. This is why we canā€™t use the Color Palette values directly (unless I have missed something).

141

Still trying to change the background for the default (light) mode while keeping the dark background for dark mode.

Even if we want a plain color for the light background, anything we have tried with CSS adds the same color to the background in dark mode.

This is why we are trying with an image instead. When the background image is set to default, the stock Graceful image background is used for light, but for dark mode there is a dark background. It would be great if we could add a custom image that would be used only the light mode as well, but when we try, the same image is used in dark mode. Because the background image is bright and fitting for the light mode, it ruins dark mode.

Can someone help me figure out this, please?

142

A quick temporary workaround is to use a bg with like 20-50% opacity so it picks up the background colour on both light and dark

1 Like
143

@piffy Thank you very much. This is a decent workaround indeed.

I got lost in the math of calculating a SVG number that with a 20% opacity will, result in #FAF0FC but this gets close enough to my eyes, and dark mode is dark. Phew!

// Background color instead of Graceful background image
.background-container {
  background: rgb(200 190 192 / 20%);
}
144

Thanks for reporting it, this update will fix it

1 Like
145

In the theme option, if you click on ā€œedit the parametersā€
You can change the json for this :

[
	{
		"setting": "background_image",
		"value": "false"
	},
	{
		"setting": "tile_background",
		"value": false
	},
	{
		"setting": "no_background_image",
		"value": false
	}
]

And it removes the background svg

1 Like