Start working on transparency

src-tauri/Cargo.toml

@@ -37,6 +37,7 @@ tauri-plugin-http = "2.5.8"
 dashmap = "6.1.0"
 tauri-plugin-store = "2.4.2"
 hex = "0.4.3"
+window-vibrancy = "0.7.1"
 
 [target.'cfg(any(target_os = "windows", target_os = "linux"))'.dependencies]
 sysinfo = "0.38.4"

src-tauri/src/lib.rs

@@ -21,6 +21,8 @@ use tauri_plugin_os::platform;
 use tauri_plugin_prevent_default::Flags;
 use tokio::io::AsyncReadExt;
 use tokio::{io::AsyncWriteExt, time::timeout};
+#[cfg(target_os = "macos")]
+use window_vibrancy::{NSVisualEffectMaterial, apply_vibrancy};
 use zip::ZipArchive;
 use zip::result::ZipError;
 
@@ -749,6 +751,10 @@ pub fn run() {
 
             let window = app.get_webview_window("main").unwrap();
 
+            #[cfg(target_os = "macos")]
+            apply_vibrancy(&window, NSVisualEffectMaterial::HudWindow, None, None)
+                .expect("Unable to apply window blur");
+
             #[cfg(target_os = "windows")]
             {
                 use tauri_plugin_decorum::WebviewWindowExt;

src-tauri/tauri.macos.conf.json

@@ -20,7 +20,8 @@
         "minWidth": 1000,
         "minHeight": 500,
         "titleBarStyle": "Overlay",
-        "hiddenTitle": true
+        "hiddenTitle": true,
+        "transparent": true
       }
     ],
     "security": {

src/app/main/layout.tsx

@@ -88,7 +88,6 @@ export default function RootLayout ({
   const [linuxUseWine, setLinuxUseWine] = useState<boolean>(false)
   const [linuxWineCommand, setLinuxWineCommand] =
     useState<string>('wine %path%')
-  const [theme, setTheme] = useState<string>('dark')
   const [customDataLocation, setCustomDataLocation] = useState<string>('')
 
   const [versionsList, setVersionsList] = useState<Record<string, number>>({})
@@ -675,7 +674,6 @@ export default function RootLayout ({
       unlisteners.push(versions!.onKeyChange<T>(key, fn))
     }
 
-    watchSettings<string>('theme', v => setTheme(v ?? 'dark'))
     watchSettings<boolean>('notificationsAllowed', v =>
       setNotificationsAllowed(v ?? true)
     )
@@ -703,7 +701,7 @@ export default function RootLayout ({
   return (
     <>
       <html lang='en' className={roboto.className}>
-        <body className={theme + '-theme'}>
+        <body>
           {loading ? (
             <>
               <div
@@ -756,7 +754,6 @@ export default function RootLayout ({
                 sidebarAlwaysShowGames,
                 linuxUseWine,
                 linuxWineCommand,
-                theme,
                 customDataLocation,
                 versionsList,
                 modsList,

src/app/main/settings/page.tsx

@@ -6,7 +6,6 @@ import { copyToClipboard } from '@/lib/clipboard'
 import { platform } from '@tauri-apps/plugin-os'
 import { open } from '@tauri-apps/plugin-dialog'
 import { invoke } from '@tauri-apps/api/core'
-import Dropdown from '@/components/Dropdown'
 
 export default function Settings () {
   const {
@@ -16,7 +15,6 @@ export default function Settings () {
     sidebarAlwaysShowGames,
     linuxUseWine,
     linuxWineCommand,
-    theme,
     customDataLocation,
     downloadProgress,
     setMovingData
@@ -102,26 +100,6 @@ export default function Settings () {
             {customDataLocation}
           </p>
         )}
-        <div className='flex flex-row gap-2 items-center'>
-          <p
-            title='The theme you want the launcher to use.'
-            className='text-lg'
-          >
-            Theme:
-          </p>
-          <Dropdown
-            value={theme}
-            options={[
-              { label: 'Dark', value: 'dark' },
-              { label: 'Red', value: 'red' },
-              { label: 'Blue', value: 'blue' },
-              { label: 'Purple', value: 'purple' }
-            ]}
-            onChange={async val => {
-              await settings?.set('theme', val)
-            }}
-          />
-        </div>
       </div>
       <p
         className='fixed bottom-1.5 right-1.5 rounded-md cursor-pointer px-1 border z-100 transition-colors btntheme1'

src/providers/GlobalProvider.tsx

@@ -56,7 +56,6 @@ type GlobalCtxType = {
   sidebarAlwaysShowGames: boolean
   linuxUseWine: boolean
   linuxWineCommand: string
-  theme: string
   customDataLocation: string
   versionsList: Record<string, number>
   modsList: Record<string, Record<string, number>>

src/styles/globals.css

@@ -5,10 +5,8 @@ html {
 }
 
 body {
-  @apply bg-(--col0) text-white select-none;
-}
+  @apply bg-transparent text-white select-none;
 
-.dark-theme {
   --col0: rgb(8, 8, 8);
   --col1: rgb(16, 16, 16);
   --col2: rgb(32, 32, 32);
@@ -21,45 +19,6 @@ body {
   --col9: rgb(144, 144, 144);
 }
 
-.red-theme {
-  --col0: rgb(32, 8, 8);
-  --col1: rgb(40, 16, 16);
-  --col2: rgb(56, 32, 32);
-  --col3: rgb(72, 48, 48);
-  --col4: rgb(88, 64, 64);
-  --col5: rgb(104, 80, 80);
-  --col6: rgb(120, 96, 96);
-  --col7: rgb(136, 112, 112);
-  --col8: rgb(152, 128, 128);
-  --col9: rgb(168, 144, 144);
-}
-
-.blue-theme {
-  --col0: rgb(8, 8, 32);
-  --col1: rgb(16, 16, 40);
-  --col2: rgb(32, 32, 56);
-  --col3: rgb(48, 48, 72);
-  --col4: rgb(64, 64, 88);
-  --col5: rgb(80, 80, 104);
-  --col6: rgb(96, 96, 120);
-  --col7: rgb(112, 112, 136);
-  --col8: rgb(128, 128, 152);
-  --col9: rgb(144, 144, 168);
-}
-
-.purple-theme {
-  --col0: rgb(20, 8, 32);
-  --col1: rgb(28, 16, 40);
-  --col2: rgb(44, 32, 56);
-  --col3: rgb(60, 48, 72);
-  --col4: rgb(76, 64, 88);
-  --col5: rgb(92, 80, 104);
-  --col6: rgb(108, 96, 120);
-  --col7: rgb(124, 112, 136);
-  --col8: rgb(140, 128, 152);
-  --col9: rgb(156, 144, 168);
-}
-
 .button {
   @apply rounded-md cursor-pointer text-[16px] py-1 px-2 transition-colors border;
 }