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

Add Dracula, Nord, Solarized and Grubvox variants to Theme

Browse source
This commit is contained in:
Var Bhat 2023-12-22 02:10:53 +05:30 • committed by Héctor Ramón Jiménez
parent 6492d9d927
commit 04b9dc4e2d
No known key found for this signature in database
GPG key ID: 7CC46565708259A7
3 changed files with 160 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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 =
[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 = [
ThemeType::Light,
ThemeType::Dark,
ThemeType::Nord,
ThemeType::Dracula,
ThemeType::SolarizedLight,
ThemeType::SolarizedDark,
ThemeType::GruvboxLight,
ThemeType::GruvboxDark,
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::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)

30
style/src/theme.rs
View file

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

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

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