]> git.proxmox.com Git - ui/proxmox-yew-widget-toolkit.git/commitdiff
css: add `Custom` color scheme variant
authorDominik Csapak <d.csapak@proxmox.com>
Thu, 12 Sep 2024 12:04:58 +0000 (14:04 +0200)
committerDietmar Maurer <dietmar@proxmox.com>
Fri, 13 Sep 2024 09:23:27 +0000 (11:23 +0200)
this can be useful if the theme or project defines it's own color
schemes, but still want to refer to them in the code without having to
use bare css classes

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
src/css.rs

index 522b7912cd99c9bd916d227bcfe9e2654cf40461..ec49df34d1ae4fce5a80538683b58fa07ca894bd 100644 (file)
@@ -540,6 +540,24 @@ impl From<Flex> for Classes {
 ///    .class(ColorScheme::Primary)
 /// # ;
 /// ```
+/// You can also have custom color schemes like this:
+///
+/// ```
+/// # use pwt::prelude::*;
+/// # use pwt::widget::Container;
+/// use pwt::css::*;
+/// Container::new()
+///    .class(ColorScheme::Custom("foo"))
+/// # ;
+/// ```
+///
+/// Where the relevant css code must look like this:
+/// ```ignore
+/// .pwt-scheme-foo {
+///    --pwt-color: #ff00ff;
+///    --pwt-color-background: #00ff00;
+/// }
+/// ```
 #[derive(Copy, Clone, Debug, PartialEq, Eq)]
 pub enum ColorScheme {
     Primary,
@@ -559,6 +577,7 @@ pub enum ColorScheme {
     InverseSurface,
     NeutralAlt,
     DarkSurface,
+    Custom(&'static str),
 }
 
 impl From<ColorScheme> for Classes {
@@ -581,6 +600,7 @@ impl From<ColorScheme> for Classes {
             ColorScheme::InverseSurface => "pwt-scheme-inverse-surface".into(),
             ColorScheme::NeutralAlt => "pwt-scheme-neutral-alt".into(),
             ColorScheme::DarkSurface => "pwt-scheme-dark-surface".into(),
+            ColorScheme::Custom(value) => format!("pwt-scheme-{value}").into(),
         }
     }
 }