Add dark mode selector to style (#796)

Author: jrmoulton

src/app_state.rs

@@ -2,7 +2,7 @@ use std::collections::{HashMap, HashSet};
 
 use peniko::kurbo::{Point, Size};
 use taffy::{AvailableSpace, NodeId};
-use winit::window::CursorIcon;
+use winit::window::{CursorIcon, Theme};
 
 use crate::{
     context::{DragState, FrameUpdate, InteractionState},
@@ -41,6 +41,7 @@ pub struct AppState {
     pub(crate) grid_bps: GridBreakpoints,
     pub(crate) clicking: HashSet<ViewId>,
     pub(crate) hovered: HashSet<ViewId>,
+    pub(crate) os_theme: Option<winit::window::Theme>,
     /// This keeps track of all views that have an animation,
     /// regardless of the status of the animation
     pub(crate) cursor: Option<CursorStyle>,
@@ -76,6 +77,7 @@ impl AppState {
             dragging_over: HashSet::new(),
             clicking: HashSet::new(),
             hovered: HashSet::new(),
+            os_theme: None,
             cursor: None,
             last_cursor: CursorIcon::Default,
             last_cursor_location: Default::default(),
@@ -161,6 +163,10 @@ impl AppState {
         self.clicking.contains(id)
     }
 
+    pub fn is_dark_mode(&self) -> bool {
+        self.os_theme == Some(Theme::Dark)
+    }
+
     pub fn is_dragging(&self) -> bool {
         self.dragging
             .as_ref()

src/context.rs

@@ -519,6 +519,7 @@ pub struct InteractionState {
     pub(crate) is_disabled: bool,
     pub(crate) is_focused: bool,
     pub(crate) is_clicking: bool,
+    pub(crate) is_dark_mode: bool,
     pub(crate) using_keyboard_navigation: bool,
 }
 
@@ -563,6 +564,7 @@ impl<'a> StyleCx<'a> {
             is_disabled: self.app_state.is_disabled(id),
             is_focused: self.app_state.is_focused(id),
             is_clicking: self.app_state.is_clicking(id),
+            is_dark_mode: self.app_state.is_dark_mode(),
             using_keyboard_navigation: self.app_state.keyboard_navigation,
         }
     }

src/style.rs

@@ -1236,6 +1236,12 @@ impl Style {
                 self.apply_mut(map);
             }
         }
+        if interact_state.is_dark_mode {
+            if let Some(mut map) = self.get_nested_map(StyleSelector::DarkMode.to_key()) {
+                map.apply_interact_state(interact_state, screen_size_bp);
+                self.apply_mut(map);
+            }
+        }
 
         let focused_keyboard =
             interact_state.using_keyboard_navigation && interact_state.is_focused;
@@ -1383,6 +1389,7 @@ pub enum StyleSelector {
     Focus,
     FocusVisible,
     Disabled,
+    DarkMode,
     Active,
     Dragging,
     Selected,
@@ -1410,6 +1417,10 @@ style_key_selector!(
     selected,
     StyleSelectors::new().set(StyleSelector::Selected, true)
 );
+style_key_selector!(
+    darkmode,
+    StyleSelectors::new().set(StyleSelector::DarkMode, true)
+);
 
 impl StyleSelector {
     fn to_key(self) -> StyleKey {
@@ -1421,6 +1432,7 @@ impl StyleSelector {
             StyleSelector::Active => active(),
             StyleSelector::Dragging => dragging(),
             StyleSelector::Selected => selected(),
+            StyleSelector::DarkMode => darkmode(),
         }
     }
 }
@@ -1866,6 +1878,10 @@ impl Style {
         self.selector(StyleSelector::Disabled, style)
     }
 
+    pub fn dark_mode(self, style: impl FnOnce(Style) -> Style) -> Self {
+        self.selector(StyleSelector::DarkMode, style)
+    }
+
     pub fn active(self, style: impl FnOnce(Style) -> Style) -> Self {
         self.selector(StyleSelector::Active, style)
     }
@@ -2556,6 +2572,12 @@ pub trait CustomStyle: Default + Clone + Into<Style> + From<Style> {
         new.into()
     }
 
+    fn dark_mode(self, style: impl FnOnce(Self) -> Self) -> Self {
+        let self_style: Style = self.into();
+        let new = self_style.selector(StyleSelector::DarkMode, |_| style(Self::default()).into());
+        new.into()
+    }
+
     fn active(self, style: impl FnOnce(Self) -> Self) -> Self {
         let self_style: Style = self.into();
         let new = self_style.selector(StyleSelector::Active, |_| style(Self::default()).into());

src/window_handle.rs

@@ -70,7 +70,7 @@ pub(crate) struct WindowHandle {
     size: RwSignal<Size>,
     theme: Option<Theme>,
     pub(crate) profile: Option<Profile>,
-    os_theme: RwSignal<Option<winit::window::Theme>>,
+    os_theme: Option<winit::window::Theme>,
     is_maximized: bool,
     transparent: bool,
     pub(crate) scale: f64,
@@ -99,7 +99,7 @@ impl WindowHandle {
         let size: LogicalSize<f64> = size.unwrap_or(window.surface_size().to_logical(scale));
         let size = Size::new(size.width, size.height);
         let size = scope.create_rw_signal(Size::new(size.width, size.height));
-        let theme = scope.create_rw_signal(window.theme());
+        let os_theme = window.theme();
         let is_maximized = window.is_maximized();
 
         set_current_view(id);
@@ -160,7 +160,7 @@ impl WindowHandle {
             paint_state,
             size,
             theme: apply_default_theme.then(default_theme),
-            os_theme: theme,
+            os_theme,
             is_maximized,
             transparent,
             profile: None,
@@ -174,7 +174,8 @@ impl WindowHandle {
             dropper_file: None,
         };
         window_handle.app_state.set_root_size(size.get_untracked());
-        if let Some(theme) = theme.get_untracked() {
+        window_handle.app_state.os_theme = os_theme;
+        if let Some(theme) = os_theme {
             window_handle.event(Event::ThemeChanged(theme));
         }
         window_handle
@@ -418,7 +419,10 @@ impl WindowHandle {
     }
 
     pub(crate) fn os_theme_changed(&mut self, theme: winit::window::Theme) {
-        self.os_theme.set(Some(theme));
+        self.os_theme = Some(theme);
+        self.app_state.os_theme = Some(theme);
+        self.id.request_all();
+        request_recursive_changes(self.id, ChangeFlags::STYLE);
         self.event(Event::ThemeChanged(theme));
     }
 
@@ -1278,6 +1282,13 @@ impl WindowHandle {
     }
 }
 
+fn request_recursive_changes(id: ViewId, changes: ChangeFlags) {
+    id.state().borrow_mut().requested_changes = changes;
+    for child in id.children() {
+        request_recursive_changes(child, changes);
+    }
+}
+
 pub(crate) fn get_current_view() -> ViewId {
     CURRENT_RUNNING_VIEW_HANDLE.with(|running| *running.borrow())
 }