[yew-devel] [PATCH yew-widget-toolkit-assets 3/4] color scheme: add `pwt-default-colors` helper
Dominik Csapak
d.csapak at proxmox.com
Tue Jun 24 14:19:17 CEST 2025
this helper makes it more easier to apply the color scheme settings to a
custom component. Otherwise one would have to manually set color and
background-color.
Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
scss/introduction.md | 4 ++++
scss/mixins/_color_scheme.scss | 5 +++++
2 files changed, 9 insertions(+)
diff --git a/scss/introduction.md b/scss/introduction.md
index 9a2d795..9baa240 100644
--- a/scss/introduction.md
+++ b/scss/introduction.md
@@ -108,6 +108,10 @@ changes the colors of the widget. The `pwt-scheme-<name>` and
`pwt-scheme-<name>-container` helper classes can be used to set
those variables.
+There is also the `pwt-default-colors` class to set the `color` and
+`background-color` properties directly to the `--pwt-color` and
+`--pwt-color-background` respectively.
+
A similar scheme is used for widgets with an associated accent color, using
the following CSS variables:
diff --git a/scss/mixins/_color_scheme.scss b/scss/mixins/_color_scheme.scss
index 630ddce..36b26ca 100644
--- a/scss/mixins/_color_scheme.scss
+++ b/scss/mixins/_color_scheme.scss
@@ -34,6 +34,11 @@
// @include outline-button-color-scheme-vars($name, $important: true);
//}
+ .pwt-default-colors {
+ color: var(--pwt-color);
+ background-color: var(--pwt-color-background);
+ }
+
.pwt-color-#{$name} {
color: var(--pwt-color-#{$name});
}
--
2.39.5
More information about the yew-devel
mailing list