diff options
| -rw-r--r-- | CHANGELOG.md | 2 | ||||
| -rw-r--r-- | core/src/color.rs | 18 | ||||
| -rw-r--r-- | examples/styling/src/main.rs | 61 | ||||
| -rw-r--r-- | style/src/theme.rs | 46 | ||||
| -rw-r--r-- | style/src/theme/palette.rs | 92 |
5 files changed, 161 insertions, 58 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index ec3e87ea..3bd1cf2a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -33,6 +33,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - `default` and `shift_step` methods for `slider` widgets. [#2100](https://github.com/iced-rs/iced/pull/2100) - `Custom` variant to `command::Action`. [#2146](https://github.com/iced-rs/iced/pull/2146) - Mouse movement events for `MouseArea`. [#2147](https://github.com/iced-rs/iced/pull/2147) +- Dracula, Nord, Solarized, and Gruvbox variants for `Theme`. [#2170](https://github.com/iced-rs/iced/pull/2170) ### Changed - Enable WebGPU backend in `wgpu` by default instead of WebGL. [#2068](https://github.com/iced-rs/iced/pull/2068) @@ -127,6 +128,7 @@ Many thanks to... - @Tahinli - @tarkah - @tzemanovic +- @varbhat - @william-shere ## [0.10.0] - 2023-07-28 diff --git a/core/src/color.rs b/core/src/color.rs index 13077628..b8db322f 100644 --- a/core/src/color.rs +++ b/core/src/color.rs @@ -179,18 +179,18 @@ impl From<[f32; 4]> for Color { #[macro_export] macro_rules! color { ($r:expr, $g:expr, $b:expr) => { - $crate::Color::from_rgb8($r, $g, $b) + color!($r, $g, $b, 1.0) }; ($r:expr, $g:expr, $b:expr, $a:expr) => { - $crate::Color::from_rgba8($r, $g, $b, $a) + $crate::Color { + r: $r as f32 / 255.0, + g: $g as f32 / 255.0, + b: $b as f32 / 255.0, + a: $a, + } }; ($hex:expr) => {{ - let hex = $hex as u32; - let r = (hex & 0xff0000) >> 16; - let g = (hex & 0xff00) >> 8; - let b = (hex & 0xff); - - $crate::Color::from_rgb8(r as u8, g as u8, b as u8) + color!($hex, 1.0) }}; ($hex:expr, $a:expr) => {{ let hex = $hex as u32; @@ -198,7 +198,7 @@ macro_rules! color { let g = (hex & 0xff00) >> 8; let b = (hex & 0xff); - $crate::Color::from_rgba8(r as u8, g as u8, b as u8, $a) + color!(r, g, b, $a) }}; } diff --git a/examples/styling/src/main.rs b/examples/styling/src/main.rs index 4718a123..cf2dcb8a 100644 --- a/examples/styling/src/main.rs +++ b/examples/styling/src/main.rs @@ -1,10 +1,9 @@ -use iced::theme::{self, Theme}; use iced::widget::{ - button, checkbox, column, container, horizontal_rule, progress_bar, radio, - row, scrollable, slider, text, text_input, toggler, vertical_rule, - vertical_space, + button, checkbox, column, container, horizontal_rule, pick_list, + progress_bar, row, scrollable, slider, text, text_input, toggler, + vertical_rule, vertical_space, }; -use iced::{Alignment, Color, Element, Length, Sandbox, Settings}; +use iced::{Alignment, Element, Length, Sandbox, Settings, Theme}; pub fn main() -> iced::Result { Styling::run(Settings::default()) @@ -19,16 +18,9 @@ struct Styling { toggler_value: bool, } -#[derive(Debug, PartialEq, Eq, Clone, Copy)] -enum ThemeType { - Light, - Dark, - Custom, -} - #[derive(Debug, Clone)] enum Message { - ThemeChanged(ThemeType), + ThemeChanged(Theme), InputChanged(String), ButtonPressed, SliderChanged(f32), @@ -50,20 +42,7 @@ impl Sandbox for Styling { fn update(&mut self, message: Message) { match message { Message::ThemeChanged(theme) => { - self.theme = match theme { - ThemeType::Light => Theme::Light, - ThemeType::Dark => Theme::Dark, - ThemeType::Custom => Theme::custom( - String::from("Custom"), - theme::Palette { - background: Color::from_rgb(1.0, 0.9, 1.0), - text: Color::BLACK, - primary: Color::from_rgb(0.5, 0.5, 0.0), - success: Color::from_rgb(0.0, 1.0, 0.0), - danger: Color::from_rgb(1.0, 0.0, 0.0), - }, - ), - } + self.theme = theme; } Message::InputChanged(value) => self.input_value = value, Message::ButtonPressed => {} @@ -74,24 +53,16 @@ impl Sandbox for Styling { } fn view(&self) -> Element<Message> { - let choose_theme = - [ThemeType::Light, ThemeType::Dark, ThemeType::Custom] - .iter() - .fold( - column![text("Choose a theme:")].spacing(10), - |column, theme| { - column.push(radio( - format!("{theme:?}"), - *theme, - Some(match self.theme { - Theme::Light => ThemeType::Light, - Theme::Dark => ThemeType::Dark, - Theme::Custom { .. } => ThemeType::Custom, - }), - Message::ThemeChanged, - )) - }, - ); + let choose_theme = column![ + text("Theme:"), + pick_list( + Theme::ALL, + Some(self.theme.clone()), + Message::ThemeChanged + ) + .width(Length::Fill), + ] + .spacing(10); let text_input = text_input("Type something...", &self.input_value) .on_input(Message::InputChanged) diff --git a/style/src/theme.rs b/style/src/theme.rs index 166410ae..96f91260 100644 --- a/style/src/theme.rs +++ b/style/src/theme.rs @@ -25,6 +25,7 @@ use crate::core::{Background, Border, Color, Shadow, Vector}; use std::fmt; use std::rc::Rc; +use std::sync::Arc; /// A built-in theme. #[derive(Debug, Clone, PartialEq, Default)] @@ -34,13 +35,34 @@ 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>), + Custom(Arc<Custom>), } impl Theme { /// A list with all the defined themes. - pub const ALL: &'static [Self] = &[Self::Light, Self::Dark]; + pub const ALL: &'static [Self] = &[ + Self::Light, + Self::Dark, + Self::Dracula, + Self::Nord, + Self::SolarizedLight, + Self::SolarizedDark, + Self::GruvboxLight, + Self::GruvboxDark, + ]; /// Creates a new custom [`Theme`] from the given [`Palette`]. pub fn custom(name: String, palette: Palette) -> Self { @@ -54,7 +76,7 @@ impl Theme { palette: Palette, generate: impl FnOnce(Palette) -> palette::Extended, ) -> Self { - Self::Custom(Box::new(Custom::with_fn(name, palette, generate))) + Self::Custom(Arc::new(Custom::with_fn(name, palette, generate))) } /// Returns the [`Palette`] of the [`Theme`]. @@ -62,6 +84,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 +99,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 +115,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), } } diff --git a/style/src/theme/palette.rs b/style/src/theme/palette.rs index 76977a29..d5a1a5d9 100644 --- a/style/src/theme/palette.rs +++ b/style/src/theme/palette.rs @@ -1,5 +1,5 @@ //! Define the colors of a theme. -use iced_core::Color; +use crate::core::{color, Color}; use once_cell::sync::Lazy; use palette::color_difference::Wcag21RelativeContrast; @@ -67,6 +67,72 @@ impl Palette { 0x3F as f32 / 255.0, ), }; + + /// The built-in Dracula variant of a [`Palette`]. + /// + /// 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`]. + /// + /// 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`]. + /// + /// Source: 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`]. + /// + /// Source: 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`]. + /// + /// Source: 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`]. + /// + /// Source: 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 +160,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 { |