feat: add theme support 🎨 (#18)

README.md

@@ -18,10 +18,22 @@ To download Verve, visit the [releases section](https://github.com/ParthJadhav/v
 
 📌 It's worth noting that the default shortcut for opening Verve is `CMD + Shift + G`, and this can be changed from the preferences section within the app. This allows you to customize the app to your specific needs and preferences, making it even more convenient and easy to use.
 
+## 🎨 Themes
+
+Verve theme is stored in:
+
+`/Users/<Username>/Library/Application Support/com.parth-jadhav.verve/theme.json`
+
+Editing the theme file will change the theme of the app. Restart the app to see the changes.
+
+Download themes: [Themes](./docs/themes.md)
+
+Contributions would be amazing 👆
+
+
 ## 💫 Upcoming Features
 
 - Extension support [Linked Issue](https://github.com/ParthJadhav/verve/issues/13)
-- Let users theme the app by adding a customization interface in the Preferences window [Linked Issue](https://github.com/ParthJadhav/verve/issues/1)
 - Add a calculator feature that allows users to perform calculations and conversions using natural language input [Linked Issue](https://github.com/ParthJadhav/verve/issues/2)
 - Add a scroll feature to display all search results [Linked Issue](https://github.com/ParthJadhav/verve/issues/3)
 - Replace icons with generic extension-based icons [Linked Issue](https://github.com/ParthJadhav/verve/issues/4)

docs/themes.md

@@ -0,0 +1,29 @@
+# 🎨 Themes
+
+Download and Paste the theme file in
+
+`/Users/<Username>/Library/Application Support/com.parth-jadhav.verve/theme.json`
+
+and restart the app to see the changes.
+
+![Verve Dark Theme](./themes/theme-default/theme-default.png)
+Download: [theme-default.json](./themes/theme-default/theme.json)
+
+![Verve Blue Theme](./themes/theme-blue/theme-blue.png)
+
+Download: [theme-blue.json](./themes/theme-blue/theme.json)
+
+![Verve Dracula Theme](./themes/theme-green/theme-green.png)
+
+
+Download: [theme-green.json](./themes/theme-green/theme.json)
+
+### Create your own theme
+
+You can create your own theme by editing the theme.json file. You can find the theme.json file in the following location:
+
+`/Users/<Username>/Library/Application Support/com.parth-jadhav.verve/theme.json`
+
+Save the file & Restart the app.
+
+Create a Pull request to add your theme to the list.

docs/themes/theme-blue/theme.json

@@ -0,0 +1,10 @@
+{
+    "primary_bg_color": "rgba(20, 20, 80, 0.6)",
+    "secondary_bg_color": "rgba(84, 101, 115, 0.6)",
+    "primary_text_color": "#FFFFFF",
+    "secondary_text_color": "#878787",
+    "primary_accent_color": "#556CE5",
+    "secondary_accent_color": "#48A5FF",
+    "highlight_overlay": "rgba(255, 255, 255, 0.1)",
+    "dark_overlay": "rgba(0, 0, 0, 0.1)"
+}

docs/themes/theme-default/theme.json

@@ -0,0 +1,10 @@
+{
+    "primary_bg_color": "rgba(20, 45, 30, 0.6)",
+    "secondary_bg_color": "rgba(84, 101, 115, 0.6)",
+    "primary_text_color": "#FFFFFF",
+    "secondary_text_color": "#878787",
+    "primary_accent_color": "#556CE5",
+    "secondary_accent_color": "#48A5FF",
+    "highlight_overlay": "rgba(255, 255, 255, 0.1)",
+    "dark_overlay": "rgba(0, 0, 0, 0.1)"
+}

docs/themes/theme-green/theme.json

@@ -0,0 +1,10 @@
+{
+    "primary_bg_color": "rgba(20, 45, 30, 0.6)",
+    "secondary_bg_color": "rgba(84, 101, 115, 0.6)",
+    "primary_text_color": "#FFFFFF",
+    "secondary_text_color": "#878787",
+    "primary_accent_color": "#556CE5",
+    "secondary_accent_color": "#48A5FF",
+    "highlight_overlay": "rgba(255, 255, 255, 0.1)",
+    "dark_overlay": "rgba(0, 0, 0, 0.1)"
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "verve",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "verve"
-version = "0.1.0"
+version = "0.2.0"
 description = "Verve is a lightweight and blazingly fast launcher for accessing and opening applications, files and documents."
 authors = ["[email protected]"]
 license = "GNU AFFERO GENERAL PUBLIC LICENSE"
@@ -22,6 +22,7 @@ directories = "4.0.1"
 plist = "1"
 strsim = "0.10.0"
 auto-launch = "0.4.0"
+window-vibrancy = "0.3.2"
 
 [features]
 # by default Tauri runs in production mode

src-tauri/src/main.rs

@@ -6,6 +6,7 @@ use util::utils::{
     convert_all_app_icons_to_png, create_preferences_if_missing, get_icon, handle_input,
     launch_on_login, open_command,
 };
+use window_vibrancy::{apply_vibrancy, NSVisualEffectMaterial};
 
 fn create_system_tray() -> SystemTray {
     let quit = CustomMenuItem::new("Quit".to_string(), "Quit");
@@ -32,31 +33,33 @@ fn main() {
         ])
         .setup(|app| {
             app.set_activation_policy(tauri::ActivationPolicy::Accessory);
-            app.get_window("main").unwrap().hide().unwrap();
+            let window = app.get_window("main").unwrap();
+            #[cfg(target_os = "macos")]
+            apply_vibrancy(&window, NSVisualEffectMaterial::HudWindow, None, Some(10.0))
+                .expect("Unsupported platform! 'apply_vibrancy' is only supported on macOS");
+            window.hide().unwrap();
             Ok(())
         })
         .system_tray(create_system_tray())
         .on_system_tray_event(|app, event| match event {
-            SystemTrayEvent::MenuItemClick { id, .. } => {
-                match id.as_str() {
-                    "Hide" => {
-                        let window = app.get_window("main").unwrap();
-                        window.hide().unwrap();
-                    }
-                    "Show" => {
-                        let window = app.get_window("main").unwrap();
-                        window.show().unwrap();
-                    }
-                    "Preferences" => {
-                        let window = app.get_window("main").unwrap();
-                        window.emit("PreferencesClicked", Some("Yes")).unwrap();
-                    }
-                    "Quit" => {
-                        std::process::exit(0);
-                    }
-                    _ => {}
+            SystemTrayEvent::MenuItemClick { id, .. } => match id.as_str() {
+                "Hide" => {
+                    let window = app.get_window("main").unwrap();
+                    window.hide().unwrap();
                 }
-            }
+                "Show" => {
+                    let window = app.get_window("main").unwrap();
+                    window.show().unwrap();
+                }
+                "Preferences" => {
+                    let window = app.get_window("main").unwrap();
+                    window.emit("PreferencesClicked", Some("Yes")).unwrap();
+                }
+                "Quit" => {
+                    std::process::exit(0);
+                }
+                _ => {}
+            },
             _ => {}
         })
         .run(tauri::generate_context!())

src-tauri/src/util.rs

@@ -14,6 +14,18 @@ pub(crate) mod utils {
     use std::time::Instant;
     use strsim::jaro_winkler;
 
+    #[derive(Serialize, Deserialize)]
+    struct Theme {
+        primary_bg_color: String,
+        secondary_bg_color: String,
+        primary_text_color: String,
+        secondary_text_color: String,
+        primary_accent_color: String,
+        secondary_accent_color: String,
+        highlight_overlay: String,
+        dark_overlay: String,
+    }
+
     #[derive(Serialize, Deserialize)]
     struct Preferences {
         shortcut: String,
@@ -94,16 +106,30 @@ pub(crate) mod utils {
     pub fn create_preferences_if_missing() {
         if let Some(proj_dirs) = ProjectDirs::from("com", "parth jadhav", "verve") {
             let preferences_path = proj_dirs.config_dir().join("preferences.json");
+            let theme_path = proj_dirs.config_dir().join("theme.json");
             if !preferences_path.exists() {
                 let preference = Preferences {
                     shortcut: String::from("Command+Shift+G"),
                     launch_on_login: true,
                     menu_bar_icon: true,
                 };
                 let preference_text = serde_json::to_string(&preference).unwrap();
-                println!("{}", preference_text);
                 fs::write(preferences_path, &preference_text).unwrap();
             }
+            if !theme_path.exists() {
+                let theme = Theme {
+                    primary_bg_color: String::from("rgba(20, 20, 30, 0.6)"),
+                    secondary_bg_color: String::from("rgba(84, 101, 115, 0.6)"),
+                    primary_text_color: String::from("#FFFFFF"),
+                    secondary_text_color: String::from("#878787"),
+                    primary_accent_color: String::from("#556CE5"),
+                    secondary_accent_color: String::from("#48A5FF"),
+                    highlight_overlay: String::from("rgba(255, 255, 255, 0.1)"),
+                    dark_overlay: String::from("rgba(0, 0, 0, 0.1)"),
+                };
+                let theme_text = serde_json::to_string(&theme).unwrap();
+                fs::write(theme_path, &theme_text).unwrap();
+            }
         }
     }
 
@@ -124,7 +150,12 @@ pub(crate) mod utils {
         });
     }
 
-    fn search(input: &str, search_locations: Vec<&str>, extension: Option<&str>, depth: Option<usize>) -> Vec<String> {
+    fn search(
+        input: &str,
+        search_locations: Vec<&str>,
+        extension: Option<&str>,
+        depth: Option<usize>,
+    ) -> Vec<String> {
         let (location, more_locations) = search_locations.split_first().unwrap();
         let mut result: Vec<String> = SearchBuilder::default()
             .search_input(input)
@@ -157,21 +188,18 @@ pub(crate) mod utils {
             );
             similarity_sort(&mut result, input.as_str());
         } else {
-                result = search(
-                    input.trim_start_matches("/"),
-                    vec![
-                        "/Users/"
-                    ],
-                    None,
-                    Some(10000)
-                );
-                println!("{:?}", result);
+            result = search(
+                input.trim_start_matches("/"),
+                vec!["/Users/"],
+                None,
+                Some(10000),
+            );
+            println!("{:?}", result);
         }
         let time_taken = start_time.elapsed().as_secs_f32();
         return (result, time_taken);
     }
 
-
     #[tauri::command]
     pub fn get_icon(app_name: &str) -> String {
         if let Some(proj_dirs) = ProjectDirs::from("com", "parth jadhav", "verve") {

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "verve",
-    "version": "0.1.0"
+    "version": "0.2.0"
   },
   "tauri": {
     "systemTray": {

src/main.ts

@@ -14,14 +14,30 @@ const app = new App({
   target: document.getElementById("app"),
 });
 
-(async () => {
-  // get and set values
-  paths.set("appDataDirPath", await appDataDir());
-
+const fetchPreferencesData = async () => {
   const preferencesData = await readTextFile(await join(paths.get("appDataDirPath"), `preferences.json`)).then((data) => JSON.parse(data));
   Object.keys(preferencesData).forEach((key) => {
     preferences.set(key, preferencesData[key]);
   });
+}
+
+const reloadTheme = async () => {
+  const theme = await readTextFile(await join(paths.get("appDataDirPath"), `theme.json`)).then((data) => JSON.parse(data));
+  // @ts-ignore
+  const style = document.styleSheets[0].cssRules[0].style;
+  style.setProperty("--primary-bg-color", theme.primary_bg_color);
+  style.setProperty("--secondary-bg-color", theme.secondary_bg_color);
+  style.setProperty("--primary-text-color", theme.primary_text_color);
+  style.setProperty("--secondary-text-color", theme.secondary_text_color);
+  style.setProperty("--primary-accent-color", theme.primary_accent_color);
+  style.setProperty("--secondary-accent-color", theme.secondary_accent_color);
+}
+
+(async () => {
+  // get and set values
+  paths.set("appDataDirPath", await appDataDir());
+  await fetchPreferencesData();
+  await reloadTheme();
 
   document.addEventListener("keydown", (event) => {
     if (event.key === "Escape") {