glassy: first transparent theme

src-tauri/Cargo.toml

@@ -11,7 +11,7 @@ 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"
 window-vibrancy = "0.5.2"

src-tauri/src/main.rs

@@ -9,9 +9,7 @@ use sysinfo::{
 };
 use tauri::{Manager, State};
 
-use window_vibrancy::apply_vibrancy;
-#[cfg(target_os = "windows")]
-use window_vibrancy::{apply_acrylic, apply_blur, NSVisualEffectMaterial, NSVisualEffectState};
+use window_vibrancy::{apply_acrylic, apply_vibrancy, NSVisualEffectMaterial, NSVisualEffectState};
 
 struct AppState {
     sys: Mutex<System>,
@@ -299,21 +297,28 @@ 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(not(target_os = "windows"))]
+fn setup_window_effects(window: &tauri::WebviewWindow) -> Result<(), Box<dyn std::error::Error>> {
+    apply_vibrancy(
+        window,
+        NSVisualEffectMaterial::HudWindow,
+        Some(NSVisualEffectState::Active),
+        None,
+    )?;
+    Ok(())
+}
+
 fn main() {
     tauri::Builder::default()
         .setup(|app| {
             let window = app.get_webview_window("main").unwrap();
-
-            #[cfg(target_os = "windows")]
-            {
-                // You can choose either blur or acrylic effect
-                apply_acrylic(&window, Some((0, 0, 25, 125))).expect("Failed to apply blur effect");
-
-                // Or use acrylic effect (Windows 10/11)
-                // apply_acrylic(&window, Some((18, 18, 18, 125)))
-                //     .expect("Failed to apply acrylic effect");
-            }
-
+            setup_window_effects(&window).expect("Failed to apply window effects");
             Ok(())
         })
         .plugin(tauri_plugin_shell::init())

src-tauri/tauri.conf.json

@@ -32,9 +32,11 @@
   "identifier": "com.neohtop.dev",
   "plugins": {},
   "app": {
+    "macOSPrivateApi": true,
     "windows": [
       {
         "fullscreen": false,
+        "theme":"Dark",
         "height": 900,
         "resizable": true,
         "title": "NeoHtop",

src/app.css

@@ -65,42 +65,58 @@ body {
   background: var(--mantle);
 }
 
+
+/* Glassy theme */
+
 [data-theme="glassy"] body {
   background: transparent !important;
 }
 
-[data-theme="glassy"] .title-bar {
-  position: relative;
-  background: rgba(24, 24, 37, 0.5) !important;
-  z-index: 10;
-}
-
 [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"] .process-table {
-  position: relative;
-  background: rgba(24, 24, 37, 0.5) !important;
-  z-index: 8;
+[data-theme="glassy"] .stat-panel {
+  background: rgba(24, 24, 37, 0.2) !important;
+  z-index: 100;
 }
 
-[data-theme="glassy"] .stat-panel {
-  background: rgba(24, 24, 37, 0.5) !important;
+[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"] .col-actions {
+[data-theme="glassy"] td {
+  border-bottom: 1px solid rgba(232, 232, 232, 0.1) !important;
   background: rgba(24, 24, 37, 0.2) !important;
-}
-
-[data-theme="glassy"] .process-table tr:hover td {
-  background: rgba(24, 24, 37, 0.55) !important;
-}
-
+}

src/lib/components/ThemeSwitcher.svelte

@@ -13,7 +13,7 @@
   const themeGroups = [
     {
       label: "Dark",
-      themes: ["catppuccin", "dracula", "monokaiPro", "tokyoNight", "glassy"],
+      themes: ["catppuccin", "dracula", "monokaiPro", "tokyoNight"],
     },
     {
       label: "Light",
@@ -45,6 +45,10 @@
       label: "Accessibility",
       themes: ["highContrast"],
     },
+    {
+      label: "Glassy",
+      themes: ["glassy"],
+    },
   ];
 </script>