bootstrap btn-subtle button class

1sbrub3j  于 5个月前  发布在  Bootstrap
关注(0)|答案(4)|浏览(78)

前提条件

提案
我喜欢5.3的暗黑模式 - 它看起来很棒!但有一件事让我感到困惑,那就是 btn-light 是一个“亮”按钮,而在亮模式下它是一个“微妙”的按钮。
我提议一个新的按钮修饰符 "btn-subtle",它将尊重主题,根据是暗黑模式还是亮模式来调整按钮的颜色。
实际上:

  • 在亮模式下, btn-subtle 将与 btn-light 相同,而
  • 在暗黑模式下, btn-subtle 将与 btn-dark 相同

动机和背景
我在很多地方使用 btn-light 作为微妙的色调。这在暗黑模式之前有效,但现在失效了。
另一个可选的名称可能是 btn-tertiary

oxalkeyp

oxalkeyp1#

我差点创建了一个PR,但意识到我实际上想要将其反转为 btn-outline-subtle 。这是我在5.3之前的自定义颜色模式。有人想到过这个吗? btn-outline-light 在浅色模式下几乎不可见(且无用),而 btn-outline-dark 在深色模式下完全不可见。
效果:

  • 在浅色模式下, btn-outline-subtle 将与 btn-outline-dark 相同
  • 在深色模式下, btn-outline-subtle 将与 btn-outline-light 相同

这可能与其他 *-subtle 组件相比令人困惑且不一致。
也许不需要细微的轮廓按钮,但我们可以有另一个变体 btn[-outline]-{contrast,inverted,monochrome} 或类似的东西。

oxiaedzo

oxiaedzo2#

但是,我们可以有另一个变体btn[-outline]-{contrast,inverted,monochrome}或类似的。
是的,我们还没有时间去考虑这个问题,但我也有同样的感觉,像这样的东西可能会有用。这就是为什么我们关闭#38763,花时间详细思考它。我也觉得它不应该仅限于按钮,而应该在框架中更具普遍性的东西。

edqdpe6u

edqdpe6u3#

我遇到了同样的问题。我认为一个 btn-tertiary 也可以解决这个问题。我觉得奇怪的是,所有类型的按钮都可以使用,只有次要的不行(我指的是bs颜色: https://getbootstrap.com/docs/5.3/customize/color/ )。

lymgl2op

lymgl2op4#

在实现暗黑模式时,我遇到了这个问题。我的快速而简单的解决方案是在全局样式中添加以下内容:

.btn-temp-light {
  @extend .btn-light;
}

[data-bs-theme='dark'] .btn-temp-light {
  @extend .btn-dark;
}

然后将 btn-light 替换为 btn-temp-light

相关问题