feat: add support for dark / light mode switching (#178)

* feat: add support for dark / light mode switching and simultaneouscustom light / dark mode themes

* refactor(color-picker): optional initial color and fallback color

* refactor: used FixedPortion for layout of the settings item

This makes sure that the control always has at least the specified portion of the available space

* refactor: make all members of the ThemeBuilder public

* refactor: add and update palette colors

* fix(theme): typo and derive PartialEq for ThemeBuilder

* fix: update color picker usage

* feat: add more variables to the theme

* fix: radius on headerbar

* fix: Theme CosmicConfigEntry impl

* chore: specify rev of taffy

* fix: theme CosmicConfigEntry missing variables

* fix: apply theme type when theme mode changes

* wip: add plus icon to empty color picker button

* chore: fix rev and imports

* refactor(color-picker): allow custom size for the icon

* refactor(color_picker): make color_button public

* update iced

cosmic-config-derive/src/lib.rs

@@ -28,15 +28,15 @@ fn impl_cosmic_config_entry_macro(ast: &syn::DeriveInput) -> TokenStream {
     let write_each_config_field = fields.iter().map(|field| {
         let field_name = &field.ident;
         quote! {
-            config.set(stringify!(#field_name), &self.#field_name)?;
+            cosmic_config::ConfigSet::set(config, stringify!(#field_name), &self.#field_name)?;
         }
     });
 
     let get_each_config_field = fields.iter().map(|field| {
         let field_name = &field.ident;
         let field_type = &field.ty;
         quote! {
-            match config.get::<#field_type>(stringify!(#field_name)) {
+            match cosmic_config::ConfigGet::get::<#field_type>(config, stringify!(#field_name)) {
                 Ok(#field_name) => default.#field_name = #field_name,
                 Err(e) => errors.push(e),
             }
@@ -60,13 +60,13 @@ fn impl_cosmic_config_entry_macro(ast: &syn::DeriveInput) -> TokenStream {
 
     let gen = quote! {
         impl CosmicConfigEntry for #name {
-            fn write_entry(&self, config: &Config) -> Result<(), cosmic_config::Error> {
+            fn write_entry(&self, config: &cosmic_config::Config) -> Result<(), cosmic_config::Error> {
                 let tx = config.transaction();
                 #(#write_each_config_field)*
                 tx.commit()
             }
 
-            fn get_entry(config: &Config) -> Result<Self, (Vec<cosmic_config::Error>, Self)> {
+            fn get_entry(config: &cosmic_config::Config) -> Result<Self, (Vec<cosmic_config::Error>, Self)> {
                 let mut default = Self::default();
                 let mut errors = Vec::new();
 

cosmic-config/src/lib.rs

@@ -390,8 +390,6 @@ async fn start_listening<
                 Ok(w) => w,
                 Err(_) => return ConfigState::Failed,
             };
-            let msg = T::get_entry(&config);
-            _ = output.send((id, msg)).await;
 
             match T::get_entry(&config) {
                 Ok(t) => {

cosmic-theme/Cargo.toml

@@ -23,4 +23,4 @@ serde = { version = "1.0.129", features = ["derive"] }
 ron = "0.8"
 lazy_static = "1.4.0"
 csscolorparser = {version = "0.6.2", features = ["serde"]}
-cosmic-config = { path = "../cosmic-config/", default-features = false, features = ["subscription"] }
+cosmic-config = { path = "../cosmic-config/", default-features = false, features = ["subscription", "macro"] }

cosmic-theme/src/model/cosmic_palette.rs

@@ -143,6 +143,14 @@ pub struct CosmicPaletteInner<C> {
     /// A wider spread of dark colors for more general use.
     pub neutral_10: C,
 
+    // Utility Colors
+    /// Utility bright green
+    pub bright_green: C,
+    /// Utility bright red
+    pub bright_red: C,
+    /// Utility bright orange
+    pub bright_orange: C,
+
     /// Extended Color Palette
     /// Colors used for themes, app icons, illustrations, and other brand purposes.
     pub ext_warm_grey: C,
@@ -159,6 +167,12 @@ pub struct CosmicPaletteInner<C> {
     /// Colors used for themes, app icons, illustrations, and other brand purposes.
     pub ext_indigo: C,
 
+    /// Potential Accent Color Combos
+    pub accent_blue: C,
+    /// Potential Accent Color Combos
+    pub accent_red: C,
+    /// Potential Accent Color Combos
+    pub accent_green: C,
     /// Potential Accent Color Combos
     pub accent_warm_grey: C,
     /// Potential Accent Color Combos
@@ -195,13 +209,19 @@ impl From<CosmicPaletteInner<CssColor>> for CosmicPaletteInner<Srgba> {
             neutral_8: p.neutral_8.into(),
             neutral_9: p.neutral_9.into(),
             neutral_10: p.neutral_10.into(),
+            bright_green: p.bright_green.into(),
+            bright_red: p.bright_red.into(),
+            bright_orange: p.bright_orange.into(),
             ext_warm_grey: p.ext_warm_grey.into(),
             ext_orange: p.ext_orange.into(),
             ext_yellow: p.ext_yellow.into(),
             ext_blue: p.ext_blue.into(),
             ext_purple: p.ext_purple.into(),
             ext_pink: p.ext_pink.into(),
             ext_indigo: p.ext_indigo.into(),
+            accent_blue: p.accent_blue.into(),
+            accent_red: p.accent_red.into(),
+            accent_green: p.accent_green.into(),
             accent_warm_grey: p.accent_warm_grey.into(),
             accent_orange: p.accent_orange.into(),
             accent_yellow: p.accent_yellow.into(),

cosmic-theme/src/model/dark.ron

@@ -55,6 +55,15 @@ Dark (
         neutral_10: (
             c: "#FFFFFF",
         ),
+        bright_green: (
+            c: "#5EDB8C",
+        ),
+        bright_red: (
+            c: "#FFA090",
+        ),
+        bright_orange: (
+            c: "#FFA37D",
+        ),
         ext_warm_grey: (
             c: "#9B8E8A",
         ),
@@ -76,23 +85,32 @@ Dark (
         ext_indigo: (
             c: "#3E88FF",
         ),
+        accent_blue: (
+            c: "#63D0DF",
+        ),
+        accent_green: (
+            c: "#92CF9C",
+        ),
         accent_warm_grey: (
-            c: "#554742",
+            c: "#CABAB4",
         ),
         accent_orange: (
-            c: "#AF5C02",
+            c: "#FFAD00",
         ),
         accent_yellow: (
-            c: "#966800",
+            c: "#F7E062",
         ),
         accent_purple: (
-            c: "#813FFF",
+            c: "#E79CFE",
         ),
         accent_pink: (
-            c: "#F93A83",
+            c: "#FF9CB1",
+        ),
+        accent_red: (
+            c: "#FDA1A0",
         ),
         accent_indigo: (
-            c: "#3E88FF",
+            c: "#A1C0EB",
         ),
     )
-)
+)

cosmic-theme/src/model/light.ron

@@ -55,6 +55,15 @@ Light (
         neutral_10: (
             c: "#000000",
         ),
+        bright_green: (
+            c: "#00572C",
+        ),
+        bright_red: (
+            c: "#890418",
+        ),
+        bright_orange: (
+            c: "#792C00",
+        ),
         ext_warm_grey: (
             c: "#9B8E8A",
         ),
@@ -76,23 +85,32 @@ Light (
         ext_indigo: (
             c: "#95C4FC",
         ),
+        accent_blue: (
+            c: "#00525A",
+        ),
+        accent_red: (
+            c: "#78292E",
+        ),
+        accent_green: (
+            c: "#185529",
+        ),
         accent_warm_grey: (
-            c: "#ADA29E",
+            c: "#554742",
         ),
         accent_orange: (
-            c: "#FFD7A1",
+            c: "#624000",
         ),
         accent_yellow: (
-            c: "#FFF19E",
+            c: "#534800",
         ),
         accent_purple: (
-            c: "#D58CFF",
+            c: "#68217C",
         ),
         accent_pink: (
-            c: "#FF9CDD",
+            c: "#86043A",
         ),
         accent_indigo: (
-            c: "#95C4FC",
+            c: "#2E496D",
         ),
     )
-)
+)

cosmic-theme/src/model/mod.rs

@@ -1,11 +1,13 @@
 pub use corner::*;
 pub use cosmic_palette::*;
 pub use derivation::*;
+pub use mode::*;
 pub use spacing::*;
 pub use theme::*;
 
 mod corner;
 mod cosmic_palette;
 mod derivation;
+mod mode;
 mod spacing;
 mod theme;

cosmic-theme/src/model/mode.rs

@@ -0,0 +1,46 @@
+use cosmic_config::{Config, ConfigGet, ConfigSet, CosmicConfigEntry};
+
+/// ID for the ThemeMode config
+pub const THEME_MODE_ID: &str = "com.system76.CosmicTheme.Mode";
+
+/// The config for cosmic theme dark / light settings
+#[derive(
+    Debug, Clone, Copy, PartialEq, Eq, cosmic_config::cosmic_config_derive::CosmicConfigEntry,
+)]
+pub struct ThemeMode {
+    /// The theme dark mode setting.
+    pub is_dark: bool,
+    /// The theme auto-switch dark and light mode setting.
+    pub auto_switch: bool,
+}
+
+impl Default for ThemeMode {
+    fn default() -> Self {
+        Self {
+            is_dark: true,
+            auto_switch: false,
+        }
+    }
+}
+
+impl ThemeMode {
+    /// Check if the theme is currently using dark mode
+    pub fn is_dark(config: &Config) -> Result<bool, cosmic_config::Error> {
+        config.get::<bool>("is_dark")
+    }
+
+    /// version of the theme
+    pub fn version() -> u64 {
+        1
+    }
+
+    /// Set auto-switch from light to dark mode
+    pub fn set_auto_switch(config: &Config, value: bool) -> Result<(), cosmic_config::Error> {
+        config.set("auto_switch", value)
+    }
+
+    /// Get the config for the theme mode
+    pub fn config() -> Result<Config, cosmic_config::Error> {
+        Config::new(THEME_MODE_ID, Self::version())
+    }
+}