me/iced
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #2170 from varbhat/vbt/colorpalettes

Browse source 
Add Nord, Dracula, Solarized and Gruvbox themes
This commit is contained in:
Héctor Ramón 2024-02-03 19:07:06 +01:00 • committed by GitHub
commit 878134883e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 161 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

2
CHANGELOG.md
View file

@ -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

18
core/src/color.rs
View file

@ -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)
}};
}

61
examples/styling/src/main.rs
View file

@ -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)

46
style/src/theme.rs
View file

@ -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),
}
}

92
style/src/theme/palette.rs
View file

@ -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 {