Merge pull request #82 from FreddyFunk/bugfix/improve-resolution-and-framerate-picker-UI-when-using-light-theme

improve resolution and framrate picker UI when using light theme mode

Author: FreddyFunk

src/app/camera_preview/widget.rs

@@ -6,7 +6,7 @@ use crate::app::state::{AppModel, Message};
 use crate::app::video_widget::{self, VideoContentFit};
 use crate::fl;
 use cosmic::Element;
-use cosmic::iced::{Background, Color, Length};
+use cosmic::iced::{Background, Length};
 use cosmic::widget;
 use tracing::info;
 
@@ -30,9 +30,9 @@ impl AppModel {
             .height(Length::Fill)
             .align_x(cosmic::iced::alignment::Horizontal::Center)
             .align_y(cosmic::iced::alignment::Vertical::Center)
-            .style(|_theme| widget::container::Style {
-                background: Some(Background::Color(Color::BLACK)),
-                text_color: Some(Color::WHITE),
+            .style(|theme| widget::container::Style {
+                background: Some(Background::Color(theme.cosmic().bg_color().into())),
+                text_color: Some(theme.cosmic().on_bg_color().into()),
                 ..Default::default()
             })
             .into();
@@ -102,12 +102,12 @@ impl AppModel {
                 info!(render_count = count, "No frame available in view");
             }
 
-            // Black canvas placeholder when no camera frame
+            // Themed canvas placeholder when no camera frame
             widget::container(widget::Space::new(Length::Fill, Length::Fill))
                 .width(Length::Fill)
                 .height(Length::Fill)
-                .style(|_theme| widget::container::Style {
-                    background: Some(Background::Color(Color::BLACK)),
+                .style(|theme: &cosmic::Theme| widget::container::Style {
+                    background: Some(Background::Color(theme.cosmic().bg_color().into())),
                     ..Default::default()
                 })
                 .into()

src/app/format_picker/view.rs

@@ -113,21 +113,25 @@ impl AppModel {
             }
         }
 
-        // Build picker panel with semi-transparent background
+        // Build picker panel with semi-transparent themed background
         let picker_panel = widget::container(
             widget::column()
                 .push(res_row)
                 .push(widget::vertical_space().height(spacing.space_s))
                 .push(fps_row)
                 .padding(spacing.space_xs),
         )
-        .style(|_theme| widget::container::Style {
-            background: Some(Background::Color(Color::from_rgba(0.0, 0.0, 0.0, 0.4))),
-            border: Border {
-                radius: [ui::PICKER_BORDER_RADIUS; 4].into(),
+        .style(|theme: &cosmic::Theme| {
+            let mut bg: Color = theme.cosmic().bg_color().into();
+            bg.a = 0.85; // Semi-transparent
+            widget::container::Style {
+                background: Some(Background::Color(bg)),
+                border: Border {
+                    radius: [ui::PICKER_BORDER_RADIUS; 4].into(),
+                    ..Default::default()
+                },
                 ..Default::default()
-            },
-            ..Default::default()
+            }
         });
 
         // Position picker and add click-outside-to-close

src/app/view.rs

@@ -56,8 +56,8 @@ impl AppModel {
             )
             .width(Length::Fill)
             .height(Length::Fill)
-            .style(|_theme| widget::container::Style {
-                background: Some(Background::Color(Color::BLACK)),
+            .style(|theme| widget::container::Style {
+                background: Some(Background::Color(theme.cosmic().bg_color().into())),
                 ..Default::default()
             })
             .into();
@@ -271,12 +271,12 @@ impl AppModel {
             main_stack = main_stack.push(self.build_format_picker());
         }
 
-        // Wrap everything in a black background container
+        // Wrap everything in a themed background container
         widget::container(main_stack)
             .width(Length::Fill)
             .height(Length::Fill)
-            .style(|_theme| widget::container::Style {
-                background: Some(Background::Color(Color::BLACK)),
+            .style(|theme| widget::container::Style {
+                background: Some(Background::Color(theme.cosmic().bg_color().into())),
                 ..Default::default()
             })
             .into()