first glassy theme draft

src-tauri/Cargo.lock

@@ -1644,6 +1644,7 @@ dependencies = [
  "tauri",
  "tauri-build",
  "tauri-plugin-shell",
+ "window-vibrancy",
 ]
 
 [[package]]

src-tauri/Cargo.toml

@@ -14,6 +14,7 @@ serde = { version = "1.0", features = ["derive"] }
 tauri = { version = "2", features = [] }
 sysinfo = "0.29.0"
 tauri-plugin-shell = "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};
+
+use window_vibrancy::apply_vibrancy;
+#[cfg(target_os = "windows")]
+use window_vibrancy::{apply_acrylic, apply_blur, NSVisualEffectMaterial, NSVisualEffectState};
 
 struct AppState {
     sys: Mutex<System>,
@@ -297,6 +301,21 @@ async fn kill_process(pid: u32, state: State<'_, AppState>) -> Result<bool, Stri
 
 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");
+            }
+
+            Ok(())
+        })
         .plugin(tauri_plugin_shell::init())
         .manage(AppState::new())
         .invoke_handler(tauri::generate_handler![get_processes, kill_process])

src-tauri/tauri.conf.json

@@ -42,7 +42,8 @@
         "minWidth": 1120,
         "minHeight": 700,
         "titleBarStyle": "Overlay",
-        "hiddenTitle": true
+        "hiddenTitle": true,
+        "transparent": true
       }
     ],
     "security": {

src/app.css

@@ -64,3 +64,43 @@ body {
 ::-webkit-scrollbar-corner {
   background: var(--mantle);
 }
+
+[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;
+  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.5) !important;
+  z-index: 100;
+}
+
+[data-theme="glassy"] th {
+  background: rgba(24, 24, 37, 0.5) !important;
+}
+
+[data-theme="glassy"] .col-actions {
+  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/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

@@ -13,7 +13,7 @@
   const themeGroups = [
     {
       label: "Dark",
-      themes: ["catppuccin", "dracula", "monokaiPro", "tokyoNight"],
+      themes: ["catppuccin", "dracula", "monokaiPro", "tokyoNight", "glassy"],
     },
     {
       label: "Light",

src/lib/stores/index.ts

@@ -23,6 +23,8 @@ function createThemeStore() {
       if (theme) {
         if (typeof window !== "undefined") {
           localStorage.setItem("theme", themeName);
+          // Add this line to set the data-theme attribute
+          document.documentElement.setAttribute("data-theme", themeName);
         }
         set(theme);
         applyTheme(theme);
@@ -32,6 +34,13 @@ function createThemeStore() {
       const storedTheme =
         typeof window !== "undefined" ? localStorage.getItem("theme") : null;
       const theme = (storedTheme && themes[storedTheme]) || defaultTheme;
+      if (typeof window !== "undefined") {
+        // Add this line to set the data-theme attribute on init
+        document.documentElement.setAttribute(
+          "data-theme",
+          storedTheme || "catppuccin",
+        );
+      }
       applyTheme(theme);
     },
   };

src/lib/styles/index.ts

@@ -540,4 +540,31 @@ export const themes: Record<string, Theme> = {
       teal: "#55FFFF", // Another cyan
     },
   },
+  glassy: {
+    name: "glassy",
+    label: "Glassy",
+    colors: {
+      base: "#1e1e2e",
+      mantle: "#181825",
+      crust: "#11111b",
+      text: "#cdd6f4",
+      subtext0: "#a6adc8",
+      subtext1: "#bac2de",
+      surface0: "#313244",
+      surface1: "#45475a",
+      surface2: "#585b70",
+      overlay0: "#6c7086",
+      overlay1: "#7f849c",
+      blue: "#89b4fa",
+      lavender: "#b4befe",
+      sapphire: "#74c7ec",
+      sky: "#89dceb",
+      red: "#f38ba8",
+      maroon: "#eba0ac",
+      peach: "#fab387",
+      yellow: "#f9e2af",
+      green: "#a6e3a1",
+      teal: "#94e2d5",
+    },
+  },
 };