优雅主题

是否可以为背景容器定义特定颜色而不影响深色模式的背景颜色?

我们已从 Graceful 主题设置中选择了“禁用上方的背景图像和平铺设置”,并添加了以下 CSS:

// 背景颜色代替 Graceful 背景图像
.background-container {
  background-color: #FAF0FC;
}

这种浅紫色在默认调色板中看起来很棒,但在深色调色板中也会出现,而不是深灰色,这不太好。

原始 CSS 提到了一个变量,但我不知道如何以一种能为浅色或深色提供不同颜色的方式使用它:

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

重要细节是,我们只想更改主背景的颜色,而不是带有文本的区域的背景。这就是为什么我们不能直接使用调色板值(除非我错过了什么)。

仍然试图更改默认(浅色)模式的背景,同时为深色模式保留深色背景。

即使我们想要浅色背景的纯色,我们用 CSS 尝试过的任何方法都会将相同的颜色添加到深色模式的背景中。

这就是为什么我们尝试使用图像。当背景图像设置为默认值时,股票 Graceful 图像背景用于浅色模式,但深色模式有一个深色背景。如果我们能添加一个仅用于浅色模式的自定义图像,那就太好了,但当我们尝试时,深色模式也使用了相同的图像。因为背景图像明亮且适合浅色模式,所以它破坏了深色模式。

有人能帮我弄清楚这个吗?

一个快速的临时解决方法是使用 20-50% 不透明度的背景,这样它就能同时拾取浅色和深色的背景色。

1 个赞

@piffy 非常感谢。这确实是一个不错的解决方法。

我之前在计算一个 SVG 数字时迷失了方向,该数字的 20% 不透明度会得到 #FAF0FC,但对我来说,这已经足够接近了,而且暗模式也很暗。呼!

// 背景颜色代替优雅的背景图片
.background-container {
  background: rgb(200 190 192 / 20%);
}

感谢您的报告,此更新将修复它

1 个赞

在主题选项中,如果您点击“编辑参数”
您可以更改此处的 JSON:

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

这将删除背景 SVG

2 个赞

有人找到方法用这个主题正确调整论坛宽度吗?

我的 CSS 更改似乎没有效果,而 Canapin 的自定义宽度组件 在默认主题上运行正常,但在 Graceful 主题上似乎没有效果。

默认情况下,论坛非常狭窄,能够更改这一点将非常棒。

Canapin 的 TC 在此主题上对我有用。
此 TC 设置了 --d-max-width--topic-body-width CSS 变量。
您可能还有其他会覆盖这些值的 TC 或自定义设置。

您可以尝试手动设置,例如:

body {
    --d-max-width: 1500px;
    --topic-body-width: 1500px;
}

这奏效了,谢谢!

桌面版的宽度问题已解决,但我现在遇到了三个问题:

  1. 我似乎无法使用 CSS 更改用户头衔的颜色。

使用:

.user-title{
background: #F55;
border-radius: 3px;
color: #FFF !important;
font-size: 12px!important;
padding-left: 7px;
}

作为示例,填充、背景等的更改均已正确应用,但实际文本颜色被忽略,仍为默认的黄色。我是否应该使用其他方法来更改它?默认情况下,黄色在白色背景上非常难以阅读。

  1. 在移动设备上,论坛的宽度现在略大于屏幕应有的宽度,有没有办法让它在移动设备上保持最大 100% 的宽度而不超出,同时又不撤销桌面用户的宽度增加?

  2. 我遇到了与 @Solari 在上面遇到的相同问题,即移动设备上的颜色条不存在。我尝试使用建议的 CSS 代码进行响应,但这似乎并未解决问题,有人找到方法在移动设备上恢复分类颜色条了吗?

2 个赞

看起来问题 1 的原因是主题已在用户标题颜色上添加了 !important 标签

鉴于我们无法编辑此主题的 HTML/CSS,是否有办法更改或覆盖它?

您好!

垂直彩色条在论坛的移动版本上仍然没有显示。我是不是遗漏了什么?

https://forum.twogeeksonecup.wtf

谢谢!
Dan

1 个赞

您能提供一张详细说明这些垂直条在哪里吗?

顺便说一句,这个论坛很棒。

1 个赞

谢谢!

我附上了另一个论坛的截图,上面确实有这些栏。

基本上和桌面版上显示的栏目相同。

1 个赞

不客气。

好的,我正在查看 Meta 的 Graceful 主题。在移动设备上,不知何故没有像桌面版那样的彩色条。我自己也不确定为什么。

不过,在桌面版中,在侧边栏切换到移动视图,应该可以使用检查元素。我也会在桌面模式下检查,看看 CSS 有何不同。如果需要,很可能可以创建一个自定义组件,在移动版中进行覆盖,以使彩色条按预期工作。

谢谢!我很感激。由于其他用户在此主题中更早地报告了此问题,我希望有一个更永久的修复程序,即使在 Grace 将来更新后也能保持有效。

2 个赞

将此作为 Bug 帖子发布,并使用 uxgraceful-theme 标签,这可能会提高可见性。

或者,此主题组件添加了一个不错的类别视图。它在 Air Theme 中使用。

1 个赞

谢谢!!我一定会看看!

1 个赞

很棒的主题!
是否可以在背景中添加文字,例如(C)姓名?
我希望每个月都有用户的照片作为背景。