Glassy theme

package.json

@@ -19,6 +19,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@tauri-apps/api": "^2.0.3",
+    "@tauri-apps/plugin-os": "^2.0.0",
     "@tauri-apps/plugin-shell": "^2.0.1",
     "simple-icons": "^13.15.0",
     "svelte-fa": "^4.0.3"

src-tauri/Cargo.toml

@@ -11,9 +11,11 @@ tauri-build = { version = "2", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "2", features = [] }
+tauri = { version = "2", features = ["macos-private-api"] }
 sysinfo = "0.29.0"
 tauri-plugin-shell = "2"
+tauri-plugin-os = "2"
+window-vibrancy = "0.5.2"
 
 [features]
 default = [ "custom-protocol" ]

src-tauri/src/main.rs

@@ -7,7 +7,11 @@ use sysinfo::{
     CpuExt, Disk, DiskExt, NetworkExt, NetworksExt, PidExt, ProcessExt, ProcessStatus, System,
     SystemExt,
 };
-use tauri::State;
+use tauri::{Manager, State};
+#[cfg(target_os = "windows")]
+use window_vibrancy::apply_acrylic;
+#[cfg(target_os = "macos")]
+use window_vibrancy::{apply_vibrancy, NSVisualEffectMaterial, NSVisualEffectState};
 
 struct AppState {
     sys: Mutex<System>,
@@ -295,9 +299,38 @@ async fn kill_process(pid: u32, state: State<'_, AppState>) -> Result<bool, Stri
     }
 }
 
+#[cfg(target_os = "windows")]
+fn setup_window_effects(window: &tauri::WebviewWindow) -> Result<(), Box<dyn std::error::Error>> {
+    apply_acrylic(window, Some((0, 0, 25, 125)))?;
+    Ok(())
+}
+
+#[cfg(target_os = "macos")]
+fn setup_window_effects(window: &tauri::WebviewWindow) -> Result<(), Box<dyn std::error::Error>> {
+    apply_vibrancy(
+        window,
+        NSVisualEffectMaterial::HudWindow,
+        Some(NSVisualEffectState::Active),
+        None,
+    )?;
+    Ok(())
+}
+
+#[cfg(not(any(target_os = "windows", target_os = "macos")))]
+fn setup_window_effects(_window: &tauri::WebviewWindow) -> Result<(), Box<dyn std::error::Error>> {
+    // No-op for other platforms
+    Ok(())
+}
+
 fn main() {
     tauri::Builder::default()
+        .setup(|app| {
+            let window = app.get_webview_window("main").unwrap();
+            setup_window_effects(&window).expect("Failed to apply window effects");
+            Ok(())
+        })
         .plugin(tauri_plugin_shell::init())
+        .plugin(tauri_plugin_os::init())
         .manage(AppState::new())
         .invoke_handler(tauri::generate_handler![get_processes, kill_process])
         .run(tauri::generate_context!())

src-tauri/tauri.conf.json

@@ -30,19 +30,26 @@
   "mainBinaryName": "NeoHtop",
   "version": "1.1.0",
   "identifier": "com.neohtop.dev",
-  "plugins": {},
+  "plugins": {
+    "os": {
+      "all": true
+    }
+  },
   "app": {
+    "macOSPrivateApi": true,
     "windows": [
       {
         "fullscreen": false,
+        "theme":"Dark",
         "height": 900,
         "resizable": true,
         "title": "NeoHtop",
         "width": 1280,
         "minWidth": 1120,
         "minHeight": 700,
         "titleBarStyle": "Overlay",
-        "hiddenTitle": true
+        "hiddenTitle": true,
+        "transparent": true
       }
     ],
     "security": {

src/app.css

@@ -64,3 +64,58 @@ body {
 ::-webkit-scrollbar-corner {
   background: var(--mantle);
 }
+
+/* Glassy theme */
+
+[data-theme="glassy"] body {
+  background: transparent !important;
+}
+
+[data-theme="glassy"] .toolbar {
+  position: relative;
+  background: rgba(24, 24, 37, 0.5) !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  z-index: 9;
+}
+
+[data-theme="glassy"] .stat-panel {
+  background: rgba(24, 24, 37, 0.2) !important;
+  z-index: 100;
+}
+
+[data-theme="glassy"] .panel-header {
+  border-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+[data-theme="glassy"] .col-actions {
+  background: rgba(24, 24, 37, 0.2) !important;
+  border-bottom: 1px solid rgba(232, 232, 232, 0.1) !important;
+  border-left: 1px solid rgba(232, 232, 232, 0.1) !important;
+}
+
+[data-theme="glassy"] .search-input,
+[data-theme="glassy"] .btn-toggle,
+[data-theme="glassy"] .btn-action,
+[data-theme="glassy"] .info-button,
+[data-theme="glassy"] .btn-page,
+[data-theme="glassy"] .theme-button,
+[data-theme="glassy"] .usage-pill,
+[data-theme="glassy"] .bar-container,
+[data-theme="glassy"] .select-input {
+  background: rgba(24, 24, 37, 0.2) !important;
+  z-index: 100;
+}
+
+[data-theme="glassy"] tr.pinned,
+[data-theme="glassy"] tr:hover {
+  background: rgba(24, 24, 37, 0.3) !important;
+}
+
+[data-theme="glassy"] th {
+  background: rgba(24, 24, 37, 0.5) !important;
+}
+
+[data-theme="glassy"] td {
+  border-bottom: 1px solid rgba(232, 232, 232, 0.1) !important;
+  background: rgba(24, 24, 37, 0.2) !important;
+}

src/lib/components/StatsBar.svelte

@@ -180,9 +180,7 @@
 
 <style>
   .dashboard-stats {
-    background: var(--base);
     padding: 0.5rem;
-    border-radius: 8px;
     overflow-x: auto;
   }
 
@@ -195,10 +193,10 @@
   .stat-panel {
     flex: 1;
     min-width: 0;
-    background: var(--mantle);
+    background-color: var(--mantle);
     border-radius: 6px;
     padding: 0.75rem;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); */
     display: flex;
     flex-direction: column;
   }

src/lib/components/ThemeSwitcher.svelte

@@ -7,6 +7,7 @@
     faChevronDown,
     faChevronRight,
   } from "@fortawesome/free-solid-svg-icons";
+  import { platform } from "@tauri-apps/plugin-os";
 
   let showMenu = false;
 
@@ -45,6 +46,14 @@
       label: "Accessibility",
       themes: ["highContrast"],
     },
+    ...(platform() === "windows" || platform() === "macos"
+      ? [
+          {
+            label: "Glassy",
+            themes: ["glassy"],
+          },
+        ]
+      : []),
   ];
 </script>