Add Dracula, Nord, Solarized and Grubvox variants to Theme

examples/styling/src/main.rs

@@ -23,6 +23,12 @@ struct Styling {
 enum ThemeType {
     Light,
     Dark,
+    Nord,
+    GruvboxLight,
+    GruvboxDark,
+    Dracula,
+    SolarizedLight,
+    SolarizedDark,
     Custom,
 }
 
@@ -53,6 +59,12 @@ impl Sandbox for Styling {
                 self.theme = match theme {
                     ThemeType::Light => Theme::Light,
                     ThemeType::Dark => Theme::Dark,
+                    ThemeType::Nord => Theme::Nord,
+                    ThemeType::GruvboxLight => Theme::GruvboxLight,
+                    ThemeType::GruvboxDark => Theme::GruvboxDark,
+                    ThemeType::Dracula => Theme::Dracula,
+                    ThemeType::SolarizedLight => Theme::SolarizedLight,
+                    ThemeType::SolarizedDark => Theme::SolarizedDark,
                     ThemeType::Custom => Theme::custom(
                         String::from("Custom"),
                         theme::Palette {
@@ -74,24 +86,39 @@ impl Sandbox for Styling {
     }
 
     fn view(&self) -> Element<Message> {
-        let choose_theme =
+        let choose_theme = [
-            [ThemeType::Light, ThemeType::Dark, ThemeType::Custom]
+            ThemeType::Light,
-                .iter()
+            ThemeType::Dark,
-                .fold(
+            ThemeType::Nord,
-                    column![text("Choose a theme:")].spacing(10),
+            ThemeType::Dracula,
-                    |column, theme| {
+            ThemeType::SolarizedLight,
-                        column.push(radio(
+            ThemeType::SolarizedDark,
-                            format!("{theme:?}"),
+            ThemeType::GruvboxLight,
-                            *theme,
+            ThemeType::GruvboxDark,
-                            Some(match self.theme {
+            ThemeType::Custom,
-                                Theme::Light => ThemeType::Light,
+        ]
-                                Theme::Dark => ThemeType::Dark,
+        .iter()
-                                Theme::Custom { .. } => ThemeType::Custom,
+        .fold(
-                            }),
+            column![text("Choose a theme:")].spacing(10),
-                            Message::ThemeChanged,
+            |column, theme| {
-                        ))
+                column.push(radio(
-                    },
+                    format!("{theme:?}"),
-                );
+                    *theme,
+                    Some(match self.theme {
+                        Theme::Light => ThemeType::Light,
+                        Theme::Dark => ThemeType::Dark,
+                        Theme::Dracula => ThemeType::Dracula,
+                        Theme::Nord => ThemeType::Nord,
+                        Theme::SolarizedLight => ThemeType::SolarizedLight,
+                        Theme::SolarizedDark => ThemeType::SolarizedDark,
+                        Theme::GruvboxLight => ThemeType::GruvboxLight,
+                        Theme::GruvboxDark => ThemeType::GruvboxDark,
+                        Theme::Custom { .. } => ThemeType::Custom,
+                    }),
+                    Message::ThemeChanged,
+                ))
+            },
+        );
 
         let text_input = text_input("Type something...", &self.input_value)
             .on_input(Message::InputChanged)

style/src/theme.rs

@@ -34,6 +34,18 @@ pub enum Theme {
     Light,
     /// The built-in dark variant.
     Dark,
+    /// The built-in dracula variant.
+    Dracula,
+    /// The built-in nord variant.
+    Nord,
+    /// The built-in solarized light variant.
+    SolarizedLight,
+    /// The built-in solarized dark variant.
+    SolarizedDark,
+    /// The built-in gruvbox light variant.
+    GruvboxLight,
+    /// The built-in gruvbox dark variant.
+    GruvboxDark,
     /// A [`Theme`] that uses a [`Custom`] palette.
     Custom(Box<Custom>),
 }
@@ -62,6 +74,12 @@ impl Theme {
         match self {
             Self::Light => Palette::LIGHT,
             Self::Dark => Palette::DARK,
+            Self::Dracula => Palette::DRACULA,
+            Self::Nord => Palette::NORD,
+            Self::SolarizedLight => Palette::SOLARIZED_LIGHT,
+            Self::SolarizedDark => Palette::SOLARIZED_DARK,
+            Self::GruvboxLight => Palette::GRUVBOX_LIGHT,
+            Self::GruvboxDark => Palette::GRUVBOX_DARK,
             Self::Custom(custom) => custom.palette,
         }
     }
@@ -71,6 +89,12 @@ impl Theme {
         match self {
             Self::Light => &palette::EXTENDED_LIGHT,
             Self::Dark => &palette::EXTENDED_DARK,
+            Self::Dracula => &palette::EXTENDED_DRACULA,
+            Self::Nord => &palette::EXTENDED_NORD,
+            Self::SolarizedLight => &palette::EXTENDED_SOLARIZED_LIGHT,
+            Self::SolarizedDark => &palette::EXTENDED_SOLARIZED_DARK,
+            Self::GruvboxLight => &palette::EXTENDED_GRUVBOX_LIGHT,
+            Self::GruvboxDark => &palette::EXTENDED_GRUVBOX_DARK,
             Self::Custom(custom) => &custom.extended,
         }
     }
@@ -81,6 +105,12 @@ impl fmt::Display for Theme {
         match self {
             Self::Light => write!(f, "Light"),
             Self::Dark => write!(f, "Dark"),
+            Self::Dracula => write!(f, "Dracula"),
+            Self::Nord => write!(f, "Nord"),
+            Self::SolarizedLight => write!(f, "Solarized Light"),
+            Self::SolarizedDark => write!(f, "Solarized Dark"),
+            Self::GruvboxLight => write!(f, "Gruvbox Light"),
+            Self::GruvboxDark => write!(f, "Gruvbox Dark"),
             Self::Custom(custom) => custom.fmt(f),
         }
     }

style/src/theme/palette.rs

@@ -1,5 +1,5 @@
 //! Define the colors of a theme.
-use iced_core::Color;
+use iced_core::{color, Color};
 
 use once_cell::sync::Lazy;
 use palette::color_difference::Wcag21RelativeContrast;
@@ -67,6 +67,66 @@ impl Palette {
             0x3F as f32 / 255.0,
         ),
     };
+
+    /// The built-in dracula variant of a [`Palette`].
+    /// theme source: https://draculatheme.com
+    pub const DRACULA: Self = Self {
+        background: color!(0x282A36), // BACKGROUND
+        text: color!(0xf8f8f2),       // FOREGROUND
+        primary: color!(0xbd93f9),    // PURPLE
+        success: color!(0x50fa7b),    // GREEN
+        danger: color!(0xff5555),     // RED
+    };
+
+    /// The built-in nord variant of a [`Palette`].
+    /// theme source: https://www.nordtheme.com/docs/colors-and-palettes
+    pub const NORD: Self = Self {
+        background: color!(0x2e3440), // nord0
+        text: color!(0xeceff4),       // nord6
+        primary: color!(0x8fbcbb),    // nord7
+        success: color!(0xa3be8c),    // nord14
+        danger: color!(0xbf616a),     // nord11
+    };
+
+    /// The built-in solarized light variant of a [`Palette`].
+    /// light variant of https://ethanschoonover.com/solarized
+    pub const SOLARIZED_LIGHT: Self = Self {
+        background: color!(0xfdf6e3), // base3
+        text: color!(0x657b83),       // base00
+        primary: color!(0x2aa198),    // cyan
+        success: color!(0x859900),    // green
+        danger: color!(0xdc322f),     // red
+    };
+
+    /// The built-in solarized dark variant of a [`Palette`].
+    /// dark variant of https://ethanschoonover.com/solarized
+    pub const SOLARIZED_DARK: Self = Self {
+        background: color!(0x002b36), // base03
+        text: color!(0x839496),       // base0
+        primary: color!(0x2aa198),    // cyan
+        success: color!(0x859900),    // green
+        danger: color!(0xdc322f),     // red
+    };
+
+    /// The built-in gruvbox light variant of a [`Palette`].
+    /// light variant of https://github.com/morhetz/gruvbox
+    pub const GRUVBOX_LIGHT: Self = Self {
+        background: color!(0xfbf1c7), // light BG_0
+        text: color!(0x282828),       // light FG0_29
+        primary: color!(0x458588),    // light BLUE_4
+        success: color!(0x98971a),    // light GREEN_2
+        danger: color!(0xcc241d),     // light RED_1
+    };
+
+    /// The built-in gruvbox dark variant of a [`Palette`].
+    /// dark variant of https://github.com/morhetz/gruvbox
+    pub const GRUVBOX_DARK: Self = Self {
+        background: color!(0x282828), // dark BG_0
+        text: color!(0xfbf1c7),       // dark FG0_29
+        primary: color!(0x458588),    // dark BLUE_4
+        success: color!(0x98971a),    // dark GREEN_2
+        danger: color!(0xcc241d),     // dark RED_1
+    };
 }
 
 /// An extended set of colors generated from a [`Palette`].
@@ -94,6 +154,30 @@ pub static EXTENDED_LIGHT: Lazy<Extended> =
 pub static EXTENDED_DARK: Lazy<Extended> =
     Lazy::new(|| Extended::generate(Palette::DARK));
 
+/// The built-in dracula variant of an [`Extended`] palette.
+pub static EXTENDED_DRACULA: Lazy<Extended> =
+    Lazy::new(|| Extended::generate(Palette::DRACULA));
+
+/// The built-in nord variant of an [`Extended`] palette.
+pub static EXTENDED_NORD: Lazy<Extended> =
+    Lazy::new(|| Extended::generate(Palette::NORD));
+
+/// The built-in solarized light variant of an [`Extended`] palette.
+pub static EXTENDED_SOLARIZED_LIGHT: Lazy<Extended> =
+    Lazy::new(|| Extended::generate(Palette::SOLARIZED_LIGHT));
+
+/// The built-in solarized dark variant of an [`Extended`] palette.
+pub static EXTENDED_SOLARIZED_DARK: Lazy<Extended> =
+    Lazy::new(|| Extended::generate(Palette::SOLARIZED_DARK));
+
+/// The built-in gruvbox light variant of an [`Extended`] palette.
+pub static EXTENDED_GRUVBOX_LIGHT: Lazy<Extended> =
+    Lazy::new(|| Extended::generate(Palette::GRUVBOX_LIGHT));
+
+/// The built-in gruvbox dark variant of an [`Extended`] palette.
+pub static EXTENDED_GRUVBOX_DARK: Lazy<Extended> =
+    Lazy::new(|| Extended::generate(Palette::GRUVBOX_DARK));
+
 impl Extended {
     /// Generates an [`Extended`] palette from a simple [`Palette`].
     pub fn generate(palette: Palette) -> Self {