Implemented preliminary styling for native widgets.

core/src/color.rs

@@ -40,7 +40,7 @@ impl Color {
     /// Creates a [`Color`] from its RGB components.
     ///
     /// [`Color`]: struct.Color.html
-    pub fn from_rgb(r: f32, g: f32, b: f32) -> Color {
+    pub const fn from_rgb(r: f32, g: f32, b: f32) -> Color {
         Color { r, g, b, a: 1.0 }
     }
 

core/src/font.rs

@@ -1,5 +1,5 @@
 /// A font.
-#[derive(Debug, Clone, Copy)]
+#[derive(Debug, Clone, Copy, PartialEq)]
 pub enum Font {
     /// The default font.
     ///

core/src/lib.rs

@@ -20,6 +20,7 @@ mod background;
 mod color;
 mod font;
 mod length;
+mod palette;
 mod point;
 mod rectangle;
 mod vector;
@@ -29,6 +30,7 @@ pub use background::Background;
 pub use color::Color;
 pub use font::Font;
 pub use length::Length;
+pub use palette::Palette;
 pub use point::Point;
 pub use rectangle::Rectangle;
 pub use vector::Vector;

core/src/palette.rs

@@ -0,0 +1,138 @@
+use crate::Color;
+
+const LIGHT_PALETTE: Palette = Palette {
+    window: Color::from_rgb(0.937, 0.941, 0.945),
+    window_text: Color::from_rgb(0.137, 0.149, 0.153),
+    base: Color::from_rgb(0.988, 0.988, 0.988),
+    alternate_base: Color::from_rgb(0.973, 0.969, 0.965),
+    tooltip_base: Color::from_rgb(0.988, 0.988, 0.988),
+    tooltip_text: Color::from_rgb(0.137, 0.149, 0.153),
+    placeholder_text: Color::from_rgb(0.533, 0.529, 0.525),
+    text: Color::from_rgb(0.137, 0.149, 0.153),
+    button: Color::from_rgb(0.937, 0.941, 0.945),
+    button_text: Color::from_rgb(0.137, 0.149, 0.153),
+    highlight: Color::from_rgb(0.239, 0.682, 0.914),
+    highlight_text: Color::from_rgb(0.988, 0.988, 0.988),
+    link: Color::from_rgb(0.0, 0.341, 0.682),
+    link_visited: Color::from_rgb(0.271, 0.157, 0.525),
+    positive: Color::from_rgb(0.0, 0.431, 0.157),
+    neutral: Color::from_rgb(0.69, 0.502, 0.0),
+    negative: Color::from_rgb(0.749, 0.012, 0.012),
+};
+
+const DARK_PALETTE: Palette = Palette {
+    window: Color::from_rgb(0.192, 0.212, 0.231),
+    window_text: Color::from_rgb(0.937, 0.941, 0.945),
+    base: Color::from_rgb(0.137, 0.149, 0.161),
+    alternate_base: Color::from_rgb(0.192, 0.212, 0.231),
+    tooltip_base: Color::from_rgb(0.192, 0.212, 0.231),
+    tooltip_text: Color::from_rgb(0.937, 0.941, 0.945),
+    placeholder_text: Color::from_rgb(0.741, 0.765, 0.780),
+    text: Color::from_rgb(0.937, 0.941, 0.945),
+    button: Color::from_rgb(0.192, 0.212, 0.231),
+    button_text: Color::from_rgb(0.937, 0.941, 0.945),
+    highlight: Color::from_rgb(0.239, 0.682, 0.914),
+    highlight_text: Color::from_rgb(0.239, 0.682, 0.914),
+    link: Color::from_rgb(0.161, 0.502, 0.725),
+    link_visited: Color::from_rgb(0.5, 0.549, 0.553),
+    positive: Color::from_rgb(0.153, 0.682, 0.376),
+    neutral: Color::from_rgb(0.965, 0.455, 0.0),
+    negative: Color::from_rgb(0.855, 0.267, 0.325),
+};
+
+const FALLBACK_PALETTE: Palette = Palette {
+    window: Color::from_rgb(1.0, 1.0, 1.0),
+    window_text: Color::from_rgb(0.0, 0.0, 0.0),
+    base: Color::from_rgb(1.0, 1.0, 1.0),
+    alternate_base: Color::from_rgb(0.941, 0.941, 0.941),
+    tooltip_base: Color::from_rgb(1.0, 1.0, 1.0),
+    tooltip_text: Color::from_rgb(0.0, 0.0, 0.0),
+    placeholder_text: Color::from_rgb(0.698, 0.698, 0.698),
+    text: Color::from_rgb(0.0, 0.0, 0.0),
+    button: Color::from_rgb(1.0, 1.0, 1.0),
+    button_text: Color::from_rgb(0.0, 0.0, 0.0),
+    highlight: Color::from_rgb(0.431, 0.569, 0.706),
+    highlight_text: Color::from_rgb(1.0, 1.0, 1.0),
+    link: Color::from_rgb(0.0, 0.0, 1.0),
+    link_visited: Color::from_rgb(0.271, 0.157, 0.525),
+    positive: Color::from_rgb(0.0, 1.0, 0.0),
+    neutral: Color::from_rgb(1.0, 1.0, 0.0),
+    negative: Color::from_rgb(1.0, 0.0, 0.0),
+};
+
+/// Struct that holds values for a range of different colors.
+/// It can be used to create custom widgets that look like native ones.
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub struct Palette {
+    /// The color for the window background
+    pub window: Color,
+
+    /// The primary foreground color
+    pub window_text: Color,
+
+    /// The color for text entry widgets and drop down menus
+    pub base: Color,
+
+    /// An alternate base color for alternating lists
+    pub alternate_base: Color,
+
+    /// The color for tooltip backgrounds
+    pub tooltip_base: Color,
+
+    /// The color for test in tooltips
+    pub tooltip_text: Color,
+
+    /// The color for placeholder text in text input widgets and the like
+    pub placeholder_text: Color,
+
+    /// The primary text color
+    pub text: Color,
+
+    /// The button background color
+    pub button: Color,
+
+    /// The color for button text
+    pub button_text: Color,
+
+    /// The primary highlight color
+    pub highlight: Color,
+
+    /// The color for highlighted text
+    pub highlight_text: Color,
+
+    /// The color for links
+    pub link: Color,
+
+    /// The color for already visited links
+    pub link_visited: Color,
+
+    /// The color to give something positive. It is usually some sort of green.
+    pub positive: Color,
+
+    /// The color to give something neutral. It is usually some sort of yellow.
+    pub neutral: Color,
+
+    /// The color to give something negative. It is usually some sort of red.
+    pub negative: Color,
+}
+
+impl Palette {
+    /// Returns a reference to the default palette.
+    pub fn default() -> &'static Self {
+        let std_pal = std::env::vars()
+            .find_map(|(key, value)| {
+                if key == "ICED_PALETTE" {
+                    Some(value)
+                } else {
+                    None
+                }
+            })
+            .unwrap_or_else(String::new);
+
+        match std_pal.as_str() {
+            "dark" => &DARK_PALETTE,
+            "light" => &LIGHT_PALETTE,
+            _ => &FALLBACK_PALETTE,
+        }
+    }
+}

examples/pokedex.rs

@@ -1,6 +1,6 @@
 use iced::{
-    button, image, Align, Application, Button, Color, Column, Command,
-    Container, Element, Image, Length, Row, Settings, Text,
+    button, image, Align, Application, Button, Column, Command, Container,
+    Element, Image, Length, Row, Settings, Text,
 };
 
 pub fn main() {
@@ -139,7 +139,9 @@ impl Pokemon {
                                 Text::new(format!("#{}", self.number))
                                     .width(Length::Shrink)
                                     .size(20)
-                                    .color([0.5, 0.5, 0.5]),
+                                    .change_style(|s| {
+                                        s.text_color = [0.5, 0.5, 0.5].into()
+                                    }),
                             ),
                     )
                     .push(Text::new(&self.description)),
@@ -224,8 +226,7 @@ impl From<reqwest::Error> for Error {
 }
 
 fn button<'a>(state: &'a mut button::State, text: &str) -> Button<'a, Message> {
-    Button::new(state, Text::new(text).color(Color::WHITE))
-        .background(Color::from_rgb(0.11, 0.42, 0.87))
-        .border_radius(10)
+    Button::new(state, Text::new(text))
+        .change_style(|s| s.border_radius = 10)
         .padding(10)
 }

examples/todos.rs

@@ -1,7 +1,8 @@
 use iced::{
-    button, scrollable, text_input, Align, Application, Button, Checkbox,
-    Color, Column, Command, Container, Element, Font, HorizontalAlignment,
-    Length, Row, Scrollable, Settings, Text, TextInput,
+    button, scrollable, text_input, Align, Application, Background, Button,
+    Checkbox, Color, Column, Command, Container, Element, Font,
+    HorizontalAlignment, Length, Palette, Row, Scrollable, Settings, Text,
+    TextInput, TextStyle,
 };
 use serde::{Deserialize, Serialize};
 
@@ -147,7 +148,6 @@ impl Application for Todos {
             }) => {
                 let title = Text::new("todos")
                     .size(100)
-                    .color([0.5, 0.5, 0.5])
                     .horizontal_alignment(HorizontalAlignment::Center);
 
                 let input = TextInput::new(
@@ -291,12 +291,9 @@ impl Task {
                     .align_items(Align::Center)
                     .push(checkbox)
                     .push(
-                        Button::new(
-                            edit_button,
-                            edit_icon().color([0.5, 0.5, 0.5]),
-                        )
-                        .on_press(TaskMessage::Edit)
-                        .padding(10),
+                        Button::new(edit_button, edit_icon())
+                            .on_press(TaskMessage::Edit)
+                            .padding(10),
                     )
                     .into()
             }
@@ -313,6 +310,8 @@ impl Task {
                 .on_submit(TaskMessage::FinishEdition)
                 .padding(10);
 
+                let palette = Palette::default();
+
                 Row::new()
                     .spacing(20)
                     .align_items(Align::Center)
@@ -322,17 +321,27 @@ impl Task {
                             delete_button,
                             Row::new()
                                 .spacing(10)
-                                .push(delete_icon().color(Color::WHITE))
+                                .push(delete_icon().change_style(|style| {
+                                    style.text_color = Color::WHITE
+                                }))
                                 .push(
-                                    Text::new("Delete")
-                                        .width(Length::Shrink)
-                                        .color(Color::WHITE),
+                                    Text::new_with_style(
+                                        "Delete",
+                                        TextStyle {
+                                            text_color: Color::WHITE,
+                                        },
+                                    )
+                                    .width(Length::Shrink),
                                 ),
                         )
                         .on_press(TaskMessage::Delete)
                         .padding(10)
-                        .border_radius(5)
-                        .background(Color::from_rgb(0.8, 0.2, 0.2)),
+                        .change_style(|style| {
+                            style.border_radius = 5;
+                            style.background =
+                                Some(Background::Color(palette.negative));
+                            style.border_color = palette.negative;
+                        }),
                     )
                     .into()
             }
@@ -349,6 +358,8 @@ pub struct Controls {
 
 impl Controls {
     fn view(&mut self, tasks: &[Task], current_filter: Filter) -> Row<Message> {
+        let palette = Palette::default();
+
         let Controls {
             all_button,
             active_button,
@@ -360,16 +371,17 @@ impl Controls {
         let filter_button = |state, label, filter, current_filter| {
             let label = Text::new(label).size(16).width(Length::Shrink);
             let button = if filter == current_filter {
-                Button::new(state, label.color(Color::WHITE))
-                    .background(Color::from_rgb(0.2, 0.2, 0.7))
+                Button::new(state, label).change_style(|style| {
+                    style.border_radius = 10;
+                    style.background =
+                        Some(Background::Color(palette.highlight));
+                })
             } else {
                 Button::new(state, label)
+                    .change_style(|style| style.border_radius = 10)
             };
 
-            button
-                .on_press(Message::FilterChanged(filter))
-                .padding(8)
-                .border_radius(10)
+            button.on_press(Message::FilterChanged(filter)).padding(8)
         };
 
         Row::new()
@@ -449,7 +461,9 @@ fn empty_message(message: &str) -> Element<'static, Message> {
         Text::new(message)
             .size(25)
             .horizontal_alignment(HorizontalAlignment::Center)
-            .color([0.7, 0.7, 0.7]),
+            .change_style(|style: &mut TextStyle| {
+                style.text_color = [0.7, 0.7, 0.7].into()
+            }),
     )
     .width(Length::Fill)
     .height(Length::Units(200))