feat(themes): Transform and save CSS variables for themes

This commit introduces a transformation of the `vars` field in the `addTheme` function. It converts a JSON object of CSS variables into a string of CSS rules that target the root element. Additionally, it updates the themes table to set the name field as the primary key. This change is crucial for ensuring data integrity and efficient theme management.

Author: Its4Nik

src/core/database/database.ts

@@ -98,7 +98,7 @@ export function init() {
     );
 
     CREATE TABLE IF NOT EXISTS themes (
-      name TEXT NOT NULL,
+      name TEXT PRIMARY KEY,
       creator TEXT NOT NULL,
       vars TEXT NOT NULL,
       tags TEXT NOT NULL

src/handlers/themes.ts

@@ -7,9 +7,23 @@ class themeHandler {
   }
   addTheme(theme: Theme) {
     try {
-      return dbFunctions.addTheme({ ...theme });
+      const rawVars =
+        typeof theme.vars === "string" ? JSON.parse(theme.vars) : theme.vars;
+
+      const cssVars = Object.entries(rawVars)
+        .map(([key, value]) => `--${key}: ${value};`)
+        .join(" ");
+
+      const varsString = `.root, #root, #docs-root { ${cssVars} }`;
+
+      return dbFunctions.addTheme({
+        ...theme,
+        vars: varsString,
+      });
     } catch (error) {
-      throw new Error(`Could not save theme ${theme}, error: ${error}`);
+      throw new Error(
+        `Could not save theme ${JSON.stringify(theme)}, error: ${error}`,
+      );
     }
   }
   deleteTheme({ name }: Theme) {