Implement dark mode support with CSS variables and theme store

Co-authored-by: larp0 <[email protected]>

Author: Copilot

opensvm-dioxus/Cargo.toml

@@ -33,6 +33,7 @@ web-sys = { version = "0.3.64", features = [
     "Clipboard",
     "ClipboardEvent",
     "Location",
+    "MediaQueryList",
 ], optional = true }
 gloo = { version = "0.10.0", optional = true, features = ["futures"] }
 console_log = { version = "1.0.0", optional = true }

opensvm-dioxus/src/app.rs

@@ -6,6 +6,10 @@ use crate::routes::{
     solanow::SolanowPage, transaction::TransactionPage, validators::ValidatorsPage,
     wallet::WalletPage,
 };
+use crate::stores::theme_store::{use_theme_store, get_current_theme, Theme};
+
+#[cfg(feature = "web")]
+use web_sys::{window, MediaQueryList};
 
 // Define the routes for our app
 #[derive(Routable, Clone)]
@@ -83,6 +87,37 @@ fn NotFound(cx: Scope, #[allow(unused_variables)] route: Vec<String>) -> Element
 
 // Main App component
 pub fn App(cx: Scope) -> Element {
+    let theme_store = use_theme_store(cx);
+    let current_theme = get_current_theme(theme_store);
+    
+    // Apply theme to document body
+    use_effect(cx, (&current_theme,), |(theme,)| {
+        async move {
+            #[cfg(feature = "web")]
+            {
+                if let Some(window) = web_sys::window() {
+                    if let Some(document) = window.document() {
+                        if let Some(body) = document.body() {
+                            let theme_str = match theme {
+                                Theme::Light => "light",
+                                Theme::Dark => "dark",
+                                Theme::System => {
+                                    // Use media query to determine system theme
+                                    if let Ok(Some(media_query)) = window.match_media("(prefers-color-scheme: dark)") {
+                                        if media_query.matches() { "dark" } else { "light" }
+                                    } else {
+                                        "light"
+                                    }
+                                }
+                            };
+                            let _ = body.set_attribute("data-theme", theme_str);
+                        }
+                    }
+                }
+            }
+        }
+    });
+    
     cx.render(rsx! {
         style { include_str!("./assets/styles.css") }
         Router::<Route> {}

opensvm-dioxus/src/assets/styles.css

@@ -1,3 +1,60 @@
+/* CSS Variables for theming */
+:root {
+    /* Light theme */
+    --primary: #00D181;
+    --primary-light: #E6F9F3;
+    --background: #FFFFFF;
+    --surface: #F8F9FA;
+    --surface-light: #F1F3F5;
+    --text: #1A1B1E;
+    --text-secondary: #6C757D;
+    --text-tertiary: #ADB5BD;
+    --border: #E9ECEF;
+    --success: #00D181;
+    --error: #FF4B4B;
+    --warning: #FFB800;
+}
+
+/* Dark theme */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background: #1A1B1E;
+        --surface: #212529;
+        --surface-light: #343A40;
+        --text: #F8F9FA;
+        --text-secondary: #ADB5BD;
+        --text-tertiary: #6C757D;
+        --border: #343A40;
+    }
+}
+
+/* Dark theme override class */
+[data-theme="dark"] {
+    --background: #1A1B1E;
+    --surface: #212529;
+    --surface-light: #343A40;
+    --text: #F8F9FA;
+    --text-secondary: #ADB5BD;
+    --text-tertiary: #6C757D;
+    --border: #343A40;
+}
+
+/* Light theme override class */
+[data-theme="light"] {
+    --primary: #00D181;
+    --primary-light: #E6F9F3;
+    --background: #FFFFFF;
+    --surface: #F8F9FA;
+    --surface-light: #F1F3F5;
+    --text: #1A1B1E;
+    --text-secondary: #6C757D;
+    --text-tertiary: #ADB5BD;
+    --border: #E9ECEF;
+    --success: #00D181;
+    --error: #FF4B4B;
+    --warning: #FFB800;
+}
+
 /* Base styles */
 * {
     box-sizing: border-box;
@@ -8,22 +65,44 @@
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     line-height: 1.6;
-    color: #333;
-    background-color: #f5f5f5;
+    color: var(--text);
+    background-color: var(--background);
+    transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 /* Page layouts */
-.explorer-page, .not-found-page {
+.explorer-page, .not-found-page, .transaction-page {
     padding: 2rem;
     max-width: 1200px;
     margin: 0 auto;
+    background-color: var(--background);
+    color: var(--text);
 }
 
 h1 {
     margin-bottom: 1rem;
-    color: #512da8;
+    color: var(--primary);
 }
 
 p {
     margin-bottom: 1rem;
+    color: var(--text);
+}
+
+/* UI components */
+.surface {
+    background-color: var(--surface);
+    border: 1px solid var(--border);
+}
+
+.surface-light {
+    background-color: var(--surface-light);
+}
+
+.text-secondary {
+    color: var(--text-secondary);
+}
+
+.text-tertiary {
+    color: var(--text-tertiary);
 }

opensvm-dioxus/src/stores/mod.rs

@@ -1,3 +1,4 @@
 //! State management for the application
 
 // Re-export stores here as needed
+pub mod theme_store;

opensvm-dioxus/src/stores/theme_store.rs

@@ -1,6 +1,5 @@
 use dioxus::prelude::*;
 use serde::{Deserialize, Serialize};
-use wasm_bindgen::prelude::*;
 use web_sys::Storage;
 
 // Define the theme options
@@ -17,61 +16,82 @@ pub struct ThemeState {
     pub theme: Theme,
 }
 
-// Create a signal for the theme state
-pub fn use_theme_store() -> Signal<ThemeState> {
-    // Create a static signal to ensure the state persists across renders
-    static THEME_STORE: Signal<ThemeState> = Signal::new(ThemeState {
-        theme: Theme::System,
-    });
-    
-    // Initialize the store with data from local storage if available
-    use_hook(|| {
+impl Default for ThemeState {
+    fn default() -> Self {
+        Self {
+            theme: Theme::System,
+        }
+    }
+}
+
+// Create a hook for the theme state
+pub fn use_theme_store(cx: &ScopeState) -> &UseState<ThemeState> {
+    let theme_state = use_state(cx, || {
+        // Try to load from local storage
         if let Some(storage) = get_local_storage() {
             if let Ok(Some(stored_data)) = storage.get_item("theme-storage") {
                 if let Ok(theme_state) = serde_json::from_str::<ThemeState>(&stored_data) {
-                    THEME_STORE.set(theme_state);
+                    return theme_state;
                 }
             }
         }
+        ThemeState::default()
     });
-    
-    THEME_STORE
+
+    // Save to local storage whenever the state changes
+    use_effect(cx, (theme_state,), |(state,)| {
+        let state = state.get();
+        save_to_local_storage(state);
+        async move {}
+    });
+
+    theme_state
 }
 
 // Helper function to get local storage
 fn get_local_storage() -> Option<Storage> {
-    let window = web_sys::window()?;
-    window.local_storage().ok()?
+    #[cfg(feature = "web")]
+    {
+        let window = web_sys::window()?;
+        window.local_storage().ok()?
+    }
+    #[cfg(not(feature = "web"))]
+    None
 }
 
 // Helper function to save state to local storage
 fn save_to_local_storage(state: &ThemeState) {
-    if let Some(storage) = get_local_storage() {
-        if let Ok(json) = serde_json::to_string(state) {
-            let _ = storage.set_item("theme-storage", &json);
+    #[cfg(feature = "web")]
+    {
+        if let Some(storage) = get_local_storage() {
+            if let Ok(json) = serde_json::to_string(state) {
+                let _ = storage.set_item("theme-storage", &json);
+            }
         }
     }
 }
 
 // Set theme function
-pub fn set_theme(theme_store: Signal<ThemeState>, theme: Theme) {
-    let mut state = theme_store.read().clone();
+pub fn set_theme(theme_store: &UseState<ThemeState>, theme: Theme) {
+    let mut state = theme_store.get().clone();
     state.theme = theme;
-    theme_store.set(state.clone());
-    save_to_local_storage(&state);
+    theme_store.set(state);
 }
 
 // Get current theme function
-pub fn get_current_theme(theme_store: Signal<ThemeState>) -> Theme {
-    let state = theme_store.read();
+pub fn get_current_theme(theme_store: &UseState<ThemeState>) -> Theme {
+    let state = theme_store.get();
 
     match state.theme {
         Theme::System => {
             // Check system preference using media query
-            if let Some(window) = web_sys::window() {
-                if let Ok(Some(media_query)) = window.match_media("(prefers-color-scheme: dark)") {
-                    if media_query.matches() {
-                        return Theme::Dark;
+            #[cfg(feature = "web")]
+            {
+                if let Some(window) = web_sys::window() {
+                    if let Ok(Some(media_query)) = window.match_media("(prefers-color-scheme: dark)") {
+                        if media_query.matches() {
+                            return Theme::Dark;
+                        }
                     }
                 }
             }