feat: ✨ themes!

src-tauri/src/main.rs

@@ -16,7 +16,7 @@ use serde::Deserialize;
 use window_ext::{ToolbarThickness, WindowExt};
 // use specta::{collect_types, Type};
 use std::sync::Arc;
-use tauri::{Manager, State};
+use tauri::{Manager, State, Theme};
 use tauri_plugin_autostart::MacosLauncher;
 use window_vibrancy::{apply_mica, apply_vibrancy, NSVisualEffectMaterial};
 // use tauri_specta::ts;
@@ -67,6 +67,11 @@ async fn create_post(db: DbState<'_>, data: CreateCompanyData) -> Result<test::D
         .map_err(|_| ())
 }
 
+#[tauri::command]
+fn get_theme(window: tauri::Window) -> Theme {
+    window.theme().unwrap_or(Theme::Light)
+}
+
 #[tokio::main]
 async fn main() {
     let db = PrismaClient::_builder().build().await.unwrap();
@@ -116,7 +121,12 @@ async fn main() {
 
             Ok(())
         })
-        .invoke_handler(tauri::generate_handler![check_db, get_company, create_post])
+        .invoke_handler(tauri::generate_handler![
+            check_db,
+            get_company,
+            create_post,
+            get_theme
+        ])
         .manage(Arc::new(db))
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

src/App.tsx

@@ -4,7 +4,6 @@ import { Toaster } from "solid-toast";
 import { Show, createEffect, createSignal, lazy } from "solid-js";
 import { checkDb } from "@/bindings";
 import { StoreProvider } from "@/store";
-import { getCurrent } from "@tauri-apps/plugin-window";
 
 const Dashboard = lazy(() => import("./screens/Dashboard"));
 const SetupWizard = lazy(() => import("./screens/Setup/Setup"));
@@ -19,12 +18,6 @@ const App: Component = () => {
   const [screen, setScreen] = createSignal<Screen>(Screen.Loading);
 
   const startup = async () => {
-    // const theme = await getCurrent().theme();
-    // console.log(theme);
-    // if (theme === "dark") {
-    document.documentElement.classList.add("dark");
-    // }
-
     const data = await checkDb();
 
     if (data) {

src/bindings.ts

@@ -2,26 +2,41 @@
 // This file was generated by [tauri-specta](https://github.com/oscartbeaumont/tauri-specta). Do not edit this file manually.
 
 declare global {
-    interface Window {
-        __TAURI_INVOKE__<T>(cmd: string, args?: Record<string, unknown>): Promise<T>;
-    }
+  interface Window {
+    __TAURI_INVOKE__<T>(cmd: string, args?: Record<string, unknown>): Promise<T>;
+  }
 }
 
 // Function avoids 'window not defined' in SSR
 const invoke = () => window.__TAURI_INVOKE__;
 
 export function checkDb() {
-    return invoke()<boolean>("check_db")
+  return invoke()<boolean>("check_db");
 }
 
 export function getCompany(id: number | null) {
-    return invoke()<Company | null>("get_company", { id })
+  return invoke()<Company | null>("get_company", { id });
 }
 
 export function createPost(data: CreateCompanyData) {
-    return invoke()<Test>("create_post", { data })
+  return invoke()<Test>("create_post", { data });
+}
+export function getTheme() {
+  return invoke()<Theme>("get_theme");
 }
 
-export type CreateCompanyData = { name: string }
-export type Test = { id: number; name: string }
-export type Company = { id: number; name: string; email: string; cin: string | null; vatId: string | null; streetAddress: string; city: string; postalCode: string; phoneNumber: string | null; website: string | null }
+export type Theme = "light" | "dark";
+export type CreateCompanyData = { name: string };
+export type Test = { id: number; name: string };
+export type Company = {
+  id: number;
+  name: string;
+  email: string;
+  cin: string | null;
+  vatId: string | null;
+  streetAddress: string;
+  city: string;
+  postalCode: string;
+  phoneNumber: string | null;
+  website: string | null;
+};

src/index.tsx

@@ -4,6 +4,13 @@ import { render } from "solid-js/web";
 import { Router } from "@solidjs/router";
 
 import App from "./App";
+import { Theme, getTheme, setTheme } from "./utils/theme";
+
+setTheme(getTheme());
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => e.matches && setTheme(Theme.Dark));
+window
+  .matchMedia("(prefers-color-scheme: light)")
+  .addEventListener("change", (e) => e.matches && setTheme(Theme.Light));
 
 render(
   () => (

src/utils/theme.ts

@@ -0,0 +1,16 @@
+export enum Theme {
+  Light = "light",
+  Dark = "dark",
+}
+
+export const setTheme = (theme: Theme) => {
+  if (theme === Theme.Dark) {
+    document.documentElement.classList.add("dark");
+  } else {
+    document.documentElement.classList.remove("dark");
+  }
+};
+
+export const getTheme = () => {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? Theme.Dark : Theme.Light;
+};